add todo repeat freq

2025-11-27 00:44:54 +00:00 · 2024-10-22 19:34:59 +02:00
parent a8eb2ff48b
commit fd6f080e7c
13 changed files with 466 additions and 199 deletions
--- a/components/pages/todos/AddChore.tsx
+++ b/components/pages/todos/AddChore.tsx
@ -1,56 +1,61 @@
-import {StyleSheet} from "react-native";
-import React, {useState} from "react";
-import {Button, ButtonSize, Text, View} from "react-native-ui-lib";
-import {AntDesign} from "@expo/vector-icons";
+import { StyleSheet } from "react-native";
+import React, { useState } from "react";
+import { Button, ButtonSize, Text, View } from "react-native-ui-lib";
+import { AntDesign } from "@expo/vector-icons";
 import LinearGradient from "react-native-linear-gradient";
 import AddChoreDialog from "./AddChoreDialog";

 const AddChore = () => {
-    const [isVisible, setIsVisible] = useState<boolean>(false);
+  const [isVisible, setIsVisible] = useState<boolean>(false);

-    return (
-        <LinearGradient
-            colors={["#f9f8f700", "#f9f8f7", "#f9f8f700"]}
-            locations={[0, 0.5, 1]}
-            style={styles.gradient}
+  return (
+    <LinearGradient
+      colors={["#f9f8f700", "#f9f8f7", "#f9f8f700"]}
+      locations={[0, 0.5, 1]}
+      style={styles.gradient}
+    >
+      <View style={styles.buttonContainer}>
+        <Button
+          marginH-25
+          size={ButtonSize.large}
+          style={styles.button}
+          onPress={() => setIsVisible(!isVisible)}
        >
-            <View style={styles.buttonContainer}>
-                <Button
-                    marginH-25
-                    size={ButtonSize.large}
-                    style={styles.button}
-                    onPress={() => setIsVisible(!isVisible)}
-                >
-                    <AntDesign name="plus" size={24} color="white"/>
-                    <Text white text60R marginL-10>
-                        Create new to do
-                    </Text>
-                </Button>
-            </View>
-            <AddChoreDialog isVisible={isVisible} setIsVisible={setIsVisible}/>
-        </LinearGradient>
-    );
+          <AntDesign name="plus" size={24} color="white" />
+          <Text
+            white
+            style={{ fontFamily: "Manrope_600SemiBold", fontSize: 15 }}
+            marginL-10
+          >
+            Create new to do
+          </Text>
+        </Button>
+      </View>
+      <AddChoreDialog isVisible={isVisible} setIsVisible={setIsVisible} />
+    </LinearGradient>
+  );
 };

 export default AddChore;

 const styles = StyleSheet.create({
-    gradient: {
-        height: 150,
-        position: "absolute",
-        bottom: 0,
-        width: "100%",
-        justifyContent: "center",
-        alignItems: "center",
-    },
-    buttonContainer: {
-        width: "100%",
-        alignItems: "center",
-    },
-    button: {
-        backgroundColor: "rgb(253, 23, 117)",
-        paddingVertical: 15,
-        paddingHorizontal: 30,
-        borderRadius: 30,
-    },
-});
+  gradient: {
+    height: 150,
+    position: "absolute",
+    bottom: 0,
+    width: "100%",
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  buttonContainer: {
+    width: "100%",
+    alignItems: "center",
+  },
+  button: {
+    backgroundColor: "rgb(253, 23, 117)",
+    paddingVertical: 15,
+    paddingHorizontal: 30,
+    borderRadius: 30,
+    width: 335,
+  },
+});
--- a/components/pages/todos/AddChoreDialog.tsx
+++ b/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,
+  },
 });
