From 2774d761763fb819eff5313dc17cd894eb15f5d9 Mon Sep 17 00:00:00 2001
From: lebaudantoine <lebaud.antoine131@gmail.com>
Date: Tue, 25 Feb 2025 15:47:14 +0100
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8(frontend)=20add=20room=20access=20con?=
 =?UTF-8?q?figuration=20options?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Implement interface allowing room creators to configure access settings,
with options to set rooms as either public or restricted. Provides users
with control over who can join their rooms.
---
 .../src/features/rooms/api/patchRoom.tsx      | 25 ++++++++
 .../rooms/livekit/components/Admin.tsx        | 62 ++++++++++++++++---
 src/frontend/src/locales/de/rooms.json        | 12 +++-
 src/frontend/src/locales/en/rooms.json        | 12 +++-
 src/frontend/src/locales/fr/rooms.json        | 12 +++-
 5 files changed, 112 insertions(+), 11 deletions(-)
 create mode 100644 src/frontend/src/features/rooms/api/patchRoom.tsx

diff --git a/src/frontend/src/features/rooms/api/patchRoom.tsx b/src/frontend/src/features/rooms/api/patchRoom.tsx
new file mode 100644
index 00000000..2f4badef
--- /dev/null
+++ b/src/frontend/src/features/rooms/api/patchRoom.tsx
@@ -0,0 +1,25 @@
+import { type ApiRoom } from './ApiRoom'
+import { fetchApi } from '@/api/fetchApi'
+import { useMutation, UseMutationOptions } from '@tanstack/react-query'
+import { ApiError } from '@/api/ApiError'
+
+export type PatchRoomParams = {
+  roomId: string
+  room: Pick<ApiRoom, 'configuration' | 'access_level'>
+}
+
+export const patchRoom = ({ roomId, room }: PatchRoomParams) => {
+  return fetchApi<ApiRoom>(`/rooms/${roomId}/`, {
+    method: 'PATCH',
+    body: JSON.stringify(room),
+  })
+}
+
+export function usePatchRoom(
+  options?: UseMutationOptions<ApiRoom, ApiError, PatchRoomParams>
+) {
+  return useMutation<ApiRoom, ApiError, PatchRoomParams>({
+    mutationFn: patchRoom,
+    onSuccess: options?.onSuccess,
+  })
+}
diff --git a/src/frontend/src/features/rooms/livekit/components/Admin.tsx b/src/frontend/src/features/rooms/livekit/components/Admin.tsx
index f4833e90..23d3eefc 100644
--- a/src/frontend/src/features/rooms/livekit/components/Admin.tsx
+++ b/src/frontend/src/features/rooms/livekit/components/Admin.tsx
@@ -1,11 +1,33 @@
-import { Div, H, Text } from '@/primitives'
+import { Div, Field, H, Text } from '@/primitives'
 import { css } from '@/styled-system/css'
 import { Separator as RACSeparator } from 'react-aria-components'
 import { useTranslation } from 'react-i18next'
