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 }}
/>
+
);
};
diff --git a/components/pages/todos/ToDosList.tsx b/components/pages/todos/ToDosList.tsx
index 5cb8d30..923701d 100644
--- a/components/pages/todos/ToDosList.tsx
+++ b/components/pages/todos/ToDosList.tsx
@@ -29,7 +29,7 @@ const groupToDosByDate = (toDos: IToDo[]) => {
}, {} as { [key: string]: IToDo[] });
};
-const ToDosList = () => {
+const ToDosList = ({isSettings}: {isSettings?: boolean}) => {
const { toDos } = useToDosContext();
const groupedToDos = groupToDosByDate(toDos);
@@ -74,7 +74,7 @@ const ToDosList = () => {
{expandNoDate &&
noDateToDos
.sort((a, b) => Number(a.done) - Number(b.done))
- .map((item) => )}
+ .map((item) => )}
)}
@@ -114,7 +114,7 @@ const ToDosList = () => {
{isExpanded &&
- sortedToDos.map((item) => )}
+ sortedToDos.map((item) => )}
);
})}
diff --git a/components/shared/PointsSlider.tsx b/components/shared/PointsSlider.tsx
index d99406d..37d71d0 100644
--- a/components/shared/PointsSlider.tsx
+++ b/components/shared/PointsSlider.tsx
@@ -14,6 +14,9 @@ const PointsSlider = (props: {
onValueChange={(value) => props.setPoints(value)}
minimumValue={0}
step={10}
+ thumbTintColor="white"
+ minimumTrackTintColor="#91d5ff"
+ thumbStyle={{borderWidth: 3, borderColor: '#91d5ff'}}
maximumValue={100}
/>