From 8f81318ecfe44236001388fa811f7a59b7469b28 Mon Sep 17 00:00:00 2001
From: Emmanuel Pelletier <manu@habite.la>
Date: Fri, 26 Jul 2024 00:36:10 +0200
Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F(frontend)=20trying=20out=20c?=
 =?UTF-8?q?leaner=20way=20to=20handle=20routes?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

it was a bit cumbersome to navigate by paths accross the app as if one
path changes a tiny bit we have to make sure we updated everything
everywhere and it's kind of error-prone and cumbersome to build paths by
hand.

now we have a routes file that describes everything: what is the path to
each route, and how to navigate to them.

We use a new navigateTo helper that helps us. It could be better typed
but i'm a newbie.
---
 src/frontend/src/App.tsx                      | 16 +++++------
 .../home/components/JoinMeetingDialog.tsx     |  5 ++--
 src/frontend/src/features/home/index.ts       |  1 -
 .../home/navigation/navigateToHome.ts         |  5 ----
 .../src/features/home/routes/Home.tsx         |  9 +++++--
 .../features/rooms/components/Conference.tsx  |  4 +--
 src/frontend/src/features/rooms/index.ts      |  5 ++--
 .../rooms/navigation/navigateToNewRoom.ts     |  6 -----
 .../rooms/navigation/navigateToRoom.ts        |  5 ----
 .../src/features/rooms/utils/isRoomValid.ts   |  3 +--
 src/frontend/src/layout/Header.tsx            |  2 +-
 src/frontend/src/navigation/getRouteByName.ts |  9 +++++++
 src/frontend/src/navigation/navigateTo.ts     | 21 +++++++++++++++
 .../src/navigation/useMatchesRoute.ts         |  7 +++++
 src/frontend/src/routes.ts                    | 27 +++++++++++++++++++
 src/frontend/src/routes/NotFound.tsx          |  5 ----
 src/frontend/src/utils/useMatchesRoute.ts     | 17 ------------
 17 files changed, 88 insertions(+), 59 deletions(-)
 delete mode 100644 src/frontend/src/features/home/navigation/navigateToHome.ts
 delete mode 100644 src/frontend/src/features/rooms/navigation/navigateToNewRoom.ts
 delete mode 100644 src/frontend/src/features/rooms/navigation/navigateToRoom.ts
 create mode 100644 src/frontend/src/navigation/getRouteByName.ts
 create mode 100644 src/frontend/src/navigation/navigateTo.ts
 create mode 100644 src/frontend/src/navigation/useMatchesRoute.ts
 create mode 100644 src/frontend/src/routes.ts
 delete mode 100644 src/frontend/src/routes/NotFound.tsx
 delete mode 100644 src/frontend/src/utils/useMatchesRoute.ts

diff --git a/src/frontend/src/App.tsx b/src/frontend/src/App.tsx
index 45b14798..9a055d34 100644
--- a/src/frontend/src/App.tsx
+++ b/src/frontend/src/App.tsx
@@ -5,12 +5,11 @@ import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { useTranslation } from 'react-i18next'
 import { useLang } from 'hoofd'
-import { Route, Switch } from 'wouter'
-import { HomeRoute } from '@/features/home'
-import { RoomRoute, roomRouteRegex } from '@/features/rooms'
-import { NotFound } from './routes/NotFound'
-import './i18n/init'
+import { Switch, Route } from 'wouter'
+import { NotFoundScreen } from './layout/NotFoundScreen'
 import { RenderIfUserFetched } from './features/auth'
+import { routes } from './routes'
+import './i18n/init'
 
 const queryClient = new QueryClient()
 
