[genre] Implement subgenre dropdowns for search (#89)

* dropdowns implemented * finished subgenre dropdowns * Add scroll view to dropdowns * Ready for styling * Run prettier * Style clear filter button * App is done * Add color when filter selected * Run prettier --------- Co-authored-by: Kyle Ramachandran <[email protected]> Co-authored-by: Aditya Pawar <[email protected]>
calblueprint · Apr 24, 2024 · c06877c · c06877c
1 parent ea30f15
commit c06877c
Show file tree

Hide file tree

Showing 8 changed files with 436 additions and 70 deletions.
diff --git a/src/app/(tabs)/genre/index.tsx b/src/app/(tabs)/genre/index.tsx
@@ -8,8 +8,6 @@ import {
   FlatList,
 } from 'react-native';
 
-import { Dropdown, MultiSelect } from 'react-native-element-dropdown';
-import { Icon } from 'react-native-elements';
 import { TouchableOpacity } from 'react-native-gesture-handler';
 import { SafeAreaView } from 'react-native-safe-area-context';
 
@@ -21,6 +19,7 @@ import { fetchGenreStoryById } from '../../../queries/genres';
 import { fetchStoryPreviewByIds } from '../../../queries/stories';
 import { StoryPreview, GenreStories } from '../../../queries/types';
 import globalStyles from '../../../styles/globalStyles';
+import { FilterDropdown } from '../../../components/FilterDropdown/FilterDropdown';
 
 function GenreScreen() {
   const [genreStoryData, setGenreStoryData] = useState<GenreStories[]>();
@@ -217,42 +216,6 @@ function GenreScreen() {
     );
   };
 
-  const renderFilterDropdown = (
-    placeholder: string,
-    value: string[],
-    data: string[],
-    setter: React.Dispatch<React.SetStateAction<string[]>>,
-  ) => {
-    return (
-      <MultiSelect
-        mode="default"
-        style={[styles.dropdown, styles.secondDropdown]}
-        value={value}
-        placeholderStyle={styles.placeholderStyle}
-        selectedTextStyle={globalStyles.body1}
-        inputSearchStyle={globalStyles.body1}
-        itemTextStyle={globalStyles.body1}
-        dropdownPosition="bottom"
-        itemContainerStyle={styles.itemContainer}
-        iconStyle={styles.iconStyle}
-        data={data.map(topic => {
-          return { label: topic, value: topic };
-        })}
-        renderSelectedItem={() => <View />}
-        maxHeight={400}
-        labelField="label"
-        valueField="value"
-        placeholder={placeholder}
-        renderRightIcon={() => <Icon name="arrow-drop-down" type="material" />}
-        onChange={item => {
-          if (item) {
-            setter(item);
-          }
-        }}
-      />
-    );
-  };
-
   const renderNoStoryText = () => {
     return (
       <View>
@@ -306,18 +269,18 @@ function GenreScreen() {
         </View>
 
         <View style={[styles.dropdownContainer, styles.firstDropdown]}>
-          {renderFilterDropdown(
-            'Tone',
-            selectedTonesForFiltering,
-            toneFilterOptions,
-            setSelectedTonesForFiltering,
-          )}
-          {renderFilterDropdown(
-            'Topic',
-            selectedTopicsForFiltering,
-            topicFilterOptions,
-            setSelectedTopicsForFiltering,
-          )}
+          <FilterDropdown
+            placeholder="Topic"
+            value={selectedTopicsForFiltering}
+            data={topicFilterOptions}
+            setter={setSelectedTopicsForFiltering}
+          />
+          <FilterDropdown
+            placeholder="Tone"
+            value={selectedTonesForFiltering}
+            data={toneFilterOptions}
+            setter={setSelectedTonesForFiltering}
+          />
         </View>
 
         {genreStoryIds.length === 0 && !isLoading ? (