✨(app-desk) add team page

- add the team page, you can access to
the team page with the id of the team.
- Add link to the panel team to access to the
team page.

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

@@ -12,7 +12,7 @@ export interface CreateTeamResponseError {
   detail: string;
 }
 
-export const createTeam = async (name: string) => {
+export const createTeam = async (name: string): Promise<CreateTeamResponse> => {
   const response = await fetchAPI(`teams/`, {
     method: 'POST',
     body: JSON.stringify({
@@ -24,17 +24,22 @@ export const createTeam = async (name: string) => {
     throw new Error(`Couldn't create team: ${response.statusText}`);
   }
 
-  return response.json();
+  return response.json() as Promise<CreateTeamResponse>;
 };
 
-export function useCreateTeam() {
+interface CreateTeamProps {
+  onSuccess: (data: CreateTeamResponse) => void;
+}
+
+export function useCreateTeam({ onSuccess }: CreateTeamProps) {
   const queryClient = useQueryClient();
   return useMutation<CreateTeamResponse, CreateTeamResponseError, string>({
     mutationFn: createTeam,
-    onSuccess: () => {
+    onSuccess: (data) => {
       void queryClient.invalidateQueries({
         queryKey: [KEY_LIST_TEAM],
       });
+      onSuccess(data);
     },
   });
 }

src/frontend/apps/desk/src/features/teams/components/PanelTeam.tsx

@@ -2,10 +2,10 @@ import React from 'react';
 import { useTranslation } from 'react-i18next';
 
 import IconGroup from '@/assets/icons/icon-group.svg';
-import { Box, Text } from '@/components';
+import { Box, StyledLink, Text } from '@/components';
 import { useCunninghamTheme } from '@/cunningham';
 
-import { TeamResponse } from '../api/useTeams';
+import { TeamResponse } from '../api/types';
 import IconNone from '../assets/icon-none.svg';
 
 interface TeamProps {
@@ -29,29 +29,33 @@ export const PanelTeam = ({ team }: TeamProps) => {
   };
 
   return (
-    <Box as="li" $direction="row" $align="center" $gap="0.5rem">
-      {hasMembers ? (
-        <IconGroup
-          aria-label={t(`Teams icon`)}
-          color={colorsTokens()['primary-500']}
-          {...commonProps}
-          style={{
-            ...commonProps.style,
-            border: `1px solid ${colorsTokens()['primary-300']}`,
-          }}
-        />
-      ) : (
-        <IconNone
-          aria-label={t(`Empty teams icon`)}
-          color={colorsTokens()['greyscale-500']}
-          {...commonProps}
-          style={{
-            ...commonProps.style,
-            border: `1px solid ${colorsTokens()['greyscale-300']}`,
-          }}
-        />
-      )}
-      <Text $weight="bold">{team.name}</Text>
+    <Box as="li">
+      <StyledLink href={`/teams/${team.id}`}>
+        <Box $align="center" $direction="row" $gap="0.5rem">
+          {hasMembers ? (
+            <IconGroup
+              aria-label={t(`Teams icon`)}
+              color={colorsTokens()['primary-500']}
+              {...commonProps}
+              style={{
+                ...commonProps.style,
+                border: `1px solid ${colorsTokens()['primary-300']}`,
+              }}
+            />
+          ) : (
+            <IconNone
+              aria-label={t(`Empty teams icon`)}
+              color={colorsTokens()['greyscale-500']}
+              {...commonProps}
+              style={{
+                ...commonProps.style,
+                border: `1px solid ${colorsTokens()['greyscale-300']}`,
+              }}
+            />
+          )}
+          <Text $weight="bold">{team.name}</Text>
+        </Box>
+      </StyledLink>
     </Box>
   );
 };

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

@@ -0,0 +1,65 @@
+import { Loader } from '@openfun/cunningham-react';
+import { useRouter } from 'next/router';
+import { ReactElement } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { Box, Text } from '@/components';
+import { useTeam } from '@/features/teams/api/useTeam';
+import { NextPageWithLayout } from '@/types/next';
+
+import TeamLayout from './TeamLayout';
+
+const Page: NextPageWithLayout = () => {
+  const {
+    query: { id },
+  } = useRouter();
+
+  if (typeof id !== 'string') {
+    throw new Error('Invalid team id');
+  }
+
+  return <Team id={id} />;
+};
+
+interface TeamProps {
+  id: string;
+}
+
+const Team = ({ id }: TeamProps) => {
+  const { t } = useTranslation();
+  const { data: team, isLoading, isError } = useTeam({ id });
+
+  if (isError) {
+    return (
+      <Text
+        $align="center"
+        $justify="center"
+        $height="100%"
+        $theme="danger"
+        $textAlign="center"
+      >
+        {t('Something bad happens, please retry.')}
+      </Text>
+    );
+  }
+
+  if (isLoading) {
+    return (
+      <Box $align="center" $justify="center" $height="100%">
+        <Loader />
+      </Box>
+    );
+  }
+
+  return (
+    <Text as="h3" $textAlign="center">
+      Teams: {team?.name}
+    </Text>
+  );
+};
+
+Page.getLayout = function getLayout(page: ReactElement) {
+  return <TeamLayout>{page}</TeamLayout>;
+};
+
+export default Page;

src/frontend/apps/desk/src/pages/teams/create.tsx

@@ -1,4 +1,5 @@
 import { Button, Input, Loader } from '@openfun/cunningham-react';
+import { useRouter } from 'next/navigation';
 import { ReactElement, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -12,7 +13,16 @@ import TeamLayout from './TeamLayout';
 
 const Page: NextPageWithLayout = () => {
   const { t } = useTranslation();
-  const { mutate: createTeam, isError, isPending } = useCreateTeam();
+  const router = useRouter();
+  const {
+    mutate: createTeam,
+    isError,
+    isPending,
+  } = useCreateTeam({
+    onSuccess: (team) => {
+      router.push(`/teams/${team.id}`);
+    },
+  });
   const [teamName, setTeamName] = useState('');
   const { colorsTokens } = useCunninghamTheme();