Revert "Don't spin on scroll"

This reverts commit 1903e4072c.

components/pages/calendar/DetailedCalendar.tsx

@@ -1,4 +1,4 @@
-import React, {useCallback, useMemo, useRef} from "react";
+import React, {useCallback, useEffect, useMemo, useRef} from "react";
 import {useAuthContext} from "@/contexts/AuthContext";
 import {useAtomValue} from "jotai";
 import {modeAtom, selectedDateAtom, selectedUserAtom} from "@/components/pages/calendar/atoms";
@@ -21,14 +21,11 @@ export const DetailedCalendar: React.FC<EventCalendarProps> = ({calendarHeight,
     const selectedDate = useAtomValue(selectedDateAtom);
     const mode = useAtomValue(modeAtom);
     const {data: familyMembers} = useGetFamilyMembers();
-    const personalCalendarRef = useRef<CalendarKitHandle>(null);
+    const calendarRef = useRef<CalendarKitHandle>(null);
-    const familyCalendarRef = useRef<CalendarKitHandle>(null);
     const {data: events} = useGetEvents();
     const selectedUser = useAtomValue(selectedUserAtom);
 
-    const {data: personalEvents} = useFormattedEvents(events ?? [], selectedDate, profileData?.uid);
+    const {data: formattedEvents} = useFormattedEvents(events ?? [], selectedDate, selectedUser);
-    const {data: familyEvents} = useFormattedEvents(events ?? [], selectedDate, null);
-
     const {
         handlePressEvent,
         handlePressCell,
@@ -62,70 +59,36 @@ export const DetailedCalendar: React.FC<EventCalendarProps> = ({calendarHeight,
     }), [selectedDate]);
 
     const renderEvent = useCallback((event: any) => {
-        const eventAttendees = familyMembers?.filter(member =>
+        const attendees = useMemo(() =>
-            event?.attendees?.includes(member?.uid!)
+                familyMembers?.filter(member => event?.attendees?.includes(member?.uid!)) || [],
-        ) || [];
+            [familyMembers, event.attendees]
+        );
 
         return (
             <EventCell
-                key={event.id}
                 event={event}
                 onPress={handlePressEvent}
-                attendees={eventAttendees}
+                attendees={attendees}
             />
         );
     }, [familyMembers, handlePressEvent]);
 
-    return (
+    useEffect(() => {
-        <View style={{ position: 'relative', width: calendarWidth, height: calendarHeight }}>
+        if (selectedDate && isToday(selectedDate)) {
-            <View
+            calendarRef?.current?.goToDate({date: selectedDate});
-                style={{
+        }
-                    position: 'absolute',
+    }, [selectedDate]);
-                    width: '100%',
-                    height: '100%',
-                    opacity: selectedUser?.uid === profileData?.uid ? 1 : 0,
-                    pointerEvents: selectedUser?.uid === profileData?.uid ? 'auto' : 'none',
-                    // transition: 'opacity 0.2s ease-in-out'
-                }}
-            >
-                <CalendarContainer
-                    ref={personalCalendarRef}
-                    {...containerProps}
-                    numberOfDays={numberOfDays}
-                    calendarWidth={calendarWidth}
-                    onDateChanged={debouncedOnDateChanged}
-                    firstDay={firstDay}
-                    events={personalEvents ?? []}
-                    onPressEvent={handlePressEvent}
-                    onPressBackground={handlePressCell}
-                >
-                    <CalendarHeader {...headerProps} />
-                    <CalendarBody
-                        {...bodyProps}
-                        renderEvent={renderEvent}
-                    />
-                    <View marginB-45/>
-                </CalendarContainer>
-            </View>
 
-            <View
+    return (
-                style={{
-                    position: 'absolute',
-                    width: '100%',
-                    height: '100%',
-                    opacity: selectedUser?.uid === profileData?.uid ? 0 : 1,
-                    pointerEvents: selectedUser?.uid === profileData?.uid ? 'none' : 'auto',
-                    // transition: 'opacity 0.2s ease-in-out'
-                }}
-            >
         <CalendarContainer
-                    ref={familyCalendarRef}
+            ref={calendarRef}
             {...containerProps}
             numberOfDays={numberOfDays}
             calendarWidth={calendarWidth}
+            
             onDateChanged={debouncedOnDateChanged}
             firstDay={firstDay}
-                    events={familyEvents ?? []}
+            events={formattedEvents ?? []}
             onPressEvent={handlePressEvent}
             onPressBackground={handlePressCell}
         >
@@ -136,8 +99,7 @@ export const DetailedCalendar: React.FC<EventCalendarProps> = ({calendarHeight,
             />
             <View marginB-45/>
         </CalendarContainer>
-            </View>
-        </View>
     );
 };
 
+export default DetailedCalendar;