From 66350b8fb5a00c4312ea2578fa2d59777b4b56d9 Mon Sep 17 00:00:00 2001
From: lebaudantoine <lebaud.antoine131@gmail.com>
Date: Wed, 7 Aug 2024 16:34:29 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B(frontend)=20pass=20participant's?=
 =?UTF-8?q?=20name=20while=20creating=20a=20room?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Fixed an issue where users' chosen usernames were not
being included when creating a room.
---
 src/frontend/src/features/home/routes/Home.tsx            | 7 ++++++-
 src/frontend/src/features/rooms/api/createRoom.ts         | 8 ++++++--
 src/frontend/src/features/rooms/components/Conference.tsx | 2 +-
 3 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/src/frontend/src/features/home/routes/Home.tsx b/src/frontend/src/features/home/routes/Home.tsx
index 33d7a93b..096abe8f 100644
--- a/src/frontend/src/features/home/routes/Home.tsx
+++ b/src/frontend/src/features/home/routes/Home.tsx
@@ -9,11 +9,16 @@ import { generateRoomId } from '@/features/rooms'
 import { authUrl, useUser, UserAware } from '@/features/auth'
 import { JoinMeetingDialog } from '../components/JoinMeetingDialog'
 import { useCreateRoom } from '@/features/rooms'
+import { usePersistentUserChoices } from '@livekit/components-react'
 
 export const Home = () => {
   const { t } = useTranslation('home')
   const { isLoggedIn } = useUser()
 
+  const {
+    userChoices: { username },
+  } = usePersistentUserChoices()
+
   const { mutateAsync: createRoom } = useCreateRoom({
     onSuccess: (data) => {
       navigateTo('room', data.slug, {
@@ -44,7 +49,7 @@ export const Home = () => {
                 isLoggedIn
                   ? async () => {
                       const slug = generateRoomId()
-                      await createRoom({ slug })
+                      await createRoom({ slug, username })
                     }
                   : undefined
               }
diff --git a/src/frontend/src/features/rooms/api/createRoom.ts b/src/frontend/src/features/rooms/api/createRoom.ts
index aef2cb55..2ffef040 100644
--- a/src/frontend/src/features/rooms/api/createRoom.ts
+++ b/src/frontend/src/features/rooms/api/createRoom.ts
@@ -5,10 +5,14 @@ import { ApiRoom } from './ApiRoom'
 
 export interface CreateRoomParams {
   slug: string
+  username?: string
 }
 
-const createRoom = ({ slug }: CreateRoomParams): Promise<ApiRoom> => {
-  return fetchApi(`rooms/`, {
+const createRoom = ({
+  slug,
+  username = '',
+}: CreateRoomParams): Promise<ApiRoom> => {
+  return fetchApi(`rooms/?username=${encodeURIComponent(username)}`, {
     method: 'POST',
     body: JSON.stringify({
       name: slug,
diff --git a/src/frontend/src/features/rooms/components/Conference.tsx b/src/frontend/src/features/rooms/components/Conference.tsx
index 1d447324..a1ec0dac 100644
--- a/src/frontend/src/features/rooms/components/Conference.tsx
+++ b/src/frontend/src/features/rooms/components/Conference.tsx
@@ -57,7 +57,7 @@ export const Conference = ({
         username: userConfig.username,
       }).catch((error) => {
         if (error.statusCode == '404') {
-          createRoom({ slug: roomId })
+          createRoom({ slug: roomId, username: userConfig.username })
         }
       }),
     retry: false,