From 19d5dcdbc509868a19a05f8eadd2fa85d02621d4 Mon Sep 17 00:00:00 2001 From: Shaam Date: Thu, 26 Oct 2023 20:06:07 +1100 Subject: [PATCH] Fixed behaviour of preserving prev calendar data --- client/src/App.tsx | 11 ++- .../src/components/controls/CourseSelect.tsx | 6 +- client/src/components/navbar/Navbar.tsx | 57 ++------------ client/src/components/navbar/TermSelect.tsx | 77 +++++++++++++++++++ .../timetableTabs/TimetableTabs.tsx | 4 +- client/src/constants/timetable.ts | 25 +++++- 6 files changed, 115 insertions(+), 65 deletions(-) create mode 100644 client/src/components/navbar/TermSelect.tsx diff --git a/client/src/App.tsx b/client/src/App.tsx index 673ecf6f7..e9a2b4d0d 100644 --- a/client/src/App.tsx +++ b/client/src/App.tsx @@ -158,10 +158,13 @@ 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) @@ -169,7 +172,7 @@ const App: React.FC = () => { }; fetchReliably(fetchTermData); - }, [year]); + }, []); useEffect(() => { /** diff --git a/client/src/components/controls/CourseSelect.tsx b/client/src/components/controls/CourseSelect.tsx index ef95f2c83..a216c4de0 100644 --- a/client/src/components/controls/CourseSelect.tsx +++ b/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; diff --git a/client/src/components/navbar/Navbar.tsx b/client/src/components/navbar/Navbar.tsx index 3c68ca1d0..997e72f98 100644 --- a/client/src/components/navbar/Navbar.tsx +++ b/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(); - 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 ( @@ -90,18 +54,7 @@ const Navbar: React.FC = () => { Notangles - - - + } @@ -118,7 +71,7 @@ const Navbar: React.FC = () => { } description={'Settings'} content={} /> - + ); }; diff --git a/client/src/components/navbar/TermSelect.tsx b/client/src/components/navbar/TermSelect.tsx new file mode 100644 index 000000000..675ee8e1a --- /dev/null +++ b/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(); + 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 ( + + Select your term + + + ); +}; + +export default TermSelect; diff --git a/client/src/components/timetableTabs/TimetableTabs.tsx b/client/src/components/timetableTabs/TimetableTabs.tsx index f0d03fbf6..4d323170c 100644 --- a/client/src/components/timetableTabs/TimetableTabs.tsx +++ b/client/src/components/timetableTabs/TimetableTabs.tsx @@ -167,7 +167,7 @@ const TimetableTabs: React.FC = () => { {(props) => ( - {displayTimetables[term].map((timetable: TimetableData, index: number) => ( + {Object.keys(displayTimetables).length > 0 ? displayTimetables[term].map((timetable: TimetableData, index: number) => ( {(props) => ( { )} - ))} + )) : null} {props.placeholder} )} diff --git a/client/src/constants/timetable.ts b/client/src/constants/timetable.ts index ec129e3ed..a6f83a62e 100644 --- a/client/src/constants/timetable.ts +++ b/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`;