From d2efb3430024f103f9d19ec3b1b99716bcccc7c9 Mon Sep 17 00:00:00 2001 From: JANGHYUNn Date: Thu, 1 Feb 2024 13:37:27 +0900 Subject: [PATCH] =?UTF-8?q?Router.tsx=20->=20index.tsx=20=EB=B3=80?= =?UTF-8?q?=EA=B2=BD=20=EB=B0=8F=20=EC=BD=94=EB=93=9C=20=EC=8A=A4=ED=94=8C?= =?UTF-8?q?=EB=A6=AC=ED=8C=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.js | 2 +- src/router/Router.tsx | 194 ------------------------------- src/router/hoc/AuthRoutes.tsx | 28 +++++ src/router/hoc/ResolveRoutes.tsx | 121 +++++++++++++++++++ src/router/index.tsx | 40 +++++++ 5 files changed, 190 insertions(+), 195 deletions(-) delete mode 100644 src/router/Router.tsx create mode 100644 src/router/hoc/AuthRoutes.tsx create mode 100644 src/router/hoc/ResolveRoutes.tsx create mode 100644 src/router/index.tsx 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()} + + + + ); +}