From 668b9274c52a8c9f4b02bdff78c2573678f10004 Mon Sep 17 00:00:00 2001
From: Emmanuel Pelletier <manu@habite.la>
Date: Sun, 21 Jul 2024 17:41:48 +0200
Subject: [PATCH] =?UTF-8?q?=EF=B8=8F=E2=99=BB=EF=B8=8F(frontend)=20make=20?=
 =?UTF-8?q?the=20Conference=20component=20not=20know=20about=20routing?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Makes more sense that way: only the Room _route_ knows about route
params, not the internal component used.
---
 src/frontend/src/features/rooms/components/Conference.tsx | 4 ++--
 src/frontend/src/features/rooms/routes/Room.tsx           | 8 +++++++-
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/frontend/src/features/rooms/components/Conference.tsx b/src/frontend/src/features/rooms/components/Conference.tsx
index 67f2e1d3..22848a9c 100644
--- a/src/frontend/src/features/rooms/components/Conference.tsx
+++ b/src/frontend/src/features/rooms/components/Conference.tsx
@@ -1,4 +1,3 @@
-import { useParams } from 'wouter'
 import { useQuery } from '@tanstack/react-query'
 import {
   LiveKitRoom,
@@ -11,11 +10,12 @@ import { navigateToHome } from '@/features/home'
 import { fetchRoom } from '../api/fetchRoom'
 
 export const Conference = ({
+  roomId,
   userConfig,
 }: {
+  roomId: string
   userConfig: LocalUserChoices
 }) => {
-  const { roomId } = useParams()
   const { status, data } = useQuery({
     queryKey: [keys.room, roomId, userConfig.username],
     queryFn: () =>
diff --git a/src/frontend/src/features/rooms/routes/Room.tsx b/src/frontend/src/features/rooms/routes/Room.tsx
index c2552f40..7a3e3401 100644
--- a/src/frontend/src/features/rooms/routes/Room.tsx
+++ b/src/frontend/src/features/rooms/routes/Room.tsx
@@ -1,15 +1,21 @@
 import { type LocalUserChoices } from '@livekit/components-react'
 import { useState } from 'react'
+import { useParams } from 'wouter'
 import { Conference } from '../components/Conference'
 import { Join } from '../components/Join'
 import { Screen } from '@/layout/Screen'
+import { ErrorScreen } from '@/layout/ErrorScreen'
 
 export const Room = () => {
   const [userConfig, setUserConfig] = useState<LocalUserChoices | null>(null)
+  const { roomId } = useParams()
+  if (!roomId) {
+    return <ErrorScreen />
+  }
   return (
     <Screen>
       {userConfig ? (
-        <Conference userConfig={userConfig} />
+        <Conference roomId={roomId} userConfig={userConfig} />
       ) : (
         <Join onSubmit={setUserConfig} />
       )}