--- a/components/pages/todos/RepeatFreq.tsx
+++ b/components/pages/todos/RepeatFreq.tsx
@ -0,0 +1,83 @@
+import { View, Text, TouchableOpacity, Picker } from "react-native-ui-lib";
+import React, { useEffect, useState } from "react";
+
+const RepeatFreq = () => {
+  const [weeks, setWeeks] = useState<number>(1);
+  const weekOptions: number[] = Array.from({ length: 52 }, (_, i) => i + 1);
+
+  useEffect(() => {
+  }, [weeks]);
+
+  return (
+    <View row centerV>
+      <View row centerV>
+        <RepeatOption value={"Monday"} />
+        <RepeatOption value={"Tuesday"} />
+        <RepeatOption value={"Wednesday"} />
+        <RepeatOption value={"Thirsday"} />
+        <RepeatOption value={"Friday"} />
+        <RepeatOption value={"Saturday"} />
+        <RepeatOption value={"Sunday"} />
+      </View>
+      <View row gap-5 centerV>
+        <Picker
+          centered
+          marginL-10
+          marginR-0
+          paddingR-0
+          textAlign="right"
+          trailingAccessory={
+            <Text
+              style={{ fontFamily: "Manrope_600SemiBold", color: "#fd1575" }}
+            >
+              {weeks == 1 ? "Week" : "Weeks"}
+            </Text>
+          }
+          value={weeks}
+          onChange={(value) => {
+            if (typeof value === "number") {
+              setWeeks(value);
+            }
+          }}
+          placeholder={"Select number of weeks"}
+          useWheelPicker
+          color={"#fd1575"}
+          style={{
+            maxWidth: 18,
+            fontFamily: "Manrope_700Bold",
+          }}
+          containerStyle={{
+            borderWidth: 1,
+            borderRadius: 6,
+            paddingRight: 5,
+            paddingLeft: 3,
+            borderColor: "#fd1575",
+            backgroundColor: "#ffe8f1",
+          }}
+        >
+          {weekOptions.map((num) => (
+            <Picker.Item key={num} value={num} label={`${num}`} />
+          ))}
+        </Picker>
+      </View>
+    </View>
+  );
+};
+
+export default RepeatFreq;
+
+const RepeatOption = ({ value }: { value: string }) => {
+  const [isSet, setisSet] = useState(false);
+  return (
+    <TouchableOpacity padding-10 center onPress={() => setisSet(!isSet)}>
+      <Text
+        style={{
+          fontFamily: !isSet ? "Manrope_400Regular" : "Manrope_700Bold",
+          color: isSet ? "#fd1575" : "gray",
+        }}
+      >
+        {value.at(0)}
+      </Text>
+    </TouchableOpacity>
+  );
+};
--- a/components/pages/todos/ToDosList.tsx
+++ b/components/pages/todos/ToDosList.tsx
@ -2,7 +2,13 @@ import { View, Text, TouchableOpacity, Icon } from "react-native-ui-lib";
 import React, { useState } from "react";
 import { useToDosContext } from "@/contexts/ToDosContext";
 import ToDoItem from "./ToDoItem";
-import { format, isToday, isTomorrow } from "date-fns";
+import {
+  addDays,
+  format,
+  isToday,
+  isTomorrow,
+  isWithinInterval,
+} from "date-fns";
 import { AntDesign } from "@expo/vector-icons";
 import { IToDo } from "@/hooks/firebase/types/todoData";

@ -11,12 +17,26 @@ const groupToDosByDate = (toDos: IToDo[]) => {
  return sortedTodos.reduce((groups, toDo) => {
    let dateKey;

+    const isNext7Days = (date: Date) => {
+      const today = new Date();
+      return isWithinInterval(date, { start: today, end: addDays(today, 7) });
+    };
+
+    const isNext30Days = (date: Date) => {
+      const today = new Date();
+      return isWithinInterval(date, { start: today, end: addDays(today, 30) });
+    };
+
    if (toDo.date === null) {
      dateKey = "No Date";
    } else if (isToday(toDo.date)) {
-      dateKey = "Today • " + format(toDo.date, "EEE MMM dd");
+      dateKey = "Today";
    } else if (isTomorrow(toDo.date)) {
-      dateKey = "Tomorrow • " + format(toDo.date, "EEE MMM dd");
+      dateKey = "Tomorrow";
+    } else if (isNext7Days(toDo.date)) {
+      dateKey = "Next 7 Days";
+    } else if (isNext30Days(toDo.date)) {
+      dateKey = "Next 30 Days";
    } else {
      dateKey = format(toDo.date, "EEE MMM dd");
    }
@ -110,12 +130,12 @@ const ToDosList = ({ isSettings }: { isSettings?: boolean }) => {
                flexDirection: "row",
                justifyContent: "space-between",
                alignItems: "center",
-                paddingHorizontal: 20,
-                marginVertical: 8,
+                paddingHorizontal: 0,
+                marginBottom: 4,
+                marginTop: 15,
              }}
            >
              <Text
-                text70
                style={{
                  fontFamily: "Manrope_700Bold",
                  fontSize: 15,