diff --git a/components/pages/todos/AddChore.tsx b/components/pages/todos/AddChore.tsx index aface01..5e64af0 100644 --- a/components/pages/todos/AddChore.tsx +++ b/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(false); - - return ( { - + ); }; diff --git a/components/pages/todos/AddChoreDialog.tsx b/components/pages/todos/AddChoreDialog.tsx index 5d29561..9b9e71c 100644 --- a/components/pages/todos/AddChoreDialog.tsx +++ b/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(""); - const [points, setPoints] = useState(10); - const [choreDate, setChoreDate] = useState(new Date()); - const [rotate, setRotate] = useState(false); - const [repeatType, setRepeatType] = useState("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(addChoreDialogProps.selectedTodo ?? defaultTodo) + + const [points, setPoints] = useState(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 ( { 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) => { { - setNewTitle(text); + setTodo((oldValue: IToDo) => ({...oldValue, title: text})); }} placeholderTextColor="#2d2d30" text60R @@ -114,15 +120,15 @@ const AddChoreDialog = (addChoreDialogProps: IAddChoreDialog) => { - {choreDate && ( + {todo?.date && ( { - setChoreDate(date); + setTodo((oldValue: IToDo) => ({...oldValue, date: date})); }} /> @@ -133,15 +139,13 @@ const AddChoreDialog = (addChoreDialogProps: IAddChoreDialog) => { { 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) => { Take Turns setRotate(value)} + onValueChange={(value) => setTodo((oldValue) => ({...oldValue, rotate: value}))} /> diff --git a/components/pages/todos/ToDoItem.tsx b/components/pages/todos/ToDoItem.tsx index b4c5948..1eeeeb0 100644 --- a/components/pages/todos/ToDoItem.tsx +++ b/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, }} > + - {!editing ? ( - { - if (props.isSettings) { - setEditing(true); - } - }} - > - {props.item.title} - - ) : ( - { - updateToDo({ id: props.item.id, title: text }); - }} - onSubmitEditing={() => { - setEditing(false); - }} - onBlur={() => { - setEditing(false); - }} - /> - )} + }} + onPress={() => { + setEditing(true); + }} + > + {props.item.title} +