diff --git a/src/App.js b/src/App.js
index 7b450332..564f2585 100644
--- a/src/App.js
+++ b/src/App.js
@@ -2,7 +2,7 @@ import '@styles/react/libs/flatpickr/flatpickr.scss';
import '@styles/react/libs/tables/react-dataTable-component.scss';
import './assets/css/custom.css';
// ** Router Import
-import Router from './router/Router';
+import Router from './router';
if (process.env.NODE_ENV === 'production') console.log = function () {};
const App = props => ;
diff --git a/src/router/Router.tsx b/src/router/Router.tsx
deleted file mode 100644
index 725309fe..00000000
--- a/src/router/Router.tsx
+++ /dev/null
@@ -1,194 +0,0 @@
-import { useCallback, lazy, Suspense, useEffect } from 'react';
-import { useDispatch } from 'react-redux';
-import {
- BrowserRouter as AppRouter,
- Redirect,
- Route,
- Switch,
- RouteComponentProps
-} from 'react-router-dom';
-import { useLayout } from '@hooks/useLayout';
-import { useRouterTransition } from '@hooks/useRouterTransition';
-import LayoutWrapper from '@layouts/components/layout-wrapper';
-import BlankLayout from '@layouts/BlankLayout';
-import HeaderLayout from '@layouts/HeaderLayout';
-import HorizontalLayout from '@src/layouts/HorizontalLayout';
-import VerticalLayout from '@src/layouts/VerticalLayout';
-import * as Actions from '../modules/account/auth/actions';
-import { Routes } from './routes';
-import { useSelector } from '@store/storeConfig/store';
-import { IRoute } from './routes/type';
-
-const NotAuthorized = lazy(() => import('@src/views/NotAuthorized'));
-const Error = lazy(() => import('@src/views/Error'));
-
-interface IFinalRoute extends RouteComponentProps {
- route: IRoute;
-}
-
-const Router = () => {
- const [layout, setLayout] = useLayout();
- const [transition, setTransition] = useRouterTransition();
- const { isLogin } = useSelector(state => state.authState);
- // const isLogin = true;
- const dispatch = useDispatch();
-
- useEffect(() => {
- if (!isLogin) {
- dispatch(Actions.check.request());
- }
- }, [isLogin]);
-
- const DefaultLayout =
- layout === 'horizontal' ? 'HorizontalLayout' : 'VerticalLayout';
-
- const Layouts = {
- BlankLayout,
- VerticalLayout,
- HorizontalLayout,
- HeaderLayout
- };
-
- const currentActiveItem = null;
-
- const LayoutRoutesAndPaths = (layout: string) => {
- const LayoutRoutes: IRoute[] = [];
- const LayoutPaths: string[] = [];
-
- if (Routes) {
- Routes.filter(route => {
- if (
- route.layout === layout ||
- (route.layout === undefined && DefaultLayout === layout)
- ) {
- LayoutRoutes.push(route);
- LayoutPaths.push(route.path);
- }
- });
- }
-
- return { LayoutRoutes, LayoutPaths };
- };
-
- const FinalRoute = (props: IFinalRoute) => {
- const route = props.route;
- // let action, resource;
-
- // if (route.meta) {
- // action = route.meta.action ? route.meta.action : null;
- // resource = route.meta.resource ? route.meta.resource : null;
- // }
-
- if (isLogin === false && !route.meta?.authRoute) {
- return ;
- } else {
- const Component: (props: IFinalRoute) => JSX.Element =
- route.component as (props: IFinalRoute) => JSX.Element;
- // switch (props.route.path) {
- // case '/account/register':
- // case '/account/find':
- // return ;
- // default:
- // return ;
- // }
-
- return ;
- }
- };
-
- const ResolveRoutes = useCallback(() => {
- return Object.keys(Layouts).map((layout, index) => {
- const LayoutTag = Layouts[layout];
-
- const { LayoutRoutes, LayoutPaths } = LayoutRoutesAndPaths(layout);
- const routerProps = {};
-
- return (
-
-
-
- {LayoutRoutes.map(route => {
- return (
- {
- Object.assign(routerProps, {
- ...props,
- meta: route.meta
- });
-
- return (
-
-
-
-
-
- );
- }}
- />
- );
- })}
-
-
-
- );
- });
- }, [Layouts]);
-
- return (
-
-
- {
- return ;
- }}
- />
-
- (
-
-
-
- )}
- />
- {ResolveRoutes()}
-
-
-
-
- );
-};
-
-export default Router;
diff --git a/src/router/hoc/AuthRoutes.tsx b/src/router/hoc/AuthRoutes.tsx
new file mode 100644
index 00000000..d18d66e8
--- /dev/null
+++ b/src/router/hoc/AuthRoutes.tsx
@@ -0,0 +1,28 @@
+import { Redirect, RouteComponentProps } from 'react-router-dom';
+import { useSelector } from '@store/storeConfig/store';
+import { IRoute } from '../routes/type';
+
+interface IFinalRoute extends RouteComponentProps {
+ route: IRoute;
+}
+
+export default function AuthRoutes(props: IFinalRoute) {
+ const { isLogin } = useSelector(state => state.authState);
+ const a = useSelector(state => state);
+
+ if (isLogin === false && !props.route.meta?.authRoute) {
+ return ;
+ } else {
+ const Component: (props: IFinalRoute) => JSX.Element = props.route
+ .component as (props: IFinalRoute) => JSX.Element;
+ // switch (props.route.path) {
+ // case '/account/register':
+ // case '/account/find':
+ // return ;
+ // default:
+ // return ;
+ // }
+
+ return ;
+ }
+}
diff --git a/src/router/hoc/ResolveRoutes.tsx b/src/router/hoc/ResolveRoutes.tsx
new file mode 100644
index 00000000..bcfc4eca
--- /dev/null
+++ b/src/router/hoc/ResolveRoutes.tsx
@@ -0,0 +1,121 @@
+import { Suspense, useEffect } from 'react';
+import { Route, Switch } from 'react-router-dom';
+import { useDispatch } from 'react-redux';
+import BlankLayout from '@layouts/BlankLayout';
+import HeaderLayout from '@layouts/HeaderLayout';
+import HorizontalLayout from '@src/layouts/HorizontalLayout';
+import VerticalLayout from '@src/layouts/VerticalLayout';
+import { useLayout } from '@hooks/useLayout';
+import { useRouterTransition } from '@hooks/useRouterTransition';
+import LayoutWrapper from '@layouts/components/layout-wrapper';
+import { IRoute } from '../routes/type';
+import { Routes } from '../routes';
+import AuthRoutes from './AuthRoutes';
+import * as Actions from '../../modules/account/auth/actions';
+
+export default function ResolveRoutes() {
+ const [layout, setLayout] = useLayout();
+ const [transition, setTransition] = useRouterTransition();
+
+ const dispatch = useDispatch();
+
+ // useEffect(() => {
+ // if (!isLogin) {
+ // dispatch(Actions.check.request());
+ // }
+ // }, [isLogin]);
+
+ const DefaultLayout =
+ layout === 'horizontal' ? 'HorizontalLayout' : 'VerticalLayout';
+
+ const Layouts = {
+ BlankLayout,
+ VerticalLayout,
+ HorizontalLayout,
+ HeaderLayout
+ };
+
+ const LayoutRoutesAndPaths = (layout: string) => {
+ const LayoutRoutes: IRoute[] = [];
+ const LayoutPaths: string[] = [];
+
+ if (Routes) {
+ Routes.filter(route => {
+ if (
+ route.layout === layout ||
+ (route.layout === undefined && DefaultLayout === layout)
+ ) {
+ LayoutRoutes.push(route);
+ LayoutPaths.push(route.path);
+ }
+ });
+ }
+
+ return { LayoutRoutes, LayoutPaths };
+ };
+
+ return Object.keys(Layouts).map((layout, index) => {
+ const LayoutTag = Layouts[layout];
+
+ const { LayoutRoutes, LayoutPaths } = LayoutRoutesAndPaths(layout);
+ const routerProps = {};
+
+ return (
+
+
+
+ {LayoutRoutes.map(route => {
+ return (
+ {
+ Object.assign(routerProps, {
+ ...props,
+ meta: route.meta
+ });
+
+ return (
+
+
+
+
+
+ );
+ }}
+ />
+ );
+ })}
+
+
+
+ );
+ });
+}
diff --git a/src/router/index.tsx b/src/router/index.tsx
new file mode 100644
index 00000000..0c3bad97
--- /dev/null
+++ b/src/router/index.tsx
@@ -0,0 +1,40 @@
+import { lazy } from 'react';
+import {
+ BrowserRouter as AppRouter,
+ Redirect,
+ Route,
+ Switch
+} from 'react-router-dom';
+import BlankLayout from '@layouts/BlankLayout';
+import ResolveRoutes from './hoc/ResolveRoutes';
+
+const NotAuthorized = lazy(() => import('@src/views/NotAuthorized'));
+const Error = lazy(() => import('@src/views/Error'));
+
+export default function Router() {
+ return (
+
+
+ {
+ return ;
+ }}
+ />
+
+ (
+
+
+
+ )}
+ />
+ {ResolveRoutes()}
+
+
+
+ );
+}