From 9d372bee864f85a2abffefee82fd5ba016c36165 Mon Sep 17 00:00:00 2001 From: Sambo Chea Date: Wed, 5 Jan 2022 16:28:49 +0700 Subject: [PATCH] Upgrade deps --- package.json | 12 +- src/app/App.tsx | 11 -- src/app/{App.less => app.less} | 0 src/app/index.tsx | 18 ++ src/constants/index.ts | 6 + src/context/AuthContext.tsx | 131 --------------- src/context/auth.context.tsx | 149 ++++++++++++++++ src/context/index.ts | 4 + src/context/layout.context.tsx | 38 +++++ src/helpers/error.helper.tsx | 6 + src/helpers/index.ts | 3 + src/index.tsx | 10 +- src/layouts/base.layout.tsx | 15 ++ src/layouts/index.ts | 3 + src/pages/{About => about}/index.less | 0 src/pages/{About => about}/index.tsx | 0 src/pages/{Error => error}/403.tsx | 0 src/pages/{Error => error}/404.tsx | 0 src/pages/error/index.ts | 7 + src/pages/{Home => home}/index.less | 0 src/pages/{Home => home}/index.tsx | 0 src/pages/index.ts | 8 + src/pages/{Info => info}/index.less | 0 src/pages/{Info => info}/index.tsx | 0 src/pages/{Login => login}/index.less | 0 src/pages/{Login => login}/index.tsx | 0 src/pages/{Profile => profile}/index.tsx | 0 src/pages/{Reset => reset}/index.tsx | 4 +- src/provider/AppProvider.tsx | 5 - src/routes/AuthRoute.tsx | 21 --- src/routes/auth.route.tsx | 19 +++ src/routes/index.tsx | 205 ++++++++++++++++++++--- src/routes/interfaces.ts | 2 + src/routes/routes.tsx | 104 ++++++------ src/routes/types.ts | 16 +- 35 files changed, 532 insertions(+), 265 deletions(-) delete mode 100644 src/app/App.tsx rename src/app/{App.less => app.less} (100%) create mode 100644 src/app/index.tsx create mode 100644 src/constants/index.ts delete mode 100644 src/context/AuthContext.tsx create mode 100644 src/context/auth.context.tsx create mode 100644 src/context/index.ts create mode 100644 src/context/layout.context.tsx create mode 100644 src/helpers/error.helper.tsx create mode 100644 src/helpers/index.ts create mode 100644 src/layouts/base.layout.tsx create mode 100644 src/layouts/index.ts rename src/pages/{About => about}/index.less (100%) rename src/pages/{About => about}/index.tsx (100%) rename src/pages/{Error => error}/403.tsx (100%) rename src/pages/{Error => error}/404.tsx (100%) create mode 100644 src/pages/error/index.ts rename src/pages/{Home => home}/index.less (100%) rename src/pages/{Home => home}/index.tsx (100%) create mode 100644 src/pages/index.ts rename src/pages/{Info => info}/index.less (100%) rename src/pages/{Info => info}/index.tsx (100%) rename src/pages/{Login => login}/index.less (100%) rename src/pages/{Login => login}/index.tsx (100%) rename src/pages/{Profile => profile}/index.tsx (100%) rename src/pages/{Reset => reset}/index.tsx (86%) delete mode 100644 src/provider/AppProvider.tsx delete mode 100644 src/routes/AuthRoute.tsx create mode 100644 src/routes/auth.route.tsx diff --git a/package.json b/package.json index a33423b..2d6e010 100644 --- a/package.json +++ b/package.json @@ -14,8 +14,8 @@ "dependencies": { "react": "^17.0.2", "react-dom": "^17.0.2", - "react-router-dom": "^5.2.0", - "web-vitals": "^1.0.1" + "react-router-dom": "^6.2.1", + "web-vitals": "^2.1.2" }, "scripts": { "start": "craco start", @@ -49,11 +49,11 @@ "@testing-library/user-event": "^12.1.10", "@types/jest": "^26.0.15", "@types/node": "^12.0.0", - "@types/react": "^17.0.0", - "@types/react-dom": "^17.0.0", - "@types/react-router-dom": "^5.1.7", + "@types/react": "^17.0.2", + "@types/react-dom": "^17.0.2", + "@types/react-router-dom": "^5.3.2", "craco-less": "^2.0.0", - "prettier": "^2.3.1", + "prettier": "^2.5.1", "react-scripts": "5.0.0", "typescript": "^4.5.4" } diff --git a/src/app/App.tsx b/src/app/App.tsx deleted file mode 100644 index 53e2f89..0000000 --- a/src/app/App.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import AppProvider from '@/provider/AppProvider' -import RouterView from '../routes' -import './App.less' - -const App = () => { - return ( - - ) -} - -export default App diff --git a/src/app/App.less b/src/app/app.less similarity index 100% rename from src/app/App.less rename to src/app/app.less diff --git a/src/app/index.tsx b/src/app/index.tsx new file mode 100644 index 0000000..98129b5 --- /dev/null +++ b/src/app/index.tsx @@ -0,0 +1,18 @@ +import { BrowserRouter as Router } from 'react-router-dom' +import RouterView from '@/routes' +import { AuthProvider, LayoutProvider } from '@/context' +import './app.less' + +const App = () => { + return ( + + + + + + + + ) +} + +export default App diff --git a/src/constants/index.ts b/src/constants/index.ts new file mode 100644 index 0000000..3d52d91 --- /dev/null +++ b/src/constants/index.ts @@ -0,0 +1,6 @@ +export const TOKEN_KEY = 'token' + +export const ROUTE = { + ROOT: '/', + LOGIN: '/login', +} diff --git a/src/context/AuthContext.tsx b/src/context/AuthContext.tsx deleted file mode 100644 index 4d75790..0000000 --- a/src/context/AuthContext.tsx +++ /dev/null @@ -1,131 +0,0 @@ -import { AppConfig } from '@/config' -import { printError, printInfo } from '@/utils/log_util' -import { getStorage, setStorage } from '@/utils/ls_util' -import React, { useContext, useCallback, useReducer, useEffect } from 'react' - -interface AuthContextState { - login: (args: { username: string; password: string }) => Promise - state: { - user: { - username: string - userId: string - } | null - } - getToken: () => string | undefined | null - logout: () => void - isLogin: () => boolean -} - -enum AuthActionType { - 'LOGIN' = 'LOGIN', - 'LOGOUT' = 'LOGOUT', -} - -const AuthReducer: ( - state: AuthContextState['state'], - action: { - type: AuthActionType - payload?: any - } -) => AuthContextState['state'] = (state, action) => { - switch (action.type) { - case AuthActionType.LOGIN: - return { - ...state, - user: action.payload, - } - case AuthActionType.LOGOUT: - return { - ...state, - user: null, - } - default: - return state - } -} - -const AuthContext = React.createContext({ - login: async () => {}, - state: { - user: null, - }, - getToken: () => { - return undefined - }, - logout: () => {}, - isLogin: () => { return false }, -}) - -const AuthProvider: React.FC = (props) => { - const [state, dispatch] = useReducer(AuthReducer, { - user: null, - }) - - const login = async (args: { username: string; password: string }) => { - const res = { - data: { - token: 'DEMO_HAH', - }, - } - - setStorage(AppConfig.CLIENT_TOKEN_KEY, res.data.token) - await verify() - dispatch({ - type: AuthActionType.LOGIN, - payload: args, - }) - - return - } - - useEffect(() => { - const doVerify = async () => { - const token = getStorage(AppConfig.CLIENT_TOKEN_KEY) - const userAuthInfo = {} - - printInfo("User details =>", token, userAuthInfo) - } - - doVerify() - }, []) - - const verify = async () => { - const token = getStorage(AppConfig.CLIENT_TOKEN_KEY) - printError('Verify not implemented with token: ', token) - const userAuthInfo = {} - return userAuthInfo - } - - const logout = useCallback(() => { - setStorage(AppConfig.CLIENT_TOKEN_KEY, undefined) - dispatch({ - type: AuthActionType.LOGOUT, - }) - }, []) - - const getToken = () => getStorage(AppConfig.CLIENT_TOKEN_KEY) - - const isLogin = (): boolean => { - return getToken() != null - } - - return ( - - {props.children} - - ) -} - -export const useAuthContext = () => { - return useContext(AuthContext) -} - -export default AuthProvider diff --git a/src/context/auth.context.tsx b/src/context/auth.context.tsx new file mode 100644 index 0000000..1b8e386 --- /dev/null +++ b/src/context/auth.context.tsx @@ -0,0 +1,149 @@ +import React, { useContext, useCallback, useReducer, useEffect } from 'react' +import { ROUTE, TOKEN_KEY } from '@/constants' +import { useNavigate, useLocation } from 'react-router-dom' +import { handleError } from '@/helpers' + +interface AuthContextState { + login: (args: { + username: string + password: string + }) => Promise + state: { + user: UserAuth | null + } + getToken: () => string | undefined | null + logout: () => void +} + +export interface UserAuth { + username: string + id: string + email: string + phone: string + getToken: () => string | null + roles: string[] + profile: any + authorities: string[] +} + +enum AuthActionType { + 'LOGIN' = 'LOGIN', + 'LOGOUT' = 'LOGOUT', +} + +const AuthReducer: ( + state: AuthContextState['state'], + action: { + type: AuthActionType + payload?: any + } +) => AuthContextState['state'] = (state, action) => { + switch (action.type) { + case AuthActionType.LOGIN: + return { + ...state, + user: action.payload, + } + case AuthActionType.LOGOUT: + return { + ...state, + user: null, + } + default: + return state + } +} + +const AuthContext = React.createContext({ + login: async () => null, + state: { + user: null, + }, + getToken: () => { + return undefined + }, + logout: () => {}, +}) + +const AuthProvider: React.FC = (props) => { + const [state, dispatch] = useReducer(AuthReducer, { + user: null, + }) + + const login = async (args: { username: string; password: string }) => { + let userAuthInfo: UserAuth | null = null + try { + localStorage.setItem(TOKEN_KEY, '') + userAuthInfo = await verify() + dispatch({ + type: AuthActionType.LOGIN, + payload: userAuthInfo, + }) + } catch (e) { + handleError(e) + } + return userAuthInfo + } + + const navigate = useNavigate() + const location = useLocation() + + useEffect(() => { + const doVerify = async () => { + const userAuthInfo = await verify() + if (userAuthInfo === null && location.pathname !== '/login') { + await navigate(ROUTE.LOGIN) + } else if ( + userAuthInfo !== null && + location.pathname === '/login' + ) { + await navigate(ROUTE.ROOT) + } + } + + doVerify() + }, []) + + const verify = async () => { + const token = localStorage.getItem(TOKEN_KEY) as string + let userAuthInfo: UserAuth | null = null + try { + dispatch({ + type: AuthActionType.LOGIN, + payload: userAuthInfo, + }) + } catch (e) { + console.error(e) + } + return userAuthInfo + } + + const logout = useCallback(async () => { + localStorage.setItem(TOKEN_KEY, '') + dispatch({ + type: AuthActionType.LOGOUT, + }) + navigate(ROUTE.LOGIN) + }, [state]) + + return ( + { + return localStorage.getItem(TOKEN_KEY) + }, + }} + > + {props.children} + + ) +} + +export const useAuthContext = () => { + return useContext(AuthContext) +} + +export default AuthProvider diff --git a/src/context/index.ts b/src/context/index.ts new file mode 100644 index 0000000..efe3cb5 --- /dev/null +++ b/src/context/index.ts @@ -0,0 +1,4 @@ +import AuthProvider, { useAuthContext } from './auth.context' +import LayoutProvider, { useLayout } from './layout.context' + +export { AuthProvider, LayoutProvider, useLayout, useAuthContext } diff --git a/src/context/layout.context.tsx b/src/context/layout.context.tsx new file mode 100644 index 0000000..188818d --- /dev/null +++ b/src/context/layout.context.tsx @@ -0,0 +1,38 @@ +import React, { createContext, useContext, useState, useEffect } from 'react' +import { useLocation } from 'react-router-dom' + +interface LayoutContextState { + selectedSideMenuKeys: string[] + setSelectedSideMenuKeys: React.Dispatch> +} + +const LayoutContext = createContext({ + selectedSideMenuKeys: [], + setSelectedSideMenuKeys: () => {}, +}) + +const LayoutProvider: React.FC = (props) => { + const [selectedSideMenuKeys, setSelectedSideMenuKeys] = useState< + LayoutContextState['selectedSideMenuKeys'] + >([]) + + const location = useLocation() + + useEffect(() => { + if (location.pathname === '/') { + setSelectedSideMenuKeys([]) + } + }, [location.pathname]) + + return ( + + {props.children} + + ) +} + +export const useLayout = () => useContext(LayoutContext) + +export default LayoutProvider diff --git a/src/helpers/error.helper.tsx b/src/helpers/error.helper.tsx new file mode 100644 index 0000000..20cc848 --- /dev/null +++ b/src/helpers/error.helper.tsx @@ -0,0 +1,6 @@ +const handleError = (e: any) => { + console.error(e) + return

See console

+} + +export default handleError diff --git a/src/helpers/index.ts b/src/helpers/index.ts new file mode 100644 index 0000000..9fbff2c --- /dev/null +++ b/src/helpers/index.ts @@ -0,0 +1,3 @@ +import handleError from './error.helper' + +export { handleError } diff --git a/src/index.tsx b/src/index.tsx index 265cf5a..e5a335a 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -1,14 +1,14 @@ import React from 'react' import ReactDOM from 'react-dom' import './index.less' -import App from '@/app/App' +import App from '@/app' import reportWebVitals from './reportWebVitals' ReactDOM.render( - - - , - document.getElementById('root') + + + , + document.getElementById('root') ) // If you want to start measuring performance in your app, pass a function diff --git a/src/layouts/base.layout.tsx b/src/layouts/base.layout.tsx new file mode 100644 index 0000000..9e37774 --- /dev/null +++ b/src/layouts/base.layout.tsx @@ -0,0 +1,15 @@ +import React from 'react' + +const BaseLayout: React.FC<{ + renderSideMenu: () => React.ReactNode +}> = (props) => { + const { renderSideMenu } = props + return ( +
+ {renderSideMenu()} +
{props.children}
+
+ ) +} + +export default BaseLayout diff --git a/src/layouts/index.ts b/src/layouts/index.ts new file mode 100644 index 0000000..13f267c --- /dev/null +++ b/src/layouts/index.ts @@ -0,0 +1,3 @@ +import BaseLayout from './base.layout' + +export { BaseLayout } diff --git a/src/pages/About/index.less b/src/pages/about/index.less similarity index 100% rename from src/pages/About/index.less rename to src/pages/about/index.less diff --git a/src/pages/About/index.tsx b/src/pages/about/index.tsx similarity index 100% rename from src/pages/About/index.tsx rename to src/pages/about/index.tsx diff --git a/src/pages/Error/403.tsx b/src/pages/error/403.tsx similarity index 100% rename from src/pages/Error/403.tsx rename to src/pages/error/403.tsx diff --git a/src/pages/Error/404.tsx b/src/pages/error/404.tsx similarity index 100% rename from src/pages/Error/404.tsx rename to src/pages/error/404.tsx diff --git a/src/pages/error/index.ts b/src/pages/error/index.ts new file mode 100644 index 0000000..1404c04 --- /dev/null +++ b/src/pages/error/index.ts @@ -0,0 +1,7 @@ +import AccessDenied from "./403"; +import NotFound from "./404"; + +export { + AccessDenied, + NotFound, +} \ No newline at end of file diff --git a/src/pages/Home/index.less b/src/pages/home/index.less similarity index 100% rename from src/pages/Home/index.less rename to src/pages/home/index.less diff --git a/src/pages/Home/index.tsx b/src/pages/home/index.tsx similarity index 100% rename from src/pages/Home/index.tsx rename to src/pages/home/index.tsx diff --git a/src/pages/index.ts b/src/pages/index.ts new file mode 100644 index 0000000..a0aac31 --- /dev/null +++ b/src/pages/index.ts @@ -0,0 +1,8 @@ +import About from './about' +import Home from './home' +import Info from './info' +import Login from './login' +import Profile from './profile' +import Reset from './reset' + +export { Login, About, Home, Info, Profile, Reset } diff --git a/src/pages/Info/index.less b/src/pages/info/index.less similarity index 100% rename from src/pages/Info/index.less rename to src/pages/info/index.less diff --git a/src/pages/Info/index.tsx b/src/pages/info/index.tsx similarity index 100% rename from src/pages/Info/index.tsx rename to src/pages/info/index.tsx diff --git a/src/pages/Login/index.less b/src/pages/login/index.less similarity index 100% rename from src/pages/Login/index.less rename to src/pages/login/index.less diff --git a/src/pages/Login/index.tsx b/src/pages/login/index.tsx similarity index 100% rename from src/pages/Login/index.tsx rename to src/pages/login/index.tsx diff --git a/src/pages/Profile/index.tsx b/src/pages/profile/index.tsx similarity index 100% rename from src/pages/Profile/index.tsx rename to src/pages/profile/index.tsx diff --git a/src/pages/Reset/index.tsx b/src/pages/reset/index.tsx similarity index 86% rename from src/pages/Reset/index.tsx rename to src/pages/reset/index.tsx index 622f5e1..cc4c0ee 100644 --- a/src/pages/Reset/index.tsx +++ b/src/pages/reset/index.tsx @@ -1,7 +1,7 @@ import { RouteTypes } from '@/routes/types' import { clearStorage } from '@/utils/ls_util' import { useEffect } from 'react' -import { Redirect } from 'react-router' +import { Navigate } from 'react-router' const Reset = () => { const clearAllCaches = () => { @@ -17,7 +17,7 @@ const Reset = () => { clearAllCaches() }, []) - return + return } export default Reset diff --git a/src/provider/AppProvider.tsx b/src/provider/AppProvider.tsx deleted file mode 100644 index 1f66a82..0000000 --- a/src/provider/AppProvider.tsx +++ /dev/null @@ -1,5 +0,0 @@ -const AppProvider = (props: any) => { - return <>{props.children} -} - -export default AppProvider diff --git a/src/routes/AuthRoute.tsx b/src/routes/AuthRoute.tsx deleted file mode 100644 index e1c2139..0000000 --- a/src/routes/AuthRoute.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import { useAuthContext } from '@/context/AuthContext' -import AccessDenied from '@/pages/Error/403' -import { Route } from 'react-router-dom' - -const AuthRoute = (props: any) => { - const { component, ...rest } = props - const { isLogin } = useAuthContext() - - if (!isLogin()) { - return () - } - - return ( - - ) -} - -export default AuthRoute diff --git a/src/routes/auth.route.tsx b/src/routes/auth.route.tsx new file mode 100644 index 0000000..d3156f9 --- /dev/null +++ b/src/routes/auth.route.tsx @@ -0,0 +1,19 @@ +import { TOKEN_KEY } from '@/constants' +import React from 'react' +import { Route, useNavigate } from 'react-router-dom' + +const AuthRoute: React.FC<{ + component: () => React.ReactNode +}> = (props) => { + const { component, ...rest } = props + const navigate = useNavigate() + const token = localStorage.getItem(TOKEN_KEY) as string + + if (!token) { + navigate('/login') + } + + return +} + +export default AuthRoute diff --git a/src/routes/index.tsx b/src/routes/index.tsx index f3f0e86..550e979 100644 --- a/src/routes/index.tsx +++ b/src/routes/index.tsx @@ -1,35 +1,186 @@ -import AuthProvider from '@/context/AuthContext' -import { BrowserRouter as Router, Switch, Route } from 'react-router-dom' -import AuthRoute from './AuthRoute' -import { routes } from './routes' +import { useCallback } from 'react' +import routes, { Authority, sideMenuRouteObjs, SideSubMenuObj } from './routes' +import { Routes, Route, Link, useLocation } from 'react-router-dom' +import AuthRoute from './auth.route' +import { BaseLayout } from '@/layouts' +import { useLayout, useAuthContext } from '@/context' +import { Login } from '@/pages' +import { AccessDenied } from '@/pages/error' + +const renderRoute = (item: any) => { + const routeProps = { + key: item.key, + path: item.path, + exact: item.exact || true, + component: + item?.disabled === true ? () => : item.component, + headerLabel: item.headerLabel, + } + + return +} + +const newSideMenuRouteObjs: any[] = sideMenuRouteObjs.reduce( + (acc, curr: any) => { + let routes: any[] = [] + if (curr.subMenus) { + routes.push(...curr.subMenus) + } else { + routes.push(curr) + } + + return [...acc, ...routes] as any + }, + [] +) + +const subMenusObjs: any[] = sideMenuRouteObjs.filter( + (item: any) => item.subMenus !== undefined +) const RouterView = () => { + const { state } = useAuthContext() + const { selectedSideMenuKeys, setSelectedSideMenuKeys } = useLayout() + + const authorities = (state && state.user && state.user.authorities) || [] + const location = useLocation() + + const AuthChecker = (item: any): any | null => { + const authority = item?.authority as Authority + if (!authority || !authority.privileges) return item + const privileges = authority.privileges + + if (typeof privileges === 'string') { + // have permission + if (authorities.some((e) => e === privileges)) return item + } else if (Array.isArray(privileges)) { + // have permission + if (authority.strict === true) { + if (privileges.every((e) => authorities.some((a) => e === a))) + return item + } else { + if (privileges.some((e) => authorities.some((a) => e === a))) + return item + } + } + + if (authority.hideNoPrivilege === false) { + return { + ...item, + disabled: true, + } + } + + // not have permission + // ignore and return null for no permission + return null + } + + const AuthFilterItems = (items: any[]) => { + const filters = items.map((item) => AuthChecker(item)) + return filters.filter((s) => s !== null) + } + + const renderMenuItem = useCallback((item: any) => { + const { key, path, label, disabled } = item + + return ( +
{ + setSelectedSideMenuKeys([key]) + }} + key={key} + // icon={item.icon} + > + {label} +
+ ) + }, []) + + const renderSideMenuLinks = useCallback(() => { + const defaultSelectedKey = newSideMenuRouteObjs.find((item) => { + return '/' + item.key === location.pathname + }) + + const defaultOpenKeys: string[] = [] + + const openSubMenusObj = subMenusObjs.find((item: SideSubMenuObj) => { + return item.subMenus.some((s) => '/' + s.key === location.pathname) + }) + + if (openSubMenusObj) { + defaultOpenKeys.push(openSubMenusObj.key) + } + + return ( +
+
+ {AuthFilterItems(sideMenuRouteObjs).map((item) => { + const { subMenus } = item as any + + return subMenus ? ( +
+ {AuthFilterItems(subMenus).map((s: any) => + renderMenuItem(s) + )} +
+ ) : ( + renderMenuItem(item) + ) + })} +
+
+ ) + }, []) + + if (location.pathname === '/login') { + return + } + + const AuthRenderRoutes = () => { + const allRoutes = [...routes, ...newSideMenuRouteObjs] + + return AuthFilterItems(allRoutes) + } + return ( - - - {routes.map((route) => { - const { withAuthority } = route - if (withAuthority) { + { + return renderSideMenuLinks() + }} + > + + { return ( - - - + <> + {AuthRenderRoutes().map((item) => + renderRoute(item) + )} + ) - } else { - return ( - - ) - } - })} - - + }} + /> + + ) } diff --git a/src/routes/interfaces.ts b/src/routes/interfaces.ts index ce85d7a..73c61d6 100644 --- a/src/routes/interfaces.ts +++ b/src/routes/interfaces.ts @@ -10,10 +10,12 @@ export interface AuthorityProps { withAuthority?: boolean | undefined authorities?: Authority | string[] | string | undefined strictAuthority?: boolean | undefined + hideNoPrivilege?: boolean | undefined } export interface CustomRouteProps extends RouteProps, AuthorityProps { key: string + location?: string | undefined } export interface MenuProps { diff --git a/src/routes/routes.tsx b/src/routes/routes.tsx index e0c9e2d..7ad67a5 100644 --- a/src/routes/routes.tsx +++ b/src/routes/routes.tsx @@ -1,57 +1,65 @@ -import About from '@/pages/About' -import NotFound from '@/pages/Error/404' -import Home from '@/pages/Home' -import Info from '@/pages/Info' -import Login from '@/pages/Login' -import Profile from '@/pages/Profile' -import Reset from '@/pages/Reset' -import { CustomRouteProps } from '@/routes/interfaces' -import { RouteTypes } from '@/routes/types' +import React from 'react' +import { Reset, Home, Profile, Info } from '@/pages' -const routes: CustomRouteProps[] = [ - // Auth +export interface Authority { + privileges?: string | Array + // if true => AND | is false => OR (related to privileges) + // compare privileges of reponse and privileges above + strict?: boolean + // if true, hide or not render. Else show but disabled (element/children) + hideNoPrivilege?: boolean +} + +export interface RouteObj { + path: string + component: () => React.ReactNode + exact?: boolean + key: string + headerLabel?: string + authority?: Authority +} + +export interface SideMenuRouteObj extends RouteObj { + icon?: any + label: string +} + +export interface SideSubMenuObj { + icon: any + label: string + key: string + subMenus: SideMenuRouteObj[] +} + +const sideMenuRouteObjs: (SideMenuRouteObj | SideSubMenuObj)[] = [ { - key: 'login', - path: RouteTypes.LOGIN, - component: () => , - }, - { - key: 'home', - exact: true, - path: RouteTypes.HOME, component: () => , + path: '/', + key: 'home', + headerLabel: '', + label: 'Home', + // authority: { + // privileges: ['ADMIN', 'USER'], + // hideNoPrivilege: false, + // strict: true, + // } }, { - key: 'about', - path: RouteTypes.ABOUT, - component: () => , - }, - { - exact: true, - key: 'info', - path: RouteTypes.INFO, - component: () => , - }, - { - exact: true, - key: 'reset', - path: RouteTypes.RESET, - component: () => , - }, - { - exact: true, - key: 'profile', - path: RouteTypes.PROFILE, component: () => , - withAuthority: true, - }, - - // Errors - { - key: 'notfound', - path: RouteTypes.ERROR_404, - component: () => , + path: '/profile', + key: 'profile', + headerLabel: '', + label: 'Profile', }, ] -export { routes } +const routes: RouteObj[] = [ + { + path: '/reset', + component: () => , + key: 'reset', + headerLabel: 'Reset', + }, +] + +export { sideMenuRouteObjs, routes as default } diff --git a/src/routes/types.ts b/src/routes/types.ts index 8630ec9..b70562b 100644 --- a/src/routes/types.ts +++ b/src/routes/types.ts @@ -1,17 +1,15 @@ const RouteTypes = { - HOME: "/", - ABOUT: "/about", - PROFILE: "/profile", - INFO: "/info", - RESET: "/reset", + HOME: '/', + ABOUT: '/about', + PROFILE: '/profile', + INFO: '/info', + RESET: '/reset', // Auth LOGIN: '/login', // Errors - ERROR_404: "**", + ERROR_404: '*', } -export { - RouteTypes, -} \ No newline at end of file +export { RouteTypes }