Merge pull request #8 from LioQing/v0.2.2

v0.2.2

CHANGELOG.md

@@ -1,5 +1,19 @@
 # Changelog
 
+## [0.2.2] - 2023-07-30
+
+### Added
+
+- 💾 Dark and light mode settings can be saved in the browser's local storage now.
+
+### Changed
+
+- 🛠 Change the behavior and appearance of the buttons in the introduction section.
+
+### Fixed
+
+- 👾 Fix an issue where changing tab name causes error messages in the console.
+
 ## [0.2.1] - 2023-07-30
 
 ### Added

package.json

@@ -1,55 +1,55 @@
 {
-  "name": "hku-timetable-viewer",
-  "version": "0.2.1",
-  "private": true,
-  "homepage": "http://lioqing.github.io/hku-timetable-viewer",
-  "dependencies": {
-    "@emotion/react": "^11.9.0",
-    "@emotion/styled": "^11.8.1",
-    "@mui/icons-material": "^5.8.0",
-    "@mui/material": "^5.8.1",
-    "@mui/x-data-grid": "^5.13.1",
-    "@testing-library/jest-dom": "^5.16.4",
-    "@testing-library/react": "^13.3.0",
-    "@testing-library/user-event": "^13.5.0",
-    "file-saver": "^2.0.5",
-    "lz-string": "^1.5.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-scripts": "5.0.1",
-    "typescript": "^4.7.4",
-    "web-vitals": "^2.1.4",
-    "xlsx": "^0.18.5"
-  },
-  "scripts": {
-    "start": "react-scripts start WATCHPACK_POLLING=true",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject"
-  },
-  "eslintConfig": {
-    "extends": [
-      "react-app",
-      "react-app/jest"
-    ]
-  },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
-  },
-  "devDependencies": {
-    "@types/file-saver": "^2.0.5",
-    "@types/jest": "^27.5.2",
-    "@types/node": "^16.11.45",
-    "@types/react": "^18.0.15",
-    "@types/react-dom": "^18.0.6"
-  }
-}
+    "name": "hku-timetable-viewer",
+    "version": "0.2.2",
+    "private": true,
+    "homepage": "http://lioqing.github.io/hku-timetable-viewer",
+    "dependencies": {
+        "@emotion/react": "^11.9.0",
+        "@emotion/styled": "^11.8.1",
+        "@mui/icons-material": "^5.8.0",
+        "@mui/material": "^5.8.1",
+        "@mui/x-data-grid": "^5.13.1",
+        "@testing-library/jest-dom": "^5.16.4",
+        "@testing-library/react": "^13.3.0",
+        "@testing-library/user-event": "^13.5.0",
+        "file-saver": "^2.0.5",
+        "lz-string": "^1.5.0",
+        "react": "^18.2.0",
+        "react-dom": "^18.2.0",
+        "react-scripts": "5.0.1",
+        "typescript": "^4.7.4",
+        "web-vitals": "^2.1.4",
+        "xlsx": "^0.18.5"
+    },
+    "scripts": {
+        "start": "react-scripts start WATCHPACK_POLLING=true",
+        "build": "react-scripts build",
+        "test": "react-scripts test",
+        "eject": "react-scripts eject"
+    },
+    "eslintConfig": {
+        "extends": [
+            "react-app",
+            "react-app/jest"
+        ]
+    },
+    "browserslist": {
+        "production": [
+            ">0.2%",
+            "not dead",
+            "not op_mini all"
+        ],
+        "development": [
+            "last 1 chrome version",
+            "last 1 firefox version",
+            "last 1 safari version"
+        ]
+    },
+    "devDependencies": {
+        "@types/file-saver": "^2.0.5",
+        "@types/jest": "^27.5.2",
+        "@types/node": "^16.11.45",
+        "@types/react": "^18.0.15",
+        "@types/react-dom": "^18.0.6"
+    }
+}

src/components/ChangeTabName.tsx

