devsoc-unsw
diff --git a/‎client/package.json
+4-3 b/‎client/package.json
+4-3
diff --git a/‎client/src/App.tsx
+20-2 b/‎client/src/App.tsx
+20-2
diff --git a/‎client/src/api/getCourseInfo.ts
+2-2 b/‎client/src/api/getCourseInfo.ts
+2-2
diff --git a/‎client/src/components/controls/History.tsx
+4-1 b/‎client/src/components/controls/History.tsx
+4-1
diff --git a/‎client/src/components/sidebar/UserAccount.tsx
+5-5 b/‎client/src/components/sidebar/UserAccount.tsx
+5-5
diff --git a/‎client/src/components/timetableTabs/TimetableTabs.tsx
-1 b/‎client/src/components/timetableTabs/TimetableTabs.tsx
-1
diff --git a/‎client/src/constants/defaults.ts
+1-1 b/‎client/src/constants/defaults.ts
+1-1
diff --git a/‎client/src/context/UserContext.tsx
+48-9 b/‎client/src/context/UserContext.tsx
+48-9
diff --git a/‎client/src/interfaces/Database.ts
+2 b/‎client/src/interfaces/Database.ts
+2
diff --git a/‎client/src/interfaces/GraphQLCourseInfo.ts
+2 b/‎client/src/interfaces/GraphQLCourseInfo.ts
+2
@@ -16,7 +16,6 @@
     "style": "prettier --write 'src/**/*.{ts,tsx}' && eslint --fix 'src/**/*.{ts,tsx}'"
   },
   "dependencies": {
-    "@apollo/client": "3.11.8",
     "@date-io/date-fns": "2.17.0",
     "@emotion/react": "11.11.1",
     "@emotion/styled": "11.11.0",
@@ -33,6 +32,7 @@
     "@sentry/tracing": "7.84.0",
     "@uiw/react-color": "2.1.1",
     "clsx": "2.1.1",
+    "@apollo/client": "3.11.8",
     "date-fns": "2.30.0",
     "dayjs": "1.11.12",
     "file-saver": "2.0.5",
@@ -88,10 +88,10 @@
     "@types/react-transition-group": "4.4.10",
     "@types/react-window": "1.8.8",
     "@types/uuid": "9.0.8",
+    "autoprefixer": "10.4.19",
     "@typescript-eslint/eslint-plugin": "7.16.1",
     "@typescript-eslint/parser": "7.16.1",
     "@vitejs/plugin-react-swc": "3.7.0",
-    "autoprefixer": "10.4.19",
     "eslint": "8.57.0",
     "eslint-config-prettier": "9.1.0",
     "eslint-plugin-react": "7.35.0",
@@ -107,5 +107,6 @@
     "vite-plugin-svgr": "4.2.0",
     "vite-tsconfig-paths": "5.0.1",
     "vitest": "2.1.2"
-  }
+  },
+  "packageManager": "pnpm@9.4.0+sha512.f549b8a52c9d2b8536762f99c0722205efc5af913e77835dbccc3b0b0b2ca9e7dc8022b78062c17291c48e88749c70ce88eb5a74f1fa8c4bf5e18bb46c8bd83a"
 }
