- Implemented editing of the todos

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

components/pages/todos/AddChore.tsx

@@ -1,34 +1,14 @@
 import { StyleSheet } from "react-native";
-import React, { useEffect, useState } from "react";
-import {
-  Button,
-  ButtonSize,
-  View,
-  Text,
-  ActionSheet,
-  TextField,
-  Dialog,
-  Slider,
-  NumberInput,
-  NumberInputData,
-  DateTimePicker,
-  Switch,
-  Picker,
-} from "react-native-ui-lib";
-import { AntDesign, Feather, Ionicons } from "@expo/vector-icons";
+import React, { useState } from "react";
+import { Button, ButtonSize, Text, View } from "react-native-ui-lib";
+import { AntDesign } from "@expo/vector-icons";
 import LinearGradient from "react-native-linear-gradient";
-import { PanningDirectionsEnum } from "react-native-ui-lib/src/components/panningViews/panningProvider";
-import { repeatOptions, useToDosContext } from "@/contexts/ToDosContext";
-import { setDate } from "date-fns";
-import PointsSlider from "@/components/shared/PointsSlider";
 import AddChoreDialog from "./AddChoreDialog";
 
 const AddChore = () => {
 
   const [isVisible, setIsVisible] = useState<boolean>(false);
 
-  
-
   return (
     <LinearGradient
       colors={["transparent", "#f9f8f7"]}
@@ -48,7 +28,7 @@ const AddChore = () => {
           </Text>
         </Button>
       </View>
-      <AddChoreDialog isVisible={isVisible} setIsVisible={setIsVisible}  />
+      <AddChoreDialog isVisible={isVisible} setIsVisible={setIsVisible} />
     </LinearGradient>
   );
 };

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} />

components/pages/todos/ToDoItem.tsx

@@ -2,19 +2,18 @@ import {
   View,
   Text,
   Checkbox,
-  TextField,
   TouchableOpacity,
-  Modal,
   Dialog,
   Button,
   ButtonSize,
 } from "react-native-ui-lib";
-import React, { useEffect, useState } from "react";
+import React, { useState } from "react";
 import { useToDosContext } from "@/contexts/ToDosContext";
 import { Ionicons } from "@expo/vector-icons";
 import PointsSlider from "@/components/shared/PointsSlider";
 import { IToDo } from "@/hooks/firebase/types/todoData";
 import { ImageBackground } from "react-native";
+import AddChoreDialog from "@/components/pages/todos/AddChoreDialog";
 
 const ToDoItem = (props: { item: IToDo; isSettings?: boolean }) => {
   const { updateToDo } = useToDosContext();
@@ -43,38 +42,21 @@ const ToDoItem = (props: { item: IToDo; isSettings?: boolean }) => {
         opacity: props.item.done ? 0.3 : 1,
       }}
     >
+      <AddChoreDialog isVisible={editing} setIsVisible={setEditing} selectedTodo={props.item}/>
       <View paddingB-8 row spread>
-        {!editing ? (
-          <Text
-            text70
-            style={{
+      <Text
+          text70
+          style={{
               textDecorationLine: props.item.done ? "line-through" : "none",
               fontFamily: "Manrope_600SemiBold",
               fontSize: 18,
-            }}
-            onPress={() => {
-              if (props.isSettings) {
-                setEditing(true);
-              }
-            }}
-          >
-            {props.item.title}
-          </Text>
-        ) : (
-          <TextField
-            value={props.item.title}
-            text70R
-            onChangeText={(text) => {
-              updateToDo({ id: props.item.id, title: text });
-            }}
-            onSubmitEditing={() => {
-              setEditing(false);
-            }}
-            onBlur={() => {
-              setEditing(false);
-            }}
-          />
-        )}
+          }}
+          onPress={() => {
+              setEditing(true);
+          }}
+      >
+          {props.item.title}
+      </Text>
         <Checkbox
           value={props.item.done}
           containerStyle={{borderWidth: 1, borderRadius: 50, borderColor: 'gray', height: 28, width: 28}}

hooks/firebase/types/todoData.ts

@@ -3,7 +3,7 @@ export interface IToDo {
     title: string;
     done: boolean;
     date: Date | null;
-    points?: number;
+    points: number;
     rotate: boolean;
     repeatType: string;
     creatorId?: string,