From 6710bf06c7aee3c5f1fc0a888d4327ab21344491 Mon Sep 17 00:00:00 2001 From: "sosuke.iwabuchi" Date: Wed, 9 Aug 2023 16:13:46 +0900 Subject: [PATCH] =?UTF-8?q?route=E3=83=95=E3=82=A1=E3=82=A4=E3=83=AB?= =?UTF-8?q?=E3=81=AE=E6=95=B4=E7=90=86?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/routes/index.tsx | 217 ++--------------------------------- src/routes/sub/app.tsx | 41 +++++++ src/routes/sub/auth.tsx | 37 ++++++ src/routes/sub/common.tsx | 25 ++++ src/routes/sub/dashboard.tsx | 138 ++++++++++++++++++++++ 5 files changed, 249 insertions(+), 209 deletions(-) create mode 100644 src/routes/sub/app.tsx create mode 100644 src/routes/sub/auth.tsx create mode 100644 src/routes/sub/common.tsx create mode 100644 src/routes/sub/dashboard.tsx diff --git a/src/routes/index.tsx b/src/routes/index.tsx index e7af946..bf7136a 100644 --- a/src/routes/index.tsx +++ b/src/routes/index.tsx @@ -1,14 +1,13 @@ -import { PageID } from "codes/page"; import LoadingScreen from "components/LoadingScreen"; -import { AppContextProvider } from "contexts/AppContext"; import useAuth from "hooks/useAuth"; -import DashboardLayout from "layouts/dashbord"; -import SimpleLayout from "layouts/simple"; -import { ElementType, Suspense, lazy, useMemo } from "react"; -import { RouteObject, useRoutes } from "react-router-dom"; -import { getRoute } from "./path"; - -const Loadable = (Component: ElementType) => (props: any) => { +import { ElementType, Suspense, lazy } from "react"; +import { useRoutes } from "react-router-dom"; +import AppRoutes from "./sub/app"; +import AuthRoutes from "./sub/auth"; +import CommonRoutes from "./sub/common"; +import DashboardRoutes from "./sub/dashboard"; + +export const Loadable = (Component: ElementType) => (props: any) => { return ( }> @@ -16,130 +15,6 @@ const Loadable = (Component: ElementType) => (props: any) => { ); }; -const CommonRoutes = (): RouteObject => ({ - element: , - children: [ - { - path: getRoute(PageID.APP_PRIVACY_POLICY), - element: , - }, - ], -}); - -const AuthRoutes = (): RouteObject => ({ - element: , - children: [ - { - path: getRoute(PageID.LOGIN), - element: , - }, - { - path: getRoute(PageID.LOGOUT), - element: , - }, - { - path: getRoute(PageID.CLEAR_CHANGE_CONTRACT), - element: , - }, - ], -}); - -const AppRoutes = (): RouteObject => ({ - element: ( - - - - ), - children: [ - { - path: getRoute(PageID.APP_RECEIPT_ISSUING_ORDER_INDEX), - element: , - }, - { - path: getRoute(PageID.APP_RECEIPT_ISSUING_ORDER_MAIL_ORDER), - element: , - }, - { - path: getRoute(PageID.APP_RECEIPT_ISSUING_ORDER_EMAIL_ORDER), - element: , - }, - ], -}); - -const DashboardRoutes = (): RouteObject => { - const { canAccess } = useAuth(); - - const children: RouteObject[] = useMemo(() => { - const allChildren = [ - { - pageId: PageID.DASHBOARD_OVERVIEW, - element: , - }, - { - pageId: PageID.DASHBOARD_CONTRACT_LIST, - element: , - }, - { - pageId: PageID.DASHBOARD_CONTRACT_DETAIL, - element: , - }, - { - pageId: PageID.DASHBOARD_CONTRACT_CREATE, - element: , - }, - { - pageId: PageID.DASHBOARD_USE_SUMMARY_LIST_BY_CONTRACT, - element: , - }, - { - pageId: - PageID.DASHBOARD_RECEIPT_ISSUING_ORDER_CREATE_CUSTOM_HELLO_TECHNO, - element: , - }, - { - pageId: PageID.DASHBOARD_RECEIPT_ISSUING_ORDER_LIST_CUSTOM_HELLO_TECHNO, - element: , - }, - { - pageId: - PageID.DASHBOARD_RECEIPT_ISSUING_ORDER_DETAIL_CUSTOM_HELLO_TECHNO, - element: , - }, - { - pageId: PageID.DASHBOARD_USE_SUMMARY_LIST_CUSTOM_HELLO_TECHNO, - element: , - }, - { - pageId: PageID.DASHBOARD_USE_SUMMARY_DETAIL_CUSTOM_HELLO_TECHNO, - element: , - }, - { - pageId: PageID.DASHBOARD_LOGIN_USER_LIST, - element: , - }, - { - pageId: PageID.DASHBOARD_LOGIN_USER_CREATE, - element: , - }, - { - pageId: PageID.DASHBOARD_LOGIN_USER_CHANGE_PASSWORD, - element: , - }, - ]; - return allChildren - .filter(({ pageId }) => canAccess(pageId)) - .map(({ pageId, ...others }) => ({ - ...others, - path: getRoute(pageId), - })); - }, [canAccess]); - - return { - element: , - children, - }; -}; - export function Routes() { const { initialized } = useAuth(); return useRoutes([ @@ -147,10 +22,6 @@ export function Routes() { AuthRoutes(), AppRoutes(), DashboardRoutes(), - { - path: "403", - element: , - }, { path: "*", element: initialized ? : , @@ -158,76 +29,4 @@ export function Routes() { ]); } -// 認証関連 ------------------------------- -const Login = Loadable(lazy(() => import("pages/auth/login"))); -const Logout = Loadable(lazy(() => import("pages/auth/logout"))); -const ClearContract = Loadable(lazy(() => import("pages/auth/clear-contract"))); - -// App --------------------------- -const ReceiptIssuingOrder = Loadable( - lazy(() => import("pages/app/ReceiptIssuingOrder")) -); -const MailOrder = Loadable(lazy(() => import("pages/app/MailOrder"))); -const EmailOrder = Loadable(lazy(() => import("pages/app/EmailOrder"))); - -//ダッシュボード ---------------------------- -const Dashboard = Loadable(lazy(() => import("pages/dashboard"))); -// 契約関連 -const ContractList = Loadable( - lazy(() => import("pages/dashboard/contract/list")) -); -const ContractDetail = Loadable( - lazy(() => import("pages/dashboard/contract/detail")) -); -const ContractCreate = Loadable( - lazy(() => import("pages/dashboard/contract/create")) -); -// 領収証発行依頼 -const ReceiptIssuingOrderCreateHelloTechno = Loadable( - lazy( - () => - import("pages/dashboard/receipt-issuing-order/custom/hello-techno/create") - ) -); -const ReceiptIssuingOrderListHelloTechno = Loadable( - lazy( - () => - import("pages/dashboard/receipt-issuing-order/custom/hello-techno/list") - ) -); -const ReceiptIssuingOrderDetailHelloTechno = Loadable( - lazy( - () => - import("pages/dashboard/receipt-issuing-order/custom/hello-techno/detail") - ) -); - -// 利用実績関連 -const UseSummaryByContractList = Loadable( - lazy(() => import("pages/dashboard/use-summary/list")) -); -const UseSummaryListHelloTechno = Loadable( - lazy(() => import("pages/dashboard/use-summary/custom/hello-techno/list")) -); -const UseSummaryDetailHelloTechno = Loadable( - lazy(() => import("pages/dashboard/use-summary/custom/hello-techno/detail")) -); - -//　ログインユーザー管理 -const LoginUserList = Loadable( - lazy(() => import("pages/dashboard/login-user/list")) -); -const LoginUserCreate = Loadable( - lazy(() => import("pages/dashboard/login-user/create")) -); -const ChangePassword = Loadable( - lazy(() => import("pages/dashboard/login-user/change-password")) -); - -// その他 --------------------------------- - -const PrivacyPolicy = Loadable( - lazy(() => import("pages/common/PrivacyPolicy")) -); -const Page403 = Loadable(lazy(() => import("pages/common/Page403"))); const Page404 = Loadable(lazy(() => import("pages/common/Page404"))); diff --git a/src/routes/sub/app.tsx b/src/routes/sub/app.tsx new file mode 100644 index 0000000..38f8a38 --- /dev/null +++ b/src/routes/sub/app.tsx @@ -0,0 +1,41 @@ +import { PageID } from "codes/page"; +import { AppContextProvider } from "contexts/AppContext"; +import SimpleLayout from "layouts/simple"; +import { lazy, useMemo } from "react"; +import { RouteObject } from "react-router-dom"; +import { Loadable } from "routes"; +import { getRoute } from "routes/path"; + +export default function AppRoutes(): RouteObject { + const ReceiptIssuingOrder = Loadable( + lazy(() => import("pages/app/ReceiptIssuingOrder")) + ); + const MailOrder = Loadable(lazy(() => import("pages/app/MailOrder"))); + const EmailOrder = Loadable(lazy(() => import("pages/app/EmailOrder"))); + + const children: RouteObject[] = useMemo(() => { + return [ + { + path: getRoute(PageID.APP_RECEIPT_ISSUING_ORDER_INDEX), + element: , + }, + { + path: getRoute(PageID.APP_RECEIPT_ISSUING_ORDER_MAIL_ORDER), + element: , + }, + { + path: getRoute(PageID.APP_RECEIPT_ISSUING_ORDER_EMAIL_ORDER), + element: , + }, + ]; + }, []); + + return { + element: ( + + + + ), + children, + }; +} diff --git a/src/routes/sub/auth.tsx b/src/routes/sub/auth.tsx new file mode 100644 index 0000000..4da21df --- /dev/null +++ b/src/routes/sub/auth.tsx @@ -0,0 +1,37 @@ +import { PageID } from "codes/page"; +import SimpleLayout from "layouts/simple"; +import { lazy, useMemo } from "react"; +import { RouteObject } from "react-router-dom"; +import { Loadable } from "routes"; +import { getRoute } from "routes/path"; + +export default function AuthRoutes(): RouteObject { + const Login = Loadable(lazy(() => import("pages/auth/login"))); + const Logout = Loadable(lazy(() => import("pages/auth/logout"))); + const ClearContract = Loadable( + lazy(() => import("pages/auth/clear-contract")) + ); + + const children: RouteObject[] = useMemo(() => { + // 認証関連 ------------------------------- + return [ + { + path: getRoute(PageID.LOGIN), + element: , + }, + { + path: getRoute(PageID.LOGOUT), + element: , + }, + { + path: getRoute(PageID.CLEAR_CHANGE_CONTRACT), + element: , + }, + ]; + }, []); + + return { + element: , + children, + }; +} diff --git a/src/routes/sub/common.tsx b/src/routes/sub/common.tsx new file mode 100644 index 0000000..7668783 --- /dev/null +++ b/src/routes/sub/common.tsx @@ -0,0 +1,25 @@ +import { PageID } from "codes/page"; +import SimpleLayout from "layouts/simple"; +import { lazy, useMemo } from "react"; +import { RouteObject } from "react-router-dom"; +import { Loadable } from "routes"; +import { getRoute } from "routes/path"; + +export default function CommonRoutes(): RouteObject { + const PrivacyPolicy = Loadable( + lazy(() => import("pages/common/PrivacyPolicy")) + ); + const children: RouteObject[] = useMemo(() => { + return [ + { + path: getRoute(PageID.APP_PRIVACY_POLICY), + element: , + }, + ]; + }, []); + + return { + element: , + children, + }; +} diff --git a/src/routes/sub/dashboard.tsx b/src/routes/sub/dashboard.tsx new file mode 100644 index 0000000..38c0ce3 --- /dev/null +++ b/src/routes/sub/dashboard.tsx @@ -0,0 +1,138 @@ +import { PageID } from "codes/page"; +import useAuth from "hooks/useAuth"; +import DashboardLayout from "layouts/dashbord"; +import { lazy, useMemo } from "react"; +import { RouteObject } from "react-router-dom"; +import { Loadable } from "routes"; +import { getRoute } from "routes/path"; + +export default function DashboardRoutes(): RouteObject { + const { canAccess } = useAuth(); + + const Dashboard = Loadable(lazy(() => import("pages/dashboard"))); + // 契約関連 + const ContractList = Loadable( + lazy(() => import("pages/dashboard/contract/list")) + ); + const ContractDetail = Loadable( + lazy(() => import("pages/dashboard/contract/detail")) + ); + const ContractCreate = Loadable( + lazy(() => import("pages/dashboard/contract/create")) + ); + // 領収証発行依頼 + const ReceiptIssuingOrderCreateHelloTechno = Loadable( + lazy( + () => + import( + "pages/dashboard/receipt-issuing-order/custom/hello-techno/create" + ) + ) + ); + const ReceiptIssuingOrderListHelloTechno = Loadable( + lazy( + () => + import("pages/dashboard/receipt-issuing-order/custom/hello-techno/list") + ) + ); + const ReceiptIssuingOrderDetailHelloTechno = Loadable( + lazy( + () => + import( + "pages/dashboard/receipt-issuing-order/custom/hello-techno/detail" + ) + ) + ); + + // 利用実績関連 + const UseSummaryByContractList = Loadable( + lazy(() => import("pages/dashboard/use-summary/list")) + ); + const UseSummaryListHelloTechno = Loadable( + lazy(() => import("pages/dashboard/use-summary/custom/hello-techno/list")) + ); + const UseSummaryDetailHelloTechno = Loadable( + lazy(() => import("pages/dashboard/use-summary/custom/hello-techno/detail")) + ); + + //　ログインユーザー管理 + const LoginUserList = Loadable( + lazy(() => import("pages/dashboard/login-user/list")) + ); + const LoginUserCreate = Loadable( + lazy(() => import("pages/dashboard/login-user/create")) + ); + const ChangePassword = Loadable( + lazy(() => import("pages/dashboard/login-user/change-password")) + ); + + const children: RouteObject[] = useMemo(() => { + const allChildren = [ + { + pageId: PageID.DASHBOARD_OVERVIEW, + element: , + }, + { + pageId: PageID.DASHBOARD_CONTRACT_LIST, + element: , + }, + { + pageId: PageID.DASHBOARD_CONTRACT_DETAIL, + element: , + }, + { + pageId: PageID.DASHBOARD_CONTRACT_CREATE, + element: , + }, + { + pageId: PageID.DASHBOARD_USE_SUMMARY_LIST_BY_CONTRACT, + element: , + }, + { + pageId: + PageID.DASHBOARD_RECEIPT_ISSUING_ORDER_CREATE_CUSTOM_HELLO_TECHNO, + element: , + }, + { + pageId: PageID.DASHBOARD_RECEIPT_ISSUING_ORDER_LIST_CUSTOM_HELLO_TECHNO, + element: , + }, + { + pageId: + PageID.DASHBOARD_RECEIPT_ISSUING_ORDER_DETAIL_CUSTOM_HELLO_TECHNO, + element: , + }, + { + pageId: PageID.DASHBOARD_USE_SUMMARY_LIST_CUSTOM_HELLO_TECHNO, + element: , + }, + { + pageId: PageID.DASHBOARD_USE_SUMMARY_DETAIL_CUSTOM_HELLO_TECHNO, + element: , + }, + { + pageId: PageID.DASHBOARD_LOGIN_USER_LIST, + element: , + }, + { + pageId: PageID.DASHBOARD_LOGIN_USER_CREATE, + element: , + }, + { + pageId: PageID.DASHBOARD_LOGIN_USER_CHANGE_PASSWORD, + element: , + }, + ]; + return allChildren + .filter(({ pageId }) => canAccess(pageId)) + .map(({ pageId, ...others }) => ({ + ...others, + path: getRoute(pageId), + })); + }, [canAccess]); + + return { + element: , + children, + }; +}