diff --git a/apps/mobile/app/components/sheets/reminder/index.tsx b/apps/mobile/app/components/sheets/reminder/index.tsx index aa0b3ed65..6d2cb1424 100644 --- a/apps/mobile/app/components/sheets/reminder/index.tsx +++ b/apps/mobile/app/components/sheets/reminder/index.tsx @@ -30,6 +30,8 @@ import { Button } from "../../ui/button"; import Input from "../../ui/input"; import Notifications, { Reminder } from "../../../services/notifications"; +import Paragraph from "../../ui/typography/paragraph"; +import dayjs from "dayjs"; type ReminderSheetProps = { actionSheetRef: RefObject; @@ -42,17 +44,17 @@ const ReminderModes = Platform.OS === "ios" ? { Once: "once", - Recurring: "recurring" + Repeat: "repeat" } : { Once: "once", - Recurring: "recurring", + Repeat: "repeat", Permanent: "permanent" }; const RecurringModes = { - Weekly: "weekly", - Monthly: "monthly" + Week: "week", + Month: "month" }; const WeekDays = new Array(7).fill(true); @@ -83,15 +85,16 @@ export default function ReminderSheet({ const [reminderMode, setReminderMode] = useState( ReminderModes.Once ); - const [recurringMode, setRecurringMode] = useState(RecurringModes.Weekly); + const [recurringMode, setRecurringMode] = useState(RecurringModes.Week); const [selectedDays, setSelectedDays] = useState([]); - const [date, setDate] = useState(); - const [time, setTime] = useState(); + const [date, setDate] = useState(new Date(Date.now())); + const [time, setTime] = useState(dayjs(Date.now()).format("HH:mm")); const [reminderNotificationMode, setReminderNotificatioMode] = useState( ReminderNotificationModes.Silent ); const [isDatePickerVisible, setDatePickerVisibility] = useState(false); const [isTimePickerVisible, setTimePickerVisibility] = useState(false); + const [repeatFrequency, setRepeatFrequency] = useState(1); const title = useRef(); const details = useRef(); @@ -109,10 +112,31 @@ export default function ReminderSheet({ }; const handleConfirm = (date: Date) => { - setTime(new Date(date).toLocaleTimeString()); + setTime(dayjs(date).format("HH:mm")); setDate(date); hideDatePicker(); }; + function nth(n: number) { + return ( + ["st", "nd", "rd"][(((((n < 0 ? -n : n) + 90) % 100) - 10) % 10) - 1] || + "th" + ); + } + + function getSelectedDaysText(selectedDays: number[]) { + const text = selectedDays + .sort((a, b) => a - b) + .map((day, index) => { + const isLast = index === selectedDays.length - 1; + const isSecondLast = index === selectedDays.length - 2; + const joinWith = isSecondLast ? " & " : isLast ? "" : ", "; + return recurringMode === RecurringModes.Week + ? WeekDayNames[day as keyof typeof WeekDayNames] + joinWith + : `${day + 1}${nth(day + 1)} ${joinWith}`; + }) + .join(""); + return text; + } return ( - {reminderMode === ReminderModes.Recurring ? ( + {reminderMode === ReminderModes.Repeat ? ( + Every + {/* {Platform.OS === "android" ? ( + { + setRepeatFrequency(!text ? 1 : parseInt(text)); + }} + keyboardType="decimal-pad" + fontSize={SIZE.sm} + defaultValue="1" + height={30} + marginBottom={0} + marginRight={0} + flexGrow={0} + /> + ) : null} */} {Object.keys(RecurringModes).map((mode) => (