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 => { 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; }; 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 ( + + {t('404 - Page not found')} + + ); +}; + +Page.getLayout = function getLayout(page: ReactElement) { + return {page}; +}; + +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 ( { 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, + }); + }); });