- Filtering todos

components/pages/calendar/EventCalendar.tsx

@@ -108,7 +108,6 @@ export const EventCalendar: React.FC<EventCalendarProps> = React.memo(
     );
 
     // console.log({memoizedWeekStartsOn, profileData: profileData?.firstDayOfWeek,
-    });
 
     const isSameDate = useCallback((date1: Date, date2: Date) => {
       return (
@@ -299,7 +298,8 @@ export const EventCalendar: React.FC<EventCalendarProps> = React.memo(
                         overflow:"hidden",
                     } : {}}
                     hourStyle={styles.hourStyle}
-            onPressDateHeader={handlePressDayHeader}        ampm
+            onPressDateHeader={handlePressDayHeader}
+                    ampm
                     // renderCustomDateForMonth={renderCustomDateForMonth}
                 />
             </>

components/pages/todos/ToDosList.tsx

@@ -1,16 +1,15 @@
-import { View, Text, TouchableOpacity, Icon } from "react-native-ui-lib";
-import React, { useState } from "react";
+import {Text, TouchableOpacity, View} from "react-native-ui-lib";
+import React, {useEffect, useState} from "react";
 import {useToDosContext} from "@/contexts/ToDosContext";
 import ToDoItem from "./ToDoItem";
-import {
-  addDays,
-  format,
-  isToday,
-  isTomorrow,
-  isWithinInterval,
-} from "date-fns";
+import {addDays, format, isToday, isTomorrow, isWithinInterval,} from "date-fns";
 import {AntDesign} from "@expo/vector-icons";
 import {IToDo} from "@/hooks/firebase/types/todoData";
+import DropdownIcon from "@/assets/svgs/DropdownIcon";
+import {Dropdown} from "react-native-element-dropdown";
+import {useGetFamilyMembers} from "@/hooks/firebase/useGetFamilyMembers";
+import {ProfileType, useAuthContext} from "@/contexts/AuthContext";
+import {StyleSheet} from "react-native";
 
 const groupToDosByDate = (toDos: IToDo[]) => {
   let sortedTodos = toDos.sort((a, b) => a.date - b.date);
@@ -74,15 +73,52 @@ const groupToDosByDate = (toDos: IToDo[]) => {
   );
 };
 
+const resolveFilterOptions = (members, user) => {
+
+    return members?.map((member) => {
+        let label = member?.firstName;
+        if (member.uid === user?.uid) {
+            label = "Me";
+        }
+        return (member.uid !== user?.uid || member.profileType !== ProfileType.PARENT) && {value: member?.uid, label: label};
+    });
+}
+
 const ToDosList = ({ isSettings }: { isSettings?: boolean }) => {
   const { toDos } = useToDosContext();
-  const groupedToDos = groupToDosByDate(toDos);
+
+  const [groupedToDos, setGroupedToDos] = useState([]);
+  const { user } = useAuthContext()
+  const { data: members } = useGetFamilyMembers();
+
 
   const [expandedGroups, setExpandedGroups] = useState<{
     [key: string]: boolean;
   }>({});
 
   const [expandNoDate, setExpandNoDate] = useState<boolean>(true);
+  const [selectedFilter, setSelectedFilter] = useState(null);
+  const [filterOptions, setFilterOptions] = useState([]);
+
+  useEffect(() => {
+      let options = resolveFilterOptions(members, user);
+      setFilterOptions(options);
+
+      let selectedOption = options?.find((option) => option.value === user?.uid);
+      setSelectedFilter(selectedOption);
+  }, []);
+
+  useEffect(() => {
+      if (toDos && selectedFilter) {
+          let filtered = toDos?.filter((todo) => todo.creatorId === selectedFilter.value);
+
+          let filteredGroupedTodos = groupToDosByDate(filtered || []);
+          setGroupedToDos(filteredGroupedTodos || []);
+      }
+  }, [selectedFilter, toDos]);
+
+  console.log("MEMBERS");
+  console.log(members);
 
   const toggleExpand = (dateKey: string) => {
     setExpandedGroups((prev) => ({
@@ -226,6 +262,40 @@ const ToDosList = ({ isSettings }: { isSettings?: boolean }) => {
 
   return (
     <View marginB-402>
+        <Dropdown
+            style={{ marginBottom: 15 }}
+            data={filterOptions}
+            value={selectedFilter}
+            placeholder="Filter todos"
+            placeholderStyle={{
+                color: "#a2a2a2",
+                fontFamily: "Manrope_500Medium",
+                fontSize: 13.2,
+            }}
+            labelField="label"
+            valueField="value"
+            iconColor="white"
+            activeColor={"#fd1775"}
+            containerStyle={styles.dropdownStyle}
+            itemTextStyle={styles.itemText}
+            itemContainerStyle={styles.itemStyle}
+            selectedTextStyle={styles.selectedText}
+            renderLeftIcon={() => (
+                <DropdownIcon
+                    style={{ marginRight: 8 }}
+                />
+            )}
+            renderItem={(item) => {
+                return (
+                    <View height={36.02} centerV>
+                        <Text style={styles.itemText}>{item.label}</Text>
+                    </View>
+                );
+            }}
+            onChange={(item) => {
+              setSelectedFilter(item);
+            }}
+        />
       {noDateToDos.length > 0 && (
         <View key="No Date">
           <View row spread paddingH-19 marginB-12>
@@ -260,4 +330,19 @@ const ToDosList = ({ isSettings }: { isSettings?: boolean }) => {
   );
 };
 
+const styles = StyleSheet.create({
+    itemText: {
+        fontFamily: "Manrope_400Regular",
+        fontSize: 15.42,
+        paddingLeft: 15,
+    },
+    selectedText: {
+        fontFamily: "Manrope_500Medium",
+        fontSize: 13.2,
+        color: "#fd1775",
+    },
+    dropdownStyle: { borderRadius: 6.61, width: 187 },
+    itemStyle: { padding: 0, margin: 0 },
+});
+
 export default ToDosList;

hooks/firebase/useSignUp.ts

@@ -6,7 +6,6 @@ import {uuidv4} from "@firebase/util";
 import * as Localization from "expo-localization";
 
 export const useSignUp = () => {
-    const {setRedirectOverride} = useAuthContext()
     const {mutateAsync: setUserData} = useSetUserData();
 
     return useMutation({
@@ -22,8 +21,6 @@ export const useSignUp = () => {
             firstName: string;
             lastName: string;
         }) => {
-            setRedirectOverride(true)
-
             await auth()
                 .createUserWithEmailAndPassword(email, password)
                 .then(async (res) => {