|
|
|
import { useLayout } from '@hooks/useLayout';
|
|
|
|
import { useRouterTransition } from '@hooks/useRouterTransition';
|
|
|
|
import BlankLayout from '@layouts/BlankLayout';
|
|
|
|
import LayoutWrapper from '@layouts/components/layout-wrapper';
|
|
|
|
import HeaderLayout from '@layouts/HeaderLayout';
|
|
|
|
import HorizontalLayout from '@src/layouts/HorizontalLayout';
|
|
|
|
import VerticalLayout from '@src/layouts/VerticalLayout';
|
|
|
|
import { lazy, Suspense, useEffect } from 'react';
|
|
|
|
import { useDispatch, useSelector } from 'react-redux';
|
|
|
|
import {
|
|
|
|
BrowserRouter as AppRouter,
|
|
|
|
Redirect,
|
|
|
|
Route,
|
|
|
|
Switch
|
|
|
|
} from 'react-router-dom';
|
|
|
|
import * as Actions from '../modules/account/login/actions/authAction';
|
|
|
|
import { Routes } from './routes';
|
|
|
|
|
|
|
|
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 => {
|
|
|
|
const LayoutRoutes = [];
|
|
|
|
const LayoutPaths = [];
|
|
|
|
|
|
|
|
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 NotAuthorized = lazy(() => import('@src/views/NotAuthorized'));
|
|
|
|
|
|
|
|
const Error = lazy(() => import('@src/views/Error'));
|
|
|
|
|
|
|
|
const FinalRoute = props => {
|
|
|
|
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 <Redirect to='/account/login' />;
|
|
|
|
} else {
|
|
|
|
// switch (props.route.path) {
|
|
|
|
// case '/account/register':
|
|
|
|
// case '/account/find':
|
|
|
|
// return <Redirect to='/main/dashboard' />;
|
|
|
|
// default:
|
|
|
|
// return <route.component {...props} />;
|
|
|
|
// }
|
|
|
|
return <route.component {...props} />;
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
|
|
|
const ResolveRoutes = () => {
|
|
|
|
return Object.keys(Layouts).map((layout, index) => {
|
|
|
|
const LayoutTag = Layouts[layout];
|
|
|
|
|
|
|
|
const { LayoutRoutes, LayoutPaths } = LayoutRoutesAndPaths(layout);
|
|
|
|
const routerProps = {};
|
|
|
|
|
|
|
|
return (
|
|
|
|
<Route path={LayoutPaths} key={index}>
|
|
|
|
<LayoutTag
|
|
|
|
routerProps={routerProps}
|
|
|
|
layout={layout}
|
|
|
|
setLayout={setLayout}
|
|
|
|
transition={transition}
|
|
|
|
setTransition={setTransition}
|
|
|
|
currentActiveItem={currentActiveItem}
|
|
|
|
>
|
|
|
|
<Switch>
|
|
|
|
{LayoutRoutes.map(route => {
|
|
|
|
return (
|
|
|
|
<Route
|
|
|
|
key={route.path}
|
|
|
|
path={route.path}
|
|
|
|
exact={route.exact === true}
|
|
|
|
render={props => {
|
|
|
|
Object.assign(routerProps, {
|
|
|
|
...props,
|
|
|
|
meta: route.meta
|
|
|
|
});
|
|
|
|
|
|
|
|
return (
|
|
|
|
<Suspense fallback={null}>
|
|
|
|
<LayoutWrapper
|
|
|
|
layout={DefaultLayout}
|
|
|
|
transition={transition}
|
|
|
|
setTransition={setTransition}
|
|
|
|
{...(route.appLayout
|
|
|
|
? {
|
|
|
|
appLayout: route.appLayout
|
|
|
|
}
|
|
|
|
: {})}
|
|
|
|
{...(route.meta
|
|
|
|
? {
|
|
|
|
routeMeta: route.meta
|
|
|
|
}
|
|
|
|
: {})}
|
|
|
|
{...(route.className
|
|
|
|
? {
|
|
|
|
wrapperClass: route.className
|
|
|
|
}
|
|
|
|
: {})}
|
|
|
|
>
|
|
|
|
<FinalRoute route={route} {...props} />
|
|
|
|
</LayoutWrapper>
|
|
|
|
</Suspense>
|
|
|
|
);
|
|
|
|
}}
|
|
|
|
/>
|
|
|
|
);
|
|
|
|
})}
|
|
|
|
</Switch>
|
|
|
|
</LayoutTag>
|
|
|
|
</Route>
|
|
|
|
);
|
|
|
|
});
|
|
|
|
};
|
|
|
|
|
|
|
|
return (
|
|
|
|
<AppRouter basename={process.env.REACT_APP_BASENAME}>
|
|
|
|
<Switch>
|
|
|
|
<Route
|
|
|
|
exact
|
|
|
|
path='/'
|
|
|
|
render={() => {
|
|
|
|
return <Redirect to='/main/dashboard' />;
|
|
|
|
}}
|
|
|
|
/>
|
|
|
|
|
|
|
|
<Route
|
|
|
|
exact
|
|
|
|
path='/not-authorized'
|
|
|
|
render={props => (
|
|
|
|
<Layouts.BlankLayout>
|
|
|
|
<NotAuthorized />
|
|
|
|
</Layouts.BlankLayout>
|
|
|
|
)}
|
|
|
|
/>
|
|
|
|
{ResolveRoutes()}
|
|
|
|
|
|
|
|
<Route path='*' component={Error} />
|
|
|
|
</Switch>
|
|
|
|
</AppRouter>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
|
|
|
export default Router;
|