changes to groceries, todos

components/pages/todos/AddChore.tsx

@@ -13,20 +13,24 @@ import {
   NumberInputData,
   DateTimePicker,
   Switch,
+  Picker,
 } from "react-native-ui-lib";
 import { AntDesign, Feather, Ionicons } from "@expo/vector-icons";
 import LinearGradient from "react-native-linear-gradient";
 import { PanningDirectionsEnum } from "react-native-ui-lib/src/components/panningViews/panningProvider";
-import { useToDosContext } from "@/contexts/ToDosContext";
+import { repeatOptions, useToDosContext } from "@/contexts/ToDosContext";
+import { setDate } from "date-fns";
 
 const AddChore = () => {
   const { addToDo, toDos } = useToDosContext();
 
-  const [newTitle, setNewTitle] = useState<string>("");
   const [isVisible, setIsVisible] = useState<boolean>(false);
+
+  const [newTitle, setNewTitle] = useState<string>("");
   const [points, setPoints] = useState<number>(10);
-  const [choreDate, setChoreDate] = useState<Date>(new Date());
+  const [choreDate, setChoreDate] = useState<Date | null>(new Date());
   const [rotate, setRotate] = useState<boolean>(false);
+  const [repeatType, setRepeatType] = useState<string>("Every week");
 
   const handleChange = (text: string) => {
     const numericValue = parseInt(text, 10);
@@ -68,17 +72,28 @@ const AddChore = () => {
           width: "100%",
           alignSelf: "stretch",
           padding: 0,
+          paddingTop: 3,
           margin: 0,
         }}
         visible={isVisible}
       >
         <View row spread>
-          <Button color="#05a8b6" style={styles.topBtn} label="Cancel" onPress={() => {setIsVisible(false)}} />
+          <Button
+            color="#05a8b6"
+            style={styles.topBtn}
+            label="Cancel"
+            onPress={() => {
+              setIsVisible(false);
+            }}
+          />
           <Button
             style={styles.topBtn}
             iconSource={() => (
               <Feather name="chevron-down" size={24} color="black" />
-            )} onPress={() => {setIsVisible(false)}}
+            )}
+            onPress={() => {
+              setIsVisible(false);
+            }}
           />
           <Button
             color="#05a8b6"
@@ -92,6 +107,7 @@ const AddChore = () => {
                 date: choreDate,
                 points: points,
                 rotate: rotate,
+                repeatType: repeatType,
               });
               setIsVisible(false);
               console.log(toDos);
@@ -99,7 +115,7 @@ const AddChore = () => {
           />
         </View>
         <TextField
-          placeholder="Add chore title"
+          placeholder="Add a To Do"
           value={newTitle}
           onChangeText={(text) => {
             setNewTitle(text);
@@ -109,28 +125,58 @@ const AddChore = () => {
           marginT-15
           marginL-30
         />
-        <View style={styles.divider} />
+        <View style={styles.divider} marginT-8 />
         <View marginL-30 centerV>
           <View row marginB-10>
-            <Feather name="calendar" size={28} color="#919191" />
-            <DateTimePicker
-              value={choreDate}
-              text70
-              marginL-10
-              onChange={(date) => {
-                setChoreDate(date);
-              }}
-            />
+            {choreDate && (
+              <View row centerV>
+                <Feather name="calendar" size={25} color="#919191" />
+                <DateTimePicker
+                  value={choreDate}
+                  text70
+                  marginL-8
+                  onChange={(date) => {
+                    setChoreDate(date);
+                  }}
+                />
+              </View>
+            )}
           </View>
-          <View row>
-            <AntDesign name="clockcircleo" size={28} color="#919191" />
+          <View row centerV>
+            <AntDesign name="clockcircleo" size={24} color="#919191" />
+            <Picker
+              marginL-8
+              placeholder="Select Repeat Type"
+              value={repeatType}
+              onChange={(value) => {
+                if (value) {
+                  if (value.toString() == "None") {
+                    setChoreDate(null);
+                    setRepeatType("None");
+                  } else {
+                    setRepeatType(value.toString());
+                    setChoreDate(new Date());
+                  }
+                }
+              }}
+              topBarProps={{ title: "Repeat" }}
+              style={{ marginVertical: 5 }}
+            >
+              {repeatOptions.map((option) => (
+                <Picker.Item
+                  key={option.value}
+                  label={option.label}
+                  value={option.value}
+                />
+              ))}
+            </Picker>
           </View>
         </View>
         <View style={styles.divider} />
 
         <View marginH-30 marginB-10 row centerV>
-          <Ionicons name="person-circle-outline" size={30} color="#919191" />
-          <Text text60R marginL-10>
+          <Ionicons name="person-circle-outline" size={28} color="#919191" />
+          <Text text70R marginL-10>
             Assignees
           </Text>
           <Button
@@ -150,12 +196,12 @@ const AddChore = () => {
             label="Assign"
           />
         </View>
-        <View row>
+        <View row marginH-13 marginT-13>
           <View
             marginL-30
             style={{
               aspectRatio: 1,
-              width: 60,
+              width: 50,
               backgroundColor: "red",
               borderRadius: 50,
             }}
@@ -164,22 +210,30 @@ const AddChore = () => {
             marginL-30
             style={{
               aspectRatio: 1,
-              width: 60,
+              width: 50,
               backgroundColor: "red",
               borderRadius: 50,
             }}
           />
         </View>
-        <Switch onColor={'#ea156c'} value={rotate} style={styles.rotateSwitch} onValueChange={(value) => setRotate(value)} />
+        <View row centerV style={styles.rotateSwitch}>
+          <Text text80>Take Turns</Text>
+          <Switch
+            onColor={"#ea156c"}
+            value={rotate}
+            marginL-10
+            onValueChange={(value) => setRotate(value)}
+          />
+        </View>
         <View style={styles.divider} />
-        <View marginH-30 marginB-10 row centerV>
-          <Ionicons name="gift-outline" size={30} color="#919191" />
-          <Text text60R marginL-10>
+        <View marginH-30 marginB-15 row centerV>
+          <Ionicons name="gift-outline" size={25} color="#919191" />
+          <Text text70BL marginL-10>
             Reward Points
           </Text>
         </View>
         <View marginH-30 row spread>
-          <View width={"85%"}>
+          <View width={"80%"}>
             <Slider
               value={points}
               onValueChange={(value) => setPoints(value)}
@@ -237,7 +291,8 @@ const styles = StyleSheet.create({
     color: "#05a8b6",
   },
   rotateSwitch: {
-    marginLeft: 'auto',
-    marginRight: 35
-  }
+    marginLeft: 35,
+    marginBottom: 10,
+    marginTop: 25,
+  },
 });