add zustand store for websocket data

README.md

@@ -37,6 +37,7 @@ automated-course-scheduler/
 │   │   ├── components/      # Reusable UI components
 │   │   ├── hooks/           # Custom React hooks
 │   │   ├── pages/           # Route-level page components
+│   │   ├── stores/          # Zustand stores (shared client state)
 │   │   ├── types/           # TypeScript type definitions
 │   │   └── utils/           # Helper utilities
 │   ├── package.json
@@ -219,7 +220,7 @@ FastAPI automatically exposes the full OpenAPI spec at `/docs` (Swagger UI) and
 
 ### Real-Time Updates
 
-The backend exposes a WebSocket endpoint (`/ws`) that broadcasts schedule change events to all connected clients. The frontend subscribes via the `useScheduleWebSocket` hook so edits made by one user are reflected immediately in other open sessions — no polling required.
+The backend exposes a WebSocket endpoint (`/ws`) that broadcasts schedule change events to all connected clients. The frontend subscribes via the `useScheduleData` hook, which reads from a shared zustand store so the Schedules and Faculty pages reuse one cached connection per schedule — no polling and no duplicate fetches on navigation.
 
 ## License
 

frontend/package.json

@@ -18,7 +18,8 @@
     "axios": "^1.7.2",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-router-dom": "^6.24.1"
+    "react-router-dom": "^6.24.1",
+    "zustand": "^5.0.12"
   },
   "devDependencies": {
     "@eslint/js": "^9.39.4",

frontend/src/components/ScheduleSectionRowView.tsx

@@ -2,7 +2,7 @@ import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import type { CourseResponse, InstructorInfo, SectionRichResponse, TimeBlockInfo, WarningResponse } from '../api/generated';
 import { getAutomatedCourseSchedulerAPI, Severity } from '../api/generated';
 import { axiosInstance } from '../api/axiosInstance';
-import type { LockInfo } from '../hooks/useScheduleWebSocket';
+import type { LockInfo } from '../stores/scheduleDataStore';
 import CrosslistSectionHint from './CrosslistSectionHint';
 import FacultyTooltip from './FacultyTooltip';
 import MultiSearchableSelect from './MultiSearchableSelect';
@@ -97,8 +97,27 @@ export default function ScheduleSectionRowView({
   const [timeBlockFilterIds, setTimeBlockFilterIds] = useState<number[]>([]);
   const [selectedSection, setSelectedSection] = useState<SectionRichResponse | null>(null);
   const [editingSection, setEditingSection] = useState<SectionRichResponse | null>(null);
+  const editingSectionRef = useRef<SectionRichResponse | null>(null);
   const [creating, setCreating] = useState(false);
   const [lockError, setLockError] = useState<{ sectionId: number; msg: string } | null>(null);
+
+  useEffect(() => {
+    editingSectionRef.current = editingSection;
+  }, [editingSection]);
+
+  // Release any held lock on unmount so navigating away with the editor open
+  // does not leave a dangling lock (the shared WebSocket no longer closes on
+  // page navigation, so the server's disconnect-release failsafe won't fire).
+  useEffect(() => {
+    return () => {
+      const active = editingSectionRef.current;
+      if (active) {
+        void getAutomatedCourseSchedulerAPI()
+          .releaseLockSectionsSectionIdUnlockPost(active.section_id)
+          .catch(() => {});
+      }
+    };
+  }, []);
   const [hoveredInstructor, setHoveredInstructor] = useState<{
     instructor: InstructorInfo;
     rect: DOMRect;

frontend/src/components/SectionCalendarGrid.tsx

@@ -1,6 +1,6 @@
 import { useMemo } from 'react';
 import type { InstructorInfo, SectionRichResponse } from '../api/generated';
-import type { LockInfo } from '../hooks/useScheduleWebSocket';
+import type { LockInfo } from '../stores/scheduleDataStore';
 import { expandDays, parseTimeToMinutes } from '../utils/scheduleCalendar';
 
 function dayLabel(letter: string): string {