+import { usePatchRoom } from '@/features/rooms/api/patchRoom'
+import { fetchRoom } from '@/features/rooms/api/fetchRoom'
+import { ApiAccessLevel } from '@/features/rooms/api/ApiRoom'
+import { queryClient } from '@/api/queryClient'
+import { keys } from '@/api/queryKeys'
+import { useQuery } from '@tanstack/react-query'
+import { useParams } from 'wouter'
 
 export const Admin = () => {
   const { t } = useTranslation('rooms', { keyPrefix: 'admin' })
 
+  const { roomId } = useParams()
+
+  if (!roomId) {
+    throw new Error()
+  }
+
+  const { mutateAsync: patchRoom } = usePatchRoom()
+
+  const { data: readOnlyData } = useQuery({
+    queryKey: [keys.room, roomId],
+    queryFn: () => fetchRoom({ roomId }),
+    retry: false,
+    enabled: false,
+  })
+
   return (
     <Div
       display="flex"
@@ -44,13 +66,37 @@ export const Admin = () => {
       >
         {t('access.description')}
       </Text>
-      <div
-        className={css({
-          marginTop: '1rem',
-        })}
-      >
-        [WIP]
-      </div>
+      <Field
+        type="radioGroup"
+        label="Type d'accès à la réunion"
+        aria-label="Type d'accès à la réunion"
+        labelProps={{
+          className: css({
+            fontSize: '1rem',
+            paddingBottom: '1rem',
+          }),
+        }}
+        value={readOnlyData?.access_level}
+        onChange={(value) =>
+          patchRoom({ roomId, room: { access_level: value as ApiAccessLevel } })
+            .then((room) => {
+              queryClient.setQueryData([keys.room, roomId], room)
+            })
+            .catch((e) => console.error(e))
+        }
+        items={[
+          {
+            value: ApiAccessLevel.PUBLIC,
+            label: t('access.levels.public.label'),
+            description: t('access.levels.public.description'),
+          },
+          {
+            value: ApiAccessLevel.RESTRICTED,
+            label: t('access.levels.restricted.label'),
+            description: t('access.levels.restricted.description'),
+          },
+        ]}
+      />
     </Div>
   )
 }
diff --git a/src/frontend/src/locales/de/rooms.json b/src/frontend/src/locales/de/rooms.json
index a5a06a21..9e1a1fb7 100644
--- a/src/frontend/src/locales/de/rooms.json
+++ b/src/frontend/src/locales/de/rooms.json
@@ -177,7 +177,17 @@
     "description": "",
     "access": {
       "title": "",
-      "description": ""
+      "description": "",
+      "levels": {
+        "public": {
+          "label": "",
+          "description": ""
+        },
+        "restricted": {
+          "label": "",
+          "description": ""
+        }
+      }
     }
   },
   "rating": {
diff --git a/src/frontend/src/locales/en/rooms.json b/src/frontend/src/locales/en/rooms.json
index b21e0f05..a7ce1f5f 100644
--- a/src/frontend/src/locales/en/rooms.json
+++ b/src/frontend/src/locales/en/rooms.json
@@ -176,7 +176,17 @@
     "description": "These organizer settings allow you to maintain control of your meeting. Only organizers can access these controls.",
     "access": {
       "title": "Room access",
-      "description": "These settings will also apply to future occurrences of this meeting."
+      "description": "These settings will also apply to future occurrences of this meeting.",
+      "levels": {
+        "public": {
+          "label": "Open",
+          "description": "No one needs to request to join the meeting."
+        },
+        "restricted": {
+          "label": "Restricted",
+          "description": "People who have not been invited to the meeting must request to join."
+        }
+      }
     }
   },
   "rating": {
diff --git a/src/frontend/src/locales/fr/rooms.json b/src/frontend/src/locales/fr/rooms.json
index 2dce1832..93566837 100644
--- a/src/frontend/src/locales/fr/rooms.json
+++ b/src/frontend/src/locales/fr/rooms.json
@@ -176,7 +176,17 @@
     "description": "Ces paramètres organisateur vous permettent de garder le contrôle de votre réunion. Seuls les organisateurs peuvent accéder à ces commandes.",
     "access": {
       "title": "Accès à la réunion",
-      "description": "Ces paramètres s'appliqueront également aux futures occurences de cette réunion."
+      "description": "Ces paramètres s'appliqueront également aux futures occurences de cette réunion.",
+      "levels": {
+        "public": {
+          "label": "Ouvrir",
+          "description": "Persone n'a à demander à rejoindre la réunion."
+        },
+        "restricted": {
+          "label": "Restreindre",
+          "description": "Les personnes qui n'ont pas été invitées à la réunion doivent demander à la rejoindre."
+        }
+      }
     }
   },
   "rating": {