From 36161972d74f3833415a04b95a9a00efbc9952ac Mon Sep 17 00:00:00 2001
From: Anthony LC <anthony.le-courric@mail.numerique.gouv.fr>
Date: Wed, 20 Mar 2024 17:18:41 +0100
Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F(app-desk)=20keep=20team=20lo?=
 =?UTF-8?q?gic=20in=20teams=20feature?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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.
---
 .../teams/components/CardCreateTeam.tsx       | 73 +++++++++++++++++++
 .../src/features/teams/components/index.ts    |  1 +
 .../apps/desk/src/pages/teams/create.tsx      | 71 +-----------------
 3 files changed, 78 insertions(+), 67 deletions(-)
 create mode 100644 src/frontend/apps/desk/src/features/teams/components/CardCreateTeam.tsx

diff --git a/src/frontend/apps/desk/src/features/teams/components/CardCreateTeam.tsx b/src/frontend/apps/desk/src/features/teams/components/CardCreateTeam.tsx
new file mode 100644
index 000000000..a5e41cc5b
--- /dev/null
+++ b/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>
+  );
+};
diff --git a/src/frontend/apps/desk/src/features/teams/components/index.ts b/src/frontend/apps/desk/src/features/teams/components/index.ts
index 38dec0904..92dda9f8e 100644
--- a/src/frontend/apps/desk/src/features/teams/components/index.ts
+++ b/src/frontend/apps/desk/src/features/teams/components/index.ts
@@ -1,2 +1,3 @@
+export * from './CardCreateTeam';
 export * from './Panel/Panel';
 export * from './TeamInfo';
diff --git a/src/frontend/apps/desk/src/pages/teams/create.tsx b/src/frontend/apps/desk/src/pages/teams/create.tsx
index 4498b76f9..59f32333b 100644
--- a/src/frontend/apps/desk/src/pages/teams/create.tsx
+++ b/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>
   );
 };