- Implemented assigning todos

components/pages/calendar/ManuallyAddEventModal.tsx

@@ -421,7 +421,7 @@ export const ManuallyAddEventModal = () => {
                     </View>
 
                     <View marginL-35>
-                        <AssigneesDisplay setSlectedAttendees={setSelectedAttendees}
+                        <AssigneesDisplay setSelectedAttendees={setSelectedAttendees}
                                           selectedAttendees={selectedAttendees}/>
                     </View>
 

components/pages/todos/AddChoreDialog.tsx

@@ -1,4 +1,4 @@
-import { View, Text, Button, Switch } from "react-native-ui-lib";
+import {View, Text, Button, Switch, PickerModes} from "react-native-ui-lib";
 import React, { useRef, useState } from "react";
 import PointsSlider from "@/components/shared/PointsSlider";
 import { repeatOptions, useToDosContext } from "@/contexts/ToDosContext";
@@ -15,6 +15,7 @@ import { Dimensions, StyleSheet } from "react-native";
 import DropModalIcon from "@/assets/svgs/DropModalIcon";
 import { IToDo } from "@/hooks/firebase/types/todoData";
 import AssigneesDisplay from "@/components/shared/AssigneesDisplay";
+import {useGetFamilyMembers} from "@/hooks/firebase/useGetFamilyMembers";
 
 interface IAddChoreDialog {
   isVisible: boolean;
@@ -29,6 +30,7 @@ const defaultTodo = {
   date: new Date(),
   rotate: false,
   repeatType: "Every week",
+  assignees: []
 };
 
 const AddChoreDialog = (addChoreDialogProps: IAddChoreDialog) => {
@@ -36,12 +38,15 @@ const AddChoreDialog = (addChoreDialogProps: IAddChoreDialog) => {
   const [todo, setTodo] = useState<IToDo>(
     addChoreDialogProps.selectedTodo ?? defaultTodo
   );
+  const [selectedAssignees, setSelectedAssignees] = useState<string[]>(addChoreDialogProps?.selectedTodo?.assignees ?? []);
   const { width, height } = Dimensions.get("screen");
-
   const [points, setPoints] = useState<number>(todo.points);
 
+  const {data: members} = useGetFamilyMembers();
+
   const handleClose = () => {
     setTodo(defaultTodo);
+    setSelectedAssignees([]);
     addChoreDialogProps.setIsVisible(false);
   };
 
@@ -95,12 +100,13 @@ const AddChoreDialog = (addChoreDialogProps: IAddChoreDialog) => {
           onPress={() => {
             try {
               if (addChoreDialogProps.selectedTodo) {
-                updateToDo({ ...todo, points: points });
+                updateToDo({ ...todo, points: points, assignees: selectedAssignees });
               } else {
                 addToDo({
                   ...todo,
                   done: false,
                   points: points,
+                  assignees: selectedAssignees
                 });
               }
               handleClose();
@@ -182,25 +188,46 @@ const AddChoreDialog = (addChoreDialogProps: IAddChoreDialog) => {
         <Text text70R marginL-10>
           Assignees
         </Text>
-        <Button
+        <View flex-1/>
-          size={ButtonSize.small}
+        <Picker
-          paddingH-8
+            marginL-8
-          iconSource={() => (
+            value={selectedAssignees}
-            <Ionicons name="add-outline" size={20} color="#ea156c" />
+            onChange={(value) => {
-          )}
+              setSelectedAssignees([...selectedAssignees, ...value]);
-          style={{
+            }}
-            marginLeft: "auto",
+            style={{ marginVertical: 5 }}
-            borderRadius: 8,
+            mode={PickerModes.MULTI}
-            backgroundColor: "#ffe8f1",
+            renderInput={() =>
-            borderColor: "#ea156c",
+                <Button
-            borderWidth: 1,
+                    size={ButtonSize.small}
-          }}
+                    paddingH-8
-          color="#ea156c"
+                    iconSource={() => (
-          label="Assign"
+                        <Ionicons name="add-outline" size={20} color="#ea156c"/>
-        />
+                    )}
+                    style={{
+                      marginLeft: "auto",
+                      borderRadius: 8,
+                      backgroundColor: "#ffe8f1",
+                      borderColor: "#ea156c",
+                      borderWidth: 1,
+                    }}
+                    color="#ea156c"
+                    label="Assign"
+                    labelStyle={{fontFamily: "Manrope_600SemiBold", fontSize: 14}}
+                />
+            }
+        >
+          {members?.map((member) => (
+              <Picker.Item
+                  key={member.uid}
+                  label={member?.firstName + " " + member?.lastName}
+                  value={member?.uid!}
+              />
+          ))}
+        </Picker>
       </View>
       <View row marginL-27 marginT-0>
-        <AssigneesDisplay />
+        <AssigneesDisplay selectedAttendees={selectedAssignees} setSelectedAttendees={setSelectedAssignees}/>
       </View>
       <View row centerV style={styles.rotateSwitch}>
         <Text text80>Take Turns</Text>

components/shared/AssigneesDisplay.tsx

@@ -4,20 +4,20 @@ import {Text, TouchableOpacity, View} from "react-native-ui-lib";
 import RemoveAssigneeBtn from "./RemoveAssigneeBtn";
 import {useGetFamilyMembers} from "@/hooks/firebase/useGetFamilyMembers";
 
-const AssigneesDisplay = ({selectedAttendees, setSlectedAttendees}: {
+const AssigneesDisplay = ({selectedAttendees, setSelectedAttendees}: {
     selectedAttendees: string[],
-    setSlectedAttendees: (value: React.SetStateAction<string[]>) => void
+    setSelectedAttendees: (value: React.SetStateAction<string[]>) => void
 }) => {
     const {data: members} = useGetFamilyMembers(true);
 
-    const selectedMembers = members?.filter((x) => selectedAttendees.includes(x?.uid!));
+    const selectedMembers = members?.filter((x) => selectedAttendees?.includes(x?.uid!));
 
     const getInitials = (firstName: string, lastName: string) => {
         return `${firstName.charAt(0)}${lastName.charAt(0)}`;
     };
 
     const removeAttendee = (uid: string) => {
-        setSlectedAttendees((prev) => prev.filter((x) => x !== uid));
+        setSelectedAttendees((prev) => prev.filter((x) => x !== uid));
     }
 
     return (
@@ -42,7 +42,7 @@ const AssigneesDisplay = ({selectedAttendees, setSlectedAttendees}: {
                 </TouchableOpacity>
             ))}
 
-            {selectedAttendees.length === 0 && <Text>No attendees added</Text>}
+            {selectedAttendees?.length === 0 && <Text>No attendees added</Text>}
         </View>
     );
 };

hooks/firebase/types/todoData.ts

@@ -7,5 +7,6 @@ export interface IToDo {
     rotate: boolean;
     repeatType: string;
     creatorId?: string,
-    familyId?: string
+    familyId?: string,
+    assignees?: string[]; // Optional list of assignees
 }

hooks/firebase/useGetFamilyMembers.ts

@@ -15,10 +15,24 @@ export const useGetFamilyMembers = (excludeSelf?: boolean) => {
                 .get();
 
             if (excludeSelf) {
-                return snapshot.docs.map((doc) => doc.data()).filter((doc) => doc.id !== user?.uid) as UserProfile[];
+                return snapshot.docs.map((doc) => {
+                    let documentData = doc.data();
+
+                    return {
+                        ...documentData,
+                        uid: doc.id
+                    }
+                }).filter((doc) => doc.id !== user?.uid) as UserProfile[];
             }
 
-            return snapshot.docs.map((doc) => doc.data()) as UserProfile[];
+            return snapshot.docs.map((doc) => {
+                let documentData = doc.data();
+
+                return {
+                    ...documentData,
+                    uid: doc.id
+                }
+            }) as UserProfile[];
         }
     })
 }

hooks/firebase/useGetTodos.ts

@@ -1,6 +1,8 @@
 import { useQuery } from "react-query";
 import firestore from "@react-native-firebase/firestore";
 import { useAuthContext } from "@/contexts/AuthContext";
+import {UserProfile} from "@/hooks/firebase/types/profileTypes";
+import {IToDo} from "@/hooks/firebase/types/todoData";
 
 export const useGetTodos = () => {
     const { user, profileData } = useAuthContext();
@@ -17,16 +19,11 @@ export const useGetTodos = () => {
                 const data = doc.data();
 
                 return {
+                    ...data,
                     id: doc.id,
-                    title: data.title,
-                    done: data.done,
                     date: data.date ? new Date(data.date.seconds * 1000) : null,
-                    points: data.points,
-                    rotate: data.points,
-                    repeatType: data.repeatType,
-                    creatorId: data.creatorId
                 };
-            });
+            }) as IToDo[];
         }
     })
 };