From 08e0d8cbecdb2a804c0c9b15295970493e2add0b Mon Sep 17 00:00:00 2001
From: callmeyan <yaclty2@gmail.com>
Date: Sat, 13 Jul 2024 15:21:39 +0800
Subject: [PATCH] update user role and save to localstorage

---
 src/contexts/auth/index.tsx                | 24 +++++++++++++++++++++-
 src/contexts/auth/role.ts                  |  9 ++++++++
 src/routes/layout/dashboard-layout.tsx     | 14 +++++++++----
 src/routes/layout/dashboard-navigation.tsx |  2 +-
 src/types/auth.d.ts                        |  3 +++
 5 files changed, 46 insertions(+), 6 deletions(-)
 create mode 100644 src/contexts/auth/role.ts

diff --git a/src/contexts/auth/index.tsx b/src/contexts/auth/index.tsx
index db47e7b..02e636f 100644
--- a/src/contexts/auth/index.tsx
+++ b/src/contexts/auth/index.tsx
@@ -2,6 +2,7 @@ import Loader from "@/components/loader";
 import React, {createContext, useEffect, useReducer} from "react";
 import {auth, getUserInfo} from "@/service/api/user.ts";
 import {setAuthToken} from "@/hooks/useAuth.ts";
+import {getRoleByDepartName} from "@/contexts/auth/role.ts";
 
 
 const AuthContext = createContext<AuthContextType | null>(null)
@@ -40,6 +41,22 @@ const authReducer = (state: AuthProps, action: { action?: string, payload: Parti
     // }
 }
 
+const UserRoleStorageKey = 'user-current-role';
+function getCurrentRole(department?:string){
+    const role = localStorage.getItem(UserRoleStorageKey);
+    if(role){
+        return role as UserRole
+    }
+    return getRoleByDepartName(department)
+}
+
+export function setCurrentRole(role: UserRole){
+    localStorage.setItem(UserRoleStorageKey,role)
+}
+function removeRoleStorage(){
+    localStorage.removeItem(UserRoleStorageKey)
+}
+
 export const AuthProvider = ({children}: { children: React.ReactNode }) => {
     const [state, dispatch] = useReducer(authReducer, initialState);
 
@@ -53,6 +70,7 @@ export const AuthProvider = ({children}: { children: React.ReactNode }) => {
                     isLoggedIn: !!user,
                     user:{
                         ...user,
+                        role: getCurrentRole(user.department)
                     }
                 }
             })
@@ -70,6 +88,7 @@ export const AuthProvider = ({children}: { children: React.ReactNode }) => {
         const user = await auth(code, state)
         // 保存token
         setAuthToken(user.token, user.expiration_time?(new Date(user.expiration_time)).getTime():-1);
+
         //
         dispatch({
             action: 'login',
@@ -77,6 +96,7 @@ export const AuthProvider = ({children}: { children: React.ReactNode }) => {
                 isLoggedIn: true,
                 user:{
                     ...user,
+                    role: getCurrentRole(user.department)
                 }
             }
         })
@@ -84,6 +104,7 @@ export const AuthProvider = ({children}: { children: React.ReactNode }) => {
     // 登出
     const logout = async () => {
         setAuthToken(null)
+        removeRoleStorage()
         dispatch({
             action: 'logout',
             payload: {
@@ -103,7 +124,8 @@ export const AuthProvider = ({children}: { children: React.ReactNode }) => {
                     token: 'test-123123',
                     expiration_time: '',
                     email: 'test@qq.com',
-                    department: 'root',
+                    department: '',
+                    role: 'staff',
                     exp: 1,
                     iat: 1,
                     iss: "Hong Kong Chu Hai College",
diff --git a/src/contexts/auth/role.ts b/src/contexts/auth/role.ts
new file mode 100644
index 0000000..6f78ee1
--- /dev/null
+++ b/src/contexts/auth/role.ts
@@ -0,0 +1,9 @@
+const RoleConfig: { [key: string]: UserRole } = {
+	'Education Technology Service Office': 'root',
+	'RO': 'ro',
+	'FO': 'fo',
+}
+
+export function getRoleByDepartName(departName?: string, defaultRole: UserRole = 'staff') {
+	return (departName ? (RoleConfig[departName] || defaultRole) : defaultRole);
+}
\ No newline at end of file
diff --git a/src/routes/layout/dashboard-layout.tsx b/src/routes/layout/dashboard-layout.tsx
index 5f09af8..6e5f38c 100644
--- a/src/routes/layout/dashboard-layout.tsx
+++ b/src/routes/layout/dashboard-layout.tsx
@@ -12,6 +12,7 @@ import {IconExit, IconUser} from "@douyinfe/semi-icons";
 import styled from "@emotion/styled";
 import useConfig from "@/hooks/useConfig.ts";
 import {IconRoles} from "@/components/icons";
+import {setCurrentRole} from "@/contexts/auth";
 
 const {Header, Content, Sider} = Layout;
 
@@ -57,10 +58,15 @@ export const HeaderUserAvatar = () => {
         <Avatar color="orange" size="small"><IconUser /></Avatar>
     </Dropdown>)
 }
-const RoleList = ['root', 'ro', 'fo','staff']
+const RoleList: UserRole[] = ['root', 'ro', 'fo','staff']
 const RoleSwitcher = ()=>{
     const {user, updateUser} = useAuth()
-
+    // update user role
+    const changeRole = (role:UserRole)=>{
+        updateUser({role}).then(()=>{
+            setCurrentRole(role)
+        })
+    }
     return (<>
         {AppMode !== 'production' && (<Dropdown
             clickToHide
@@ -68,8 +74,8 @@ const RoleSwitcher = ()=>{
                 <Dropdown.Menu>
                     {RoleList.map((key) => (
                         <Dropdown.Item
-                            active={user?.department == key} key={key}
-                            onClick={() => updateUser({department: key})}
+                            active={user?.role == key} key={key}
+                            onClick={() => changeRole(key)}
                         ><span>{key.toUpperCase()}</span></Dropdown.Item>
                     ))}
                 </Dropdown.Menu>
diff --git a/src/routes/layout/dashboard-navigation.tsx b/src/routes/layout/dashboard-navigation.tsx
index b195ea0..cc06a05 100644
--- a/src/routes/layout/dashboard-navigation.tsx
+++ b/src/routes/layout/dashboard-navigation.tsx
@@ -33,7 +33,7 @@ export function DashboardNavigation() {
         if (!user) return [];
 
         return AllDashboardMenu.filter(it => {
-            return !it.role || it.role.includes(user.department)
+            return !it.role || it.role.includes(user.role)
         });
     }, [user])
     return (<div className={'dashboard-menu-container'}>
diff --git a/src/types/auth.d.ts b/src/types/auth.d.ts
index e987199..97e3653 100644
--- a/src/types/auth.d.ts
+++ b/src/types/auth.d.ts
@@ -1,3 +1,5 @@
+declare type UserRole = 'root' | 'ro' | 'fo' | 'staff'
+
 declare type UserProfile = {
     id: string | number;
     token: string;
@@ -10,6 +12,7 @@ declare type UserProfile = {
     iss: string;
     nbf: number;
     type: string;
+    role: UserRole;
 }
 
 declare interface AuthProps {