Merge pull request #96 from OpenSIST/dev

fix bug #95

Author: boynextdoor-cze

src/Components/Profile/ProfileSideBar/ProfileSideBar.jsx

@@ -26,7 +26,7 @@ import PersonAddAltIcon from '@mui/icons-material/PersonAddAlt';
 import {ConnectWithoutContact, Edit, Refresh, HomeRounded, LinkedIn, Link as LinkIcon, Mail} from "@mui/icons-material";
 import {blue, grey} from "@mui/material/colors";
 import {CollapseSideBar} from "../../common";
-import React, {useState} from "react";
+import React, {useEffect, useState} from "react";
 import Grid2 from "@mui/material/Unstable_Grid2";
 import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
 import {faQq, faWeixin} from "@fortawesome/free-brands-svg-icons";
@@ -41,7 +41,9 @@ export function ProfileSideBar({loaderData}) {
     const [anonymousOpen, setAnonymousOpen] = useState(false);
     const [editContactOpen, setEditContactOpen] = useState(false);
     const [contact, setContact] = useState(userContact);
-
+    useEffect(() => {
+        setAnonymous(displayName !== user);
+    }, [displayName, user])
     return (
         <CollapseSideBar
             sx={{
@@ -107,7 +109,7 @@ export function ProfileSideBar({loaderData}) {
                 </Badge>
                 <Form method='post' style={{position: 'absolute', right: '10px'}}>
                     <Tooltip title='刷新侧边栏信息' arrow>
-                        <IconButton type='submit' variant="outlined" name='button' value='Refresh' >
+                        <IconButton type='submit' variant="outlined" name='button' value='Refresh'>
                             <Refresh fontSize='large'/>
                         </IconButton>
                     </Tooltip>

src/Components/ProgramPage/ProgramContent/StarButton.jsx

@@ -1,14 +1,17 @@
 import { StarRounded, StarBorderRounded } from "@mui/icons-material";
-import { IconButton, Tooltip } from "@mui/material";
+import { IconButton, Tooltip, useTheme } from "@mui/material";
 import { Form } from "react-router-dom";
 
 const StarButton = ({programID, metaData}) => {
+    const theme = useTheme()
+    const darkMode = theme.palette.mode === "dark"
     const starred = metaData.ProgramCollection && metaData.ProgramCollection.includes(programID)
+    const color = darkMode ? "#ff9f0a" : "#ff9500"
 
     return <Form method='post' style={{display: 'flex'}}>
         <Tooltip title={starred ? "取消收藏该项目" : "收藏该项目"} arrow>
             <IconButton type="submit" name="ActionType" value={starred ? "UnStar" : "Star"}>
-                {starred ? <StarRounded/> : <StarBorderRounded/>}
+                {starred ? <StarRounded style= {{color: color}}/> : <StarBorderRounded/>}
             </IconButton>
         </Tooltip>
     </Form>

src/Components/TopBar/StatusBlock/StatusBlock.jsx

@@ -4,11 +4,12 @@ import React, {useContext, useEffect} from "react";
 import localforage from "localforage";
 import {getAvatar, getDisplayName, getMetaData, logout, useUser} from "../../../Data/UserData";
 import {Avatar, Box, IconButton, ListItemIcon, Menu, MenuItem, Tooltip, Typography, useTheme} from "@mui/material";
-import {AccountBoxRounded, StarRounded, LockResetRounded, LogoutRounded, ExitToAppRounded} from "@mui/icons-material";
+import {AccountBoxRounded, StarRounded, LockResetRounded, ExitToAppRounded} from "@mui/icons-material";
 import {blue} from "@mui/material/colors";
 import {ThemeContext} from "../../../index";
 import Brightness4Icon from '@mui/icons-material/Brightness4';
 import Brightness7Icon from '@mui/icons-material/Brightness7';
+import {emptyCache} from "../../../Data/Common";
 
 export async function loader() {
     const displayName = await getDisplayName();
@@ -38,7 +39,11 @@ export function StatusBlock() {
 
     useEffect(() => {
         if (user === null) {
-            navigate('/login');
+            emptyCache().then(() => {
+                if (window.location.pathname !== '/agreement') {
+                    navigate('/login');
+                }
+            });
         }
     }, [user, navigate]);
 

src/Data/Common.js

@@ -19,16 +19,32 @@ export async function headerGenerator(auth = false, contentType = 'application/j
     return header;
 }
 
+export async function emptyCache() {
+    /*
+    * Empty the cache
+     */
+    const theme = await localforage.getItem('theme');
+    await localforage.clear();
+    if (theme) {
+        await localforage.setItem('theme', theme);
+    }
+}
+
 export async function handleErrors(response) {
     /*
     * Handle the error of the response
     * @param response [Response]: response from fetch
     * @return: response
      */
     if (response.status === 401) {
+        console.log(window.location.pathname)
+        if (window.location.pathname === "/agreement") {
+            return;
+        }
         if (!["/login", "/register", "/reset"].includes(window.location.pathname)) {
             window.location.href = "/login";
         }
+        await emptyCache();
         return;
     }
     if (response.status !== 200) {

src/Data/UserData.js

@@ -12,7 +12,7 @@ import {
     COLLECT_PROGRAM,
     UNCOLLECT_PROGRAM,
 } from "../APIs/APIs";
-import {blobToBase64, handleErrors, headerGenerator} from "./Common";
+import {blobToBase64, emptyCache, handleErrors, headerGenerator} from "./Common";
 import {useState} from "react";
 import {getApplicants, setApplicants} from "./ApplicantData";
 import {getRecordByApplicant, setRecord} from "./RecordData";
@@ -84,7 +84,8 @@ export async function logout() {
         const content = await response.json();
         alert(`${content.error}, Error code: ${response.status}`);
     }
-    await localforage.clear();  // clear all the cache data
+    // await localforage.clear();  // clear all the cache data
+    await emptyCache(); // clear all the cache data
     return redirect("/login");
 }