@@ -22,9 +21,10 @@ function App() {
       <Suspense fallback={null}>
         <RenderIfUserFetched>
           <Switch>
-            <Route path="/" component={HomeRoute} />
-            <Route path={roomRouteRegex} component={RoomRoute} />
-            <Route component={NotFound} />
+            {Object.entries(routes).map(([, route], i) => (
+              <Route key={i} path={route.path} component={route.Component} />
+            ))}
+            <Route component={NotFoundScreen} />
           </Switch>
         </RenderIfUserFetched>
         <ReactQueryDevtools initialIsOpen={false} />
diff --git a/src/frontend/src/features/home/components/JoinMeetingDialog.tsx b/src/frontend/src/features/home/components/JoinMeetingDialog.tsx
index 31a5f01a..fc2f5d45 100644
--- a/src/frontend/src/features/home/components/JoinMeetingDialog.tsx
+++ b/src/frontend/src/features/home/components/JoinMeetingDialog.tsx
@@ -1,6 +1,7 @@
 import { useTranslation } from 'react-i18next'
 import { Field, Ul, H, P, Form, Dialog } from '@/primitives'
-import { isRoomValid, navigateToRoom } from '@/features/rooms'
+import { navigateTo } from '@/navigation/navigateTo'
+import { isRoomValid } from '@/features/rooms'
 
 export const JoinMeetingDialog = () => {
   const { t } = useTranslation('home')
@@ -8,7 +9,7 @@ export const JoinMeetingDialog = () => {
     <Dialog title={t('joinMeeting')}>
       <Form
         onSubmit={(data) => {
-          navigateToRoom((data.roomId as string).trim())
+          navigateTo('room', data.roomId as string)
         }}
         submitLabel={t('joinInputSubmit')}
       >
diff --git a/src/frontend/src/features/home/index.ts b/src/frontend/src/features/home/index.ts
index 0d677a0d..bda6a40d 100644
--- a/src/frontend/src/features/home/index.ts
+++ b/src/frontend/src/features/home/index.ts
@@ -1,2 +1 @@
-export { navigateToHome } from './navigation/navigateToHome'
 export { Home as HomeRoute } from './routes/Home'
diff --git a/src/frontend/src/features/home/navigation/navigateToHome.ts b/src/frontend/src/features/home/navigation/navigateToHome.ts
deleted file mode 100644
index 42f84d16..00000000
--- a/src/frontend/src/features/home/navigation/navigateToHome.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import { navigate } from 'wouter/use-browser-location'
-
-export const navigateToHome = () => {
-  navigate(`/`)
-}
diff --git a/src/frontend/src/features/home/routes/Home.tsx b/src/frontend/src/features/home/routes/Home.tsx
index f4f9274d..86ced491 100644
--- a/src/frontend/src/features/home/routes/Home.tsx
+++ b/src/frontend/src/features/home/routes/Home.tsx
@@ -2,8 +2,9 @@ import { useTranslation } from 'react-i18next'
 import { DialogTrigger } from 'react-aria-components'
 import { Button, Div, Text, VerticallyOffCenter } from '@/primitives'
 import { HStack } from '@/styled-system/jsx'
+import { navigateTo } from '@/navigation/navigateTo'
+import { generateRoomId } from '@/features/rooms'
 import { authUrl, useUser } from '@/features/auth'
-import { navigateToNewRoom } from '@/features/rooms'
 import { Screen } from '@/layout/Screen'
 import { JoinMeetingDialog } from '../components/JoinMeetingDialog'
 
@@ -28,7 +29,11 @@ export const Home = () => {
           <HStack gap="gutter">
             <Button
               variant="primary"
-              onPress={isLoggedIn ? () => navigateToNewRoom() : undefined}
+              onPress={
+                isLoggedIn
+                  ? () => navigateTo('room', generateRoomId())
+                  : undefined
+              }
               href={isLoggedIn ? undefined : authUrl()}
             >
               {isLoggedIn ? t('createMeeting') : t('login', { ns: 'global' })}
diff --git a/src/frontend/src/features/rooms/components/Conference.tsx b/src/frontend/src/features/rooms/components/Conference.tsx
index 0d4daa17..08745f9d 100644
--- a/src/frontend/src/features/rooms/components/Conference.tsx
+++ b/src/frontend/src/features/rooms/components/Conference.tsx
@@ -7,8 +7,8 @@ import {
 } from '@livekit/components-react'
 import { Room, RoomOptions } from "livekit-client";
 import { keys } from '@/api/queryKeys'
+import { navigateTo } from '@/navigation/navigateTo'
 import { QueryAware } from '@/layout/QueryAware'
-import { navigateToHome } from '@/features/home'
 import { fetchRoom } from '../api/fetchRoom'
 
 export const Conference = ({
@@ -50,7 +50,7 @@ export const Conference = ({
         audio={userConfig.audioEnabled}
         video={userConfig.videoEnabled}
         onDisconnected={() => {
-          navigateToHome()
+          navigateTo('home')
         }}
       >
         <VideoConference />
diff --git a/src/frontend/src/features/rooms/index.ts b/src/frontend/src/features/rooms/index.ts
index e138fa98..cd686866 100644
--- a/src/frontend/src/features/rooms/index.ts
+++ b/src/frontend/src/features/rooms/index.ts
@@ -1,4 +1,3 @@
-export { navigateToNewRoom } from './navigation/navigateToNewRoom'
-export { navigateToRoom } from './navigation/navigateToRoom'
 export { Room as RoomRoute } from './routes/Room'
-export { roomRouteRegex, isRoomValid } from './utils/isRoomValid'
+export { roomIdPattern, isRoomValid } from './utils/isRoomValid'
+export { generateRoomId } from './utils/generateRoomId'
diff --git a/src/frontend/src/features/rooms/navigation/navigateToNewRoom.ts b/src/frontend/src/features/rooms/navigation/navigateToNewRoom.ts
deleted file mode 100644
index 4d20b364..00000000
--- a/src/frontend/src/features/rooms/navigation/navigateToNewRoom.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import { navigate } from 'wouter/use-browser-location'
-import { generateRoomId } from '../utils/generateRoomId'
-
-export const navigateToNewRoom = () => {
-  navigate(`/${generateRoomId()}`)
-}
diff --git a/src/frontend/src/features/rooms/navigation/navigateToRoom.ts b/src/frontend/src/features/rooms/navigation/navigateToRoom.ts
deleted file mode 100644
index cde5bad5..00000000
--- a/src/frontend/src/features/rooms/navigation/navigateToRoom.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import { navigate } from 'wouter/use-browser-location'
-
-export const navigateToRoom = (roomId: string) => {
-  navigate(`/${roomId}`)
-}
diff --git a/src/frontend/src/features/rooms/utils/isRoomValid.ts b/src/frontend/src/features/rooms/utils/isRoomValid.ts
index 45abb040..12fc3d04 100644
--- a/src/frontend/src/features/rooms/utils/isRoomValid.ts
+++ b/src/frontend/src/features/rooms/utils/isRoomValid.ts
@@ -1,5 +1,4 @@
-const roomIdPattern = '[a-z]{3}-[a-z]{4}-[a-z]{3}'
-export const roomRouteRegex = new RegExp(`^[/](?<roomId>${roomIdPattern})$`)
+export const roomIdPattern = '[a-z]{3}-[a-z]{4}-[a-z]{3}'
 
 export const isRoomValid = (roomId: string) =>
   new RegExp(`^${roomIdPattern}$`).test(roomId)
diff --git a/src/frontend/src/layout/Header.tsx b/src/frontend/src/layout/Header.tsx
index fdf711cf..c456c4a7 100644
--- a/src/frontend/src/layout/Header.tsx
+++ b/src/frontend/src/layout/Header.tsx
@@ -5,7 +5,7 @@ import { useTranslation } from 'react-i18next'
 import { A, Button, Popover, PopoverList, Text } from '@/primitives'
 import { SettingsButton } from '@/features/settings'
 import { authUrl, logoutUrl, useUser } from '@/features/auth'
-import { useMatchesRoute } from '@/utils/useMatchesRoute'
+import { useMatchesRoute } from '@/navigation/useMatchesRoute'
 import { Feedback } from '@/components/Feedback'
 
 export const Header = () => {
diff --git a/src/frontend/src/navigation/getRouteByName.ts b/src/frontend/src/navigation/getRouteByName.ts
new file mode 100644
index 00000000..621a2196
--- /dev/null
+++ b/src/frontend/src/navigation/getRouteByName.ts
@@ -0,0 +1,9 @@
+import { type RouteName, routes } from '@/routes'
+
+export const getRouteByName = (routeName: RouteName) => {
+  const route = routes[routeName]
+  if (!route) {
+    throw new Error(`Route "${routeName}" does not exist`)
+  }
+  return route
+}
diff --git a/src/frontend/src/navigation/navigateTo.ts b/src/frontend/src/navigation/navigateTo.ts
new file mode 100644
index 00000000..1a3d7f4c
--- /dev/null
+++ b/src/frontend/src/navigation/navigateTo.ts
@@ -0,0 +1,21 @@
+import { RouteName } from '@/routes'
+import { navigate } from 'wouter/use-browser-location'
+import { getRouteByName } from './getRouteByName'
+
+export const navigateTo = <S = unknown>(
+  routeName: RouteName,
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  params?: any,
+  options?: { replace?: boolean; state?: S }
+) => {
+  const route = getRouteByName(routeName)
+  const to = route.to
+    ? route.to(params)
+    : typeof route.path === 'string'
+      ? route.path
+      : null
+  if (!to) {
+    throw new Error(`Can't find path to navigate to for ${routeName}`)
+  }
+  return navigate(to, options)
+}
diff --git a/src/frontend/src/navigation/useMatchesRoute.ts b/src/frontend/src/navigation/useMatchesRoute.ts
new file mode 100644
index 00000000..59aeae37
--- /dev/null
+++ b/src/frontend/src/navigation/useMatchesRoute.ts
@@ -0,0 +1,7 @@
+import { useRoute } from 'wouter'
+import { type RouteName, routes } from '../routes'
+
+export const useMatchesRoute = (route: RouteName) => {
+  const [match] = useRoute(routes[route].path)
+  return match
+}
diff --git a/src/frontend/src/routes.ts b/src/frontend/src/routes.ts
new file mode 100644
index 00000000..ba7f7e0d
--- /dev/null
+++ b/src/frontend/src/routes.ts
@@ -0,0 +1,27 @@
+import { RoomRoute, roomIdPattern } from '@/features/rooms'
+import { HomeRoute } from '@/features/home'
+
+export const routes: Record<
+  'home' | 'room',
+  {
+    name: RouteName
+    path: RegExp | string
+    Component: () => JSX.Element
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    to?: (...args: any[]) => string | URL
+  }
+> = {
+  home: {
+    name: 'home',
+    path: '/',
+    Component: HomeRoute,
+  },
+  room: {
+    name: 'room',
+    path: new RegExp(`^[/](?<roomId>${roomIdPattern})$`),
+    to: (roomId: string) => `/${roomId.trim()}`,
+    Component: RoomRoute,
+  },
+}
+
+export type RouteName = keyof typeof routes
diff --git a/src/frontend/src/routes/NotFound.tsx b/src/frontend/src/routes/NotFound.tsx
deleted file mode 100644
index 0dedc9ca..00000000
--- a/src/frontend/src/routes/NotFound.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import { NotFoundScreen } from '@/layout/NotFoundScreen'
-
-export const NotFound = () => {
-  return <NotFoundScreen />
-}
diff --git a/src/frontend/src/utils/useMatchesRoute.ts b/src/frontend/src/utils/useMatchesRoute.ts
deleted file mode 100644
index 6dc13c9c..00000000
--- a/src/frontend/src/utils/useMatchesRoute.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { useRoute } from 'wouter'
-import { roomRouteRegex } from '@/features/rooms'
-
-type RouteName = 'home' | 'room'
-
-const routeMap = {
-  home: '/',
-  room: roomRouteRegex,
-}
-
-export const useMatchesRoute = (route: RouteName) => {
-  const [match] = useRoute(routeMap[route])
-  if (!(route in routeMap)) {
-    throw new Error(`Route ${route} not found`)
-  }
-  return match
-}