diff --git a/components/pages/calendar/ManuallyAddEventModal.tsx b/components/pages/calendar/ManuallyAddEventModal.tsx index 326f4e2..70795ed 100644 --- a/components/pages/calendar/ManuallyAddEventModal.tsx +++ b/components/pages/calendar/ManuallyAddEventModal.tsx @@ -1,647 +1,663 @@ import { - Button, - ButtonSize, - Colors, - DateTimePicker, - LoaderScreen, - Modal, - Picker, - PickerModes, - Switch, - Text, - TextField, - TextFieldRef, - TouchableOpacity, - View, + Button, + ButtonSize, + Colors, + DateTimePicker, + LoaderScreen, + Modal, + Picker, + PickerModes, + Switch, + Text, + TextField, + TextFieldRef, + TouchableOpacity, + View, } from "react-native-ui-lib"; -import { ScrollView } from "react-native-gesture-handler"; -import { useSafeAreaInsets } from "react-native-safe-area-context"; -import { useEffect, useRef, useState } from "react"; -import { AntDesign, Feather, Ionicons } from "@expo/vector-icons"; -import { PickerMultiValue } from "react-native-ui-lib/src/components/picker/types"; -import { useCreateEvent } from "@/hooks/firebase/useCreateEvent"; -import { EventData } from "@/hooks/firebase/types/eventData"; -import { addHours } from "date-fns"; +import {ScrollView} from "react-native-gesture-handler"; +import {useSafeAreaInsets} from "react-native-safe-area-context"; +import {useEffect, useRef, useState} from "react"; +import {AntDesign, Feather, Ionicons} from "@expo/vector-icons"; +import {PickerMultiValue} from "react-native-ui-lib/src/components/picker/types"; +import {useCreateEvent} from "@/hooks/firebase/useCreateEvent"; +import {EventData} from "@/hooks/firebase/types/eventData"; +import {addHours} from "date-fns"; import DropModalIcon from "@/assets/svgs/DropModalIcon"; -import { StyleSheet } from "react-native"; +import {StyleSheet} from "react-native"; import ClockIcon from "@/assets/svgs/ClockIcon"; import LockIcon from "@/assets/svgs/LockIcon"; import MenuIcon from "@/assets/svgs/MenuIcon"; import CameraIcon from "@/assets/svgs/CameraIcon"; import AssigneesDisplay from "@/components/shared/AssigneesDisplay"; -import { useAtom } from "jotai"; -import { - eventForEditAtom, - selectedNewEventDateAtom, -} from "@/components/pages/calendar/atoms"; -import { useGetFamilyMembers } from "@/hooks/firebase/useGetFamilyMembers"; +import {useAtom} from "jotai"; +import {eventForEditAtom, selectedNewEventDateAtom,} from "@/components/pages/calendar/atoms"; +import {useGetFamilyMembers} from "@/hooks/firebase/useGetFamilyMembers"; import BinIcon from "@/assets/svgs/BinIcon"; -import CloseXIcon from "@/assets/svgs/CloseXIcon"; -import PenIcon from "@/assets/svgs/PenIcon"; import DeleteEventDialog from "./DeleteEventDialog"; +import {useDeleteEvent} from "@/hooks/firebase/useDeleteEvent"; const daysOfWeek = [ - { label: "Monday", value: "monday" }, - { label: "Tuesday", value: "tuesday" }, - { label: "Wednesday", value: "wednesday" }, - { label: "Thursday", value: "thursday" }, - { label: "Friday", value: "friday" }, - { label: "Saturday", value: "saturday" }, - { label: "Sunday", value: "sunday" }, + {label: "Monday", value: "monday"}, + {label: "Tuesday", value: "tuesday"}, + {label: "Wednesday", value: "wednesday"}, + {label: "Thursday", value: "thursday"}, + {label: "Friday", value: "friday"}, + {label: "Saturday", value: "saturday"}, + {label: "Sunday", value: "sunday"}, ]; export const ManuallyAddEventModal = () => { - const insets = useSafeAreaInsets(); + const insets = useSafeAreaInsets(); - const [selectedNewEventDate, setSelectedNewEndDate] = useAtom( - selectedNewEventDateAtom - ); - const [editEvent, setEditEvent] = useAtom(eventForEditAtom); - const [deleteModalVisible, setDeleteModalVisible] = useState(false); + const [selectedNewEventDate, setSelectedNewEndDate] = useAtom( + selectedNewEventDateAtom + ); + const [editEvent, setEditEvent] = useAtom(eventForEditAtom); + const [deleteModalVisible, setDeleteModalVisible] = useState(false); + const {mutateAsync: deleteEvent, isLoading: isDeleting} = useDeleteEvent() - const showDeleteEventModal = () => { - setDeleteModalVisible(true); - }; - - const handleDeleteEvent = () => {}; - - const hideDeleteEventModal = () => { - setDeleteModalVisible(false); - }; - - const { show, close, initialDate } = { - show: !!selectedNewEventDate || !!editEvent, - close: () => { - setSelectedNewEndDate(undefined); - setEditEvent(undefined); - }, - initialDate: selectedNewEventDate || editEvent?.start, - }; - - const detailsRef = useRef(null); - - const [title, setTitle] = useState(editEvent?.title || ""); - const [details, setDetails] = useState(editEvent?.notes || ""); - const [isAllDay, setIsAllDay] = useState(editEvent?.allDay || false); - const [isPrivate, setIsPrivate] = useState( - editEvent?.private || false - ); - const [startTime, setStartTime] = useState(() => { - const date = initialDate ?? new Date(); - date.setSeconds(0, 0); - return date; - }); - const [endTime, setEndTime] = useState(() => { - if (editEvent?.end) { - const date = new Date(editEvent.end); - date.setSeconds(0, 0); - return date; - } - const date = - editEvent?.end ?? initialDate - ? addHours(editEvent?.end ?? initialDate!, 1) - : addHours(new Date(), 1); - date.setSeconds(0, 0); - return date; - }); - const [startDate, setStartDate] = useState(initialDate ?? new Date()); - const [endDate, setEndDate] = useState( - editEvent?.end ?? initialDate ?? new Date() - ); - const [selectedAttendees, setSelectedAttendees] = useState( - editEvent?.participants ?? [] - ); - const [repeatInterval, setRepeatInterval] = useState([]); - - const { mutateAsync: createEvent, isLoading, isError } = useCreateEvent(); - const { data: members } = useGetFamilyMembers(true); - - useEffect(() => { - setTitle(editEvent?.title || ""); - setDetails(editEvent?.notes || ""); - setIsAllDay(editEvent?.allDay || false); - setIsPrivate(editEvent?.private || false); - setStartTime(() => { - const date = initialDate ?? new Date(); - date.setSeconds(0, 0); - return date; - }); - setEndTime(() => { - if (editEvent?.end) { - const date = new Date(editEvent.end); - date.setSeconds(0, 0); - return date; - } - const date = - editEvent?.end ?? initialDate - ? addHours(editEvent?.end ?? initialDate!, 1) - : addHours(new Date(), 1); - date.setSeconds(0, 0); - return date; - }); - setStartDate(initialDate ?? new Date()); - setEndDate(editEvent?.end ?? initialDate ?? new Date()); - setSelectedAttendees(editEvent?.participants ?? []); - setRepeatInterval([]); - }, [editEvent, selectedNewEventDate]); - - if (!show) return null; - - const formatDateTime = (date?: Date | string) => { - if (!date) return undefined; - return new Date(date).toLocaleDateString("en-US", { - weekday: "long", - month: "short", - day: "numeric", - }); - }; - - const combineDateAndTime = (date: Date, time: Date): Date => { - const combined = new Date(date); - combined.setHours(time.getHours()); - combined.setMinutes(time.getMinutes()); - combined.setSeconds(0); - combined.setMilliseconds(0); - return combined; - }; - - const handleSave = async () => { - let finalStartDate: Date; - let finalEndDate: Date; - - if (isAllDay) { - finalStartDate = new Date(startDate.setHours(0, 0, 0, 0)); - finalEndDate = new Date(startDate.setHours(0, 0, 0, 0)); - } else { - finalStartDate = combineDateAndTime(startDate, startTime); - finalEndDate = combineDateAndTime(endDate, endTime); - } - - const eventData: Partial = { - title: title, - startDate: finalStartDate, - endDate: finalEndDate, - allDay: isAllDay, - attendees: selectedAttendees, - notes: details, + const {show, close, initialDate} = { + show: !!selectedNewEventDate || !!editEvent, + close: () => { + setDeleteModalVisible(false); + setSelectedNewEndDate(undefined); + setEditEvent(undefined); + }, + initialDate: selectedNewEventDate || editEvent?.start, }; - if (editEvent?.id) eventData.id = editEvent?.id; + const detailsRef = useRef(null); - await createEvent(eventData); - setEditEvent(undefined); - - close(); - }; - - const getRepeatLabel = () => { - const selectedDays = repeatInterval; - const allDays = [ - "sunday", - "monday", - "tuesday", - "wednesday", - "thursday", - "friday", - "saturday", - ]; - const workDays = ["monday", "tuesday", "wednesday", "thursday", "friday"]; - - const isEveryWorkDay = workDays.every((day) => selectedDays.includes(day)); - - const isEveryDay = allDays.every((day) => selectedDays.includes(day)); - - if (isEveryDay) { - return "Every day"; - } else if ( - isEveryWorkDay && - !selectedDays.includes("saturday") && - !selectedDays.includes("sunday") - ) { - return "Every work day"; - } else { - return selectedDays - .map((item) => daysOfWeek.find((day) => day.value === item)?.label) - .join(", "); - } - }; - - if (isLoading && !isError) { - return ( - - - + const [title, setTitle] = useState(editEvent?.title || ""); + const [details, setDetails] = useState(editEvent?.notes || ""); + const [isAllDay, setIsAllDay] = useState(editEvent?.allDay || false); + const [isPrivate, setIsPrivate] = useState( + editEvent?.private || false ); - } + const [startTime, setStartTime] = useState(() => { + const date = initialDate ?? new Date(); + date.setSeconds(0, 0); + return date; + }); + const [endTime, setEndTime] = useState(() => { + if (editEvent?.end) { + const date = new Date(editEvent.end); + date.setSeconds(0, 0); + return date; + } + const date = + editEvent?.end ?? initialDate + ? addHours(editEvent?.end ?? initialDate!, 1) + : addHours(new Date(), 1); + date.setSeconds(0, 0); + return date; + }); + const [startDate, setStartDate] = useState(initialDate ?? new Date()); + const [endDate, setEndDate] = useState( + editEvent?.end ?? initialDate ?? new Date() + ); + const [selectedAttendees, setSelectedAttendees] = useState( + editEvent?.participants ?? [] + ); + const [repeatInterval, setRepeatInterval] = useState([]); - return ( - - - {editEvent ? ( - <> - - - - - - -