refactor(router): React Router's lazy routes (#2048)

app/routes/auth/Login.hooks.ts

@@ -3,7 +3,7 @@
 
 import * as React from "react";
 import { useNavigate } from "react-router-dom";
-import { signIn, SignInMethod } from "../../core/firebase.js";
+import { SignInMethod, signIn } from "../../core/firebase.js";
 
 /**
  * Handles login / signup via Email
@@ -35,9 +35,8 @@ export function useHandleSubmit(
 /**
  * The initial state of the Login component
  */
-export function useState(props: Props) {
+export function useState() {
   return React.useState({
-    mode: props.mode,
     email: "",
     code: "",
     saml: false,
@@ -94,10 +93,7 @@ export function useHandleSignIn(setState: SetState) {
   );
 }
 
-export type Props = {
-  mode: "login" | "signup";
-};
-
+export type Mode = "login" | "signup";
 export type State = ReturnType<typeof useState>[0];
 export type SetState = ReturnType<typeof useState>[1];
 export type Input = { name: keyof State; value: string };

app/routes/auth/Login.tsx

@@ -13,7 +13,6 @@ import {
 import { useLocation } from "react-router-dom";
 import { AuthIcon } from "../../icons/AuthIcon.js";
 import {
-  Props,
   useHandleChange,
   useHandleSignIn,
   useHandleSubmit,
@@ -28,14 +27,14 @@ import { Notice } from "./Notice.js";
  *    https://www.notion.so/login
  *    https://www.notion.so/signup
  */
-export default function Login(props: Props): JSX.Element {
-  const [state, setState] = useState(props);
+export function Component(): JSX.Element {
+  const [state, setState] = useState();
   const handleChange = useHandleChange(setState);
   const handleSignIn = useHandleSignIn(setState);
   const [handleSubmit, submitInFlight] = useHandleSubmit(state);
   const switchSAML = useSwitchSAML(setState);
   const { pathname, search } = useLocation();
-  const isSignUp = props.mode === "signup";
+  const isSignUp = pathname === "/signup";
 
   return (
     <Container
@@ -195,3 +194,5 @@ export default function Login(props: Props): JSX.Element {
     </Container>
   );
 }
+
+Component.displayName = "Login";

app/routes/dashboard/Dashboard.tsx

@@ -5,7 +5,7 @@ import { Api, GitHub } from "@mui/icons-material";
 import { Box, Button, Container, Typography } from "@mui/material";
 import { usePageEffect } from "../../core/page.js";
 
-export default function Home(): JSX.Element {
+export function Component(): JSX.Element {
   usePageEffect({ title: "React App" });
 
   return (
@@ -43,3 +43,5 @@ export default function Home(): JSX.Element {
     </Container>
   );
 }
+
+Component.displayName = "Dashboard";

app/routes/index.tsx

@@ -1,21 +1,11 @@
 /* SPDX-FileCopyrightText: 2014-present Kriasoft */
 /* SPDX-License-Identifier: MIT */
 
-import { lazy } from "react";
 import { createBrowserRouter, Navigate } from "react-router-dom";
 import { AppLayout } from "../layout/AppLayout.js";
 import { BaseLayout } from "../layout/BaseLayout.js";
 import { RootError } from "../layout/RootError.js";
 
-const Login = lazy(() => import("./auth/Login.js"));
-const Privacy = lazy(() => import("./legal/Privacy.js"));
-const Terms = lazy(() => import("./legal/Terms.js"));
-
-const Dashboard = lazy(() => import("./dashboard/Dashboard.js"));
-
-const SettingsLayout = lazy(() => import("./settings/SettingsLayout.js"));
-const AccountDetails = lazy(() => import("./settings/AccountDetails.js"));
-
 /**
  * Application routes
  * https://reactrouter.com/en/main/routers/create-browser-router
@@ -26,10 +16,10 @@ export const router = createBrowserRouter([
     element: <BaseLayout />,
     errorElement: <RootError />,
     children: [
-      { path: "login", element: <Login mode="login" /> },
-      { path: "signup", element: <Login mode="signup" /> },
-      { path: "privacy", element: <Privacy /> },
-      { path: "terms", element: <Terms /> },
+      { path: "login", lazy: () => import("./auth/Login.js") },
+      { path: "signup", lazy: () => import("./auth/Login.js") },
+      { path: "privacy", lazy: () => import("./legal/Privacy.js") },
+      { path: "terms", lazy: () => import("./legal/Terms.js") },
     ],
   },
   {
@@ -38,13 +28,16 @@ export const router = createBrowserRouter([
     errorElement: <RootError />,
     children: [
       { index: true, element: <Navigate to="/dashboard" replace /> },
-      { path: "dashboard", element: <Dashboard /> },
+      { path: "dashboard", lazy: () => import("./dashboard/Dashboard.js") },
       {
         path: "settings",
-        element: <SettingsLayout />,
+        lazy: () => import("./settings/SettingsLayout.js"),
         children: [
           { index: true, element: <Navigate to="/settings/account" /> },
-          { path: "account", element: <AccountDetails /> },
+          {
+            path: "account",
+            lazy: () => import("./settings/AccountDetails.js"),
+          },
         ],
       },
     ],

app/routes/legal/Privacy.tsx

@@ -8,7 +8,7 @@ import { usePageEffect } from "../../core/page.js";
 /**
  * Generated by https://getterms.io
  */
-export default function Privacy(): JSX.Element {
+export function Component(): JSX.Element {
   usePageEffect({ title: "Privacy Policy" });
 
   const appName = config.app.name;
@@ -313,3 +313,5 @@ export default function Privacy(): JSX.Element {
     </Container>
   );
 }
+
+Component.displayName = "Privacy";

app/routes/legal/Terms.tsx

@@ -8,7 +8,7 @@ import { usePageEffect } from "../../core/page.js";
 /**
  * Generated by https://getterms.io
  */
-export default function Terms(): JSX.Element {
+export function Component(): JSX.Element {
   usePageEffect({ title: "Terms of Use" });
 
   const appName = config.app.name;
@@ -184,3 +184,5 @@ export default function Terms(): JSX.Element {
     </Container>
   );
 }
+
+Component.displayName = "Terms";

app/routes/settings/AccountDetails.tsx

@@ -14,7 +14,7 @@ import * as React from "react";
 import { useAuthCallback, useCurrentUser } from "../../core/auth.js";
 import { usePageEffect } from "../../core/page.js";
 
-export default function AccountDetails(): JSX.Element {
+export function Component(): JSX.Element {
   const [{ input, ...state }, setState] = useState();
   const handleChange = useHandleChange(setState);
   const handleSubmit = useHandleSubmit(input, setState);
@@ -132,5 +132,7 @@ function useHandleSubmit(input: Input, setState: SetState) {
   );
 }
 
+Component.displayName = "AccountDetails";
+
 type Input = ReturnType<typeof useState>[0]["input"];
 type SetState = ReturnType<typeof useState>[1];

app/routes/settings/SettingsLayout.tsx

@@ -4,10 +4,12 @@
 import { Box } from "@mui/material";
 import { Outlet } from "react-router-dom";
 
-export default function SettingsLayout(): JSX.Element {
+export function Component(): JSX.Element {
   return (
     <Box>
       <Outlet />
     </Box>
   );
 }
+
+Component.displayName = "SettingsLayout";