feat: use a safe typed routeur

Author: Tchoupinax

docker-compose.yaml

@@ -6,6 +6,7 @@ services:
     depends_on:
       backend:
         condition: service_started
+
   backend:
     image: torii-backend:latest
     restart: always
@@ -16,4 +17,4 @@ services:
     volumes:
     - type: bind
       source: ./backend
-      target: /tmp
+      target: /tmp

frontend/Caddyfile

@@ -4,4 +4,4 @@
     file_server {
         hide .git
     }
-}
+}

frontend/Dockerfile

@@ -8,4 +8,4 @@ WORKDIR /app
 USER nobody
 COPY --chown=nobody:nobody --from=builder /app/dist/ dist/
 COPY --chown=nobody:nobody Caddyfile .
-ENTRYPOINT ["caddy","run"]
+ENTRYPOINT ["caddy","run"]

frontend/components.json

@@ -13,4 +13,4 @@
     "components": "@/components",
     "utils": "@/lib/utils"
   }
-}
+}

frontend/package-lock.json

@@ -13,6 +13,7 @@
     "@headlessui/react": "^1.7.17",
     "@heroicons/react": "^2.0.18",
     "@radix-ui/react-slot": "^1.0.2",
+    "@swan-io/chicane": "^1.4.1",
     "@tailwindcss/forms": "^0.5.7",
     "@tanstack/react-query": "^5.13.4",
     "class-variance-authority": "^0.7.0",
@@ -25,7 +26,8 @@
     "react-router-dom": "^6.20.1",
     "sort-by": "^1.2.0",
     "tailwind-merge": "^2.1.0",
-    "tailwindcss-animate": "^1.0.7"
+    "tailwindcss-animate": "^1.0.7",
+    "ts-pattern": "^5.0.6"
   },
   "devDependencies": {
     "@tanstack/react-query": "^5.13.4",

frontend/package.json

@@ -6,7 +6,9 @@ export default function ErrorPage() {
 
   return (<div id="error-page">
     <h1>Oops!</h1>
+
     <p>Sorry, an unexpected error has occurred.</p>
+
     <p>
       <i>{error.statusText || error.message}</i>
     </p>

frontend/src/error-page.jsx

@@ -1,38 +1,31 @@
 import React from 'react'
 import ReactDOM from 'react-dom/client'
 import './main.css'
-import {QueryClient, QueryClientProvider,} from '@tanstack/react-query'
-import {createBrowserRouter, RouterProvider,} from "react-router-dom";
+import {QueryClient, QueryClientProvider} from '@tanstack/react-query'
 
-import Root from "./routes/root";
-// @ts-ignore
 import ErrorPage from "@/error-page.jsx";
 import AppShell from "@/components/AppShell.tsx";
+import { createRouter } from "@swan-io/chicane";
+import { match } from "ts-pattern";
 
-const router = createBrowserRouter([
-  {
-    path: "/",
-    element: <Root/>,
-    errorElement: <ErrorPage/>,
-    children: [
-      {
-        index: true,
-        element: <AppShell/>,
-      },
-      // {
-      //   path: "/catalogs/:catalogSlug/services",
-      //   Component: AppShell,
-      // }
-    ],
-  },
-]);
+const Router = createRouter({
+  Home: "/",
+});
+
+const App = () => {
+  const route = Router.useRoute(["Home"]);
+
+  return match(route)
+    .with({ name: "Home" }, () => <AppShell/>)
+    .otherwise(() => <ErrorPage/>);
+};
 
 const queryClient = new QueryClient()
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
     <QueryClientProvider client={queryClient}>
-      <RouterProvider router={router}/>
+      <App />
     </QueryClientProvider>
   </React.StrictMode>,
 )

frontend/src/main.tsx

@@ -1,6 +1,5 @@
 import AppShell from "@/components/AppShell.tsx";
 
-
 export default function Root() {
   return <AppShell/>
 }