empty cache when user is kick out

Author: cuttle-fish-my

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/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,9 @@ export function StatusBlock() {
 
     useEffect(() => {
         if (user === null) {
-            navigate('/login');
+            emptyCache().then(() => {
+                navigate('/login');
+            });
         }
     }, [user, navigate]);
 

src/Data/Common.js

@@ -19,6 +19,17 @@ 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
@@ -29,6 +40,7 @@ export async function handleErrors(response) {
         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");
 }