@@ -45,6 +45,7 @@ import {
 import { setDropzoneRange, useDrag } from './utils/Drag';
 import { downloadIcsFile } from './utils/generateICS';
 import storage from './utils/storage';
+import { runSync } from './utils/syncTimetables';
 import { createDefaultTimetable } from './utils/timetableHelpers';
 
 const StyledApp = styled(Box)`
@@ -134,7 +135,7 @@ const App: React.FC = () => {
     setAssignedColors,
   } = useContext(CourseContext);
 
-  const { groupsSidebarCollapsed, setGroupsSidebarCollapsed } = useContext(UserContext);
+  const { user, setUser, groupsSidebarCollapsed, setGroupsSidebarCollapsed } = useContext(UserContext);
 
   setDropzoneRange(days.length, earliestStartTime, latestEndTime);
 
@@ -186,7 +187,7 @@ const App: React.FC = () => {
           ...{
             [termId as string]: oldData.hasOwnProperty(termId as string)
               ? oldData[termId as string]
-              : createDefaultTimetable(),
+              : createDefaultTimetable(user.userID),
           },
         };
       }
@@ -429,36 +430,53 @@ const App: React.FC = () => {
     updateTimetableEvents();
   }, [year, isConvertToLocalTimezone]);
 
+  const syncTimetables = () => {
+    if (!user.userID) {
+      return;
+    }
+
+    runSync(user, setUser, displayTimetables, setDisplayTimetables);
+  };
+
   // The following three useUpdateEffects update local storage whenever a change is made to the timetable
   useUpdateEffect(() => {
     displayTimetables[term][selectedTimetable].selectedCourses = selectedCourses;
     const newCourseData = courseData;
     storage.set('courseData', newCourseData);
+
     storage.set('timetables', displayTimetables);
     setDisplayTimetables(displayTimetables);
+    syncTimetables();
   }, [selectedCourses]);
 
   useUpdateEffect(() => {
     displayTimetables[term][selectedTimetable].selectedClasses = selectedClasses;
+
     storage.set('timetables', displayTimetables);
     setDisplayTimetables(displayTimetables);
+    syncTimetables();
   }, [selectedClasses]);
 
   useUpdateEffect(() => {
     displayTimetables[term][selectedTimetable].createdEvents = createdEvents;
+
     storage.set('timetables', displayTimetables);
     setDisplayTimetables(displayTimetables);
+    syncTimetables();
   }, [createdEvents]);
 
   useUpdateEffect(() => {
     displayTimetables[term][selectedTimetable].assignedColors = assignedColors;
+
     storage.set('timetables', displayTimetables);
     setDisplayTimetables(displayTimetables);
+    syncTimetables();
   }, [assignedColors]);
 
   // Update storage when dragging timetables
   useUpdateEffect(() => {
     storage.set('timetables', displayTimetables);
+    syncTimetables();
   }, [displayTimetables]);
 
   /**
 
@@ -17,6 +17,8 @@ const GET_COURSE_INFO = gql`
         activity
         status
         course_enrolment
+        class_id
+        term
         section
         times {
           day
@@ -113,7 +115,6 @@ const getCourseInfo = async (
     });
 
     const json: DbCourse = graphQLCourseToDbCourse(data);
-
     json.classes.forEach((dbClass) => {
       // Some courses split up a single class into two separate classes. e.g. CHEM1011 does it (as of 22T3)
       // because one half of the course is taught by one lecturer and the other half is taught by another.
@@ -173,7 +174,6 @@ const getCourseInfo = async (
     });
 
     if (!json) throw new NetworkError('Internal server error');
-
     return dbCourseToCourseData(json, isConvertToLocalTimezone);
   } catch (error) {
     console.log(error);
 
@@ -4,6 +4,7 @@ import React, { useContext, useEffect, useRef, useState } from 'react';
 
 import { AppContext } from '../../context/AppContext';
 import { CourseContext } from '../../context/CourseContext';
+import { UserContext } from '../../context/UserContext';
 import { CourseData, CreatedEvents, DisplayTimetablesMap, SelectedClasses } from '../../interfaces/Periods';
 import {
   ActionsPointer,
@@ -30,6 +31,7 @@ const History: React.FC = () => {
     useContext(CourseContext);
   const { isDrag, setIsDrag, selectedTimetable, setSelectedTimetable, displayTimetables, setDisplayTimetables, term } =
     useContext(AppContext);
+  const { user } = useContext(UserContext);
 
   const timetableActions = useRef<TimetableActions>({});
   const actionsPointer = useRef<ActionsPointer>({});
@@ -205,11 +207,12 @@ const History: React.FC = () => {
    * Resets all timetables - leave one as default
    */
   const clearAll = () => {
+    const newTimetables = createDefaultTimetable(user.userID);
     if (!term) return;
 
     const newDisplayTimetables: DisplayTimetablesMap = {
       ...displayTimetables,
-      [term]: createDefaultTimetable(),
+      [term]: newTimetables,
     };
     setTimetableState([], {}, {}, newDisplayTimetables, 0);
   };
 
@@ -5,7 +5,9 @@ import React, { useContext, useState } from 'react';
 
 import { API_URL } from '../../api/config';
 import { undefinedUser, UserContext } from '../../context/UserContext';
-import { TimetableData } from '../../interfaces/Periods';
+import { DisplayTimetablesMap } from '../../interfaces/Periods';
+import storage from '../../utils/storage';
+import { createDefaultTimetable } from '../../utils/timetableHelpers';
 import StyledDialog from '../StyledDialog';
 import UserProfile from './groupsSidebar/friends/UserProfile';
 
@@ -55,24 +57,21 @@ export interface User {
   friends: User[];
   incoming: User[];
   outgoing: User[];
-  timetables: TimetableData[];
+  timetables: DisplayTimetablesMap;
 }
 
 const UserAccount: React.FC<UserAccountProps> = ({ collapsed }) => {
   const [windowLocation, setWindowLocation] = useState('');
   const [logoutDialog, setLogoutDialog] = useState(false);
 
   const { user, setUser } = useContext(UserContext);
-
   const loginCall = async () => {
     setWindowLocation(window.location.href);
     try {
       window.location.href = `${API_URL.server}/auth/login`;
     } catch (error) {
       console.log(error);
     }
-    // Replaces current history item rather than adding item to history
-    // window.location.replace(`${API_URL.server}/auth/login`);
   };
 
   const logoutCall = async () => {
@@ -85,6 +84,7 @@ const UserAccount: React.FC<UserAccountProps> = ({ collapsed }) => {
     }
     window.location.replace(windowLocation);
     setUser(undefinedUser);
+    storage.set('timetables', createDefaultTimetable(undefined));
   };
   if (!user.userID) {
     return collapsed ? (
 
@@ -101,7 +101,6 @@ const TimetableTabs: React.FC = () => {
       };
       storage.set('timetables', addingNewTimetables);
       setDisplayTimetables(addingNewTimetables);
-
       // Clearing the selected courses, classes and created events for the new timetable
       setTimetableState([], {}, {}, {}, nextIndex);
     }
 
@@ -10,7 +10,7 @@ const defaults: Record<string, any> = {
   isHideExamClasses: false,
   isConvertToLocalTimezone: true,
   courseData: { map: [] },
-  timetables: { T0: createDefaultTimetable() },
+  timetables: { T0: createDefaultTimetable('') },
 };
 
 export default defaults;
@@ -1,10 +1,15 @@
-import { createContext, useEffect, useMemo, useState } from 'react';
+import { createContext, useContext, useEffect, useMemo, useState } from 'react';
 
 import { API_URL } from '../api/config';
 import { User } from '../components/sidebar/UserAccount';
 import { Group } from '../interfaces/Group';
 import NetworkError from '../interfaces/NetworkError';
+import { DisplayTimetablesMap, TimetableDTO } from '../interfaces/Periods';
 import { UserContextProviderProps } from '../interfaces/PropTypes';
+import { parseTimetableDTO } from '../utils/syncTimetables';
+import { createDefaultTimetable } from '../utils/timetableHelpers';
+import { AppContext } from './AppContext';
+import { CourseContext } from './CourseContext';
 
 export const undefinedUser = {
   userID: '',
@@ -18,7 +23,7 @@ export const undefinedUser = {
   friends: [],
   incoming: [],
   outgoing: [],
-  timetables: [],
+  timetables: {},
 };
 
 export interface IUserContext {
@@ -50,6 +55,8 @@ const UserContextProvider = ({ children }: UserContextProviderProps) => {
   const [groups, setGroups] = useState<Group[]>([]);
   const [selectedGroupIndex, setSelectedGroupIndex] = useState<number>(-1);
   const [groupsSidebarCollapsed, setGroupsSidebarCollapsed] = useState<boolean>(true);
+  const { setDisplayTimetables, setSelectedTimetable, term, year } = useContext(AppContext);
+  const { setSelectedClasses, setSelectedCourses, setCreatedEvents, setAssignedColors } = useContext(CourseContext);
 
   const getUserInfo = async (userID: string) => {
     try {
@@ -60,10 +67,41 @@ const UserContextProvider = ({ children }: UserContextProviderProps) => {
           'Content-Type': 'application/json',
         },
       });
-      const userResponse = await response.text();
-      console.log(userResponse);
+      const res = await response.json();
+      const timetables = await Promise.all(
+        res.data.timetables.map((timetable: TimetableDTO) => parseTimetableDTO(timetable, year)),
+      );
 
-      if (userResponse !== '') setUser(JSON.parse(userResponse).data);
+      // Unpack timetables based on key
+      const timetableMap: DisplayTimetablesMap = {};
+
+      timetables.forEach(({ mapKey, timetable }) => {
+        if (!timetableMap[mapKey]) {
+          timetableMap[mapKey] = [];
+        }
+        timetableMap[mapKey].push(timetable);
+      });
+
+      const userResponse = { ...res.data, timetables: structuredClone(timetableMap) };
+      setUser(userResponse);
+
+      // Check current term exists. If not, create default timetable for this term
+      // NOTE: This is AFTER setting the timetableMap for user.timetable. By doing this, we allow the runSync
+      // function to pick up that there's a difference, and sync the default timetable with the backend.
+      if (!Object.keys(timetableMap).includes(term)) {
+        timetableMap[term] = createDefaultTimetable(res.data.userID);
+      }
+      setDisplayTimetables({ ...timetableMap });
+
+      // TODO: check if this conditional is necessary
+      if (timetableMap[term] && timetableMap[term][0]) {
+        const { selectedCourses, selectedClasses, createdEvents, assignedColors } = timetableMap[term][0];
+        setSelectedCourses(selectedCourses);
+        setSelectedClasses(selectedClasses);
+        setCreatedEvents(createdEvents);
+        setAssignedColors(assignedColors);
+        setSelectedTimetable(0);
+      }
     } catch (error) {
       console.log(error);
     }
@@ -89,7 +127,7 @@ const UserContextProvider = ({ children }: UserContextProviderProps) => {
   };
 
   const fetchUserInfo = (userID: string) => {
-    getUserInfo(userID);
+    if (term !== 'T0') getUserInfo(userID);
     getGroups(userID);
   };
 
@@ -104,15 +142,16 @@ const UserContextProvider = ({ children }: UserContextProviderProps) => {
           const userID = JSON.parse(userResponse);
           fetchUserInfo(userID);
         } else {
-          console.error("Couldn't get response for user information!");
-          // throw new NetworkError("Couldn't get response");
+          setUser(undefinedUser);
+          console.log('user is not logged in');
+          throw new NetworkError("Couldn't get response for user information!");
         }
       } catch (error) {
         console.log(error);
       }
     };
     getZid();
-  }, []);
+  }, [term]);
 
   const initialContext = useMemo(
     () => ({
 
@@ -9,9 +9,11 @@ export interface DbCourse {
 export interface DbClass {
   activity: Activity;
   times: DbTimes[];
+  classID: string;
   status: Status;
   courseEnrolment: DbCourseEnrolment;
   section: Section;
+  term: string;
 }
 
 export interface DbCourseEnrolment {
 
@@ -13,6 +13,8 @@ interface Class {
   course_enrolment: string;
   section: string;
   times: Time[];
+  term: string;
+  class_id: string;
 }
 
 interface Course {
Original file line number	Diff line number	Diff line change
`@@ -101,7 +101,6 @@ const TimetableTabs: React.FC = () => {`
`101`	`101`	`};`
`102`	`102`	`storage.set('timetables', addingNewTimetables);`
`103`	`103`	`setDisplayTimetables(addingNewTimetables);`
`104`		`-`
`105`	`104`	`// Clearing the selected courses, classes and created events for the new timetable`
`106`	`105`	`setTimetableState([], {}, {}, {}, nextIndex);`
`107`	`106`	`}`
Original file line number	Diff line number	Diff line change
`@@ -13,6 +13,8 @@ interface Class {`
`13`	`13`	`course_enrolment: string;`
`14`	`14`	`section: string;`
`15`	`15`	`times: Time[];`
	`16`	`+ term: string;`
	`17`	`+ class_id: string;`
`16`	`18`	`}`
`17`	`19`
`18`	`20`	`interface Course {`