refactor: extract popover

apps/antalmanac/src/components/Calendar/CalendarRoot.tsx

@@ -1,20 +1,20 @@
 import 'react-big-calendar/lib/css/react-big-calendar.css';
 import './calendar.css';
 
-import { Box, Popover } from '@material-ui/core';
+import { Box } from '@material-ui/core';
 import moment from 'moment';
 import { memo, useCallback, useEffect, useMemo, useState } from 'react';
 import { Calendar, DateLocalizer, momentLocalizer, Views } from 'react-big-calendar';
 import { shallow } from 'zustand/shallow';
 
 import { CalendarToolbar } from './CalendarToolbar';
-import CourseCalendarEvent, { CalendarEvent, CourseEvent } from './CourseCalendarEvent';
+import { CalendarEvent, CourseEvent } from './CourseCalendarEvent';
 
 import { CalendarCourseEvent } from '$components/Calendar/calendar-course-event';
+import { CalendarEventPopover } from '$components/Calendar/calendar-event-popover';
 import { getDefaultFinalsStartDate, getFinalsStartDateForTerm } from '$lib/termData';
 import AppStore from '$stores/AppStore';
 import { useHoveredStore } from '$stores/HoveredStore';
-import { useSelectedEventStore } from '$stores/SelectedEventStore';
 import { useTimeFormatStore } from '$stores/SettingsStore';
 
 const localizer = momentLocalizer(moment);
@@ -34,10 +34,6 @@ export const ScheduleCalendar = memo(() => {
         (state) => [state.hoveredCalendarizedCourses, state.hoveredCalendarizedFinal],
         shallow
     );
-    const [anchorEl, selectedEvent, setSelectedEvent] = useSelectedEventStore(
-        (state) => [state.selectedEventAnchorEl, state.selectedEvent, state.setSelectedEvent],
-        shallow
-    );
 
     const getEventsForCalendar = useCallback((): CalendarEvent[] => {
         if (showFinalsSchedule)
@@ -56,14 +52,10 @@ export const ScheduleCalendar = memo(() => {
 
     const events = useMemo(() => getEventsForCalendar(), [getEventsForCalendar]);
 
-    const handleClosePopover = useCallback(() => {
-        setSelectedEvent(null, null);
-    }, [setSelectedEvent]);
-
     const toggleDisplayFinalsSchedule = useCallback(() => {
-        handleClosePopover();
+        // handleClosePopover();
         setShowFinalsSchedule((prevState) => !prevState);
-    }, [handleClosePopover]);
+    }, []);
 
     /**
      * Finds the earliest start time and returns that or 7AM, whichever is earlier
@@ -190,27 +182,7 @@ export const ScheduleCalendar = memo(() => {
             />
 
             <Box id="screenshot" height="0" flexGrow={1}>
-                {selectedEvent ? (
-                    <Popover
-                        anchorEl={anchorEl}
-                        open={Boolean(anchorEl) && !!selectedEvent}
-                        onClose={handleClosePopover}
-                        anchorOrigin={{
-                            vertical: 'bottom',
-                            horizontal: 'left',
-                        }}
-                        transformOrigin={{
-                            vertical: 'top',
-                            horizontal: 'left',
-                        }}
-                    >
-                        <CourseCalendarEvent
-                            closePopover={handleClosePopover}
-                            selectedEvent={selectedEvent}
-                            scheduleNames={scheduleNames}
-                        />
-                    </Popover>
-                ) : null}
+                <CalendarEventPopover />
 
                 <Calendar<CalendarEvent, object>
                     localizer={localizer}
@@ -234,8 +206,6 @@ export const ScheduleCalendar = memo(() => {
                     eventPropGetter={eventStyleGetter}
                     showMultiDayTimes={false}
                     components={components}
-                    onSelectEvent={undefined}
-                    onSelectSlot={undefined}
                 />
             </Box>
         </Box>

apps/antalmanac/src/components/Calendar/CourseCalendarEvent.tsx

@@ -23,7 +23,6 @@ import { formatTimes } from '$stores/calendarizeHelpers';
 const styles: Styles<Theme, object> = {
     courseContainer: {
         padding: '0.5rem',
-        margin: '0 0.5rem',
         minWidth: '15rem',
     },
     customEventContainer: {

apps/antalmanac/src/components/Calendar/calendar-course-event.tsx

@@ -10,7 +10,6 @@ export const CalendarCourseEvent = memo(({ event }: { event: CalendarEvent }) =>
     const setSelectedEvent = useSelectedEventStore((state) => state.setSelectedEvent, shallow);
 
     const handleClick = (e: React.MouseEvent) => {
-        console.log('what');
         e.preventDefault();
         e.stopPropagation();
 

apps/antalmanac/src/components/Calendar/calendar-event-popover.tsx

@@ -0,0 +1,58 @@
+import { Popover } from '@mui/material';
+import { useCallback, useEffect, useState } from 'react';
+import { shallow } from 'zustand/shallow';
+
+import CourseCalendarEvent from '$components/Calendar/CourseCalendarEvent';
+import AppStore from '$stores/AppStore';
+import { useSelectedEventStore } from '$stores/SelectedEventStore';
+
+export function CalendarEventPopover() {
+    const [anchorEl, selectedEvent, setSelectedEvent] = useSelectedEventStore(
+        (state) => [state.selectedEventAnchorEl, state.selectedEvent, state.setSelectedEvent],
+        shallow
+    );
+
+    const [scheduleNames, setScheduleNames] = useState(() => AppStore.getScheduleNames());
+
+    const handleClosePopover = useCallback(() => {
+        setSelectedEvent(null, null);
+    }, [setSelectedEvent]);
+
+    useEffect(() => {
+        const updateScheduleNames = () => {
+            setScheduleNames(AppStore.getScheduleNames());
+        };
+
+        AppStore.on('scheduleNamesChange', updateScheduleNames);
+
+        return () => {
+            AppStore.off('scheduleNamesChange', updateScheduleNames);
+        };
+    }, []);
+
+    if (!selectedEvent) {
+        return null;
+    }
+
+    return (
+        <Popover
+            anchorEl={anchorEl}
+            open={Boolean(anchorEl) && !!selectedEvent}
+            onClose={handleClosePopover}
+            anchorOrigin={{
+                vertical: 'bottom',
+                horizontal: 'left',
+            }}
+            transformOrigin={{
+                vertical: 'top',
+                horizontal: 'left',
+            }}
+        >
+            <CourseCalendarEvent
+                closePopover={handleClosePopover}
+                selectedEvent={selectedEvent}
+                scheduleNames={scheduleNames}
+            />
+        </Popover>
+    );
+}