From 01390b12fb075a0d43bdd4ec9baa44a3c19f810e Mon Sep 17 00:00:00 2001
From: lebaudantoine <lebaud.antoine131@gmail.com>
Date: Sun, 4 Aug 2024 21:21:53 +0200
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8(frontend)=20allow=20customization=20o?=
 =?UTF-8?q?f=20error=20title=20and=20description?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Enhanced the error screen to support customizable titles and descriptions.

Allows for more detailed and informative error messages for users.
By default, the error screen displays a standard heading. You can
now pass custom title and body content to provide additional context
and clarity.
---
 src/frontend/src/components/ErrorScreen.tsx     | 17 +++++++++++++++--
 .../features/rooms/components/Conference.tsx    | 10 +++++++++-
 src/frontend/src/locales/de/rooms.json          |  6 ++++++
 src/frontend/src/locales/en/rooms.json          |  6 ++++++
 src/frontend/src/locales/fr/rooms.json          |  6 ++++++
 5 files changed, 42 insertions(+), 3 deletions(-)

diff --git a/src/frontend/src/components/ErrorScreen.tsx b/src/frontend/src/components/ErrorScreen.tsx
index e33d89f9..2e349ed6 100644
--- a/src/frontend/src/components/ErrorScreen.tsx
+++ b/src/frontend/src/components/ErrorScreen.tsx
@@ -1,12 +1,25 @@
 import { CenteredContent } from '@/layout/CenteredContent'
 import { Screen } from '@/layout/Screen'
 import { useTranslation } from 'react-i18next'
+import { Center } from '@/styled-system/jsx'
+import { Text } from '@/primitives'
 
-export const ErrorScreen = () => {
+export const ErrorScreen = ({ title, body }: {
+  title?: string
+  body?: string
+}) => {
   const { t } = useTranslation()
   return (
     <Screen layout="centered">
-      <CenteredContent title={t('error.heading')} withBackButton />
+      <CenteredContent title={title || t('error.heading')} withBackButton>
+        {!!body && (
+          <Center>
+            <Text as="p" variant="h3">
+              {body}
+            </Text>
+          </Center>
+        )}
+      </CenteredContent>
     </Screen>
   )
 }
diff --git a/src/frontend/src/features/rooms/components/Conference.tsx b/src/frontend/src/features/rooms/components/Conference.tsx
index 45eddf37..86fa1a96 100644
--- a/src/frontend/src/features/rooms/components/Conference.tsx
+++ b/src/frontend/src/features/rooms/components/Conference.tsx
@@ -1,5 +1,6 @@
 import { useEffect, useMemo, useState } from 'react'
 import { useQuery } from '@tanstack/react-query'
+import { useTranslation } from 'react-i18next'
 import {
   formatChatMessageLinks,
   LiveKitRoom,
@@ -12,6 +13,7 @@ import { queryClient } from '@/api/queryClient'
 import { navigateTo } from '@/navigation/navigateTo'
 import { Screen } from '@/layout/Screen'
 import { QueryAware } from '@/components/QueryAware'
+import { ErrorScreen } from '@/components/ErrorScreen'
 import { fetchRoom } from '../api/fetchRoom'
 import { ApiRoom } from '../api/ApiRoom'
 import { useCreateRoom } from '../api/createRoom'
@@ -30,7 +32,7 @@ export const Conference = ({
 }) => {
   const fetchKey = [keys.room, roomId, userConfig.username]
 
-  const { mutateAsync: createRoom, status: createStatus} = useCreateRoom({
+  const { mutateAsync: createRoom, status: createStatus, isError: isCreateError} = useCreateRoom({
     onSuccess: (data) => {
       queryClient.setQueryData(fetchKey, data)
     },
@@ -87,6 +89,12 @@ export const Conference = ({
     }
   }, [])
 
+  const { t } = useTranslation('rooms')
+  if (isCreateError) {
+    // this error screen should be replaced by a proper waiting room for anonymous user.
+    return <ErrorScreen title={t('error.createRoom.heading')} body={t('error.createRoom.body')} />
+  }
+
   return (
     <QueryAware status={isFetchError ? createStatus : fetchStatus}>
       <Screen>
diff --git a/src/frontend/src/locales/de/rooms.json b/src/frontend/src/locales/de/rooms.json
index 827035f3..6eeaeca4 100644
--- a/src/frontend/src/locales/de/rooms.json
+++ b/src/frontend/src/locales/de/rooms.json
@@ -16,5 +16,11 @@
     "copy": "",
     "heading": "",
     "inputLabel": ""
+  },
+  "error": {
+    "createRoom": {
+      "heading": "",
+      "body": ""
+    }
   }
 }
diff --git a/src/frontend/src/locales/en/rooms.json b/src/frontend/src/locales/en/rooms.json
index 00f3d6fe..b0dfccf1 100644
--- a/src/frontend/src/locales/en/rooms.json
+++ b/src/frontend/src/locales/en/rooms.json
@@ -16,5 +16,11 @@
     "copy": "Copy",
     "heading": "Share the meeting link",
     "inputLabel": "Meeting link"
+  },
+  "error": {
+    "createRoom": {
+      "heading": "Authentication Required",
+      "body": "This room has not been created yet. Please authenticate to create it or wait for an authenticated user to do so."
+    }
   }
 }
diff --git a/src/frontend/src/locales/fr/rooms.json b/src/frontend/src/locales/fr/rooms.json
index 524a57f2..dd0c94ed 100644
--- a/src/frontend/src/locales/fr/rooms.json
+++ b/src/frontend/src/locales/fr/rooms.json
@@ -16,5 +16,11 @@
     "copy": "Copier le lien",
     "heading": "Partager le lien vers la réunion",
     "inputLabel": "Lien vers la réunion"
+  },
+  "error": {
+    "createRoom": {
+      "heading": "Authentification requise",
+      "body": "Cette réunion n'a pas encore été créée. Veuillez vous authentifier pour la créer ou attendre qu'un utilisateur authentifié le fasse."
+    }
   }
 }