chore points

components/pages/settings/ChoreRewardSettings.tsx

@@ -10,20 +10,20 @@ const ChoreRewardSettings = (props: {
 }) => {
   return (
     <ToDosContextProvider>
-      <View marginT-10>
+      <View marginT-10 marginH-20>
         <ScrollView>
           <TouchableOpacity onPress={() => props.setSelectedPage(0)}>
-            <View row marginT-20 marginL-20 marginB-35 centerV>
+            <View row marginT-20 marginL-5 marginB-35 centerV>
               <Ionicons name="chevron-back" size={22} color="#979797" />
               <Text text70 color="#979797">
                 Return to main settings
               </Text>
             </View>
           </TouchableOpacity>
-          <Text text60R marginL-30 marginB-20>
+          <Text text60R marginB-20>
             Chore Reward Settings
           </Text>
-          <ToDosList />
+          <ToDosList isSettings/>
         </ScrollView>
       </View>
     </ToDosContextProvider>

components/pages/todos/ToDoItem.tsx

@@ -1,10 +1,34 @@
-import { View, Text, Checkbox } from "react-native-ui-lib";
+import {
-import React from "react";
+  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<boolean>(false);
+  const [points, setPoints] = useState(props.item.points);
+  const [pointsModalVisible, setPointsModalVisible] = useState<boolean>(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 (
     <View
       centerV
@@ -18,14 +42,35 @@ const ToDoItem = (props: { item: IToDo }) => {
       }}
     >
       <View paddingB-5 row spread>
-        <Text
+        {!editing ? (
-          text70R
+          <Text
-          style={{
+            text70R
-            textDecorationLine: props.item.done ? "line-through" : "none",
+            style={{
-          }}
+              textDecorationLine: props.item.done ? "line-through" : "none",
-        >
+            }}
-          {props.item.title}
+            onPress={() => {
-        </Text>
+              if (props.isSettings) {
+                setEditing(true);
+              }
+            }}
+          >
+            {props.item.title}
+          </Text>
+        ) : (
+          <TextField
+            value={props.item.title}
+            text70R
+            onChangeText={(text) => {
+              updateToDo(props.item.id, { title: text });
+            }}
+            onSubmitEditing={() => {
+              setEditing(false);
+            }}
+            onBlur={() => {
+              setEditing(false);
+            }}
+          />
+        )}
         <Checkbox
           value={props.item.done}
           onValueChange={(value) => {
@@ -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
         />
       </View>
       <View centerH row spread>
         {props.item.points && props.item.points > 0 ? (
-          <View centerV row>
+          <TouchableOpacity
-            <Ionicons name="gift-outline" size={20} color="#46a80a" />
+            onPress={() => {
-            <Text color="#46a80a">{props.item.points} points</Text>
+              if (props.isSettings) {
-          </View>
+                setPointsModalVisible(true);
+              }
+            }}
+          >
+            <View centerV row>
+              <Ionicons name="gift-outline" size={20} color="#46a80a" />
+              <Text color="#46a80a">{props.item.points} points</Text>
+            </View>
+          </TouchableOpacity>
         ) : (
           <View />
         )}
@@ -60,6 +113,52 @@ const ToDoItem = (props: { item: IToDo }) => {
           style={{ borderRadius: 50 }}
         />
       </View>
+      <Dialog
+        visible={pointsModalVisible}
+        onDismiss={() => setPointsModalVisible(false)}
+        containerStyle={{
+          padding: 20,
+          borderRadius: 15,
+          backgroundColor: "white",
+        }}
+        children={
+          <View gap-20>
+            <View row centerV marginL-30>
+              <Ionicons name="gift-outline" size={22} color="#919191" />
+              <Text marginH-10 text70>
+                Reward points
+              </Text>
+            </View>
+            {points && (
+              <PointsSlider
+                points={points}
+                setPoints={setPoints}
+                handleChange={handlePointsChange}
+              />
+            )}
+            <View row marginH-30 spread>
+              <Button
+                size={ButtonSize.large}
+                label="Cancel"
+                backgroundColor="#d9d9d9"
+                onPress={() => {
+                  setPointsModalVisible(false);
+                }}
+              />
+              <Button
+                size={ButtonSize.large}
+                label="Save points"
+                backgroundColor="#fd1775"
+                style={{height: 60, width: 150}}
+                onPress={() => {
+                  updateToDo(props.item.id, { points: points });
+                  setPointsModalVisible(false);
+                }}
+              />
+            </View>
+          </View>
+        }
+      />
     </View>
   );
 };

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) => <ToDoItem key={item.id} item={item} />)}
+              .map((item) => <ToDoItem isSettings={isSettings} key={item.id} item={item} />)}
         </View>
       )}
 
@@ -114,7 +114,7 @@ const ToDosList = () => {
             </TouchableOpacity>
 
             {isExpanded &&
-              sortedToDos.map((item) => <ToDoItem key={item.id} item={item} />)}
+              sortedToDos.map((item) => <ToDoItem isSettings={isSettings} key={item.id} item={item} />)}
           </View>
         );
       })}

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}
         />
         <View row spread>