✨(frontend) create room in db when creating a new room

With unregistered rooms being now forbidden, we need to call create a room
in our Django db to get an access token.

Clicking on the 'Create room' will create a new entry using a Post request.
The output serialized already contains an access token to the LiveKit server,
thus we won't need to run the useQuery hook when navigating to the room.

/!\ this modification now prevent authenticated users to create rooms
by simply navigating to it. It'll be fixed in the upcoming commits.

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

@@ -8,10 +8,20 @@ import { Centered } from '@/layout/Centered'
 import { generateRoomId } from '@/features/rooms'
 import { authUrl, useUser, UserAware } from '@/features/auth'
 import { JoinMeetingDialog } from '../components/JoinMeetingDialog'
+import { useCreateRoom } from '@/features/rooms'
 
 export const Home = () => {
   const { t } = useTranslation('home')
   const { isLoggedIn } = useUser()
+
+  const { mutateAsync: createRoom } = useCreateRoom({
+    onSuccess: (data) => {
+      navigateTo('room', data.slug, {
+        state: { create: true, initialRoomData: data },
+      })
+    }
+  });
+
   return (
     <UserAware>
       <Screen>
@@ -32,10 +42,10 @@ export const Home = () => {
               variant="primary"
               onPress={
                 isLoggedIn
-                  ? () =>
+                  ? async () => {
-                      navigateTo('room', generateRoomId(), {
+                    const slug = generateRoomId()
-                        state: { create: true },
+                    await createRoom({slug})
-                      })
+                  }
                   : undefined
               }
               href={isLoggedIn ? undefined : authUrl()}

src/frontend/src/features/rooms/api/ApiRoom.ts

@@ -8,4 +8,7 @@ export type ApiRoom = {
     room: string
     token: string
   }
+  configuration?: {
+    [key: string]: string | number | boolean;
+  }
 }

src/frontend/src/features/rooms/api/createRoom.ts

@@ -0,0 +1,25 @@
+import { useMutation, UseMutationOptions } from "@tanstack/react-query";
+import { fetchApi } from '@/api/fetchApi';
+import { ApiError } from "@/api/ApiError";
+import { ApiRoom } from "./ApiRoom";
+
+export interface CreateRoomParams {
+  slug: string;
+}
+
+const createRoom = ({slug}: CreateRoomParams): Promise<ApiRoom> => {
+  return fetchApi(`rooms/`, {
+    method: 'POST',
+    body: JSON.stringify({
+      name: slug,
+    }),
+  })
+};
+
+
+export function useCreateRoom(options?: UseMutationOptions<ApiRoom, ApiError, CreateRoomParams>) {
+  return useMutation<ApiRoom, ApiError, CreateRoomParams>({
+    mutationFn: createRoom,
+    onSuccess: options?.onSuccess,
+  });
+}

src/frontend/src/features/rooms/components/Conference.tsx

@@ -11,24 +11,30 @@ 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 { InviteDialog } from './InviteDialog'
 
 export const Conference = ({
   roomId,
   userConfig,
+  initialRoomData,
   mode = 'join',
 }: {
   roomId: string
   userConfig: LocalUserChoices
   mode?: 'join' | 'create'
+  initialRoomData?: ApiRoom
 }) => {
   const { status, data } = useQuery({
     queryKey: [keys.room, roomId, userConfig.username],
+    enabled: !initialRoomData,
+    initialData: initialRoomData,
     queryFn: () =>
       fetchRoom({
         roomId: roomId as string,
         username: userConfig.username,
       }),
+    retry: false,
   })
 
   const roomOptions = useMemo((): RoomOptions => {

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

@@ -2,3 +2,4 @@ export { Room as RoomRoute } from './routes/Room'
 export { FeedbackRoute } from './routes/Feedback'
 export { roomIdPattern, isRoomValid } from './utils/isRoomValid'
 export { generateRoomId } from './utils/generateRoomId'
+export { useCreateRoom } from './api/createRoom'

src/frontend/src/features/rooms/routes/Room.tsx

@@ -15,6 +15,7 @@ export const Room = () => {
   const [userConfig, setUserConfig] = useState<LocalUserChoices | null>(null)
 
   const { roomId } = useParams()
+  const initialRoomData = history.state?.initialRoomData
   const mode = isLoggedIn && history.state?.create ? 'create' : 'join'
   const skipJoinScreen = isLoggedIn && mode === 'create'
 
@@ -33,6 +34,7 @@ export const Room = () => {
   return (
     <UserAware>
       <Conference
+        initialRoomData={initialRoomData}
         roomId={roomId}
         mode={mode}
         userConfig={{