- Implemented assigning todos

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
-          size={ButtonSize.small}
-          paddingH-8
-          iconSource={() => (
-            <Ionicons name="add-outline" size={20} color="#ea156c" />
-          )}
-          style={{
-            marginLeft: "auto",
-            borderRadius: 8,
-            backgroundColor: "#ffe8f1",
-            borderColor: "#ea156c",
-            borderWidth: 1,
-          }}
-          color="#ea156c"
-          label="Assign"
-        />
+        <View flex-1/>
+        <Picker
+            marginL-8
+            value={selectedAssignees}
+            onChange={(value) => {
+              setSelectedAssignees([...selectedAssignees, ...value]);
+            }}
+            style={{ marginVertical: 5 }}
+            mode={PickerModes.MULTI}
+            renderInput={() =>
+                <Button
+                    size={ButtonSize.small}
+                    paddingH-8
+                    iconSource={() => (
+                        <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>