[search] Implement genre filters

src/app/(tabs)/search/_layout.tsx

@@ -1,10 +1,13 @@
 import { Stack } from 'expo-router';
+import { FilterContextProvider } from '../../../utils/FilterContext';
 
 function StackLayout() {
   return (
-    <Stack>
-      <Stack.Screen name="index" options={{ headerShown: false }} />
-    </Stack>
+    <FilterContextProvider>
+      <Stack>
+        <Stack.Screen name="index" options={{ headerShown: false }} />
+      </Stack>
+    </FilterContextProvider>
   );
 }
 

src/app/(tabs)/search/index.tsx

@@ -14,7 +14,9 @@ import {
 import { SafeAreaView } from 'react-native-safe-area-context';
 
 import styles from './styles';
-import FilterModal from '../../../components/FilterModal/FilterModal';
+import FilterModal, {
+  CATEGORIES as FilterCategories,
+} from '../../../components/FilterModal/FilterModal';
 import GenreCard from '../../../components/GenreCard/GenreCard';
 import PreviewCard from '../../../components/PreviewCard/PreviewCard';
 import RecentSearchCard from '../../../components/RecentSearchCard/RecentSearchCard';
@@ -23,6 +25,8 @@ import { fetchAllStoryPreviews } from '../../../queries/stories';
 import { StoryPreview, RecentSearch, Genre } from '../../../queries/types';
 import colors from '../../../styles/colors';
 import globalStyles from '../../../styles/globalStyles';
+import { TagFilter, useFilter } from '../../../utils/FilterContext';
+import { ActivityIndicator } from 'react-native-paper';
 import { GenreType } from '../genre';
 
 const getRecentSearch = async () => {
@@ -62,6 +66,7 @@ const setRecentStory = async (recentStories: StoryPreview[]) => {
 };
 
 function SearchScreen() {
+  const { filters } = useFilter();
   const [allStories, setAllStories] = useState<StoryPreview[]>([]);
   const [allGenres, setAllGenres] = useState<Genre[]>([]);
   const [searchResults, setSearchResults] = useState<StoryPreview[]>([]);
@@ -88,6 +93,10 @@ function SearchScreen() {
     })();
   }, []);
 
+  useEffect(() => {
+    if (!filterVisible) searchFunction(search);
+  }, [filterVisible]);
+
   const getColor = (index: number) => {
     return genreColors[index % genreColors.length];
   };
@@ -98,12 +107,39 @@ function SearchScreen() {
       setSearchResults([]);
       return;
     }
+    const flattenenedFilters = Array.from(filters)
+      .map(([id, parent]) => [...parent.children, parent as TagFilter])
+      .flat();
+    const activeFilterNames = flattenenedFilters.filter(({ active }) => active);
+
+    const activeGenreNames = activeFilterNames
+      .filter(({ category }) => category == FilterCategories.GENRE)
+      .map(({ name }) => name);
+    const activeToneNames = activeFilterNames
+      .filter(({ category }) => category == FilterCategories.TONE)
+      .map(({ name }) => name);
+    const activeTopicNames = activeFilterNames
+      .filter(({ category }) => category == FilterCategories.TOPIC)
+      .map(({ name }) => name);
 
     const updatedData = allStories.filter((item: StoryPreview) => {
       const title = `${item.title.toUpperCase()})`;
       const author = `${item.author_name.toUpperCase()})`;
       const text_data = text.toUpperCase();
-      return title.indexOf(text_data) > -1 || author.indexOf(text_data) > -1;
+
+      const matchesFilter =
+        activeFilterNames.length == 0 ||
+        ((activeGenreNames.length == 0 ||
+          item.genre_medium.some(genre => activeGenreNames.includes(genre))) &&
+          (activeToneNames.length == 0 ||
+            item.tone.some(tone => activeToneNames.includes(tone))) &&
+          (activeTopicNames.length == 0 ||
+            item.topic.some(topic => activeTopicNames.includes(topic))));
+
+      return (
+        (title.indexOf(text_data) > -1 || author.indexOf(text_data) > -1) &&
+        matchesFilter
+      );
     });
 
     setSearch(text);

src/components/FilterModal/ChildFilter.tsx

@@ -0,0 +1,27 @@
+import { CheckBox } from '@rneui/themed';
+import { memo } from 'react';
+
+type ChildFilterProps = {
+  id: number;
+  name: string;
+  checked: boolean;
+  onPress: (id: number) => void;
+};
+
+function ChildFilter({ id, name, checked, onPress }: ChildFilterProps) {
+  return (
+    <CheckBox
+      textStyle={{ color: 'purple' }}
+      key={id}
+      title={name}
+      checked={checked}
+      onPress={() => onPress(id)}
+      iconType="material-community"
+      checkedIcon="checkbox-marked"
+      uncheckedIcon="checkbox-blank-outline"
+      checkedColor="black"
+    />
+  );
+}
+
+export default memo(ChildFilter);

