♻️(app-desk) keep team logic in teams feature

Part of the team logic was in the create team page,
we moved it to the CardCreateTeam component in
the teams feature.
It will be easier to maintain and reuse the logic.

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

@@ -0,0 +1,73 @@
+import { Button, Input, Loader } from '@openfun/cunningham-react';
+import { useRouter } from 'next/navigation';
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import IconGroup from '@/assets/icons/icon-group2.svg';
+import { Box, Card, StyledLink, Text, TextErrors } from '@/components';
+import { useCunninghamTheme } from '@/cunningham';
+
+import { useCreateTeam } from '../api';
+
+export const CardCreateTeam = () => {
+  const { t } = useTranslation();
+  const router = useRouter();
+  const {
+    mutate: createTeam,
+    isError,
+    isPending,
+    error,
+  } = useCreateTeam({
+    onSuccess: (team) => {
+      router.push(`/teams/${team.id}`);
+    },
+  });
+  const [teamName, setTeamName] = useState('');
+  const { colorsTokens } = useCunninghamTheme();
+
+  return (
+    <Card
+      className="p-b"
+      $height="70%"
+      $justify="space-between"
+      $width="100%"
+      $maxWidth="24rem"
+      $minWidth="22rem"
+      aria-label={t('Create new team card')}
+    >
+      <Box $gap="1rem">
+        <Box $align="center">
+          <IconGroup
+            width={44}
+            color={colorsTokens()['primary-text']}
+            aria-label={t('icon group')}
+          />
+          <Text as="h3" $textAlign="center">
+            {t('Name the team')}
+          </Text>
+        </Box>
+        <Input
+          fullWidth
+          type="text"
+          label={t('Team name')}
+          onChange={(e) => setTeamName(e.target.value)}
+          rightIcon={<span className="material-icons">edit</span>}
+        />
+        {isError && error && <TextErrors causes={error.cause} />}
+        {isPending && (
+          <Box $align="center">
+            <Loader />
+          </Box>
+        )}
+      </Box>
+      <Box $justify="space-between" $direction="row" $align="center">
+        <StyledLink href="/">
+          <Button color="secondary">{t('Cancel')}</Button>
+        </StyledLink>
+        <Button onClick={() => createTeam(teamName)} disabled={!teamName}>
+          {t('Create the team')}
+        </Button>
+      </Box>
+    </Card>
+  );
+};

src/frontend/apps/desk/src/features/teams/components/index.ts

@@ -1,2 +1,3 @@
+export * from './CardCreateTeam';
 export * from './Panel/Panel';
 export * from './TeamInfo';

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

@@ -1,78 +1,15 @@
-import { Button, Input, Loader } from '@openfun/cunningham-react';
-import { useRouter } from 'next/navigation';
-import { ReactElement, useState } from 'react';
-import { useTranslation } from 'react-i18next';
+import { ReactElement } from 'react';
 
-import IconGroup from '@/assets/icons/icon-group2.svg';
-import { Box, Card, StyledLink, Text } from '@/components';
-import { TextErrors } from '@/components/TextErrors';
-import { useCunninghamTheme } from '@/cunningham';
-import { useCreateTeam } from '@/features/teams';
+import { Box } from '@/components';
+import { CardCreateTeam } from '@/features/teams';
 import { NextPageWithLayout } from '@/types/next';
 
 import TeamLayout from './TeamLayout';
 
 const Page: NextPageWithLayout = () => {
-  const { t } = useTranslation();
-  const router = useRouter();
-  const {
-    mutate: createTeam,
-    isError,
-    isPending,
-    error,
-  } = useCreateTeam({
-    onSuccess: (team) => {
-      router.push(`/teams/${team.id}`);
-    },
-  });
-  const [teamName, setTeamName] = useState('');
-  const { colorsTokens } = useCunninghamTheme();
-
   return (
     <Box className="p-l" $justify="center" $align="start" $height="inherit">
-      <Card
-        className="p-b"
-        $height="70%"
-        $justify="space-between"
-        $width="100%"
-        $maxWidth="24rem"
-        $minWidth="22rem"
-        aria-label={t('Create new team card')}
-      >
-        <Box $gap="1rem">
-          <Box $align="center">
-            <IconGroup
-              width={44}
-              color={colorsTokens()['primary-text']}
-              aria-label={t('icon group')}
-            />
-            <Text as="h3" $textAlign="center">
-              {t('Name the team')}
-            </Text>
-          </Box>
-          <Input
-            fullWidth
-            type="text"
-            label={t('Team name')}
-            onChange={(e) => setTeamName(e.target.value)}
-            rightIcon={<span className="material-icons">edit</span>}
-          />
-          {isError && error && <TextErrors causes={error.cause} />}
-          {isPending && (
-            <Box $align="center">
-              <Loader />
-            </Box>
-          )}
-        </Box>
-        <Box $justify="space-between" $direction="row" $align="center">
-          <StyledLink href="/">
-            <Button color="secondary">{t('Cancel')}</Button>
-          </StyledLink>
-          <Button onClick={() => createTeam(teamName)} disabled={!teamName}>
-            {t('Create the team')}
-          </Button>
-        </Box>
-      </Card>
+      <CardCreateTeam />
     </Box>
   );
 };