Refactor dropdowns

calblueprint · Apr 5, 2024 · 70c492c · 70c492c
1 parent eb83031
commit 70c492c
Showing 1 changed file with 10 additions and 40 deletions.
diff --git a/src/app/(tabs)/genre/index.tsx b/src/app/(tabs)/genre/index.tsx
@@ -247,66 +247,36 @@ function GenreScreen() {
     );
   };
 
-  const renderTopicDropdown = () => {
+  const renderFilterDropdown = (placeholder: string, value: string[], data: string[], setter: React.Dispatch<React.SetStateAction<string[]>>) => {
     return (
-      <Dropdown
+      <MultiSelect
         mode="default"
         style={[styles.dropdown, styles.secondDropdown]}
-        value={currentTopics}
+        value={value}
         placeholderStyle={styles.placeholderStyle}
         selectedTextStyle={globalStyles.body1}
         inputSearchStyle={globalStyles.body1}
         itemTextStyle={globalStyles.body1}
         dropdownPosition="bottom"
         itemContainerStyle={styles.itemContainer}
         iconStyle={styles.iconStyle}
-        data={genreTopics.map(topic => {
+        data={data.map(topic => {
           return { label: topic, value: topic };
         })}
+        renderSelectedItem={() => (< View />)}
         maxHeight={400}
         labelField="label"
         valueField="value"
-        placeholder="Topic"
-        renderRightIcon={() => <Icon name="arrow-drop-down" type="material" />}
-        onChange={item => {
-          if (item) {
-            setCurrentTopics(item.label); // Use the label property of the selected item
-          }
-        }}
-      />
-    );
-  };
-
-  const renderToneDropdown = () => {
-    return (
-      <MultiSelect
-        mode="default"
-        style={styles.dropdown}
-        value={currentTones}
-        placeholderStyle={styles.placeholderStyle}
-        selectedTextStyle={globalStyles.body1}
-        inputSearchStyle={globalStyles.body1}
-        itemTextStyle={globalStyles.body1}
-        dropdownPosition="bottom"
-        itemContainerStyle={styles.itemContainer}
-        iconStyle={styles.iconStyle}
-        data={genreTones.map(tone => {
-          return { label: tone, value: tone };
-        })}
-        maxHeight={400}
-        labelField="label"
-        valueField="value"
-        placeholder="Tone"
+        placeholder={placeholder}
         renderRightIcon={() => <Icon name="arrow-drop-down" type="material" />}
         onChange={item => {
           if (item) {
-            // Check if item is not null or undefined
-            setCurrentTones(item); // Use the label property of the selected item
+            setter(item); // Use the label property of the selected item
           }
         }}
       />
     );
-  };
+  }
 
   const renderNoStoryText = () => {
     return (
@@ -367,8 +337,8 @@ function GenreScreen() {
         </View>
 
         <View style={[styles.dropdownContainer, styles.firstDropdown]}>
-          {renderToneDropdown()}
-          {renderTopicDropdown()}
+          {renderFilterDropdown("Tone", currentTones, genreTones, setCurrentTones)}
+          {renderFilterDropdown("Topic", currentTopics, genreTopics, setCurrentTopics)}
         </View>
 
         {genreStoryIds.length === 0 ? ( // Check if there are no story IDs