SATE-EasyReceipt-front/src/routes/index.tsx

import { PageID } from "codes/page";
import { UserRole } from "codes/user";
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) => {
  return (
    <Suspense fallback={<LoadingScreen />}>
      <Component {...props} />
    </Suspense>
  );
};

const AuthRoutes = (): RouteObject => ({
  element: <SimpleLayout />,
  children: [
    {
      path: getRoute(PageID.LOGIN),
      element: <Login />,
    },
    {
      path: getRoute(PageID.LOGOUT),
      element: <Logout />,
    },
  ],
});

const AppRoutes = (): RouteObject => ({
  element: (
    <AppContextProvider>
      <SimpleLayout />
    </AppContextProvider>
  ),
  children: [
    {
      path: getRoute(PageID.APP_RECEIPT_ISSUING_ORDER_INDEX),
      element: <ReceiptIssuingOrder />,
    },
  ],
});

const DashboardRoutes = (): RouteObject => {
  const { canAccess } = useAuth();

  const allChildren = [
    {
      pageId: PageID.DASHBOARD_OVERVIEW,
      element: <Dashboard />,
      target: UserRole.NORMAL_ADMIN,
    },
    {
      pageId: PageID.DASHBOARD_CONTRACT_LIST,
      element: <ContractList />,
      target: UserRole.SUPER_ADMIN,
    },
    {
      pageId: PageID.DASHBOARD_CONTRACT_DETAIL,
      element: <ContractDetail />,
      target: UserRole.SUPER_ADMIN,
    },
    {
      pageId: PageID.DASHBOARD_RECEIPT_ISSUING_ORDER_CREATE,
      element: <ReceiptIssuingOrderCreate />,
      target: UserRole.NORMAL_ADMIN,
    },
    {
      pageId: PageID.DASHBOARD_RECEIPT_ISSUING_ORDER_LIST,
      element: <ReceiptIssuingOrderList />,
      target: UserRole.NORMAL_ADMIN,
    },
  ];

  const children: RouteObject[] = useMemo(() => {
    return allChildren
      .filter(({ pageId }) => canAccess(pageId))
      .map(({ pageId, ...others }) => ({
        ...others,
        path: getRoute(pageId),
      }));
  }, [canAccess]);

  return {
    element: <DashboardLayout />,
    children,
  };
};

export function Routes() {
  const { initialized } = useAuth();
  return useRoutes([
    AuthRoutes(),
    AppRoutes(),
    DashboardRoutes(),
    {
      path: "403",
      element: <Page403 />,
    },
    {
      path: "*",
      element: initialized ? <Page404 /> : <LoadingScreen />,
    },
  ]);
}

// 認証関連 -------------------------------
const Login = Loadable(lazy(() => import("pages/auth/login")));
const Logout = Loadable(lazy(() => import("pages/auth/logout")));

// App ---------------------------
const ReceiptIssuingOrder = Loadable(
  lazy(() => import("pages/app/ReceiptIssuingOrder"))
);

//ダッシュボード ----------------------------
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 ReceiptIssuingOrderCreate = Loadable(
  lazy(() => import("pages/dashboard/receipt-issuing-order/create"))
);
const ReceiptIssuingOrderList = Loadable(
  lazy(() => import("pages/dashboard/receipt-issuing-order/list"))
);

// その他 ---------------------------------
const Page403 = Loadable(lazy(() => import("pages/common/Page403")));
const Page404 = Loadable(lazy(() => import("pages/common/Page404")));