@@ -18,7 +18,7 @@ interface Props {
 
 const ChangeTabName = ({ changeName, setChangeName }: Props) => {
   const { timetable, setTimetable } = useContext(TimetableContext);
-  const [newName, setNewName] = useState<string>(changeName as string);
+  const [newName, setNewName] = useState<string>(changeName ?? '');
 
   useEffect(() => {
     if (changeName !== null) {

src/components/Intro.tsx

@@ -2,8 +2,12 @@ import { useState } from 'react';
 import Button from '@mui/material/Button';
 import Typography from '@mui/material/Typography';
 import HelpIcon from '@mui/icons-material/Help';
+import GitHubIcon from '@mui/icons-material/GitHub';
+import AccessTimeIcon from '@mui/icons-material/AccessTime';
+import BugReportIcon from '@mui/icons-material/BugReport';
 import Prompt from './Prompt';
 import packageJson from '../../package.json';
+import Box from '@mui/material/Box';
 
 const Intro = () => {
   const [open, setOpen] = useState(false);
@@ -47,15 +51,29 @@ const Intro = () => {
         <Button
           href='https://github.com/LioQing/hku-timetable-viewer'
           variant='outlined'
-          style={{ marginTop: '16px', marginRight: '8px' }}>
-          GitHub Repo
+          target='_blank'
+          startIcon={<GitHubIcon />}
+          style={{ marginTop: '16px' }}>
+          Source Code
         </Button>
+        <Box width='8px' style={{ display: 'inline-block' }} />
         <Button
           href='https://github.com/LioQing/hku-timetable-viewer/blob/master/CHANGELOG.md'
           variant='outlined'
-          style={{ marginTop: '16px', marginLeft: '8px' }}>
+          target='_blank'
+          startIcon={<AccessTimeIcon />}
+          style={{ marginTop: '16px' }}>
           Changelog
         </Button>
+        <Box width='8px' style={{ display: 'inline-block' }} />
+        <Button
+          href='https://github.com/LioQing/hku-timetable-viewer/issues/new'
+          variant='outlined'
+          target='_blank'
+          startIcon={<BugReportIcon />}
+          style={{ marginTop: '16px' }}>
+          Report Issue
+        </Button>
       </Prompt>
     </>
   );

src/components/SettingsProvider.tsx

@@ -3,6 +3,7 @@ import { createTheme } from '@mui/material/styles';
 import MuiThemeProvider from '@mui/material/styles/ThemeProvider';
 import { Settings, SettingsContext } from '../contexts/SettingsContext';
 import ThemeMode from '../utils/ThemeMode';
+import { saveSettings, loadSettings } from '../utils/Storage';
 
 interface Props {
   children?: React.ReactNode;
@@ -39,9 +40,12 @@ const themes = {
 };
 
 const SettingsProvider = ({ children }: Props) => {
-  const [settings, setSettings] = useState<Settings>({
-    themeMode: ThemeMode.Light,
-  });
+  const [settings, setSettingsState] = useState<Settings>(loadSettings());
+
+  const setSettings = (newSettings: Settings) => {
+    saveSettings(newSettings);
+    setSettingsState(newSettings);
+  };
 
   return (
     <MuiThemeProvider theme={themes[settings.themeMode]}>

src/utils/Storage.ts

@@ -2,6 +2,8 @@ import LZString from 'lz-string';
 import { Timetable } from '../contexts/TimetableContext';
 import Course from './Course';
 import TabOptions from './TabOptions';
+import { Settings } from '../contexts/SettingsContext';
+import ThemeMode from './ThemeMode';
 
 interface TabData {
   selected: string[];
@@ -94,4 +96,16 @@ const loadTimetable = (timetable: Timetable): Timetable => {
   return timetable;
 };
 
-export { saveTimetable, loadTimetable };
+const saveSettings = (settings: Settings) => {
+  localStorage.setItem('settings', JSON.stringify(settings));
+};
+
+const loadSettings = (): Settings => {
+  const item = localStorage.getItem('settings');
+  if (item === null) return { themeMode: ThemeMode.Light };
+  const settings = JSON.parse(item);
+  console.log(settings);
+  return settings;
+};
+
+export { saveTimetable, loadTimetable, saveSettings, loadSettings };

tempCodeRunnerFile.python

@@ -0,0 +1,8 @@
+# make a function to calculate the distance between two points
+def distance(x1, y1, x2, y2):
+    return ((x1-x2)**2 + (y1-y2)**2)**0.5
+
+# calculate the distance between (0,0) and (1, 5)
+
+d = distance(0, 0, 1, 5)
+print(d)