♻️(home) move the join meeting dialog in its own component

feels less cluttered that way

src/frontend/src/features/home/components/JoinMeetingDialog.tsx

@@ -0,0 +1,39 @@
+import { useTranslation } from 'react-i18next'
+import { Div, Field, Ul, H, P, Form } from '@/primitives'
+import { isRoomValid, navigateToRoom } from '@/features/rooms'
+
+export const JoinMeetingDialog = () => {
+  const { t } = useTranslation('home')
+  return (
+    <Div>
+      <Form
+        onSubmit={(data) => {
+          navigateToRoom((data.roomId as string).trim())
+        }}
+        submitLabel={t('joinInputSubmit')}
+      >
+        <Field
+          type="text"
+          name="roomId"
+          label={t('joinInputLabel')}
+          description={t('joinInputExample', {
+            example: 'https://meet.numerique.gouv.fr/azer-tyu-qsdf',
+          })}
+          validate={(value) => {
+            return !isRoomValid(value.trim()) ? (
+              <>
+                <p>{t('joinInputError')}</p>
+                <Ul>
+                  <li>{window.location.origin}/uio-azer-jkl</li>
+                  <li>uio-azer-jkl</li>
+                </Ul>
+              </>
+            ) : null
+          }}
+        />
+      </Form>
+      <H lvl={2}>{t('joinMeetingTipHeading')}</H>
+      <P last>{t('joinMeetingTipContent')}</P>
+    </Div>
+  )
+}

src/frontend/src/features/home/routes/Home.tsx

@@ -1,21 +1,10 @@
 import { useTranslation } from 'react-i18next'
-import { navigate } from 'wouter/use-browser-location'
-import {
-  Button,
-  P,
-  Div,
-  Text,
-  H,
-  VerticallyOffCenter,
-  Dialog,
-  Form,
-  Field,
-  Ul,
-} from '@/primitives'
+import { Button, Div, Text, VerticallyOffCenter, Dialog } from '@/primitives'
 import { HStack } from '@/styled-system/jsx'
 import { authUrl, useUser } from '@/features/auth'
-import { isRoomValid, navigateToNewRoom } from '@/features/rooms'
+import { navigateToNewRoom } from '@/features/rooms'
 import { Screen } from '@/layout/Screen'
+import { JoinMeetingDialog } from '../components/JoinMeetingDialog'
 
 export const Home = () => {
   const { t } = useTranslation('home')
@@ -48,7 +37,7 @@ export const Home = () => {
               <Button variant="primary" outline>
                 {t('joinMeeting')}
               </Button>
-              <JoinMeetingDialogContent />
+              <JoinMeetingDialog />
             </Dialog>
           </HStack>
         </Div>
@@ -56,39 +45,3 @@ export const Home = () => {
     </Screen>
   )
 }
-
-const JoinMeetingDialogContent = () => {
-  const { t } = useTranslation('home')
-  return (
-    <Div>
-      <Form
-        onSubmit={(data) => {
-          navigate(`/${(data.roomId as string).trim()}`)
-        }}
-        submitLabel={t('joinInputSubmit')}
-      >
-        <Field
-          type="text"
-          name="roomId"
-          label={t('joinInputLabel')}
-          description={t('joinInputExample', {
-            example: 'https://meet.numerique.gouv.fr/azer-tyu-qsdf',
-          })}
-          validate={(value) => {
-            return !isRoomValid(value.trim()) ? (
-              <>
-                <p>{t('joinInputError')}</p>
-                <Ul>
-                  <li>{window.location.origin}/uio-azer-jkl</li>
-                  <li>uio-azer-jkl</li>
-                </Ul>
-              </>
-            ) : null
-          }}
-        />
-      </Form>
-      <H lvl={2}>{t('joinMeetingTipHeading')}</H>
-      <P last>{t('joinMeetingTipContent')}</P>
-    </Div>
-  )
-}

src/frontend/src/features/rooms/index.ts

@@ -1,3 +1,4 @@
 export { navigateToNewRoom } from './navigation/navigateToNewRoom'
+export { navigateToRoom } from './navigation/navigateToRoom'
 export { Room as RoomRoute } from './routes/Room'
 export { roomRouteRegex, isRoomValid } from './utils/isRoomValid'

src/frontend/src/features/rooms/navigation/navigateToRoom.ts

@@ -0,0 +1,5 @@
+import { navigate } from 'wouter/use-browser-location'
+
+export const navigateToRoom = (roomId: string) => {
+  navigate(`/${roomId}`)
+}