From 195e738c3c24796b432d3d0c5915eccdb1705091 Mon Sep 17 00:00:00 2001
From: Anthony LC <anthony.le-courric@mail.numerique.gouv.fr>
Date: Fri, 9 Feb 2024 12:46:52 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=B8(app-desk)=20add=20404=20page?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add a 404 page.
- Redirect to 404 page when a team is not found.
---
 .../desk/src/features/teams/api/useTeam.tsx   | 15 ++++++++--
 .../apps/desk/src/i18n/translations.json      |  1 +
 src/frontend/apps/desk/src/pages/404.tsx      | 30 +++++++++++++++++++
 .../apps/desk/src/pages/teams/[id].tsx        |  9 +++++-
 .../__tests__/app-desk/teams-create.spec.ts   |  7 +++++
 5 files changed, 59 insertions(+), 3 deletions(-)
 create mode 100644 src/frontend/apps/desk/src/pages/404.tsx

diff --git a/src/frontend/apps/desk/src/features/teams/api/useTeam.tsx b/src/frontend/apps/desk/src/features/teams/api/useTeam.tsx
index ab389c6..bdca9f6 100644
--- a/src/frontend/apps/desk/src/features/teams/api/useTeam.tsx
+++ b/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>;
 };
diff --git a/src/frontend/apps/desk/src/i18n/translations.json b/src/frontend/apps/desk/src/i18n/translations.json
index 9381c98..3a7d4b7 100644
--- a/src/frontend/apps/desk/src/i18n/translations.json
+++ b/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",
diff --git a/src/frontend/apps/desk/src/pages/404.tsx b/src/frontend/apps/desk/src/pages/404.tsx
new file mode 100644
index 0000000..efe548a
--- /dev/null
+++ b/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;
diff --git a/src/frontend/apps/desk/src/pages/teams/[id].tsx b/src/frontend/apps/desk/src/pages/teams/[id].tsx
index 0168586..3900963 100644
--- a/src/frontend/apps/desk/src/pages/teams/[id].tsx
+++ b/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"
diff --git a/src/frontend/apps/e2e/__tests__/app-desk/teams-create.spec.ts b/src/frontend/apps/e2e/__tests__/app-desk/teams-create.spec.ts
index ee3f5ce..75461de 100644
--- a/src/frontend/apps/e2e/__tests__/app-desk/teams-create.spec.ts
+++ b/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,
+    });
+  });
 });