From 50791c945d97aa1646e22b85fd0b57a8cd2404ac Mon Sep 17 00:00:00 2001
From: Emmanuel Pelletier <manu@habite.la>
Date: Wed, 24 Jul 2024 14:28:09 +0200
Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F(home)=20move=20the=20join=20?=
 =?UTF-8?q?meeting=20dialog=20in=20its=20own=20component?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

feels less cluttered that way
---
 .../home/components/JoinMeetingDialog.tsx     | 39 +++++++++++++
 .../src/features/home/routes/Home.tsx         | 55 ++-----------------
 src/frontend/src/features/rooms/index.ts      |  1 +
 .../rooms/navigation/navigateToRoom.ts        |  5 ++
 4 files changed, 49 insertions(+), 51 deletions(-)
 create mode 100644 src/frontend/src/features/home/components/JoinMeetingDialog.tsx
 create mode 100644 src/frontend/src/features/rooms/navigation/navigateToRoom.ts

diff --git a/src/frontend/src/features/home/components/JoinMeetingDialog.tsx b/src/frontend/src/features/home/components/JoinMeetingDialog.tsx
new file mode 100644
index 00000000..783fd9b7
--- /dev/null
+++ b/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>
+  )
+}
diff --git a/src/frontend/src/features/home/routes/Home.tsx b/src/frontend/src/features/home/routes/Home.tsx
index c55b3d32..f54f13d2 100644
--- a/src/frontend/src/features/home/routes/Home.tsx
+++ b/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>
-  )
-}
diff --git a/src/frontend/src/features/rooms/index.ts b/src/frontend/src/features/rooms/index.ts
index 92a3af13..e138fa98 100644
--- a/src/frontend/src/features/rooms/index.ts
+++ b/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'
diff --git a/src/frontend/src/features/rooms/navigation/navigateToRoom.ts b/src/frontend/src/features/rooms/navigation/navigateToRoom.ts
new file mode 100644
index 00000000..cde5bad5
--- /dev/null
+++ b/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}`)
+}