🚸(app-desk) add 404 page

- Add a 404 page.
- Redirect to 404 page when a team is not found.

src/frontend/apps/desk/src/features/teams/api/useTeam.tsx

@@ -9,14 +9,25 @@ export type TeamParams = {
 };
 
 export interface TeamResponseError {
-  detail: string;
+  detail?: string;
+  status?: number;
+  cause?: string;
 }
 
 export const getTeam = async ({ id }: TeamParams): Promise<TeamResponse> => {
   const response = await fetchAPI(`teams/${id}`);
 
   if (!response.ok) {
-    throw new Error(`Couldn't fetch team: ${response.statusText}`);
+    if (response.status === 404) {
+      throw {
+        status: 404,
+        message: `Team with id ${id} not found`,
+      };
+    }
+
+    throw new Error(`Couldn't fetch team:`, {
+      cause: ((await response.json()) as TeamResponseError).detail,
+    });
   }
   return response.json() as Promise<TeamResponse>;
 };

src/frontend/apps/desk/src/i18n/translations.json

@@ -40,6 +40,7 @@
       "Last update at": "Dernière modification le",
       "People": "People",
       "People Description": "Description de People",
+      "404 - Page not found": "404 - Page introuvable",
       "Something bad happens, please retry": "Une erreur inattendue s'est produite, rechargez la page.",
       "Panel create new team": "Panneau de création d'un nouveau groupe",
       "icon group": "icône groupe",

src/frontend/apps/desk/src/pages/404.tsx

@@ -0,0 +1,30 @@
+import { ReactElement } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { Text } from '@/components';
+import { NextPageWithLayout } from '@/types/next';
+
+import MainLayout from './MainLayout';
+
+const Page: NextPageWithLayout = () => {
+  const { t } = useTranslation();
+
+  return (
+    <Text
+      className="mt-xl"
+      as="h1"
+      $justify="center"
+      $align="center"
+      $theme="danger"
+      $textAlign="center"
+    >
+      {t('404 - Page not found')}
+    </Text>
+  );
+};
+
+Page.getLayout = function getLayout(page: ReactElement) {
+  return <MainLayout>{page}</MainLayout>;
+};
+
+export default Page;

src/frontend/apps/desk/src/pages/teams/[id].tsx

@@ -1,4 +1,5 @@
 import { Loader } from '@openfun/cunningham-react';
+import { useRouter as useNavigate } from 'next/navigation';
 import { useRouter } from 'next/router';
 import { ReactElement } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -27,9 +28,15 @@ interface TeamProps {
 
 const Team = ({ id }: TeamProps) => {
   const { t } = useTranslation();
-  const { data: team, isLoading, isError } = useTeam({ id });
+  const { data: team, isLoading, isError, error } = useTeam({ id });
+  const navigate = useNavigate();
 
   if (isError) {
+    if (error.status === 404) {
+      navigate.replace(`/404`);
+      return null;
+    }
+
     return (
       <Text
         $align="center"

src/frontend/apps/e2e/__tests__/app-desk/teams-create.spec.ts

@@ -94,4 +94,11 @@ test.describe('Teams Create', () => {
     await expect(buttonCreateHomepage).toBeVisible();
     await expect(page).toHaveURL(/\/teams$/);
   });
+
+  test('checks 404 on teams/[id] page', async ({ page }) => {
+    await page.goto('/teams/some-unknown-team');
+    await expect(page.getByText('404 - Page not found')).toBeVisible({
+      timeout: 15000,
+    });
+  });
 });