Migrate settings to Tanstack Query (#1040)

* Install TankStack library with corresponding devtool, integrate into App.tsx

* Integrate react query in to setting page

* Connect settings.useSquareEdge,useDarkMode,preferredTheme with FE components

* Remove use of QueryContext to direct suspense query calling to avoid re-rendering of whole App component

* Update all settings to use React Query

* Fix FE build error by removing removed AppContext states on components

* Remove redudant comments

* Add Error Boundary for handling unintented error, resolve packages version and dependecies issue

* Remove unwanted comments and resolve naming issues

* Resolve setting item destructing before used, and other dependecies issues

* Migrate JS fetch to Axios

* Remove unwanted library import

* Update ErrorBoundary to handle any unknown errors

* Resolve build error

* Rebase from server-rewrite

* Rebase from server-rewrite, with autofix eslint

* Refactor Settings component to fit the feat of profile picture

* Remove unneccssary commnets

* Resolved dropcard shadow logic with react query

* Resolve CI build error and lint warnings from drag.ts

* Resolve review errors from lucas

* Resolve use-prefix issue for settings parameter with minor changes

* Resolve review comments from mark

* Update the prisma schema for user settings

* Update the prisma schema for user settings

* Resolve naming error

Author: jason4193

client/package.json

@@ -30,7 +30,9 @@
     "@sentry/browser": "9.38.0",
     "@sentry/node": "9.38.0",
     "@sentry/react": "9.38.0",
+    "@tanstack/react-query": "5.84.1",
     "@uiw/react-color": "2.7.1",
+    "axios": "1.11.0",
     "clsx": "2.1.1",
     "colorizr": "3.0.8",
     "date-fns": "2.30.0",
@@ -78,6 +80,7 @@
     "@eslint/js": "9.31.0",
     "@tailwindcss/postcss": "4.1.11",
     "@tanstack/eslint-plugin-query": "5.83.1",
+    "@tanstack/react-query-devtools": "5.84.1",
     "@types/file-saver": "2.0.7",
     "@types/is-base64": "1.1.3",
     "@types/lodash-es": "4.17.12",

client/pnpm-lock.yaml

@@ -3,11 +3,12 @@ import { styled } from '@mui/system';
 import { LocalizationProvider } from '@mui/x-date-pickers';
 import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
 import * as Sentry from '@sentry/react';
-import React, { useContext, useEffect } from 'react';
+import React, { useContext, useEffect, useMemo } from 'react';
 import { Outlet } from 'react-router-dom';
 
 import getCourseInfo from './api/getCourseInfo';
 import getCoursesList from './api/getCoursesList';
+import { useGetUserSettingsQuery } from './api/user/queries';
 import T3SelectGif from './assets/T3-select.gif';
 import Alerts from './components/Alerts';
 import Controls from './components/controls/Controls';
@@ -18,7 +19,7 @@ import Sidebar from './components/sidebar/Sidebar';
 import Sponsors from './components/Sponsors';
 import Timetable from './components/timetable/Timetable';
 import { TimetableTabs } from './components/timetableTabs/TimetableTabs';
-import { contentPadding, rightContentPadding, themes } from './constants/theme';
+import { contentPadding, darkTheme, lightTheme, rightContentPadding } from './constants/theme';
 import {
   daysLong,
   getAvailableTermDetails,
@@ -98,17 +99,6 @@ const ICSButton = styled(Button)`
 
 const App: React.FC = () => {
   const {
-    themeObject,
-    currentTheme,
-    setCurrentTheme,
-    is12HourMode,
-    isDarkMode,
-    isSquareEdges,
-    isShowOnlyOpenClasses,
-    isDefaultUnscheduled,
-    isHideClassInfo,
-    isHideExamClasses,
-    isConvertToLocalTimezone,
     setAlertMsg,
     setErrorVisibility,
     days,
@@ -144,7 +134,9 @@ const App: React.FC = () => {
     setAssignedColors,
   } = useContext(CourseContext);
 
-  const decodedAssignedColors = useColorsDecoder(assignedColors);
+  const { preferredTheme, isDarkMode, unscheduleClassesByDefault, convertToLocalTimezone } = useGetUserSettingsQuery();
+
+  const decodedAssignedColors = useColorsDecoder(assignedColors, preferredTheme);
 
   setDropzoneRange(days.length, earliestStartTime, latestEndTime);
 
@@ -276,7 +268,7 @@ const App: React.FC = () => {
 
       // null means a class is unscheduled
       Object.keys(course.activities).forEach((activity) => {
-        prev[course.code][activity] = isDefaultUnscheduled
+        prev[course.code][activity] = unscheduleClassesByDefault
           ? null
           : (course.activities[activity].find((x) => x.enrolments !== x.capacity && x.periods.length) ??
             course.activities[activity].find((x) => x.periods.length) ??
@@ -302,7 +294,7 @@ const App: React.FC = () => {
     const codes: string[] = Array.isArray(data) ? data : [data];
     Promise.all(
       codes.map((code) =>
-        getCourseInfo(term.substring(0, 2), code, term.substring(2), isConvertToLocalTimezone).catch((err) => {
+        getCourseInfo(term.substring(0, 2), code, term.substring(2), convertToLocalTimezone).catch((err) => {
           return err;
         }),
       ),
@@ -440,7 +432,7 @@ const App: React.FC = () => {
 
   useEffect(() => {
     updateTimetableEvents();
-  }, [year, isConvertToLocalTimezone]);
+  }, [year, convertToLocalTimezone]);
 
   // The following three useUpdateEffects update local storage whenever a change is made to the timetable
   useUpdateEffect(() => {
@@ -505,8 +497,8 @@ const App: React.FC = () => {
    * Upon switching timetable, reset default bounds
    */
   useEffect(() => {
-    setEarliestStartTime(getDefaultStartTime(isConvertToLocalTimezone));
-    setLatestEndTime(getDefaultEndTime(isConvertToLocalTimezone));
+    setEarliestStartTime(getDefaultStartTime(convertToLocalTimezone));
+    setLatestEndTime(getDefaultEndTime(convertToLocalTimezone));
   }, [selectedTimetable]);
 
   /**
@@ -517,7 +509,7 @@ const App: React.FC = () => {
       Math.min(
         ...selectedCourses.map((course) => course.earliestStartTime),
         ...Object.entries(createdEvents).map(([_, eventPeriod]) => Math.floor(eventPeriod.time.start)),
-        getDefaultStartTime(isConvertToLocalTimezone),
+        getDefaultStartTime(convertToLocalTimezone),
         prev,
       ),
     );
@@ -526,7 +518,7 @@ const App: React.FC = () => {
       Math.max(
         ...selectedCourses.map((course) => course.latestFinishTime),
         ...Object.entries(createdEvents).map(([_, eventPeriod]) => Math.ceil(eventPeriod.time.end)),
-        getDefaultEndTime(isConvertToLocalTimezone),
+        getDefaultEndTime(convertToLocalTimezone),
         prev,
       ),
     );
@@ -546,50 +538,12 @@ const App: React.FC = () => {
 
   useUpdateEffect(() => {
     updateTimetableDaysAndTimes();
-  }, [createdEvents, selectedCourses, isConvertToLocalTimezone]);
-
-  useEffect(() => {
-    storage.set('currentTheme', currentTheme);
-  }, [currentTheme]);
-
-  useEffect(() => {
-    storage.set('is12HourMode', is12HourMode);
-  }, [is12HourMode]);
-
-  useEffect(() => {
-    storage.set('isDarkMode', isDarkMode);
-  }, [isDarkMode]);
-
-  useEffect(() => {
-    storage.set('isSquareEdges', isSquareEdges);
-  }, [isSquareEdges]);
-
-  useEffect(() => {
-    storage.set('isShowOnlyOpenClasses', isShowOnlyOpenClasses);
-  }, [isShowOnlyOpenClasses]);
+  }, [createdEvents, selectedCourses, convertToLocalTimezone]);
 
-  useEffect(() => {
-    storage.set('isDefaultUnscheduled', isDefaultUnscheduled);
-  }, [isDefaultUnscheduled]);
-
-  useEffect(() => {
-    storage.set('isHideClassInfo', isHideClassInfo);
-  }, [isHideClassInfo]);
-
-  useEffect(() => {
-    storage.set('isHideExamClasses', isHideExamClasses);
-  }, [isHideExamClasses]);
-
-  useEffect(() => {
-    storage.set('isConvertToLocalTimezone', isConvertToLocalTimezone);
-  }, [isConvertToLocalTimezone]);
-
-  // Validate the currentTheme
-  useEffect(() => {
-    if (!Object.keys(themes).includes(currentTheme)) {
-      setCurrentTheme(Object.keys(themes)[0]);
-    }
-  }, [currentTheme]);
+  const themeObject = useMemo(
+    () => (isDarkMode ? darkTheme(preferredTheme) : lightTheme(preferredTheme)),
+    [isDarkMode, preferredTheme],
+  );
 
   const globalStyle = {
     body: {

client/src/App.tsx

@@ -0,0 +1,12 @@
+import { useMutation } from '@tanstack/react-query';
+
+import type { UserSettings } from '../../interfaces/User';
+import { setUserSettings } from './routes';
+
+export const useSetUserSettings = () =>
+  useMutation({
+    mutationFn: (settings: Partial<UserSettings>) => setUserSettings(settings),
+    meta: {
+      invalidatesQuery: ['settings'],
+    },
+  }).mutate;

client/src/api/timetable/mutations.ts

@@ -0,0 +1,9 @@
+import { useSuspenseQuery } from '@tanstack/react-query';
+
+import { getUserSettings } from './routes';
+
+export const useGetUserSettingsQuery = () =>
+  useSuspenseQuery({
+    queryKey: ['settings'],
+    queryFn: getUserSettings,
+  }).data;

client/src/api/timetable/queries.ts

@@ -0,0 +1,24 @@
+import axios from 'axios';
+
+import { UserInfo, UserSettings } from '../../interfaces/User';
+import { API_URL } from '../config';
+
+const apiClient = axios.create({
+  baseURL: API_URL.server,
+  withCredentials: true,
+  headers: {
+    'Content-Type': 'application/json',
+  },
+});
+
+export const getUserProfile = async (): Promise<UserInfo> => {
+  return (await apiClient.get('/user/profile')).data;
+};
+
+export const getUserSettings = async (): Promise<UserSettings> => {
+  return (await apiClient.get('/user/settings')).data;
+};
+
+export const setUserSettings = async (settings: Partial<UserSettings>): Promise<void> => {
+  await apiClient.post('/user/settings', settings);
+};

client/src/api/timetable/routes.ts

@@ -0,0 +1,34 @@
+import React from 'react';
+
+import PageError from './ErrorPage/ErrorPage';
+
+interface ErrorBoundaryProps {
+  children: React.ReactNode;
+}
+
+interface ErrorBoundaryState {
+  hasError: boolean;
+  error: Error;
+}
+
+class ErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBoundaryState> {
+  state: ErrorBoundaryState = { hasError: false, error: new Error('Uknown error') };
+
+  static getDerivedStateFromError(error: Error) {
+    return { hasError: true, error: error };
+  }
+
+  componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
+    console.error('Error caught by ErrorBoundary:', error, errorInfo);
+  }
+
+  render() {
+    if (this.state.hasError) {
+      return <PageError errorStack={this.state.error} />;
+    }
+
+    return this.props.children;
+  }
+}
+
+export default ErrorBoundary;