add todo repeat freq

components/pages/todos/AddChoreDialog.tsx

@@ -1,4 +1,4 @@
-import {View, Text, Button, Switch, PickerModes} from "react-native-ui-lib";
+import { View, Text, Button, Switch, PickerModes } from "react-native-ui-lib";
 import React, { useRef, useState } from "react";
 import PointsSlider from "@/components/shared/PointsSlider";
 import { repeatOptions, useToDosContext } from "@/contexts/ToDosContext";
@@ -15,7 +15,12 @@ import { Dimensions, StyleSheet } from "react-native";
 import DropModalIcon from "@/assets/svgs/DropModalIcon";
 import { IToDo } from "@/hooks/firebase/types/todoData";
 import AssigneesDisplay from "@/components/shared/AssigneesDisplay";
-import {useGetFamilyMembers} from "@/hooks/firebase/useGetFamilyMembers";
+import { useGetFamilyMembers } from "@/hooks/firebase/useGetFamilyMembers";
+import CalendarIcon from "@/assets/svgs/CalendarIcon";
+import ClockIcon from "@/assets/svgs/ClockIcon";
+import ClockOIcon from "@/assets/svgs/ClockOIcon";
+import ProfileIcon from "@/assets/svgs/ProfileIcon";
+import RepeatFreq from "./RepeatFreq";
 
 interface IAddChoreDialog {
   isVisible: boolean;
@@ -30,7 +35,7 @@ const defaultTodo = {
   date: new Date(),
   rotate: false,
   repeatType: "Every week",
-  assignees: []
+  assignees: [],
 };
 
 const AddChoreDialog = (addChoreDialogProps: IAddChoreDialog) => {
@@ -38,11 +43,13 @@ const AddChoreDialog = (addChoreDialogProps: IAddChoreDialog) => {
   const [todo, setTodo] = useState<IToDo>(
     addChoreDialogProps.selectedTodo ?? defaultTodo
   );
-  const [selectedAssignees, setSelectedAssignees] = useState<string[]>(addChoreDialogProps?.selectedTodo?.assignees ?? []);
+  const [selectedAssignees, setSelectedAssignees] = useState<string[]>(
+    addChoreDialogProps?.selectedTodo?.assignees ?? []
+  );
   const { width, height } = Dimensions.get("screen");
   const [points, setPoints] = useState<number>(todo.points);
 
-  const {data: members} = useGetFamilyMembers();
+  const { data: members } = useGetFamilyMembers();
 
   const handleClose = () => {
     setTodo(defaultTodo);
@@ -100,13 +107,17 @@ const AddChoreDialog = (addChoreDialogProps: IAddChoreDialog) => {
           onPress={() => {
             try {
               if (addChoreDialogProps.selectedTodo) {
-                updateToDo({ ...todo, points: points, assignees: selectedAssignees });
+                updateToDo({
+                  ...todo,
+                  points: points,
+                  assignees: selectedAssignees,
+                });
               } else {
                 addToDo({
                   ...todo,
                   done: false,
                   points: points,
-                  assignees: selectedAssignees
+                  assignees: selectedAssignees,
                 });
               }
               handleClose();
@@ -133,11 +144,15 @@ const AddChoreDialog = (addChoreDialogProps: IAddChoreDialog) => {
         <View row marginB-10>
           {todo?.date && (
             <View row centerV>
-              <Feather name="calendar" size={25} color="#919191" />
+              <CalendarIcon color="#919191" width={24} height={24} />
               <DateTimePicker
                 value={todo.date}
                 text70
-                marginL-8
+                style={{
+                  fontFamily: "PlusJakartaSans_500Medium",
+                  fontSize: 16,
+                }}
+                marginL-12
                 onChange={(date) => {
                   setTodo((oldValue: IToDo) => ({ ...oldValue, date: date }));
                 }}
@@ -146,9 +161,9 @@ const AddChoreDialog = (addChoreDialogProps: IAddChoreDialog) => {
           )}
         </View>
         <View row centerV>
-          <AntDesign name="clockcircleo" size={24} color="#919191" />
+          <ClockOIcon />
           <Picker
-            marginL-8
+            marginL-12
             placeholder="Select Repeat Type"
             value={todo?.repeatType}
             onChange={(value) => {
@@ -169,7 +184,11 @@ const AddChoreDialog = (addChoreDialogProps: IAddChoreDialog) => {
               }
             }}
             topBarProps={{ title: "Repeat" }}
-            style={{ marginVertical: 5 }}
+            style={{
+              marginVertical: 5,
+              fontFamily: "PlusJakartaSans_500Medium",
+              fontSize: 16,
+            }}
           >
             {repeatOptions.map((option) => (
               <Picker.Item
@@ -180,60 +199,67 @@ const AddChoreDialog = (addChoreDialogProps: IAddChoreDialog) => {
             ))}
           </Picker>
         </View>
+        {todo.repeatType == "Every week" && <RepeatFreq/>}
       </View>
       <View style={styles.divider} />
 
       <View marginH-30 marginB-10 row centerV>
-        <Ionicons name="person-circle-outline" size={28} color="#919191" />
-        <Text text70R marginL-10>
+        <ProfileIcon color="#919191" />
+        <Text style={styles.sub} marginL-10>
           Assignees
         </Text>
-        <View flex-1/>
+        <View flex-1 />
         <Picker
-            marginL-8
-            value={selectedAssignees}
-            onChange={(value) => {
-              setSelectedAssignees([...selectedAssignees, ...value]);
-            }}
-            style={{ marginVertical: 5 }}
-            mode={PickerModes.MULTI}
-            renderInput={() =>
-                <Button
-                    size={ButtonSize.small}
-                    paddingH-8
-                    iconSource={() => (
-                        <Ionicons name="add-outline" size={20} color="#ea156c"/>
-                    )}
-                    style={{
-                      marginLeft: "auto",
-                      borderRadius: 8,
-                      backgroundColor: "#ffe8f1",
-                      borderColor: "#ea156c",
-                      borderWidth: 1,
-                    }}
-                    color="#ea156c"
-                    label="Assign"
-                    labelStyle={{fontFamily: "Manrope_600SemiBold", fontSize: 14}}
-                />
-            }
+          marginL-8
+          value={selectedAssignees}
+          onChange={(value) => {
+            setSelectedAssignees([...selectedAssignees, ...value]);
+          }}
+          style={{ marginVertical: 5 }}
+          mode={PickerModes.MULTI}
+          renderInput={() => (
+            <Button
+              size={ButtonSize.small}
+              paddingH-8
+              iconSource={() => (
+                <Ionicons name="add-outline" size={20} color="#ea156c" />
+              )}
+              style={{
+                marginLeft: "auto",
+                borderRadius: 8,
+                backgroundColor: "#ffe8f1",
+                borderColor: "#ea156c",
+                borderWidth: 1,
+              }}
+              color="#ea156c"
+              label="Assign"
+              labelStyle={{ fontFamily: "Manrope_600SemiBold", fontSize: 14 }}
+            />
+          )}
         >
           {members?.map((member) => (
-              <Picker.Item
-                  key={member.uid}
-                  label={member?.firstName + " " + member?.lastName}
-                  value={member?.uid!}
-              />
+            <Picker.Item
+              key={member.uid}
+              label={member?.firstName + " " + member?.lastName}
+              value={member?.uid!}
+            />
           ))}
         </Picker>
       </View>
       <View row marginL-27 marginT-0>
-        <AssigneesDisplay selectedAttendees={selectedAssignees} setSelectedAttendees={setSelectedAssignees}/>
+        <AssigneesDisplay
+          selectedAttendees={selectedAssignees}
+          setSelectedAttendees={setSelectedAssignees}
+        />
       </View>
       <View row centerV style={styles.rotateSwitch}>
-        <Text text80>Take Turns</Text>
+        <Text style={{ fontFamily: "PlusJakartaSans_500Medium", fontSize: 16 }}>
+          Take Turns
+        </Text>
         <Switch
           onColor={"#ea156c"}
           value={todo.rotate}
+          style={{ width: 43.06, height: 27.13 }}
           marginL-10
           onValueChange={(value) =>
             setTodo((oldValue) => ({ ...oldValue, rotate: value }))
@@ -243,7 +269,7 @@ const AddChoreDialog = (addChoreDialogProps: IAddChoreDialog) => {
       <View style={styles.divider} />
       <View marginH-30 marginB-15 row centerV>
         <Ionicons name="gift-outline" size={25} color="#919191" />
-        <Text text70BL marginL-10>
+        <Text style={styles.sub} marginL-10>
           Reward Points
         </Text>
       </View>
@@ -284,4 +310,8 @@ const styles = StyleSheet.create({
     marginBottom: 10,
     marginTop: 25,
   },
+  sub: {
+    fontFamily: "Manrope_600SemiBold",
+    fontSize: 18,
+  },
 });