update(other): 🧩 update

update structure and logic for this project

Author: anhchangvt1994

config/.eslintrc-auto-import.json

@@ -1,14 +1,20 @@
 {
   "globals": {
     "BrowserRouter": true,
+    "ComponentType": true,
+    "Dispatch": true,
+    "HTMLAttributes": true,
+    "HTMLProps": true,
     "Link": true,
     "NavLink": true,
     "Navigate": true,
     "Outlet": true,
     "React": true,
+    "ReactNode": true,
     "Route": true,
     "RouterProvider": true,
     "Routes": true,
+    "SetStateAction": true,
     "StrictMode": true,
     "Suspense": true,
     "componentDidCatch": true,
@@ -17,12 +23,25 @@
     "createGlobalStyle": true,
     "createRef": true,
     "createRoot": true,
+    "decode": true,
+    "deleteCookie": true,
+    "encode": true,
     "forwardRef": true,
     "generatePath": true,
+    "generateSentenceCase": true,
+    "generateTitleCase": true,
+    "getCookie": true,
+    "getCustomSlug": true,
+    "getLocale": true,
+    "getSlug": true,
+    "getSlugWithoutDash": true,
+    "getUnsignedLetters": true,
+    "hashCode": true,
     "keyframes": true,
     "lazy": true,
     "memo": true,
     "rgba": true,
+    "setCookie": true,
     "startTransition": true,
     "styled": true,
     "useCallback": true,
@@ -51,61 +70,13 @@
     "useRoute": true,
     "useRoutes": true,
     "useSearchParams": true,
-    "useState": true,
-    "useSyncExternalStore": true,
-    "useTransition": true,
-    "BotInfo": true,
-    "DeviceInfo": true,
-    "generateSentenceCase": true,
-    "generateTitleCase": true,
-    "getCookie": true,
-    "getCustomSlug": true,
-    "getSlug": true,
-    "getSlugWithoutDash": true,
-    "getUnsignedLetters": true,
-    "setCookie": true,
-    "setLinkAlternateTag": true,
-    "setLinkAmphtmlTag": true,
-    "setLinkAuthorTag": true,
-    "setLinkCanonicalTag": true,
-    "setLinkNextTag": true,
-    "setLinkPrevTag": true,
-    "setLinkTwitterTitleTag": true,
-    "setMetaAuthorTag": true,
-    "setMetaDescriptionTag": true,
-    "setMetaGeoPositionTag": true,
-    "setMetaGeoRegionTag": true,
-    "setMetaGoogleBotTag": true,
-    "setMetaGoogleSiteVerificationTag": true,
-    "setMetaICBMTag": true,
-    "setMetaKeywordsTag": true,
-    "setMetaOgDescriptionTag": true,
-    "setMetaOgImageTag": true,
-    "setMetaOgSiteNameTag": true,
-    "setMetaOgTitleTag": true,
-    "setMetaOgTypeTag": true,
-    "setMetaOgUrlTag": true,
-    "setMetaRobotsTag": true,
-    "setMetaTwitterCardTag": true,
-    "setMetaTwitterDescriptionTag": true,
-    "setMetaTwitterImageTag": true,
-    "setMetaViewportTag": true,
-    "setSeoTag": true,
-    "setTitleTag": true,
     "useSentenceCase": true,
     "useSlug": true,
     "useSlugWithoutDash": true,
+    "useState": true,
+    "useSyncExternalStore": true,
     "useTitleCase": true,
-    "useUnsignedLetters": true,
-    "LocaleInfo": true,
-    "getLocale": true,
-    "useLocaleInfo": true,
-    "EnvironmentInfo": true,
-    "deleteCookie": true,
-    "ProxyAPI": true,
-    "decode": true,
-    "encode": true,
-    "getAPIStore": true,
-    "hashCode": true
+    "useTransition": true,
+    "useUnsignedLetters": true
   }
 }

config/auto-imports.d.ts

