Choollol · Nov 10, 2026 · Nov 10, 2026 · Nov 10, 2026 · Nov 10, 2026 · cubic-dev-ai
diff --git a/.oxlintrc.json b/.oxlintrc.json
@@ -9,9 +9,7 @@
             }
         ],
         // Temporary for TS v6 migration, fix asap: https://github.com/icssc/AntAlmanac/issues/2096
-        "react/set-state-in-effect": "off",
-        "react/refs": "off",
-        "react/purity": "off"
+        "react/set-state-in-effect": "off"
     },
     "globals": {},
     "ignorePatterns": [

@@ -21,10 +21,7 @@
         "jsx_a11y/prefer-tag-over-role": "off",
         "typescript/triple-slash-reference": "off",
         // Temporary for TS v6 migration, fix asap: https://github.com/icssc/AntAlmanac/issues/2096
-        "react/set-state-in-effect": "off",
-        "react/purity": "off",
-        "react/preserve-manual-memoization": "off",
-        "react/refs": "off"
+        "react/set-state-in-effect": "off"
     },
     "settings": {
         "next": {

@@ -65,6 +65,8 @@ const MajorCourseList: FC<MajorCourseListProps> = ({
     selectedSpecId,
     onCatalogYearChange,
 }) => {
+    const dispatch = useAppDispatch();
+
     const storeKeyPrefix = `major-${majorWithSpec.major.id}`;
     const [specsLoading, setSpecsLoading] = useState(false);
     const [resultsLoading, setResultsLoading] = useState(false);
@@ -82,7 +84,6 @@ const MajorCourseList: FC<MajorCourseListProps> = ({
         specOptions.unshift({ value: noSpec, label: noSpec.name });
     }
 
-    const dispatch = useAppDispatch();
     const { defaultCatalogYear } = getCatalogYearDefaults();
 
     const loadSpecs = useCallback(

@@ -26,10 +26,11 @@ const AddYearPopup: FC<AddYearProps> = ({ buttonSize }) => {
     const currentPlan = useAppSelector(selectCurrentPlan);
     const plannerYears = currentPlan.content.yearPlans;
     const dispatch = useAppDispatch();
+    const [currentDate] = useState(() => new Date());
 
     const placeholderName = 'Year ' + (plannerYears.length + 1);
     const placeholderYear =
-        plannerYears.length === 0 ? new Date().getFullYear() : plannerYears[plannerYears.length - 1].startYear + 1;
+        plannerYears.length === 0 ? currentDate.getFullYear() : plannerYears[plannerYears.length - 1].startYear + 1;
 
     const saveHandler = (yearData: PlannerYearData) => {
         const { startYear, name, quarters } = yearData;

@@ -58,6 +58,8 @@ const Quarter: FC<QuarterProps> = ({ yearIndex, quarterIndex, data }) => {
     const startYear = currentPlan.content.yearPlans[yearIndex].startYear;
     const courses = data.courses;
 
+    const [currentDate] = useState(() => new Date());
+
     // Calculate Quarter Stats
     const unitCount = useMemo(() => {
         const courses = data.courses;
@@ -212,7 +214,6 @@ const Quarter: FC<QuarterProps> = ({ yearIndex, quarterIndex, data }) => {
                     });
 
                     const searchPrevYears = 2;
-                    const currentDate = new Date();
                     const currentStartYear =
                         currentDate.getMonth() >= 8 ? currentDate.getFullYear() : currentDate.getFullYear() - 1;
                     const useYear = Math.min(currentStartYear, startYear);

@@ -103,6 +103,7 @@ const MultiplanDropdown: FC<MultiplanDropdownProps> = ({
     const [showDropdown, setShowDropdown] = useState(false);
     const [isDragging, setIsDragging] = useState(false);
     const containerRef = useRef<HTMLDivElement | null>(null);
+    const [popoverAnchorEl, setPopoverAnchorEl] = useState<HTMLDivElement | null>(null);
 
     const allPlansCopy = allPlans.map((p) => ({ ...p }));
 
@@ -114,13 +115,18 @@ const MultiplanDropdown: FC<MultiplanDropdownProps> = ({
         dispatch(setPlanIndex(allPlans.length));
     };
 
+    const handleClick = () => {
+        setPopoverAnchorEl(containerRef.current);
+        setShowDropdown(!showDropdown);
+    };
+
     return (
         <div ref={containerRef}>
             <Button
                 className="dropdown-button"
                 variant="outlined"
                 color="inherit"
-                onClick={() => setShowDropdown(!showDropdown)}
+                onClick={handleClick}
                 endIcon={<ArrowDropDownIcon />}
                 /** @todo potentially add this override to the theme as a variant */
                 sx={{ borderColor: theme.palette.text.secondary }}
@@ -131,7 +137,7 @@ const MultiplanDropdown: FC<MultiplanDropdownProps> = ({
                 className="multi-plan-selector"
                 open={showDropdown}
                 anchorReference="anchorEl"
-                anchorEl={containerRef.current}
+                anchorEl={popoverAnchorEl}
                 anchorOrigin={{ vertical: 'bottom', horizontal: 'left' }}
                 onClose={() => {
                     if (!isDragging) setShowDropdown(false);

@@ -18,7 +18,7 @@ import { CircularProgress } from '@mui/material';
 import type { SelectChangeEvent } from '@mui/material/Select';
 import { type QuarterName } from '@peterportal/types';
 import { useSearchParams } from 'next/navigation';
-import { useEffect, useState, useCallback } from 'react';
+import { useEffect, useState, useCallback, useMemo } from 'react';
 import type { FormEvent } from 'react';
 
 import { isCustomCourse, quarterDisplayNames } from '../../helpers/planner';
@@ -233,9 +233,15 @@ const ExportDialog = ({ showModal, setShowModal }: ExportDialogProps) => {
 
     const currentWeek = parseCurrentWeek(schedule?.currentWeek ?? '');
 
-    const selectedRoadmap = allPlans.find((plan) => String(plan.id) === selectedRoadmapId);
-    const roadmapYears = selectedRoadmap?.content.yearPlans ?? [];
-    const selectedYear = roadmapYears.find((year) => String(year.startYear) === selectedYearStart);
+    const selectedRoadmap = useMemo(
+        () => allPlans.find((plan) => String(plan.id) === selectedRoadmapId),
+        [allPlans, selectedRoadmapId]
+    );
+    const roadmapYears = useMemo(() => selectedRoadmap?.content.yearPlans ?? [], [selectedRoadmap?.content.yearPlans]);
+    const selectedYear = useMemo(
+        () => roadmapYears.find((year) => String(year.startYear) === selectedYearStart),
+        [roadmapYears, selectedYearStart]
+    );
     const yearQuarters = selectedYear?.quarters ?? [];
 
     const handleClose = () => {

@@ -1,6 +1,6 @@
 import './RecentOfferingsTooltip.scss';
 import { Tooltip } from '@mui/material';
-import { FC } from 'react';
+import { FC, useState } from 'react';
 
 import RecentOfferingsTable from '../RecentOfferingsTable/RecentOfferingsTable';
 
@@ -9,9 +9,11 @@ interface RecentOfferingsTooltipProps {
 }
 
 const RecentOfferingsTooltip: FC<RecentOfferingsTooltipProps> = ({ terms }) => {
+    const [currentDate] = useState(() => new Date());
+
     if (terms.length === 0) return null;
 
-    const prevYear = new Date().getMonth() > 9 ? new Date().getFullYear() : new Date().getFullYear() - 1;
+    const prevYear = currentDate.getMonth() > 9 ? currentDate.getFullYear() : currentDate.getFullYear() - 1;
     const prevOfferings = [];
 
     // if the course was offered in the previous academic year, add the corresponding emoji to prevOfferings

@@ -82,6 +82,7 @@ export function SectionColorSelector() {
     const postHog = usePostHog();
 
     const buttonRef = useRef<HTMLDivElement>(null);
+    const [menuAnchorElement, setMenuAnchorElement] = useState<HTMLDivElement | null>(null);
     const [menuOpen, setMenuOpen] = useState(false);
     // Synchronous mirror of `menuOpen` used to gate hover previews. MUI keeps menu items mounted
     // (and firing mouse events) during the close animation, so a stray `onMouseEnter` from a
@@ -114,6 +115,7 @@ export function SectionColorSelector() {
 
     const openMenu = useCallback(() => {
         menuOpenRef.current = true;
+        setMenuAnchorElement(buttonRef.current);
         setMenuOpen(true);
     }, []);
 
@@ -198,12 +200,12 @@ export function SectionColorSelector() {
             </Box>
 
             <Menu
-                anchorEl={buttonRef.current}
+                anchorEl={menuAnchorElement}
                 open={menuOpen}
                 onClose={handleClose}
                 anchorOrigin={{ vertical: 'bottom', horizontal: 'left' }}
                 transformOrigin={{ vertical: 'top', horizontal: 'left' }}
-                slotProps={{ paper: { sx: { width: buttonRef.current?.offsetWidth, maxHeight: 320 } } }}
+                slotProps={{ paper: { sx: { width: menuAnchorElement?.offsetWidth, maxHeight: 320 } } }}
             >
                 {options.map((option) => {
                     const isSelected = option.id === sectionColor;

@@ -7,7 +7,7 @@ import { Alert, Snackbar, type SnackbarCloseReason } from '@mui/material';
 import { useShallow } from 'zustand/react/shallow';
 
 export const NotificationSnackbar = () => {
-    const { open, snackbarClosed, message, severity, durationSeconds, position, style } = useSnackbarStore(
+    const { open, snackbarClosed, message, severity, durationSeconds, position, style, snackbarKey } = useSnackbarStore(
         useShallow((store) => ({
             open: store.open,
             snackbarClosed: store.snackbarClosed,
@@ -16,13 +16,12 @@ export const NotificationSnackbar = () => {
             durationSeconds: store.durationSeconds,
             position: store.position,
             style: store.style,
+            snackbarKey: store.snackbarKey,
         }))
     );
 
     const isMobile = useIsMobile();
 
-    const snackbarKey = open ? Date.now() : null;
-
     const handleClose = (_event?: React.SyntheticEvent | Event, reason?: SnackbarCloseReason) => {
         if (reason === 'clickaway') {
             return;
@@ -31,9 +30,11 @@ export const NotificationSnackbar = () => {
         snackbarClosed();
     };
 
+    const key = open ? snackbarKey : null;
+
     return (
         <Snackbar
-            key={snackbarKey}
+            key={key}
             open={open}
             autoHideDuration={durationSeconds * 1000}
             anchorOrigin={position}

@@ -12,17 +12,19 @@ interface RecruitmentBannerProps {
 
 export function RecruitmentBanner({ deptValue }: RecruitmentBannerProps) {
     const [bannerVisibility, setBannerVisibility] = useState(true);
+    const [now, setNow] = useState(() => Date.now());
+
     const theme = useTheme();
 
     const recruitmentDismissalTime = getLocalStorageRecruitmentDismissalTime();
     const dismissedRecently =
-        recruitmentDismissalTime !== null &&
-        Date.now() - parseInt(recruitmentDismissalTime) < 11 * 7 * 24 * 3600 * 1000;
+        recruitmentDismissalTime !== null && now - parseInt(recruitmentDismissalTime) < 11 * 7 * 24 * 3600 * 1000;
     const isRelevantDept = RELEVANT_DEPARTMENTS.includes(deptValue.toUpperCase());
     const displayRecruitmentBanner = bannerVisibility && !dismissedRecently && isRelevantDept;
 
     const handleClick = () => {
         setLocalStorageRecruitmentDismissalTime(Date.now().toString());
+        setNow(Date.now());
         setBannerVisibility(false);
     };
 

@@ -9,6 +9,7 @@ interface SnackbarOptions {
     durationSeconds: number;
     position: ComponentProps<typeof Snackbar>['anchorOrigin'];
     style: SxProps | null;
+    snackbarKey: number;
 }
 
 const DEFAULT_DURATION_SECONDS: SnackbarOptions['durationSeconds'] = 3;
@@ -22,6 +23,7 @@ const initialState: SnackbarOptions & { open: boolean } = {
     durationSeconds: DEFAULT_DURATION_SECONDS,
     position: DEFAULT_POSITION,
     style: DEFAULT_STYLE,
+    snackbarKey: 0,
 };
 
 export const useSnackbarStore = create(
@@ -46,5 +48,13 @@ export function openSnackbar(
         style = DEFAULT_STYLE,
     }: Partial<Omit<SnackbarOptions, 'severity' | 'message'>> = {}
 ) {
-    useSnackbarStore.setState({ open: true, message, severity, durationSeconds, position, style });
+    useSnackbarStore.setState({
+        open: true,
+        message,
+        severity,
+        durationSeconds,
+        position,
+        style,
+        snackbarKey: useSnackbarStore.getState().snackbarKey + 1,
+    });
 }