Fixed behaviour of preserving prev calendar data

client/src/App.tsx

@@ -158,18 +158,21 @@ const App: React.FC = () => {
       const oldData = storage.get('timetables');
 
       // avoid overwriting data from previous save
+      // TODO: need to check if this logic is correct - do we want to preserve more than just the prev timetable data
       const newTimetableTerms = {
-        ...oldData,
-        ...(oldData.hasOwnProperty(termsData.prevTerm.term) ? {} : { [termsData.prevTerm.term]: createDefaultTimetable() }),
-        ...(oldData.hasOwnProperty(termsData.newTerm.term) ? {} : { [termsData.newTerm.term]: createDefaultTimetable() }),
+        // ...oldData,
+        // ...(oldData.hasOwnProperty(termsData.prevTerm.term) ? {} : { [termsData.prevTerm.term]: createDefaultTimetable() }),
+        // ...(oldData.hasOwnProperty(termsData.newTerm.term) ? {} : { [termsData.newTerm.term]: createDefaultTimetable() }),
+        ...({ [termsData.prevTerm.term]: oldData.hasOwnProperty(termsData.prevTerm.term) ? oldData[termsData.prevTerm.term] : createDefaultTimetable() }),
+        ...({ [termsData.newTerm.term]: oldData.hasOwnProperty(termsData.newTerm.term) ? oldData[termsData.newTerm.term] : createDefaultTimetable() }),
       }
 
       setDisplayTimetables(newTimetableTerms)
       storage.set('timetables', newTimetableTerms);
     };
 
     fetchReliably(fetchTermData);
