Code splitting up

This commit is contained in:
LittleSheep 2024-02-29 22:41:37 +08:00
parent d80e755b4a
commit 16c9eeba5c
9 changed files with 16 additions and 24 deletions

View File

@ -13,17 +13,9 @@ import "@unocss/reset/tailwind.css";
import "@fontsource/roboto/latin.css";
import AppShell from "@/components/AppShell.tsx";
import LandingPage from "@/pages/landing.tsx";
import SignUpPage from "@/pages/auth/sign-up.tsx";
import SignInPage from "@/pages/auth/sign-in.tsx";
import OauthConnectPage from "@/pages/auth/connect.tsx";
import DashboardPage from "@/pages/users/dashboard.tsx";
import ErrorBoundary from "@/error.tsx";
import AppLoader from "@/components/AppLoader.tsx";
import UserLayout from "@/pages/users/layout.tsx";
import NotificationsPage from "@/pages/users/notifications.tsx";
import PersonalizePage from "@/pages/users/personalize.tsx";
import SecurityPage from "@/pages/users/security.tsx";
import { UserinfoProvider } from "@/stores/userinfo.tsx";
import { WellKnownProvider } from "@/stores/wellKnown.tsx";
import AuthLayout from "@/pages/auth/layout.tsx";
@ -46,7 +38,7 @@ const router = createBrowserRouter([
element: <AppShell><Outlet /></AppShell>,
errorElement: <ErrorBoundary />,
children: [
{ path: "/", element: <LandingPage /> },
{ path: "/", lazy: () => import("@/pages/landing.tsx") },
{
path: "/",
element: <AuthGuard />,
@ -55,10 +47,10 @@ const router = createBrowserRouter([
path: "/users",
element: <UserLayout />,
children: [
{ path: "/users", element: <DashboardPage /> },
{ path: "/users/notifications", element: <NotificationsPage /> },
{ path: "/users/personalize", element: <PersonalizePage /> },
{ path: "/users/security", element: <SecurityPage /> }
{ path: "/users", lazy: () => import("@/pages/users/dashboard.tsx") },
{ path: "/users/notifications", lazy: () => import("@/pages/users/notifications.tsx") },
{ path: "/users/personalize", lazy: () => import("@/pages/users/personalize.tsx") },
{ path: "/users/security", lazy: () => import("@/pages/users/security.tsx") }
]
}
]
@ -70,9 +62,9 @@ const router = createBrowserRouter([
element: <AuthLayout />,
errorElement: <ErrorBoundary />,
children: [
{ path: "/auth/sign-up", element: <SignUpPage />, errorElement: <ErrorBoundary /> },
{ path: "/auth/sign-in", element: <SignInPage />, errorElement: <ErrorBoundary /> },
{ path: "/auth/o/connect", element: <OauthConnectPage />, errorElement: <ErrorBoundary /> }
{ path: "/auth/sign-up", errorElement: <ErrorBoundary />, lazy: () => import("@/pages/auth/sign-up.tsx") },
{ path: "/auth/sign-in", errorElement: <ErrorBoundary />, lazy: () => import("@/pages/auth/sign-in.tsx") },
{ path: "/auth/o/connect", errorElement: <ErrorBoundary />, lazy: () => import("@/pages/auth/connect.tsx") }
]
}
]);

View File

@ -17,7 +17,7 @@ import { useSearchParams } from "react-router-dom";
import OutletIcon from "@mui/icons-material/Outlet";
import WhatshotIcon from "@mui/icons-material/Whatshot";
export default function OauthConnectPage() {
export function Component() {
const { getAtk } = useUserinfo();
const [panel, setPanel] = useState(0);

View File

@ -25,7 +25,7 @@ import KeyIcon from "@mui/icons-material/Key";
import PasswordIcon from "@mui/icons-material/Password";
import EmailIcon from "@mui/icons-material/Email";
export default function SignInPage() {
export function Component() {
const [panel, setPanel] = useState(0);
const [error, setError] = useState<string | null>(null);

View File

@ -21,7 +21,7 @@ import { FormEvent, useState } from "react";
import { request } from "@/scripts/request.ts";
import { useWellKnown } from "@/stores/wellKnown.tsx";
export default function SignUpPage() {
export function Component() {
const [done, setDone] = useState(false);
const [error, setError] = useState<string | null>(null);

View File

@ -1,7 +1,7 @@
import { Button, Container, Grid, Typography } from "@mui/material";
import { Link as RouterLink } from "react-router-dom";
export default function LandingPage() {
export function Component() {
return (
<Container sx={{ height: "calc(100vh - 64px)", display: "flex", alignItems: "center", textAlign: "center" }}>
<Grid padding={5} spacing={8} container>

View File

@ -1,7 +1,7 @@
import { Alert, Box, Card, CardContent, Container, Typography } from "@mui/material";
import { useUserinfo } from "@/stores/userinfo.tsx";
export default function DashboardPage() {
export function Component() {
const { userinfo } = useUserinfo();
return (

View File

@ -5,7 +5,7 @@ import { useEffect, useState } from "react";
import { TransitionGroup } from "react-transition-group";
import MarkEmailReadIcon from "@mui/icons-material/MarkEmailRead";
export default function NotificationsPage() {
export function Component() {
const { userinfo, readProfiles, getAtk } = useUserinfo();
const [loading, setLoading] = useState(true);

View File

@ -37,7 +37,7 @@ const VisuallyHiddenInput = styled("input")({
width: 1
});
export default function PersonalizePage() {
export function Component() {
const { userinfo, readProfiles, getAtk } = useUserinfo();
const [done, setDone] = useState(false);

View File

@ -19,7 +19,7 @@ import { request } from "@/scripts/request.ts";
import ExitToAppIcon from "@mui/icons-material/ExitToApp";
export default function SecurityPage() {
export function Component() {
const dataDefinitions: { [id: string]: GridColDef[] } = {
challenges: [
{ field: "id", headerName: "ID", width: 64 },