feat: not found page with link to home

src/components/views/error/ErrorView.stories.tsx

@@ -15,7 +15,7 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 const commonProps = {
-  onHome: () => console.log("onHome"),
+  onBack: () => console.log("onHome"),
 } satisfies ComponentProps;
 
 export const Fullscreen = {

src/components/views/error/ErrorView.tsx

@@ -3,19 +3,18 @@ import { BasicLayout } from "../../layout/BasicLayout";
 
 export interface ErrorViewProps {
   message?: string;
-  onHome(): void;
+  onBack(): void;
 }
 
-export function ErrorView({ message, onHome }: ErrorViewProps): ReactElement {
+export function ErrorView({ message, onBack }: ErrorViewProps): ReactElement {
   return (
     <BasicLayout>
       <div className="flex flex-col gap-4">
         <article className="prose lg:prose-xl">
           <h3 className="text-center">Ops! 😅 </h3>
           <strong>{message ?? "Something went wrong! 😱"}</strong>
         </article>
-        {/* <div className="divider divider-vertical w-full h-2" /> */}
-        <button className="btn btn-primary mt-4" onClick={onHome}>
+        <button className="btn btn-primary mt-4" onClick={onBack}>
           Start over 🦖
         </button>
       </div>

src/components/views/error/UseErrorView.ts

@@ -5,6 +5,6 @@ export function useErrorView(): ErrorViewProps {
   const navigate = useNavigate();
 
   return {
-    onHome: () => navigate("/"),
+    onBack: () => navigate("/"),
   };
 }

src/components/views/not-found/NotFoundView.stories.tsx

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import { NotFoundView as Component } from "../not-found/NotFoundView";
+import { NotFoundView as Component } from "./NotFoundView";
 import { FullSizeDecorator } from "~/stories/decorators/FullSizeDecorator";
 import { MockBrowserDecorator } from "~/stories/decorators/MockBrowserDecorator";
 import { MockPhoneDecorator } from "~/stories/decorators/MockPhoneDecorator";

src/components/views/not-found/NotFoundView.tsx

@@ -1,10 +1,21 @@
 import type { ReactElement } from "react";
 import { BasicLayout } from "../../layout/BasicLayout";
 
-export function NotFoundView(): ReactElement {
+export interface NotFoundViewProps {
+  onBack(): void;
+}
+
+export function NotFoundView({ onBack }: NotFoundViewProps): ReactElement {
   return (
     <BasicLayout container>
-      <h1>Not Found</h1>
+      <div className="flex flex-col gap-4 items-center">
+        <article className="prose lg:prose-xl p-4 text-pretty max-w-64 lg:max-w-full">
+          <strong>{"Could not find the page you were looking for! 🕵️"}</strong>
+        </article>
+        <button className="btn btn-primary mt-4 w-48" onClick={onBack}>
+          Start over 🦖
+        </button>
+      </div>
     </BasicLayout>
   );
 }

src/components/views/not-found/UseNotFoundView.ts

@@ -0,0 +1,10 @@
+import { useNavigate } from "react-router-dom";
+import type { NotFoundViewProps } from "./NotFoundView";
+
+export function useNotFoundView(): NotFoundViewProps {
+  const navigate = useNavigate();
+
+  return {
+    onBack: () => navigate("/"),
+  };
+}

src/core/routes/GlobalRoutes.tsx

@@ -9,7 +9,7 @@ export function GlobalRoutes(): RouteProps[] {
     },
     {
       path: "/editor",
-      lazy: () => import("~/pages/editor/ImageEditorRoute"),
+      lazy: () => import("~/pages/editor/EditorRoute"),
     },
   ];
 }

src/pages/editor/ImageEditorPage.tsx → src/pages/editor/EditorPage.tsx

@@ -5,11 +5,11 @@ import { useThemeSwitcher } from "~/components/library/theme/UseThemeSwitcher";
 import { ErrorView } from "~/components/views/error/ErrorView";
 import { LoadingView } from "~/components/views/loading/LoadingView";
 
-export interface ImageEditorPageProps {
+export interface EditorPageProps {
   url: string;
 }
 
-export function ImageEditorPage({ url }: ImageEditorPageProps): ReactElement {
+export function EditorPage({ url }: EditorPageProps): ReactElement {
   const navigate = useNavigate();
   const themeSwitchProps = useThemeSwitcher();
 
@@ -25,7 +25,7 @@ export function ImageEditorPage({ url }: ImageEditorPageProps): ReactElement {
         themeSwitchProps,
       }}
       LoaderComponent={() => <LoadingView />}
-      ErrorComponent={() => <ErrorView />}
+      ErrorComponent={() => <ErrorView onBack={() => console.log("onBack")} />}
     />
   );
 }

src/pages/editor/ImageEditorRoute.tsx → src/pages/editor/EditorRoute.tsx

@@ -1,6 +1,6 @@
 import type { ReactElement } from "react";
 import { useAtomValue } from "jotai";
-import { ImageEditorPage } from "./ImageEditorPage";
+import { EditorPage } from "./EditorPage";
 import { ErrorView } from "~/components/views/error/ErrorView";
 import { useErrorView } from "~/components/views/error/UseErrorView";
 import { getDownloadUrlAtom } from "~/core/routes/atoms/DroppedFileAtoms";
@@ -13,9 +13,9 @@ export function Component(): ReactElement {
     return <ErrorView {...errorViewProps} message="File somehow went missing 🤔" />;
   }
 
-  return <ImageEditorPage url={fileUrl} />;
+  return <EditorPage url={fileUrl} />;
 }
-Component.displayName = "ImageEditorPage";
+Component.displayName = "EditorPage";
 
 export function ErrorBoundary(): ReactElement {
   const errorViewProps = useErrorView();

src/pages/not-found/NotFoundPage.tsx

@@ -1,6 +1,8 @@
 import type { ReactElement } from "react";
 import { NotFoundView } from "~/components/views/not-found/NotFoundView";
+import { useNotFoundView } from "~/components/views/not-found/UseNotFoundView";
 
 export function NotFoundPage(): ReactElement {
-  return <NotFoundView />;
+  const notFoundViewProps = useNotFoundView();
+  return <NotFoundView {...notFoundViewProps} />;
 }