diff --git a/components/pages/settings/ChoreRewardSettings.tsx b/components/pages/settings/ChoreRewardSettings.tsx index 9c9919f..7e98a62 100644 --- a/components/pages/settings/ChoreRewardSettings.tsx +++ b/components/pages/settings/ChoreRewardSettings.tsx @@ -10,20 +10,20 @@ const ChoreRewardSettings = (props: { }) => { return ( - + props.setSelectedPage(0)}> - + Return to main settings - + Chore Reward Settings - + diff --git a/components/pages/todos/ToDoItem.tsx b/components/pages/todos/ToDoItem.tsx index 1d0e926..3343995 100644 --- a/components/pages/todos/ToDoItem.tsx +++ b/components/pages/todos/ToDoItem.tsx @@ -1,10 +1,34 @@ -import { View, Text, Checkbox } from "react-native-ui-lib"; -import React from "react"; +import { + View, + Text, + Checkbox, + TextField, + TouchableOpacity, + Modal, + Dialog, + Button, + ButtonSize, +} from "react-native-ui-lib"; +import React, { useEffect, useState } from "react"; import { IToDo, useToDosContext } from "@/contexts/ToDosContext"; import { Ionicons } from "@expo/vector-icons"; +import PointsSlider from "@/components/shared/PointsSlider"; -const ToDoItem = (props: { item: IToDo }) => { +const ToDoItem = (props: { item: IToDo; isSettings?: boolean }) => { const { updateToDo } = useToDosContext(); + const [editing, setEditing] = useState(false); + const [points, setPoints] = useState(props.item.points); + const [pointsModalVisible, setPointsModalVisible] = useState(false); + + const handlePointsChange = (text: string) => { + const numericValue = parseInt(text, 10); + + if (!isNaN(numericValue) && numericValue >= 0 && numericValue <= 100) { + setPoints(numericValue); + } else if (text === "") { + setPoints(0); + } + }; return ( { }} > - - {props.item.title} - + {!editing ? ( + { + if (props.isSettings) { + setEditing(true); + } + }} + > + {props.item.title} + + ) : ( + { + updateToDo(props.item.id, { title: text }); + }} + onSubmitEditing={() => { + setEditing(false); + }} + onBlur={() => { + setEditing(false); + }} + /> + )} { @@ -39,17 +84,25 @@ const ToDoItem = (props: { item: IToDo }) => { height={2} width={"100%"} style={{ - backgroundColor: props.item.done ? '#b8b8b8' : "#e7e7e7", + backgroundColor: props.item.done ? "#b8b8b8" : "#e7e7e7", }} centerH /> {props.item.points && props.item.points > 0 ? ( - - - {props.item.points} points - + { + if (props.isSettings) { + setPointsModalVisible(true); + } + }} + > + + + {props.item.points} points + + ) : ( )} @@ -60,6 +113,52 @@ const ToDoItem = (props: { item: IToDo }) => { style={{ borderRadius: 50 }} /> + setPointsModalVisible(false)} + containerStyle={{ + padding: 20, + borderRadius: 15, + backgroundColor: "white", + }} + children={ + + + + + Reward points + + + {points && ( + + )} + +