@@ -5,16 +5,11 @@
 // Generated by unplugin-auto-import
 export {}
 declare global {
-  const BotInfo: typeof import('store/ServerStore.ts')['BotInfo']
   const BrowserRouter: typeof import('react-router-dom')['BrowserRouter']
-  const DeviceInfo: typeof import('store/ServerStore.ts')['DeviceInfo']
-  const EnvironmentInfo: typeof import('store/ServerStore.ts')['EnvironmentInfo']
   const Link: typeof import('react-router-dom')['Link']
-  const LocaleInfo: typeof import('store/ServerStore.ts')['LocaleInfo']
   const NavLink: typeof import('react-router-dom')['NavLink']
   const Navigate: typeof import('react-router-dom')['Navigate']
   const Outlet: typeof import('react-router-dom')['Outlet']
-  const ProxyAPI: typeof import('utils/ProxyAPIHelper/index.ts')['ProxyAPI']
   const React: typeof import('react')
   const Route: typeof import('react-router-dom')['Route']
   const RouterProvider: typeof import('react-router-dom')['RouterProvider']
@@ -34,7 +29,6 @@ declare global {
   const generatePath: typeof import('react-router-dom')['generatePath']
   const generateSentenceCase: typeof import('utils/StringHelper.ts')['generateSentenceCase']
   const generateTitleCase: typeof import('utils/StringHelper.ts')['generateTitleCase']
-  const getAPIStore: typeof import('store/APIStore.ts')['getAPIStore']
   const getCookie: typeof import('utils/CookieHelper.ts')['getCookie']
   const getCustomSlug: typeof import('utils/StringHelper.ts')['getCustomSlug']
   const getLocale: typeof import('utils/StringHelper.ts')['getLocale']
@@ -47,34 +41,6 @@ declare global {
   const memo: typeof import('react')['memo']
   const rgba: typeof import('polished')['rgba']
   const setCookie: typeof import('utils/CookieHelper.ts')['setCookie']
-  const setLinkAlternateTag: typeof import('utils/SeoHelper/index.ts')['setLinkAlternateTag']
-  const setLinkAmphtmlTag: typeof import('utils/SeoHelper/index.ts')['setLinkAmphtmlTag']
-  const setLinkAuthorTag: typeof import('utils/SeoHelper/index.ts')['setLinkAuthorTag']
-  const setLinkCanonicalTag: typeof import('utils/SeoHelper/index.ts')['setLinkCanonicalTag']
-  const setLinkNextTag: typeof import('utils/SeoHelper/index.ts')['setLinkNextTag']
-  const setLinkPrevTag: typeof import('utils/SeoHelper/index.ts')['setLinkPrevTag']
-  const setLinkTwitterTitleTag: typeof import('utils/SeoHelper/index.ts')['setLinkTwitterTitleTag']
-  const setMetaAuthorTag: typeof import('utils/SeoHelper/index.ts')['setMetaAuthorTag']
-  const setMetaDescriptionTag: typeof import('utils/SeoHelper/index.ts')['setMetaDescriptionTag']
-  const setMetaGeoPositionTag: typeof import('utils/SeoHelper/index.ts')['setMetaGeoPositionTag']
-  const setMetaGeoRegionTag: typeof import('utils/SeoHelper/index.ts')['setMetaGeoRegionTag']
-  const setMetaGoogleBotTag: typeof import('utils/SeoHelper/index.ts')['setMetaGoogleBotTag']
-  const setMetaGoogleSiteVerificationTag: typeof import('utils/SeoHelper/index.ts')['setMetaGoogleSiteVerificationTag']
-  const setMetaICBMTag: typeof import('utils/SeoHelper/index.ts')['setMetaICBMTag']
-  const setMetaKeywordsTag: typeof import('utils/SeoHelper/index.ts')['setMetaKeywordsTag']
-  const setMetaOgDescriptionTag: typeof import('utils/SeoHelper/index.ts')['setMetaOgDescriptionTag']
-  const setMetaOgImageTag: typeof import('utils/SeoHelper/index.ts')['setMetaOgImageTag']
-  const setMetaOgSiteNameTag: typeof import('utils/SeoHelper/index.ts')['setMetaOgSiteNameTag']
-  const setMetaOgTitleTag: typeof import('utils/SeoHelper/index.ts')['setMetaOgTitleTag']
-  const setMetaOgTypeTag: typeof import('utils/SeoHelper/index.ts')['setMetaOgTypeTag']
-  const setMetaOgUrlTag: typeof import('utils/SeoHelper/index.ts')['setMetaOgUrlTag']
-  const setMetaRobotsTag: typeof import('utils/SeoHelper/index.ts')['setMetaRobotsTag']
-  const setMetaTwitterCardTag: typeof import('utils/SeoHelper/index.ts')['setMetaTwitterCardTag']
-  const setMetaTwitterDescriptionTag: typeof import('utils/SeoHelper/index.ts')['setMetaTwitterDescriptionTag']
-  const setMetaTwitterImageTag: typeof import('utils/SeoHelper/index.ts')['setMetaTwitterImageTag']
-  const setMetaViewportTag: typeof import('utils/SeoHelper/index.ts')['setMetaViewportTag']
-  const setSeoTag: typeof import('utils/SeoHelper/index.ts')['setSeoTag']
-  const setTitleTag: typeof import('utils/SeoHelper/index.ts')['setTitleTag']
   const startTransition: typeof import('react')['startTransition']
   const styled: typeof import('styled-components')['default']
   const useCallback: typeof import('react')['useCallback']
@@ -89,7 +55,6 @@ declare global {
   const useInsertionEffect: typeof import('react')['useInsertionEffect']
   const useLayoutEffect: typeof import('react')['useLayoutEffect']
   const useLinkClickHandler: typeof import('react-router-dom')['useLinkClickHandler']
-  const useLocaleInfo: typeof import('app/router/context/LocaleInfoContext')['useLocaleInfo']
   const useLocation: typeof import('react-router-dom')['useLocation']
   const useMatches: typeof import('react-router-dom')['useMatches']
   const useMemo: typeof import('react')['useMemo']
@@ -113,3 +78,9 @@ declare global {
   const useTransition: typeof import('react')['useTransition']
   const useUnsignedLetters: typeof import('hooks/useStringHelper.ts')['useUnsignedLetters']
 }
+// for type re-export
+declare global {
+  // @ts-ignore
+  export type { Dispatch, SetStateAction, HTMLProps, HTMLAttributes, ComponentType, ReactNode } from 'react'
+  import('react')
+}

src/Layout.tsx

@@ -2,7 +2,7 @@ import ErrorBoundary from 'utils/ErrorBoundary'
 import LoadingBoundary from 'utils/LoadingBoundary'
 import LoadingPageComponent from 'components/LoadingPageComponent'
 import ErrorLoadingPageComponent from 'components/ErrorPageComponent'
-import { useUserInfo } from 'store/UserInfoContext'
+import { useUserInfo } from 'app/store/UserInfoContext'
 
 const MainContainer = styled.div`
 	max-width: 1280px;
@@ -24,7 +24,6 @@ function Layout() {
 
 	const onClickLogout = () => {
 		setUserState({ email: '' })
-		route.handle.reProtect?.()
 	}
 
 	return (

src/app/router/context/LoadingInfoContext.tsx

@@ -10,7 +10,7 @@ export const INIT_LOADING_INFO: ILoadingInfo = {
 
 export const LoadingInfoContext = createContext<{
 	loadingState: ILoadingInfo
-	setLoadingState: React.Dispatch<React.SetStateAction<ILoadingInfo>>
+	setLoadingState: Dispatch<SetStateAction<ILoadingInfo>>
 }>({
 	loadingState: INIT_LOADING_INFO,
 	setLoadingState: () => null,

src/app/router/hooks/useCertificateCustomizationInfo.ts

@@ -0,0 +1,13 @@
+import { IUserInfo, useUserInfo } from 'app/store/UserInfoContext'
+
+export interface ICertCustomizationInfo {
+	user: IUserInfo
+}
+
+export default function useCertificateCustomizationInfo(): ICertCustomizationInfo {
+	const { userState } = useUserInfo()
+
+	return {
+		user: userState,
+	}
+}

src/app/router/index.tsx

@@ -1,17 +1,13 @@
 import Layout from 'Layout'
 import NotFoundPage from 'pages/NotFoundPage'
 import { RouteObject } from 'react-router-dom'
-import { RouteObjectCustomize } from 'static'
 import { withLazy } from './utils/LazyComponentHandler'
 import RouterDeliver from './utils/RouterDeliver'
 import RouterInit from './utils/RouterInit'
 import RouterProtection from './utils/RouterProtection'
 import RouterValidation from './utils/RouterValidation'
 import { LoadingInfoProvider } from './context/LoadingInfoContext'
-
-const WAITING_VERIFY_ROUTER_ID_LIST: { [key: string]: Array<string> } = {
-	[import.meta.env.ROUTER_COMMENT_ID]: [import.meta.env.ROUTER_LOGIN_ID],
-}
+import { RouteObjectCustomize } from './types'
 
 // NOTE - Router Configuration
 const routes: RouteObjectCustomize[] = [
@@ -22,9 +18,7 @@ const routes: RouteObjectCustomize[] = [
 				<RouterInit>
 					<RouterValidation NotFoundPage={NotFoundPage}>
 						<RouterDeliver>
-							<RouterProtection
-								WatingVerifyRouterIDList={WAITING_VERIFY_ROUTER_ID_LIST}
-							>
+							<RouterProtection>
 								<Layout />
 							</RouterProtection>
 						</RouterDeliver>

src/app/router/types.ts

@@ -0,0 +1,30 @@
+import { IndexRouteObject } from 'react-router-dom'
+import { ICertCustomizationInfo } from './hooks/useCertificateCustomizationInfo'
+import { ICertInfo } from './utils/RouterProtection'
+import { IRouteInfo } from './context/InfoContext'
+
+export interface RouteObjectCustomize
+	extends Omit<IndexRouteObject, 'index' | 'children'> {
+	index?: boolean
+	handle?: {
+		params?: {
+			validate?: (params: Record<string, string>) => boolean
+			[key: string]: any
+		}
+		protect?: (
+			certInfo: ICertInfo & ICertCustomizationInfo,
+			route: IRouteInfo
+		) => boolean | string
+		reProtect?: (
+			certInfo: ICertInfo & ICertCustomizationInfo,
+			route: IRouteInfo
+		) => boolean | string
+		[key: string]: any
+	}
+	children?: RouteObjectCustomize[]
+}
+
+export interface IRouterProtectionProps {
+	waitingVerifyRouterIDList?: { [key: string]: Array<string> }
+	children?: ReactNode
+}

src/app/router/utils/LazyComponentHandler.tsx

@@ -1,6 +1,6 @@
 export function withLazy(
 	f: () => Promise<{
-		default: React.ComponentType<any>
+		default: ComponentType<any>
 	}>
 ) {
 	try {
@@ -10,7 +10,7 @@ export function withLazy(
 		} else {
 			throw Object.assign(
 				new Error(
-					'The param of withLazy function must be a Function return a Promise or a Dynamic Import that give a React.ComponentType'
+					'The param of withLazy function must be a Function return a Promise or a Dynamic Import that give a ComponentType'
 				),
 				{ code: 402 }
 			)

src/app/router/utils/RouterProtection.tsx

@@ -1,12 +1,13 @@
-import type { IUserInfo } from 'store/UserInfoContext'
-import type { To } from 'react-router'
 import type { INavigateInfo } from 'app/router/context/InfoContext'
-import type { IValidation } from 'app/router/context/ValidationContext'
-import { useUserInfo } from 'store/UserInfoContext'
 import { useNavigateInfo } from 'app/router/context/InfoContext'
+import type { IValidation } from 'app/router/context/ValidationContext'
+import type { To } from 'react-router'
+import useCertificateCustomizationInfo, {
+	type ICertCustomizationInfo,
+} from '../hooks/useCertificateCustomizationInfo'
+import { IRouterProtectionProps, RouteObjectCustomize } from '../types'
 
-export interface ICertInfo {
-	user: IUserInfo
+export interface ICertInfo extends ICertCustomizationInfo {
 	navigateInfo: INavigateInfo
 	successPath: string
 }
@@ -24,12 +25,12 @@ function useProtectRoute(): IValidation {
 		status: 200,
 	}
 
-	const { userInfo } = useUserInfo()
+	const certificateCustomizationInfo = useCertificateCustomizationInfo()
 
 	const navigateInfo = useNavigateInfo()
 
 	const certificateInfo: ICertInfo = {
-		user: userInfo,
+		...certificateCustomizationInfo,
 		navigateInfo,
 		successPath,
 	}
@@ -38,14 +39,14 @@ function useProtectRoute(): IValidation {
 		const protect = (
 			item?.handle as
 				| {
-						protect: (certInfo?: ICertInfo) => string
+						protect: RouteObjectCustomize['handle']['protect']
 				  }
 				| undefined
 		)?.protect
 
 		if (protect && typeof protect === 'function') {
 			const checkProtection = (isReProtect = false) => {
-				const protectInfo = protect(certificateInfo)
+				const protectInfo = protect(certificateInfo, route)
 
 				if (!protectInfo) {
 					protection.status = 301
@@ -77,10 +78,10 @@ function useProtectRoute(): IValidation {
 } // useProtectRoute()
 
 export default function RouterProtection({
-	WatingVerifyRouterIDList,
+	waitingVerifyRouterIDList = {},
 	children,
-}) {
-	WAITING_VERIFY_ROUTER_ID_LIST = WatingVerifyRouterIDList
+}: IRouterProtectionProps) {
+	WAITING_VERIFY_ROUTER_ID_LIST = waitingVerifyRouterIDList
 
 	const route = useRoute()
 	const protection = useProtectRoute()