feat: upgrade react-router, change 404 page

z1g-project · Mar 27, 2024 · cbb7eb7 · cbb7eb7
1 parent c28d8aa
commit cbb7eb7
Show file tree

Hide file tree

Showing 4 changed files with 91 additions and 61 deletions.
diff --git a/src/layout.tsx b/src/layout.tsx
@@ -1,9 +1,7 @@
 import React from "react";
-import { useLocation } from "react-router-dom";
 import Meta from "@/components/Meta";
 import { Toaster } from "@/components/ui/toaster";
-import { ThemeProvider } from "@/components/theme-provider";
-import { Link, useNavigate } from "react-router-dom";
+import { Link, useNavigate, useLocation, Outlet } from "react-router-dom";
 import { LucideHome, Settings, LayoutGrid, CircleDashed } from "lucide-react";
 import {
 	NavigationMenu,
@@ -22,8 +20,6 @@ import {
 	CommandList,
 } from "@/components/ui/command";
 
-import type { LayoutProps } from "@/types/layout";
-
 const links: {
 	href: string;
 	text: string;
@@ -106,7 +102,7 @@ function Navbar() {
 		</div>
 	);
 }
-const Layout = ({ children }: LayoutProps) => {
+export default function Layout() {
 	const location = useLocation();
 	const shouldDisplayNavbar =
 		(!location.pathname.startsWith("/view/") &&
@@ -115,20 +111,16 @@ const Layout = ({ children }: LayoutProps) => {
 
 	return (
 		<main className="h-full">
-			<ThemeProvider>
-				{window.location.origin === "https://ephemeral.incognitotgt.me" && (
-					<Meta />
-				)}
-				{window.location.origin === "http://localhost:5173" && <Meta />}
-				<div className="h-full bg-background text-foreground">
-					<Toaster />
-					{shouldDisplayNavbar && <Navbar />}
-					<CommandBox />
-					{children}
-				</div>
-			</ThemeProvider>
+			{window.location.origin === "https://ephemeral.incognitotgt.me" && (
+				<Meta />
+			)}
+			{window.location.origin === "http://localhost:5173" && <Meta />}
+			<div className="h-full bg-background text-foreground">
+				<Toaster />
+				{shouldDisplayNavbar && <Navbar />}
+				<CommandBox />
+				<Outlet />
+			</div>
 		</main>
 	);
-};
-
-export default Layout;
+}
diff --git a/src/main.tsx b/src/main.tsx
@@ -1,8 +1,10 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
 import { useEffect } from "react";
-import { BrowserRouter, Route, Routes } from "react-router-dom";
+import { createBrowserRouter, RouterProvider } from "react-router-dom";
 import { Loader2 } from "lucide-react";
+import "@/index.css";
+import { ThemeProvider } from "@/components/theme-provider";
 const Home = React.lazy(() => import("@/pages/Home"));
 const View = React.lazy(() => import("@/pages/View"));
 const Settings = React.lazy(() => import("@/pages/Settings"));
@@ -13,7 +15,6 @@ const ServiceWorkerError = React.lazy(
 );
 const PageNotFound = React.lazy(() => import("@/pages/PageNotFound"));
 import Layout from "@/layout";
-import "@/index.css";
 import localforage from "localforage";
 declare global {
 	interface Window {
@@ -22,7 +23,42 @@ declare global {
 		};
 	}
 }
-
+const routes = createBrowserRouter([
+	{
+		Component: Layout,
+		path: "/",
+		children: [
+			{
+				Component: Home,
+				path: "/",
+			},
+			{
+				Component: Settings,
+				path: "/settings",
+			},
+			{
+				Component: Apps,
+				path: "/apps",
+			},
+			{
+				Component: PageNotFound,
+				path: "*",
+			},
+			{
+				Component: View,
+				path: "/view/:url",
+			},
+			{
+				Component: StaticApp,
+				path: "/staticApp/:url",
+			},
+			{
+				Component: ServiceWorkerError,
+				path: "/~/*",
+			},
+		],
+	},
+]);
 export default function App() {
 	useEffect(() => {
 		if ("serviceWorker" in navigator) {
@@ -47,28 +83,18 @@ export default function App() {
 		storeName: "__ephemeral_config",
 	});
 	return (
-		<BrowserRouter>
-			<Layout>
-				<React.Suspense
-					fallback={
-						<div className="h-full-navbar-offset bg-muted-background flex flex-col items-center justify-center gap-2 text-2xl font-bold transition-all duration-100">
-							<Loader2 size={64} className="animate-spin" />
-							Ephemeral Is Loading...
-						</div>
-					}
-				>
-					<Routes>
-						<Route path="/" Component={Home} />
-						<Route path="/view/:url" Component={View} />
-						<Route path="/settings" Component={Settings} />
-						<Route path="/apps" Component={Apps} />
-						<Route path="/staticApp/:url" Component={StaticApp} />
-						<Route path="/~/*" Component={ServiceWorkerError} />
-						<Route path="*" Component={PageNotFound} />
-					</Routes>
-				</React.Suspense>
-			</Layout>
-		</BrowserRouter>
+		<ThemeProvider>
+			<React.Suspense
+				fallback={
+					<div className="h-full-navbar-offset flex flex-col items-center justify-center gap-2 bg-background text-2xl font-bold text-foreground transition-all duration-100">
+						<Loader2 size={64} className="animate-spin" />
+						Ephemeral Is Loading...
+					</div>
+				}
+			>
+				<RouterProvider router={routes} />
+			</React.Suspense>
+		</ThemeProvider>
 	);
 }
 ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(

diff --git a/src/pages/Apps.tsx b/src/pages/Apps.tsx
@@ -15,8 +15,8 @@ import { fetch } from "@/utils/fetch";
 import type { Application } from "@/types/apps";
 import { Loader2, X } from "lucide-react";
 
-const mapFunction = (app: Application) => (
-	<div className="w-64">
+const mapFunction = (app: Application, key: number) => (
+	<div className="w-64" key={key}>
 		<Link to={`/app/${app.path}`} className="max-w-0">
 			<Card>
 				<CardHeader>

diff --git a/src/pages/PageNotFound.tsx b/src/pages/PageNotFound.tsx
@@ -1,24 +1,36 @@
 import { Link } from "react-router-dom";
 import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader } from "@/components/ui/card";
 import Header from "@/components/Header";
 export default function PageNotFound() {
 	return (
 		<>
 			<Header title="404 | Ephemeral" />
 			<div className="h-full-navbar-alternate-offset flex w-full flex-col items-center justify-center space-y-5">
-				<div className="mb-2 text-6xl font-extrabold text-foreground">404</div>
-				<div className="text-3xl font-extrabold text-muted-foreground">
-					Page Not Found
-				</div>
-
-				<Button
-					asChild
-					type="button"
-					variant="link"
-					className="text-foreground"
-				>
-					<Link to="/">Go Home</Link>
-				</Button>
+				<Card className="flex h-[32rem] w-96 flex-col items-center justify-center">
+					<CardHeader>
+						<img
+							src="https://http.cat/404"
+							alt="404"
+							width={300}
+							height={300}
+							className="h-auto w-auto"
+						/>
+					</CardHeader>
+					<CardContent className="flex flex-col items-center justify-center">
+						<p className="text-center">
+							The page you are looking for does not exist.
+						</p>
+						<Button
+							asChild
+							type="button"
+							variant="link"
+							className="text-foreground"
+						>
+							<Link to="/">Go Home</Link>
+						</Button>
+					</CardContent>
+				</Card>
 			</div>
 		</>
 	);