-  }, [year]);
+  }, []);
 
   useEffect(() => {
     /**

client/src/components/controls/CourseSelect.tsx

@@ -58,7 +58,7 @@ const StyledSelect = styled(Box)`
 
 const StyledTextField = styled(TextField, {
   shouldForwardProp: (prop) => prop !== 'selectedCourses',
-})<{
+}) <{
   selectedCourses: CourseData[];
 }>`
   .MuiOutlinedInput-root {
@@ -76,7 +76,7 @@ const StyledTextField = styled(TextField, {
 
   label {
     color: ${({ theme, selectedCourses }) =>
-      selectedCourses.length < maxAddedCourses ? theme.palette.secondary.dark : 'red'} !important;
+    selectedCourses.length < maxAddedCourses ? theme.palette.secondary.dark : 'red'} !important;
     transition: 0.2s;
   }
 `;
@@ -88,7 +88,7 @@ const StyledInputAdornment = styled(InputAdornment)`
 
 const StyledChip = styled(Chip, {
   shouldForwardProp: (prop) => prop !== 'backgroundColor',
-})<{
+}) <{
   backgroundColor: string;
 }>`
   transition: none !important;

client/src/components/navbar/Navbar.tsx

@@ -1,18 +1,17 @@
 import { Description, Info, Security, Settings as SettingsIcon } from '@mui/icons-material';
-import { AppBar, Toolbar, Typography, useMediaQuery, useTheme, FormControl, MenuItem, Select } from '@mui/material';
+import { AppBar, Toolbar, Typography } from '@mui/material';
 import { styled } from '@mui/system';
 import React, { useContext, useState } from 'react';
 
 import notanglesLogoGif from '../../assets/notangles.gif';
 import notanglesLogo from '../../assets/notangles_1.png';
-import { ThemeType } from '../../constants/theme';
-import { AppContext } from '../../context/AppContext';
-import { CourseContext } from '../../context/CourseContext';
 import About from './About';
 import Changelog from './Changelog';
 import CustomModal from './CustomModal';
 import Privacy from './Privacy';
 import Settings from './Settings';
+import TermSelect from './TermSelect';
+
 
 const LogoImg = styled('img')`
   height: 46px;
@@ -42,41 +41,6 @@ const NavbarTitle = styled(Typography)`
 const Navbar: React.FC = () => {
   const [currLogo, setCurrLogo] = useState(notanglesLogo);
 
-  const {
-    term,
-    termName,
-    setTermName,
-    year,
-    setTerm,
-    setYear,
-    setSelectedTimetable,
-    displayTimetables,
-    termsData
-  } = useContext(AppContext);
-
-  const { setSelectedCourses, setSelectedClasses, setCreatedEvents } =
-    useContext(CourseContext);
-
-  const theme = useTheme<ThemeType>();
-  const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
-
-  const selectTerm = (e: any) => {
-    const defaultStartTimetable = 0;
-
-    let newTermName = e.target.value.split(', ')[0]
-    let termNum = 'T' + newTermName.split(' ')[1]
-    let newYear = e.target.value.split(', ')[1]
-
-    setTerm(termNum)
-    setYear(newYear)
-    setTermName(newTermName)
-    setSelectedTimetable(defaultStartTimetable);
-    setSelectedClasses(displayTimetables[termNum][defaultStartTimetable].selectedClasses);
-    setCreatedEvents(displayTimetables[termNum][defaultStartTimetable].createdEvents);
-    setSelectedCourses(displayTimetables[termNum][defaultStartTimetable].selectedCourses);
-  }
-
-  let termData = new Set([termsData.prevTerm.termName.concat(', ', termsData.prevTerm.year), termsData.newTerm.termName.concat(', ', termsData.newTerm.year)]);
   return (
     <NavbarBox>
       <StyledNavBar enableColorOnDark position="fixed">
@@ -90,18 +54,7 @@ const Navbar: React.FC = () => {
           <NavbarTitle variant="h6">
             Notangles
           </NavbarTitle>
-          <FormControl>
-            <Select
-              value={isMobile ? term : termName.concat(', ', year)}
-              onChange={selectTerm}
-            >
-              {
-                Array.from(termData).map((term, index) => {
-                  return <MenuItem key={index} value={term}>{term}</MenuItem>;
-                })
-              }
-            </Select>
-          </FormControl>
+          <TermSelect />
           <CustomModal
             title="About"
             showIcon={<Info />}
@@ -118,7 +71,7 @@ const Navbar: React.FC = () => {
           <CustomModal title="Settings" showIcon={<SettingsIcon />} description={'Settings'} content={<Settings />} />
         </Toolbar>
       </StyledNavBar>
-    </NavbarBox>
+    </NavbarBox >
   );
 };
 

client/src/components/navbar/TermSelect.tsx

@@ -0,0 +1,77 @@
+import { useMediaQuery, useTheme, FormControl, MenuItem, Select, InputLabel } from '@mui/material';
+import React, { useContext } from 'react';
+
+import { ThemeType } from '../../constants/theme';
+import { AppContext } from '../../context/AppContext';
+import { CourseContext } from '../../context/CourseContext';
+
+
+const TermSelect: React.FC = () => {
+
+  const {
+    term,
+    termName,
+    setTermName,
+    year,
+    setTerm,
+    setYear,
+    setSelectedTimetable,
+    displayTimetables,
+    termsData
+  } = useContext(AppContext);
+
+  const { setSelectedCourses, setSelectedClasses, setCreatedEvents } =
+    useContext(CourseContext);
+
+  const theme = useTheme<ThemeType>();
+  const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
+
+  const termData = new Set([termsData.prevTerm.termName.concat(', ', termsData.prevTerm.year), termsData.newTerm.termName.concat(', ', termsData.newTerm.year)]);
+
+  const selectTerm = (e: any) => {
+    const defaultStartTimetable = 0;
+
+    let newTermName = e.target.value.split(', ')[0];
+    let termNum = 'T' + newTermName.split(' ')[1];
+    let newYear = e.target.value.split(', ')[1];
+
+    if (e.target.value.includes("Summer")) {
+      // This is a summer term.
+      termNum = "Summer";
+    }
+
+    setTerm(termNum);
+    setYear(newYear);
+    setTermName(newTermName);
+    setSelectedTimetable(defaultStartTimetable);
+    setSelectedClasses(displayTimetables[termNum][defaultStartTimetable].selectedClasses);
+    setCreatedEvents(displayTimetables[termNum][defaultStartTimetable].createdEvents);
+    setSelectedCourses(displayTimetables[termNum][defaultStartTimetable].selectedCourses);
+  }
+
+  return (
+    <FormControl>
+      <InputLabel sx={{ marginTop: 1, color: 'white' }}>Select your term</InputLabel>
+      <Select
+        label="Select your term"
+        value={isMobile ? term : termName.concat(', ', year)}
+        sx={{
+          marginTop: 1,
+          color: 'white',
+          '.MuiSelect-icon': {
+            color: 'white'
+          },
+        }}
+        onChange={selectTerm}
+      >
+        {
+          Array.from(termData).map((term, index) => {
+            return <MenuItem key={index} value={term}>{term}</MenuItem>;
+          })
+        }
+      </Select>
+    </FormControl>
+  );
+};
+
+export default TermSelect;

client/src/components/timetableTabs/TimetableTabs.tsx

@@ -167,7 +167,7 @@ const TimetableTabs: React.FC = () => {
           <Droppable droppableId="tabs" direction="horizontal">
             {(props) => (
               <StyledTabs ref={props.innerRef} {...props.droppableProps}>
-                {displayTimetables[term].map((timetable: TimetableData, index: number) => (
+                {Object.keys(displayTimetables).length > 0 ? displayTimetables[term].map((timetable: TimetableData, index: number) => (
                   <Draggable draggableId={index.toString()} index={index}>
                     {(props) => (
                       <Box
@@ -190,7 +190,7 @@ const TimetableTabs: React.FC = () => {
                       </Box>
                     )}
                   </Draggable>
-                ))}
+                )) : null}
                 {props.placeholder}
               </StyledTabs>
             )}

client/src/constants/timetable.ts

@@ -67,6 +67,17 @@ export const getAvailableTermDetails = async () => {
       termNumber = 0; // This is a summer term.
     }
 
+    // // TODO: hardcoding to see behaviour of preserving prev timetable if the data exists
+    // termName = `Summer Term`;
+    // term = "Summer";
+    // termNumber = 0; // This is a summer term.
+
+    // TODO: hardcoding to see behaviour of preserving prev timetable for new year
+    // termNumber = 1;
+    // term = `T${termNumber}`;
+    // termName = `Term ${termNumber}`;
+    // year = "2024"
+
     const prevDateSplit = prevTermRes.split('/');
     let prevFirstDate = prevDateSplit.reverse().join('-');
     let prevTermName = `Summer Term`;
@@ -75,14 +86,20 @@ export const getAvailableTermDetails = async () => {
 
     if (prevTermIdRes.length === REGULAR_TERM_STR_LEN) {
       // This is not a summer term.
-      // prevTermNum = parseInt(prevTermIdRes.substring(1));
-      // prevTerm = `T${prevTermNum}`;
-      // prevTermName = `Term ${prevTermNum}`;
+      prevTermNum = parseInt(prevTermIdRes.substring(1));
+      prevTerm = `T${prevTermNum}`;
+      prevTermName = `Term ${prevTermNum}`;
 
       // TODO: hardcoded for now to be Term 2
-      prevTermNum = 2
+      prevTermNum = 2;
       prevTerm = `T${prevTermNum}`;
       prevTermName = `Term ${prevTermNum}`;
+
+      // TODO: testing restoring across years
+      // prevTermName = `Summer Term`;
+      // prevTerm = "Summer";
+      // prevTermNum = 0; // This is a summer term.
+
     } else {
       // This is a summer term.
       prevTermName = `Summer Term`;