From df1eca7c34c50bd15e3516d6c7672816c78a1de2 Mon Sep 17 00:00:00 2001
From: lebaudantoine <lebaud.antoine131@gmail.com>
Date: Sun, 4 Aug 2024 17:53:59 +0200
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8(frontend)=20support=20get=20or=20crea?=
 =?UTF-8?q?te=20room=20while=20accessing=20a=20room?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Attempt to create a room using a mutation if the fetch query fails.
If the mutation succeeds, update the fetch query data to ensure
it is up-to-date.

I tried to reproduce kind of a ‘get or create’ mechanism.

Due to the removal of the 'onError' prop in React Query, it is recommended
to use useEffect for handling such event propagation.

Regarding status handling, the fetch status takes priority over the mutation.
The mutation should only be called if the fetch has failed.
---
 .../features/rooms/components/Conference.tsx    | 17 +++++++++++++++--
 1 file changed, 15 insertions(+), 2 deletions(-)

diff --git a/src/frontend/src/features/rooms/components/Conference.tsx b/src/frontend/src/features/rooms/components/Conference.tsx
index 8538dfce..45eddf37 100644
--- a/src/frontend/src/features/rooms/components/Conference.tsx
+++ b/src/frontend/src/features/rooms/components/Conference.tsx
@@ -8,11 +8,13 @@ import {
 } from '@livekit/components-react'
 import { Room, RoomOptions } from 'livekit-client'
 import { keys } from '@/api/queryKeys'
+import { queryClient } from '@/api/queryClient'
 import { navigateTo } from '@/navigation/navigateTo'
 import { Screen } from '@/layout/Screen'
 import { QueryAware } from '@/components/QueryAware'
 import { fetchRoom } from '../api/fetchRoom'
 import { ApiRoom } from '../api/ApiRoom'
+import { useCreateRoom } from '../api/createRoom'
 import { InviteDialog } from './InviteDialog'
 
 export const Conference = ({
@@ -27,7 +29,14 @@ export const Conference = ({
   initialRoomData?: ApiRoom
 }) => {
   const fetchKey = [keys.room, roomId, userConfig.username]
-  const { status, data } = useQuery({
+
+  const { mutateAsync: createRoom, status: createStatus} = useCreateRoom({
+    onSuccess: (data) => {
+      queryClient.setQueryData(fetchKey, data)
+    },
+  });
+
+  const { status: fetchStatus, isError: isFetchError, data } = useQuery({
     queryKey: fetchKey,
     enabled: !initialRoomData,
     initialData: initialRoomData,
@@ -35,6 +44,10 @@ export const Conference = ({
       fetchRoom({
         roomId: roomId as string,
         username: userConfig.username,
+      }).catch((error) => {
+        if (error.statusCode == '404') {
+          createRoom({slug: roomId})
+        }
       }),
     retry: false,
   })
@@ -75,7 +88,7 @@ export const Conference = ({
   }, [])
 
   return (
-    <QueryAware status={status}>
+    <QueryAware status={isFetchError ? createStatus : fetchStatus}>
       <Screen>
         <LiveKitRoom
           room={room}