Deprecate isDarkMode in favor of useThemeStore (#847)

Co-authored-by: Minh Nguyen <[email protected]>
icssc · Feb 2, 2024 · f54addd · f54addd
1 parent d2f6924
commit f54addd
Show file tree

Hide file tree

Showing 22 changed files with 157 additions and 296 deletions.
diff --git a/apps/antalmanac/src/components/Calendar/CalendarRoot.tsx b/apps/antalmanac/src/components/Calendar/CalendarRoot.tsx
@@ -53,8 +53,8 @@ const AntAlmanacEvent = ({ event }: { event: CalendarEvent }) => {
                     {event.showLocationInfo
                         ? event.locations.map((location) => `${location.building} ${location.room}`).join(', ')
                         : event.locations.length > 1
-                          ? `${event.locations.length} Locations`
-                          : `${event.locations[0].building} ${event.locations[0].room}`}
+                        ? `${event.locations.length} Locations`
+                        : `${event.locations[0].building} ${event.locations[0].room}`}
                 </Box>
                 <Box>{event.sectionCode}</Box>
             </Box>
@@ -85,8 +85,8 @@ export default function ScheduleCalendar(props: ScheduleCalendarProps) {
         return showFinalsSchedule
             ? finalsEventsInCalendar
             : hoveredCourseEvents
-              ? [...eventsInCalendar, ...hoveredCourseEvents]
-              : eventsInCalendar;
+            ? [...eventsInCalendar, ...hoveredCourseEvents]
+            : eventsInCalendar;
     };
 
     const handleClosePopover = () => {

diff --git a/apps/antalmanac/src/components/Calendar/CourseCalendarEvent.tsx b/apps/antalmanac/src/components/Calendar/CourseCalendarEvent.tsx
@@ -10,12 +10,12 @@ import CustomEventDialog from './Toolbar/CustomEventDialog/CustomEventDialog';
 import { deleteCourse, deleteCustomEvent } from '$actions/AppStoreActions';
 import ColorPicker from '$components/ColorPicker';
 import analyticsEnum, { logAnalytics } from '$lib/analytics';
-import { clickToCopy, isDarkMode } from '$lib/helpers';
+import { clickToCopy } from '$lib/helpers';
 import AppStore from '$stores/AppStore';
 import locationIds from '$lib/location_ids';
 import { useTabStore } from '$stores/TabStore';
 import { formatTimes } from '$stores/calendarizeHelpers';
-import { useTimeFormatStore } from '$stores/SettingsStore';
+import { useTimeFormatStore, useThemeStore } from '$stores/SettingsStore';
 import buildingCatalogue from '$lib/buildingCatalogue';
 
 const styles: Styles<Theme, object> = {
@@ -74,7 +74,6 @@ const styles: Styles<Theme, object> = {
 
     clickableLocation: {
         cursor: 'pointer',
-        color: isDarkMode() ? '#1cbeff' : 'blue',
         background: 'none !important',
         border: 'none',
         padding: '0 !important',
@@ -177,6 +176,7 @@ const CourseCalendarEvent = (props: CourseCalendarEventProps) => {
 
     const { setActiveTab } = useTabStore();
     const { isMilitaryTime } = useTimeFormatStore();
+    const isDark = useThemeStore((store) => store.isDark);
 
     const focusMap = useCallback(() => {
         setActiveTab(2);
@@ -262,6 +262,7 @@ const CourseCalendarEvent = (props: CourseCalendarEventProps) => {
                                             className={classes.clickableLocation}
                                             to={`/map?location=${locationIds[location.building] ?? 0}`}
                                             onClick={focusMap}
+                                            color={isDark ? '#1cbeff' : 'blue'}
                                         >
                                             {location.building} {location.room}
                                         </Link>

diff --git a/apps/antalmanac/src/components/Calendar/Toolbar/CustomEventDialog/CustomEventDialog.tsx b/apps/antalmanac/src/components/Calendar/Toolbar/CustomEventDialog/CustomEventDialog.tsx
@@ -19,7 +19,7 @@ import DaySelector from './DaySelector';
 import ScheduleSelector from './ScheduleSelector';
 import { addCustomEvent, editCustomEvent } from '$actions/AppStoreActions';
 import analyticsEnum, { logAnalytics } from '$lib/analytics';
-import { isDarkMode } from '$lib/helpers';
+import { useThemeStore } from '$stores/SettingsStore';
 import AppStore from '$stores/AppStore';
 import { BuildingSelect, ExtendedBuilding } from '$components/inputs/building-select';
 
@@ -139,6 +139,7 @@ function CustomEventDialogs(props: CustomEventDialogProps) {
         };
     }, []);
 
+    const isDark = useThemeStore.getState().isDark;
     return (
         <>
             {props.customEvent ? (
@@ -218,15 +219,15 @@ function CustomEventDialogs(props: CustomEventDialogProps) {
                 </DialogContent>
 
                 <DialogActions>
-                    <Button onClick={handleClose} color={isDarkMode() ? 'secondary' : 'primary'}>
+                    <Button onClick={handleClose} color={isDark ? 'secondary' : 'primary'}>
                         Cancel
                     </Button>
                     <Button onClick={handleSubmit} variant="contained" color="primary" disabled={disabled}>
                         {disabled
                             ? 'Schedule and day must be checked'
                             : props.customEvent
-                              ? 'Save Changes'
-                              : 'Add Event'}
+                            ? 'Save Changes'
+                            : 'Add Event'}
                     </Button>
                 </DialogActions>
             </Dialog>

diff --git a/apps/antalmanac/src/components/Calendar/Toolbar/EditSchedule/DeleteScheduleDialog.tsx b/apps/antalmanac/src/components/Calendar/Toolbar/EditSchedule/DeleteScheduleDialog.tsx
@@ -14,7 +14,7 @@ import { useState } from 'react';
 import { Clear } from '@material-ui/icons';
 
 import { deleteSchedule } from '$actions/AppStoreActions';
-import { isDarkMode } from '$lib/helpers';
+import { useThemeStore } from '$stores/SettingsStore';
 import AppStore from '$stores/AppStore';
 
 interface DeleteScheduleDialogProps {
@@ -23,6 +23,8 @@ interface DeleteScheduleDialogProps {
 }
 
 const DeleteScheduleDialog = (props: DeleteScheduleDialogProps) => {
+    const isDark = useThemeStore((store) => store.isDark);
+
     const { scheduleIndex } = props;
 
     const [isOpen, setIsOpen] = useState(false);
@@ -58,7 +60,7 @@ const DeleteScheduleDialog = (props: DeleteScheduleDialogProps) => {
                     </DialogContentText>
                 </DialogContent>
                 <DialogActions>
-                    <Button onClick={handleClose} color={isDarkMode() ? 'secondary' : 'primary'}>
+                    <Button onClick={handleClose} color={isDark ? 'secondary' : 'primary'}>
                         Cancel
                     </Button>
                     <Button onClick={handleDelete} variant="contained" color="primary">

diff --git a/apps/antalmanac/src/components/Calendar/Toolbar/EditSchedule/ScheduleNameDialog.tsx b/apps/antalmanac/src/components/Calendar/Toolbar/EditSchedule/ScheduleNameDialog.tsx
@@ -15,7 +15,7 @@ import { ClassNameMap } from '@material-ui/core/styles/withStyles';
 import { Add, Edit } from '@material-ui/icons';
 
 import { addSchedule, renameSchedule } from '$actions/AppStoreActions';
-import { isDarkMode } from '$lib/helpers';
+import { useThemeStore } from '$stores/SettingsStore';
 
 const styles = () => ({
     addButton: {
@@ -35,6 +35,8 @@ interface ScheduleNameDialogProps {
 }
 
 const ScheduleNameDialog = forwardRef((props: ScheduleNameDialogProps, ref) => {
+    const isDark = useThemeStore((store) => store.isDark);
+
     const { classes, onOpen, onClose, scheduleNames, scheduleRenameIndex } = props;
 
     const [isOpen, setIsOpen] = useState(false);
@@ -143,7 +145,7 @@ const ScheduleNameDialog = forwardRef((props: ScheduleNameDialogProps, ref) => {
                 </DialogContent>
 
                 <DialogActions>
-                    <Button onClick={handleCancel} color={isDarkMode() ? 'secondary' : 'primary'}>
+                    <Button onClick={handleCancel} color={isDark ? 'secondary' : 'primary'}>
                         Cancel
                     </Button>
                     <Button

diff --git a/apps/antalmanac/src/components/Header/LoadSaveFunctionality.tsx b/apps/antalmanac/src/components/Header/LoadSaveFunctionality.tsx
@@ -14,14 +14,15 @@ import { ChangeEvent, PureComponent, useEffect, useState } from 'react';
 
 import { LoadingButton } from '@mui/lab';
 import { loadSchedule, saveSchedule } from '$actions/AppStoreActions';
-import { isDarkMode } from '$lib/helpers';
+import { useThemeStore } from '$stores/SettingsStore';
 import AppStore from '$stores/AppStore';
 
 interface LoadSaveButtonBaseProps {
     action: typeof saveSchedule;
     actionName: 'Save' | 'Load';
     disabled: boolean;
     loading: boolean;
+    colorType: 'primary' | 'secondary';
     id?: string;
 }
 
@@ -129,10 +130,10 @@ class LoadSaveButtonBase extends PureComponent<LoadSaveButtonBaseProps, LoadSave
                         />
                     </DialogContent>
                     <DialogActions>
-                        <Button onClick={() => this.handleClose(true)} color={isDarkMode() ? 'secondary' : 'primary'}>
+                        <Button onClick={() => this.handleClose(true)} color={this.props.colorType}>
                             {'Cancel'}
                         </Button>
-                        <Button onClick={() => this.handleClose(false)} color={isDarkMode() ? 'secondary' : 'primary'}>
+                        <Button onClick={() => this.handleClose(false)} color={this.props.colorType}>
                             {this.props.actionName}
                         </Button>
                     </DialogActions>
@@ -143,6 +144,8 @@ class LoadSaveButtonBase extends PureComponent<LoadSaveButtonBaseProps, LoadSave
 }
 
 const LoadSaveScheduleFunctionality = () => {
+    const isDark = useThemeStore((store) => store.isDark);
+
     const [loading, setLoading] = useState(false);
     const [skeletonMode, setSkeletonMode] = useState(AppStore.getSkeletonMode());
 
@@ -181,15 +184,17 @@ const LoadSaveScheduleFunctionality = () => {
                 id="save-button"
                 actionName={'Save'}
                 action={saveSchedule}
-                disabled={loading || skeletonMode}
+                disabled={loading}
                 loading={false}
+                colorType={isDark ? 'primary' : 'secondary'}
             />
             <LoadSaveButtonBase
                 id="load-button"
                 actionName={'Load'}
                 action={loadScheduleAndSetLoading}
                 disabled={skeletonMode}
                 loading={loading}
+                colorType={isDark ? 'primary' : 'secondary'}
             />
         </div>
     );

diff --git a/apps/antalmanac/src/components/Header/SettingsMenu.tsx b/apps/antalmanac/src/components/Header/SettingsMenu.tsx
@@ -18,14 +18,15 @@ const darkSelectedStyle: CSSProperties = {
     color: '#99CCF3',
 };
 
-function getSelectedStyle(buttonValue: string, themeSetting: string, appTheme: string) {
-    return themeSetting === buttonValue ? (appTheme == 'dark' ? darkSelectedStyle : lightSelectedStyle) : {};
+function getSelectedStyle(buttonValue: string, themeSetting: string, appTheme: string, isDark: boolean) {
+    return themeSetting === buttonValue ? (isDark ? darkSelectedStyle : lightSelectedStyle) : {};
 }
 
 function ThemeMenu() {
-    const [themeSetting, appTheme, setTheme] = useThemeStore((store) => [
+    const [themeSetting, appTheme, isDark, setTheme] = useThemeStore((store) => [
         store.themeSetting,
         store.appTheme,
+        store.isDark,
         store.setAppTheme,
     ]);
 
@@ -46,7 +47,7 @@ function ThemeMenu() {
                         padding: '1rem 2rem',
                         borderRadius: '12px 0px 0px 12px',
                         width: '100%',
-                        ...getSelectedStyle('light', themeSetting, appTheme),
+                        ...getSelectedStyle('light', themeSetting, appTheme, isDark),
                     }}
                     value="light"
                     onClick={handleThemeChange}
@@ -58,7 +59,7 @@ function ThemeMenu() {
                     style={{
                         padding: '1rem 2rem',
                         width: '100%',
-                        ...getSelectedStyle('system', themeSetting, appTheme),
+                        ...getSelectedStyle('system', themeSetting, appTheme, isDark),
                     }}
                     value="system"
                     onClick={handleThemeChange}
@@ -71,7 +72,7 @@ function ThemeMenu() {
                         padding: '1rem 2rem',
                         borderRadius: '0px 12px 12px 0px',
                         width: '100%',
-                        ...getSelectedStyle('dark', themeSetting, appTheme),
+                        ...getSelectedStyle('dark', themeSetting, appTheme, isDark),
                     }}
                     value="dark"
                     onClick={handleThemeChange}
@@ -85,6 +86,7 @@ function ThemeMenu() {
 
 function TimeMenu() {
     const [isMilitaryTime, setTimeFormat] = useTimeFormatStore((store) => [store.isMilitaryTime, store.setTimeFormat]);
+    const isDark = useThemeStore((store) => store.isDark);
     const theme = useThemeStore((store) => store.appTheme);
 
     const handleTimeFormatChange = (event: React.MouseEvent<HTMLButtonElement>) => {
@@ -110,7 +112,7 @@ function TimeMenu() {
                         borderRadius: '12px 0px 0px 12px',
                         width: '100%',
                         fontSize: '12px',
-                        ...getSelectedStyle('false', isMilitaryTime.toString(), theme),
+                        ...getSelectedStyle('false', isMilitaryTime.toString(), theme, isDark),
                     }}
                     value="false"
                     onClick={handleTimeFormatChange}
@@ -124,7 +126,7 @@ function TimeMenu() {
                         borderRadius: '0px 12px 12px 0px',
                         width: '100%',
                         fontSize: '12px',
-                        ...getSelectedStyle('true', isMilitaryTime.toString(), theme),
+                        ...getSelectedStyle('true', isMilitaryTime.toString(), theme, isDark),
                     }}
                     value="true"
                     onClick={handleTimeFormatChange}

diff --git a/apps/antalmanac/src/components/Map/Map.tsx b/apps/antalmanac/src/components/Map/Map.tsx
@@ -291,16 +291,13 @@ export default function CourseMap() {
      */
     const startDestPairs = useMemo(() => {
         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)[]
-        );
+        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 (

diff --git a/apps/antalmanac/src/components/RightPane/AddedCourses/AddedCoursePane.tsx b/apps/antalmanac/src/components/RightPane/AddedCourses/AddedCoursePane.tsx
@@ -303,14 +303,11 @@ function SkeletonSchedule() {
     }, []);
 
     const sectionsByTerm: [string, string[]][] = useMemo(() => {
-        const result = skeletonSchedule.courses.reduce(
-            (accumulated, course) => {
-                accumulated[course.term] ??= [];
-                accumulated[course.term].push(course.sectionCode);
-                return accumulated;
-            },
-            {} as Record<string, string[]>
-        );
+        const result = skeletonSchedule.courses.reduce((accumulated, course) => {
+            accumulated[course.term] ??= [];
+            accumulated[course.term].push(course.sectionCode);
+            return accumulated;
+        }, {} as Record<string, string[]>);
 
         return Object.entries(result);
     }, [skeletonSchedule.courses]);

diff --git a/apps/antalmanac/src/components/RightPane/CoursePane/CourseRenderPane.tsx b/apps/antalmanac/src/components/RightPane/CoursePane/CourseRenderPane.tsx
@@ -14,20 +14,17 @@ import loadingGif from './SearchForm/Gifs/loading.gif';
 import darkNoNothing from './static/dark-no_results.png';
 import noNothing from './static/no_results.png';
 import AppStore from '$stores/AppStore';
-import { isDarkMode } from '$lib/helpers';
+import { useThemeStore } from '$stores/SettingsStore';
 import Grades from '$lib/grades';
 import analyticsEnum from '$lib/analytics';
 import { openSnackbar } from '$actions/AppStoreActions';
 import WebSOC from '$lib/websoc';
 
 function getColors() {
-    const courseColors = AppStore.schedule.getCurrentCourses().reduce(
-        (accumulator, { section }) => {
-            accumulator[section.sectionCode] = section.color;
-            return accumulator;
-        },
-        {} as { [key: string]: string }
-    );
+    const courseColors = AppStore.schedule.getCurrentCourses().reduce((accumulator, { section }) => {
+        accumulator[section.sectionCode] = section.color;
+        return accumulator;
+    }, {} as { [key: string]: string });
 
     return courseColors;
 }
@@ -55,6 +52,8 @@ const flattenSOCObject = (SOCObject: WebsocAPIResponse): (WebsocSchool | WebsocD
 const RecruitmentBanner = () => {
     const [bannerVisibility, setBannerVisibility] = useState(true);
 
+    const isDark = useThemeStore((store) => store.isDark);
+
     // Display recruitment banner if more than 11 weeks (in ms) has passed since last dismissal
     const recruitmentDismissalTime = window.localStorage.getItem('recruitmentDismissalTime');
     const dismissedRecently =
@@ -70,8 +69,8 @@ const RecruitmentBanner = () => {
                     icon={false}
                     severity="info"
                     style={{
-                        color: isDarkMode() ? '#ece6e6' : '#2e2e2e',
-                        backgroundColor: isDarkMode() ? '#2e2e2e' : '#ece6e6',
+                        color: isDark ? '#ece6e6' : '#2e2e2e',
+                        backgroundColor: isDark ? '#2e2e2e' : '#ece6e6',
                     }}
                     action={
                         <IconButton
@@ -147,18 +146,20 @@ const SectionTableWrapped = (
 };
 
 const LoadingMessage = () => {
+    const isDark = useThemeStore((store) => store.isDark);
     return (
         <Box sx={{ height: '100%', display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
-            <img src={isDarkMode() ? darkModeLoadingGif : loadingGif} alt="Loading courses" />
+            <img src={isDark ? darkModeLoadingGif : loadingGif} alt="Loading courses" />
         </Box>
     );
 };
 
 const ErrorMessage = () => {
+    const isDark = useThemeStore((store) => store.isDark);
     return (
         <Box sx={{ height: '100%', display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
             <img
-                src={isDarkMode() ? darkNoNothing : noNothing}
+                src={isDark ? darkNoNothing : noNothing}
                 alt="No Results Found"
                 style={{ objectFit: 'contain', width: '80%', height: '80%' }}
             />