diff --git a/app/add.modal.tsx b/app/add.modal.tsx index 76df3df..a0bd802 100644 --- a/app/add.modal.tsx +++ b/app/add.modal.tsx @@ -2,6 +2,7 @@ import { LinearGradient } from "expo-linear-gradient"; import React, { useCallback, useEffect, useState } from "react"; import { BackHandler, + ScrollView, StyleSheet, Text, TouchableOpacity, @@ -12,7 +13,7 @@ import { Button, Icon, TextInput } from "react-native-paper"; import FancyDatePicker from "@/components/FancyDatePicker"; import { useCounterContext } from "@/context/counterContext"; -import { CounterType } from "@/types/counter"; +import { CounterType, Recurrence } from "@/types/counter"; import { getMonthAsNum } from "@/types/date"; import { useNavigation } from "expo-router"; // Import useNavigation from expo-router import { @@ -49,6 +50,10 @@ export default function AddModalScreen() { const [date, setDate] = useState(new Date()); const [error, setError] = useState(""); const [showTimeExpanded, setShowTimeExpanded] = useState(false); + const [recurrence, setRecurrence] = useState("none"); + const [customDays, setCustomDays] = useState(""); + const [showRecurrencePicker, setShowRecurrencePicker] = + useState(false); const { addCounter } = useCounterContext(); @@ -165,8 +170,14 @@ export default function AddModalScreen() { addCounter({ name: newCounterName.trim(), - createdAt: date ? date.getTime() : Date.now(), // Use selected date or current time + + createdAt: date ? date.getTime() : Date.now(), type: type, + recurrence: type === "countdown" ? recurrence : "none", + customRecurrenceDays: + type === "countdown" && recurrence === "custom" + ? parseInt(customDays) || undefined + : undefined, }); // After adding, dismiss the modal navigation.goBack(); @@ -221,7 +232,12 @@ export default function AddModalScreen() { - + {/* */} + {/* Recurrence Picker - only show for countdown */} + {type === "countdown" && ( + + {/* Trigger Button */} + setShowRecurrencePicker(!showRecurrencePicker)} + style={[ + styles.recurrenceTrigger, + recurrence !== "none" && styles.recurrenceTriggerActive, + ]} + > + + + + + + + REPEATS + + + {recurrence === "none" + ? "Does not repeat" + : recurrence === "custom" + ? `Every ${customDays || "X"} days` + : recurrence.charAt(0).toUpperCase() + + recurrence.slice(1)} + + + + + + + {/* Options Panel */} + {showRecurrencePicker && ( + + {( + [ + "none", + "daily", + "weekly", + "monthly", + "yearly", + "custom", + ] as Recurrence[] + ).map((option) => { + const icons: Record = { + none: "close-circle-outline", + daily: "calendar-today", + weekly: "calendar-week", + monthly: "calendar-month", + yearly: "cake-variant", + custom: "calendar-edit", + }; + const labels: Record = { + none: "Does not repeat", + daily: "Daily", + weekly: "Weekly", + monthly: "Monthly", + yearly: "Yearly", + custom: "Custom", + }; + const descriptions: Record = { + none: "One-time event", + daily: "Every day", + weekly: "Every 7 days", + monthly: "Every month", + yearly: "Every year", + custom: "Set custom interval", + }; + const isSelected = recurrence === option; + + return ( + { + setRecurrence(option); + if (option !== "custom") { + setShowRecurrencePicker(false); + } + }} + style={[ + styles.recurrenceOptionModern, + isSelected && styles.recurrenceOptionModernActive, + ]} + > + + + + + + {labels[option]} + + + {descriptions[option]} + + + {isSelected && ( + + )} + + ); + })} + + {/* Custom days input */} + {recurrence === "custom" && ( + + + Repeat every + + + + days + + + )} + + )} + + )} +