diff --git a/components/pages/calendar/EventCalendar.tsx b/components/pages/calendar/EventCalendar.tsx index 30379cc..af143af 100644 --- a/components/pages/calendar/EventCalendar.tsx +++ b/components/pages/calendar/EventCalendar.tsx @@ -4,13 +4,13 @@ import { ActivityIndicator, ScrollView, StyleSheet, View, ViewStyle } from "reac import { useGetEvents } from "@/hooks/firebase/useGetEvents"; import { useAtom, useAtomValue, useSetAtom } from "jotai"; import { - editVisibleAtom, - eventForEditAtom, - isAllDayAtom, - modeAtom, - refreshTriggerAtom, - selectedDateAtom, - selectedNewEventDateAtom, + editVisibleAtom, + eventForEditAtom, + isAllDayAtom, isFamilyViewAtom, + modeAtom, + refreshTriggerAtom, + selectedDateAtom, + selectedNewEventDateAtom, } from "@/components/pages/calendar/atoms"; import { useAuthContext } from "@/contexts/AuthContext"; import { CalendarEvent } from "@/components/pages/calendar/interfaces"; @@ -18,6 +18,7 @@ import { Text } from "react-native-ui-lib"; import { addDays, compareAsc, isWithinInterval, subDays } from "date-fns"; import {useCalSync} from "@/hooks/useCalSync"; import {useSyncEvents} from "@/hooks/useSyncOnScroll"; +import {colorMap} from "@/constants/colorMap"; interface EventCalendarProps { calendarHeight: number; @@ -33,9 +34,10 @@ const getTotalMinutes = () => { export const EventCalendar: React.FC = React.memo( ({ calendarHeight }) => { const { data: events, isLoading, refetch } = useGetEvents(); - const { profileData } = useAuthContext(); + const { profileData, user } = useAuthContext(); const [selectedDate, setSelectedDate] = useAtom(selectedDateAtom); const [mode, setMode] = useAtom(modeAtom); + const [isFamilyView] = useAtom(isFamilyViewAtom); const setEditVisible = useSetAtom(editVisibleAtom); const [isAllDay, setIsAllDay] = useAtom(isAllDayAtom); @@ -100,7 +102,14 @@ export const EventCalendar: React.FC = React.memo( ); const memoizedEventCellStyle = useCallback( - (event: CalendarEvent) => ({ backgroundColor: event.eventColor , fontSize: 14}), + (event: CalendarEvent) => { + let eventColor = event.eventColor; + if (!isFamilyView && event.attendees?.includes(user?.uid)) { + eventColor = profileData?.eventColor ?? colorMap.teal; + } + + return { backgroundColor: eventColor , fontSize: 14} + }, [] ); diff --git a/components/pages/calendar/ManuallyAddEventModal.tsx b/components/pages/calendar/ManuallyAddEventModal.tsx index f826e48..efb3f48 100644 --- a/components/pages/calendar/ManuallyAddEventModal.tsx +++ b/components/pages/calendar/ManuallyAddEventModal.tsx @@ -130,7 +130,7 @@ export const ManuallyAddEventModal = () => { editEvent?.end ?? initialDate ?? new Date() ); const [selectedAttendees, setSelectedAttendees] = useState( - editEvent?.participants ?? [] + editEvent?.attendees ?? [] ); const [repeatInterval, setRepeatInterval] = useState([]); @@ -187,7 +187,8 @@ export const ManuallyAddEventModal = () => { setStartDate(initialDate ?? new Date()); setEndDate(editEvent?.end ?? initialDate ?? new Date()); - setSelectedAttendees(editEvent?.participants ?? []); + setSelectedAttendees(editEvent?.attendees ?? []); + setLocation(editEvent?.location ?? ""); setRepeatInterval([]); }, [editEvent, selectedNewEventDate]); @@ -664,7 +665,7 @@ export const ManuallyAddEventModal = () => { setLocation(text)} ref={locationRef} maxLength={2000} multiline diff --git a/components/pages/calendar/interfaces.ts b/components/pages/calendar/interfaces.ts index 4e19e7e..8ac7f7d 100644 --- a/components/pages/calendar/interfaces.ts +++ b/components/pages/calendar/interfaces.ts @@ -8,7 +8,7 @@ export interface CalendarEvent { location?: string; // Optional event location allDay?: boolean; // Specifies if the event lasts all day eventColor?: string; // Optional color to represent the event - participants?: string[]; // Optional list of participants or attendees + attendees?: string[]; // Optional list of participants or attendees private?: boolean; notes?: string, overlapPosition?: number diff --git a/hooks/firebase/useGetEvents.ts b/hooks/firebase/useGetEvents.ts index 642d6c7..2644f6e 100644 --- a/hooks/firebase/useGetEvents.ts +++ b/hooks/firebase/useGetEvents.ts @@ -84,6 +84,7 @@ export const useGetEvents = () => { const eventColor = profileData?.eventColor || colorMap.pink; return { + ...event, id: event.id || Math.random().toString(36).slice(2, 9), // Generate temp ID if missing title: event.title, start: new Date(event.startDate.seconds * 1000),