♻️(app-desk) create InputTeamName component

We created the InputTeamName component to use it
in all the places where we need to input the team name.

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

@@ -1,14 +1,16 @@
-import { Button, Input, Loader } from '@openfun/cunningham-react';
+import { Button } 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 { Box, Card, StyledLink, Text } from '@/components';
 import { useCunninghamTheme } from '@/cunningham';
 
 import { useCreateTeam } from '../api';
 
+import { InputTeamName } from './InputTeamName';
+
 export const CardCreateTeam = () => {
   const { t } = useTranslation();
   const router = useRouter();
@@ -46,19 +48,10 @@ export const CardCreateTeam = () => {
             {t('Name the team')}
           </Text>
         </Box>
-        <Input
+        <InputTeamName
-          fullWidth
-          type="text"
           label={t('Team name')}
-          onChange={(e) => setTeamName(e.target.value)}
+          {...{ error, isError, isPending, setTeamName }}
-          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="/">

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

@@ -0,0 +1,54 @@
+import { Input, Loader } from '@openfun/cunningham-react';
+import { useEffect, useState } from 'react';
+
+import { APIError } from '@/api';
+import { Box, TextErrors } from '@/components';
+
+interface InputTeamNameProps {
+  error: APIError | null;
+  isError: boolean;
+  isPending: boolean;
+  label: string;
+  setTeamName: (newTeamName: string) => void;
+  defaultValue?: string;
+}
+
+export const InputTeamName = ({
+  defaultValue,
+  error,
+  isError,
+  isPending,
+  label,
+  setTeamName,
+}: InputTeamNameProps) => {
+  const [isInputError, setIsInputError] = useState(isError);
+
+  useEffect(() => {
+    if (isError) {
+      setIsInputError(true);
+    }
+  }, [isError]);
+
+  return (
+    <>
+      <Input
+        fullWidth
+        type="text"
+        label={label}
+        defaultValue={defaultValue}
+        onChange={(e) => {
+          setTeamName(e.target.value);
+          setIsInputError(false);
+        }}
+        rightIcon={<span className="material-icons">edit</span>}
+        state={isInputError ? 'error' : 'default'}
+      />
+      {isError && error && <TextErrors causes={error.cause} />}
+      {isPending && (
+        <Box $align="center">
+          <Loader />
+        </Box>
+      )}
+    </>
+  );
+};

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

@@ -1,21 +1,21 @@
 import {
   Button,
-  Input,
-  Loader,
   Modal,
   ModalSize,
   VariantType,
   useToastProvider,
 } from '@openfun/cunningham-react';
 import { t } from 'i18next';
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 
-import { Box, Text, TextErrors } from '@/components';
+import { Box, Text } from '@/components';
 import useCunninghamTheme from '@/cunningham/useCunninghamTheme';
 
 import { Team, useUpdateTeam } from '../api';
 import IconEdit from '../assets/icon-edit.svg';
 
+import { InputTeamName } from './InputTeamName';
+
 interface ModalUpdateTeamProps {
   onClose: () => void;
   team: Team;
@@ -23,8 +23,7 @@ interface ModalUpdateTeamProps {
 
 export const ModalUpdateTeam = ({ onClose, team }: ModalUpdateTeamProps) => {
   const { colorsTokens } = useCunninghamTheme();
-  const [newTeamName, setNewTeamName] = useState(team.name);
+  const [teamName, setTeamName] = useState(team.name);
-  const [isShowingError, setIsShowingError] = useState(false);
   const { toast } = useToastProvider();
 
   const {
@@ -41,12 +40,6 @@ export const ModalUpdateTeam = ({ onClose, team }: ModalUpdateTeamProps) => {
     },
   });
 
-  useEffect(() => {
-    if (isError) {
-      setIsShowingError(true);
-    }
-  }, [isError]);
-
   return (
     <Modal
       isOpen
@@ -70,7 +63,7 @@ export const ModalUpdateTeam = ({ onClose, team }: ModalUpdateTeamProps) => {
           fullWidth
           onClick={() =>
             updateTeam({
-              name: newTeamName,
+              name: teamName,
               id: team.id,
             })
           }
@@ -93,24 +86,11 @@ export const ModalUpdateTeam = ({ onClose, team }: ModalUpdateTeamProps) => {
           {t('Enter the new name of the selected team')}
         </Text>
 
-        <Input
+        <InputTeamName
-          fullWidth
-          type="text"
           label={t('New name...')}
           defaultValue={team.name}
-          onChange={(e) => {
+          {...{ error, isError, isPending, setTeamName }}
-            setNewTeamName(e.target.value);
-            setIsShowingError(false);
-          }}
-          rightIcon={<span className="material-icons">edit</span>}
-          state={isShowingError ? 'error' : undefined}
         />
-        {isError && error && <TextErrors causes={error.cause} />}
-        {isPending && (
-          <Box $align="center">
-            <Loader />
-          </Box>
-        )}
       </Box>
     </Modal>
   );