With list

calblueprint · Dec 2, 2023 · 74e3326 · 74e3326
1 parent b9e5a77
commit 74e3326
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 87 deletions.
diff --git a/src/components/FilterModal/FilterModal.tsx b/src/components/FilterModal/FilterModal.tsx
@@ -1,46 +1,21 @@
 import { BottomSheet, CheckBox } from '@rneui/themed';
+import { useState } from 'react';
 import { View, Text, ScrollView, Pressable } from 'react-native';
 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 { useEffect, useRef } from 'react';
 
 type FilterModalProps = {
   isVisible: boolean;
   setIsVisible: React.Dispatch<React.SetStateAction<boolean>>;
   title: string;
 };
 
-type ParentTagFilter = { children: TagFilter[] } & TagFilter;
-
 function FilterModal({ isVisible, setIsVisible, title }: FilterModalProps) {
   const { dispatch, filters } = useFilter();
-  const nestedFilters = useRef(new Map<number, ParentTagFilter>());
-
-  useEffect(() => {
-    nestFilters();
-    // console.log(nestedFilters.current);
-  }, [filters]);
-
-  const nestFilters = () => {
-    Array.from(filters)
-      .filter(([_, { parent }]) => parent === null)
-      .map(([id, parent]) =>
-        nestedFilters.current.set(id, {
-          ...parent,
-          children: [],
-        } as ParentTagFilter),
-      );
-
-    Array.from(filters).map(([_, filter]) => {
-      if (filter.parent) {
-        nestedFilters.current.get(filter.parent)?.children.push(filter);
-      }
-    });
-  };
 
   return (
     <SafeAreaProvider>
@@ -65,24 +40,22 @@ function FilterModal({ isVisible, setIsVisible, title }: FilterModalProps) {
               bounces={false}
               style={styles.scrollView}
             >
-              {Array.from(nestedFilters.current).map(
-                ([id, parentFilter]: [number, ParentTagFilter]) => {
-                  return (
-                    <CheckBox
-                      key={id}
-                      title={parentFilter.name}
-                      checked={parentFilter.active}
-                      onPress={() =>
-                        dispatch({ type: 'TOGGLE_FILTER', id: parentFilter.id })
-                      }
-                      iconType="material-community"
-                      checkedIcon="checkbox-marked"
-                      uncheckedIcon="checkbox-blank-outline"
-                      checkedColor="black"
-                    ></CheckBox>
-                  );
-                },
-              )}
+              {filters.map(filter => {
+                return (
+                  <CheckBox
+                    key={filter.id}
+                    title={filter.name}
+                    checked={filter.active}
+                    onPress={() =>
+                      dispatch({ type: 'TOGGLE_FILTER', name: filter.name })
+                    }
+                    iconType="material-community"
+                    checkedIcon="checkbox-marked"
+                    uncheckedIcon="checkbox-blank-outline"
+                    checkedColor="black"
+                  />
+                );
+              })}
             </ScrollView>
           </View>
         </View>

diff --git a/src/utils/FilterContext.tsx b/src/utils/FilterContext.tsx
@@ -9,9 +9,9 @@ import supabase from './supabase';
 
 type FilterAction =
   | { type: 'SET_TAGS'; tags: TagFilter[] }
-  | { type: 'TOGGLE_FILTER'; id: number }
+  | { type: 'TOGGLE_FILTER'; name: string }
   | { type: 'CLEAR_ALL'; category: string }
-  | { type: 'TOGGLE_MAIN_GENRE'; mainGenreId: number };
+  | { type: 'TOGGLE_MAIN_GENRE'; mainGenre: string };
 
 export type FilterDispatch = React.Dispatch<FilterAction>;
 
@@ -24,7 +24,7 @@ export type TagFilter = {
 };
 
 export interface FilterState {
-  filters: Map<number, TagFilter>;
+  filters: TagFilter[];
   isLoading: boolean;
   dispatch: FilterDispatch;
 }
@@ -36,61 +36,47 @@ export const useFilterReducer = () =>
     (prevState: FilterState, action: FilterAction) => {
       switch (action.type) {
         case 'SET_TAGS':
-          const filterMap = new Map();
-          action.tags.map(tag => filterMap.set(tag.id, tag));
-
           return {
             ...prevState,
-            filters: filterMap,
+            filters: action.tags,
             isLoading: false,
           };
         case 'TOGGLE_FILTER':
-          const desiredTag: TagFilter =
-            prevState.filters.get(action.id) ?? ({} as TagFilter);
-
-          prevState.filters.set(action.id, {
-            ...desiredTag,
-            active: !desiredTag?.active,
-          });
           return {
             ...prevState,
-            filters: prevState.filters,
+            filters: prevState.filters.map(tag =>
+              tag.name == action.name ? { ...tag, active: !tag.active } : tag,
+            ),
           };
         case 'CLEAR_ALL':
-          const clearedFilters = Array.from(
-            prevState.filters,
-            ([id, filter]): [number, TagFilter] =>
-              filter.category == action.category
-                ? [id, { ...filter, active: false }]
-                : [id, filter],
-          );
-
           return {
             ...prevState,
-            filters: new Map(clearedFilters),
+            filters: prevState.filters.map(tag =>
+              tag.category == action.category ? { ...tag, active: false } : tag,
+            ),
           };
         case 'TOGGLE_MAIN_GENRE':
-          const parentGenre = prevState.filters.get(action.mainGenreId);
+          const parentGenre = prevState.filters.find(
+            ({ name }) => name === action.mainGenre,
+          );
           const newActiveState = !parentGenre?.active;
 
-          const updatedFilters = Array.from(
-            prevState.filters,
-            ([id, filter]): [number, TagFilter] =>
-              filter.parent == parentGenre?.id || id == action.mainGenreId
-                ? [id, { ...filter, active: newActiveState }]
-                : [id, filter],
+          const updatedFilters = prevState.filters.map(tag =>
+            tag.parent == parentGenre?.id || tag.name == action.mainGenre
+              ? { ...tag, active: newActiveState }
+              : tag,
           );
 
           return {
             ...prevState,
-            filters: new Map(updatedFilters),
+            filters: updatedFilters,
           };
         default:
           return prevState;
       }
     },
     {
-      filters: new Map(),
+      filters: [],
       isLoading: true,
       dispatch: () => null,
     },
@@ -116,13 +102,11 @@ export function FilterContextProvider({
 }) {
   const [filterState, dispatch] = useFilterReducer();
 
-  const initTagsFromSupabase = async () => {
+  const getTags = async () => {
     const { data } = await supabase.from('tags').select(`*`);
 
     return data?.map(entry => {
       const { category, id, name, parent_id } = entry;
-      console.log(entry);
-
       return {
         id,
         name,
@@ -134,15 +118,9 @@ export function FilterContextProvider({
   };
 
   useEffect(() => {
-    initTagsFromSupabase().then(tags =>
-      dispatch({ type: 'SET_TAGS', tags: tags ?? [] }),
-    );
+    getTags().then(tags => dispatch({ type: 'SET_TAGS', tags: tags ?? [] }));
   }, []);
 
-  useEffect(() => {
-    console.log(filterState);
-  }, [filterState]);
-
   const filterContextValue = useMemo(
     () => ({
       ...filterState,