- Implemented editing of the todos

- Modified the AddChoreDialog.tsx to be able to edit or add new items

components/pages/todos/AddChoreDialog.tsx

@@ -13,26 +13,31 @@ import {
 import { PanningDirectionsEnum } from "react-native-ui-lib/src/incubator/panView";
 import { StyleSheet } from "react-native";
 import DropModalIcon from "@/assets/svgs/DropModalIcon";
+import { IToDo } from "@/hooks/firebase/types/todoData";
 
 interface IAddChoreDialog {
   isVisible: boolean;
   setIsVisible: (value: boolean) => void;
+  selectedTodo?: IToDo
 }
-const AddChoreDialog = (addChoreDialogProps: IAddChoreDialog) => {
-  const { addToDo, toDos } = useToDosContext();
 
-  const [newTitle, setNewTitle] = useState<string>("");
-  const [points, setPoints] = useState<number>(10);
-  const [choreDate, setChoreDate] = useState<Date | null>(new Date());
-  const [rotate, setRotate] = useState<boolean>(false);
-  const [repeatType, setRepeatType] = useState<string>("Every week");
+const defaultTodo = {
+  id: "",
+  title: "",
+  points: 10,
+  date: new Date(),
+  rotate: false,
+  repeatType: "Every week"
+};
+
+const AddChoreDialog = (addChoreDialogProps: IAddChoreDialog) => {
+  const { addToDo, updateToDo } = useToDosContext();
+  const [todo, setTodo] = useState<IToDo>(addChoreDialogProps.selectedTodo ?? defaultTodo)
+
+  const [points, setPoints] = useState<number>(todo.points);
 
   const handleClose = () => {
-    setNewTitle("");
-    setPoints(10);
-    setChoreDate(new Date());
-    setRotate(false);
-    setRepeatType("every week");
+    setTodo(defaultTodo);
     addChoreDialogProps.setIsVisible(false);
   };
 
@@ -45,6 +50,7 @@ const AddChoreDialog = (addChoreDialogProps: IAddChoreDialog) => {
       setPoints(0);
     }
   };
+
   return (
     <Dialog
       bottom={true}
@@ -84,15 +90,15 @@ const AddChoreDialog = (addChoreDialogProps: IAddChoreDialog) => {
           label="Save"
           onPress={() => {
             try {
-              addToDo({
-                id: "",
-                title: newTitle,
-                done: false,
-                date: choreDate,
-                points: points,
-                rotate: rotate,
-                repeatType: repeatType,
-              });
+              if (addChoreDialogProps.selectedTodo) {
+                updateToDo({...todo, points: points})
+              } else {
+                addToDo({
+                  ...todo,
+                  done: false,
+                  points: points,
+                });
+              }
               handleClose();
             } catch (error) {
               console.error(error);
@@ -102,9 +108,9 @@ const AddChoreDialog = (addChoreDialogProps: IAddChoreDialog) => {
       </View>
       <TextField
         placeholder="Add a To Do"
-        value={newTitle}
+        value={todo?.title}
         onChangeText={(text) => {
-          setNewTitle(text);
+          setTodo((oldValue: IToDo) => ({...oldValue, title: text}));
         }}
         placeholderTextColor="#2d2d30"
         text60R
@@ -114,15 +120,15 @@ const AddChoreDialog = (addChoreDialogProps: IAddChoreDialog) => {
       <View style={styles.divider} marginT-8 />
       <View marginL-30 centerV>
         <View row marginB-10>
-          {choreDate && (
+          {todo?.date && (
             <View row centerV>
               <Feather name="calendar" size={25} color="#919191" />
               <DateTimePicker
-                value={choreDate}
+                value={todo.date}
                 text70
                 marginL-8
                 onChange={(date) => {
-                  setChoreDate(date);
+                  setTodo((oldValue: IToDo) => ({...oldValue, date: date}));
                 }}
               />
             </View>
@@ -133,15 +139,13 @@ const AddChoreDialog = (addChoreDialogProps: IAddChoreDialog) => {
           <Picker
             marginL-8
             placeholder="Select Repeat Type"
-            value={repeatType}
+            value={todo?.repeatType}
             onChange={(value) => {
               if (value) {
                 if (value.toString() == "None") {
-                  setChoreDate(null);
-                  setRepeatType("None");
+                  setTodo((oldValue) => ({...oldValue, date: null, repeatType: "None"}));
                 } else {
-                  setRepeatType(value.toString());
-                  setChoreDate(new Date());
+                  setTodo((oldValue) => ({...oldValue, date: new Date(), repeatType: value.toString()}))
                 }
               }
             }}
@@ -206,9 +210,9 @@ const AddChoreDialog = (addChoreDialogProps: IAddChoreDialog) => {
         <Text text80>Take Turns</Text>
         <Switch
           onColor={"#ea156c"}
-          value={rotate}
+          value={todo.rotate}
           marginL-10
-          onValueChange={(value) => setRotate(value)}
+          onValueChange={(value) => setTodo((oldValue) => ({...oldValue, rotate: value}))}
         />
       </View>
       <View style={styles.divider} />