Add custom event to the route (#853)

apps/antalmanac/src/components/Map/Map.tsx

@@ -148,7 +148,7 @@ export default function CourseMap() {
     const [searchParams] = useSearchParams();
     const [selectedDayIndex, setSelectedDay] = useState(0);
     const [markers, setMarkers] = useState(getCoursesPerBuilding());
-    const [customEventMarkers] = useState(getCustomEventPerBuilding());
+    const [customEventMarkers, setCustomEventMarkers] = useState(getCustomEventPerBuilding());
     const [calendarEvents, setCalendarEvents] = useState(AppStore.getCourseEventsInCalendar());
 
     useEffect(() => {
@@ -181,6 +181,20 @@ export default function CourseMap() {
         };
     }, []);
 
+    useEffect(() => {
+        const updateCustomEventMarkers = () => {
+            setCustomEventMarkers(getCustomEventPerBuilding());
+        };
+
+        AppStore.on('customEventsChange', updateCustomEventMarkers);
+        AppStore.on('currentScheduleIndexChange', updateCustomEventMarkers);
+
+        return () => {
+            AppStore.removeListener('customEventsChange', updateCustomEventMarkers);
+            AppStore.removeListener('currentScheduleIndexChange', updateCustomEventMarkers);
+        };
+    }, []);
+
     useEffect(() => {
         const locationID = Number(searchParams.get('location') ?? 0);
         const building = locationID in buildingCatalogue ? buildingCatalogue[locationID] : undefined;
@@ -274,17 +288,15 @@ export default function CourseMap() {
      * Every two markers grouped as [start, destination] tuples for the routes.
      */
     const startDestPairs = useMemo(() => {
-        return markersToDisplay.reduce(
-            (acc, cur, index) => {
-                acc.push([cur]);
-                if (index > 0) {
-                    acc[index - 1].push(cur);
-                }
-                return acc;
-            },
-            [] as (typeof markersToDisplay)[]
-        );
-    }, [markersToDisplay]);
+        const allEvents = [...markersToDisplay, ...customEventMarkersToDisplay];
+        return allEvents.reduce((acc, cur, index) => {
+            acc.push([cur]);
+            if (index > 0) {
+                acc[index - 1].push(cur);
+            }
+            return acc;
+        }, [] as (typeof allEvents)[]);
+    }, [markersToDisplay, customEventMarkersToDisplay]);
 
     return (
         <Box