src/components/FilterModal/FilterModal.tsx

@@ -1,45 +1,48 @@
 import { BottomSheet, CheckBox } from '@rneui/themed';
-import { useState } from 'react';
+import { useCallback, useState } from 'react';
 import { View, Text, ScrollView, Pressable } from 'react-native';
+import { FlatList } from 'react-native-gesture-handler';
 import { SafeAreaProvider } from 'react-native-safe-area-context';
 
 import 'react-native-gesture-handler';
 import styles from './styles';
 import Icon from '../../../assets/icons';
+import { TagFilter, useFilter } from '../../utils/FilterContext';
+import ChildFilter from './ChildFilter';
+import ParentFilter from './ParentFilter';
 
 type FilterModalProps = {
   isVisible: boolean;
   setIsVisible: React.Dispatch<React.SetStateAction<boolean>>;
   title: string;
 };
 
+export enum CATEGORIES {
+  GENRE = 'genre-medium',
+  TOPIC = 'topic',
+  TONE = 'tone',
+}
+
 function FilterModal({ isVisible, setIsVisible, title }: FilterModalProps) {
-  const [checked1, toggleChecked1] = useState(false);
-  const [checked2, toggleChecked2] = useState(false);
-  const [checked3, toggleChecked3] = useState(false);
+  const { dispatch, filters } = useFilter();
 
-  const genres = [
-    {
-      title: 'Fiction',
-      state: checked1,
-      setState: toggleChecked1,
+  const toggleParentFilter = useCallback(
+    (id: number) => {
+      dispatch({ type: 'TOGGLE_MAIN_GENRE', mainGenreId: id });
     },
-    {
-      title: 'Erasure & Found Poetry',
-      state: checked2,
-      setState: toggleChecked2,
-    },
-    {
-      title: 'Non-Fiction',
-      state: checked3,
-      setState: toggleChecked3,
+    [dispatch],
+  );
+
+  const toggleChildFilter = useCallback(
+    (id: number) => {
+      dispatch({ type: 'TOGGLE_FILTER', id });
     },
-  ];
+    [dispatch],
+  );
 
   return (
     <SafeAreaProvider>
       <BottomSheet
-        modalProps={{}}
         isVisible={isVisible}
         containerStyle={styles.modalBackground}
         scrollViewProps={{ bounces: false }}
@@ -54,26 +57,36 @@ function FilterModal({ isVisible, setIsVisible, title }: FilterModalProps) {
           </View>
           <View style={styles.textContainer}>
             <Text style={styles.modalTitle}> {title} </Text>
-            <ScrollView
-              showsVerticalScrollIndicator
-              bounces={false}
-              style={styles.scrollView}
-            >
-              {genres.map(item => {
+            <FlatList
+              data={Array.from(filters)}
+              renderItem={({ item }) => {
+                const [_, parentFilter] = item;
                 return (
-                  <CheckBox
-                    key={item.title}
-                    title={item.title}
-                    checked={item.state}
-                    onPress={() => item.setState(!item.state)}
-                    iconType="material-community"
-                    checkedIcon="checkbox-marked"
-                    uncheckedIcon="checkbox-blank-outline"
-                    checkedColor="black"
-                  />
+                  <>
+                    <ParentFilter
+                      id={parentFilter.id}
+                      name={parentFilter.name}
+                      checked={parentFilter.active}
+                      onPress={toggleParentFilter}
+                    />
+
+                    <FlatList
+                      data={parentFilter.children}
+                      renderItem={({ item }) => {
+                        return (
+                          <ChildFilter
+                            id={item.id}
+                            name={item.name}
+                            checked={item.active}
+                            onPress={toggleChildFilter}
+                          />
+                        );
+                      }}
+                    />
+                  </>
                 );
-              })}
-            </ScrollView>
+              }}
+            />
           </View>
         </View>
       </BottomSheet>

src/components/FilterModal/ParentFilter.tsx

@@ -0,0 +1,26 @@
+import { CheckBox } from '@rneui/themed';
+import { memo } from 'react';
+
+type ParentFilterProps = {
+  id: number;
+  name: string;
+  checked: boolean;
+  onPress: (id: number) => void;
+};
+
+function ParentFilter({ id, name, checked, onPress }: ParentFilterProps) {
+  return (
+    <CheckBox
+      key={id}
+      title={name}
+      checked={checked}
+      onPress={() => onPress(id)}
+      iconType="material-community"
+      checkedIcon="checkbox-marked"
+      uncheckedIcon="checkbox-blank-outline"
+      checkedColor="black"
+    />
+  );
+}
+
+export default memo(ParentFilter);