From 5ed05b96a58a12c45c5faf102b9e35c1563d9bd3 Mon Sep 17 00:00:00 2001
From: Lebaud Antoine <lebaud.antoine131@gmail.com>
Date: Tue, 26 Mar 2024 21:50:12 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=A9=B9(frontend)=20disable=20submission?=
 =?UTF-8?q?=20button=20while=20a=20request=20is=20pending?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

If any request is taking longer than expected, the user could interact with
the frontend, thinking the previous submission was not taken into account,
and would re-submit a request.

It happened to me while sending an invitation. Replaying request can either
lead to inconsistencies in db for the user, or to errors in requests' response.

I propose to disable all interactive button while submitting a request.
It's good enough for this actual sprint, these types of interactivity issues
could be improved later on.
---
 .../addMembers/components/ModalAddMembers.tsx  | 18 +++++++++++++++---
 .../addMembers/components/SearchMembers.tsx    |  3 +++
 .../features/members/components/ModalRole.tsx  | 10 ++++++++--
 .../teams/components/CardCreateTeam.tsx        |  5 ++++-
 4 files changed, 30 insertions(+), 6 deletions(-)

diff --git a/src/frontend/apps/desk/src/features/addMembers/components/ModalAddMembers.tsx b/src/frontend/apps/desk/src/features/addMembers/components/ModalAddMembers.tsx
index 01c1606..355dfc8 100644
--- a/src/frontend/apps/desk/src/features/addMembers/components/ModalAddMembers.tsx
+++ b/src/frontend/apps/desk/src/features/addMembers/components/ModalAddMembers.tsx
@@ -57,6 +57,8 @@ export const ModalAddMembers = ({
   const { mutateAsync: createInvitation } = useCreateInvitation();
   const { mutateAsync: createTeamAccess } = useCreateTeamAccess();
 
+  const [isPending, setIsPending] = useState<boolean>(false);
+
   const switchActions = (selectedMembers: OptionsSelect) =>
     selectedMembers.map(async (selectedMember) => {
       switch (selectedMember.type) {
@@ -111,11 +113,15 @@ export const ModalAddMembers = ({
   };
 
   const handleValidate = async () => {
+    setIsPending(true);
+
     const settledPromises = await Promise.allSettled<
       OptionInvitation | OptionNewMember
     >(switchActions(selectedMembers));
 
     onClose();
+    setIsPending(false);
+
     settledPromises.forEach((settledPromise) => {
       switch (settledPromise.status) {
         case 'rejected':
@@ -133,7 +139,12 @@ export const ModalAddMembers = ({
     <Modal
       isOpen
       leftActions={
-        <Button color="secondary" fullWidth onClick={onClose}>
+        <Button
+          color="secondary"
+          fullWidth
+          onClick={onClose}
+          disabled={isPending}
+        >
           {t('Cancel')}
         </Button>
       }
@@ -144,7 +155,7 @@ export const ModalAddMembers = ({
         <Button
           color="primary"
           fullWidth
-          disabled={!selectedMembers.length}
+          disabled={!selectedMembers.length || isPending}
           onClick={() => void handleValidate()}
         >
           {t('Validate')}
@@ -166,6 +177,7 @@ export const ModalAddMembers = ({
           team={team}
           setSelectedMembers={setSelectedMembers}
           selectedMembers={selectedMembers}
+          disabled={isPending}
         />
         {selectedMembers.length > 0 && (
           <Box className="mt-s">
@@ -174,7 +186,7 @@ export const ModalAddMembers = ({
             </Text>
             <ChooseRole
               currentRole={currentRole}
-              disabled={false}
+              disabled={isPending}
               defaultRole={Role.MEMBER}
               setRole={setSelectedRole}
             />
diff --git a/src/frontend/apps/desk/src/features/addMembers/components/SearchMembers.tsx b/src/frontend/apps/desk/src/features/addMembers/components/SearchMembers.tsx
index 0b821e4..c5d2082 100644
--- a/src/frontend/apps/desk/src/features/addMembers/components/SearchMembers.tsx
+++ b/src/frontend/apps/desk/src/features/addMembers/components/SearchMembers.tsx
@@ -15,12 +15,14 @@ interface SearchMembersProps {
   team: Team;
   selectedMembers: OptionsSelect;
   setSelectedMembers: (value: OptionsSelect) => void;
+  disabled?: boolean;
 }
 
 export const SearchMembers = ({
   team,
   selectedMembers,
   setSelectedMembers,
+  disabled,
 }: SearchMembersProps) => {
   const { t } = useTranslation();
   const [input, setInput] = useState('');
@@ -100,6 +102,7 @@ export const SearchMembers = ({
 
   return (
     <AsyncSelect
+      isDisabled={disabled}
       aria-label={t('Find a member to add to the team')}
       isMulti
       loadOptions={loadOptions}
diff --git a/src/frontend/apps/desk/src/features/members/components/ModalRole.tsx b/src/frontend/apps/desk/src/features/members/components/ModalRole.tsx
index 27f48e4..47e898f 100644
--- a/src/frontend/apps/desk/src/features/members/components/ModalRole.tsx
+++ b/src/frontend/apps/desk/src/features/members/components/ModalRole.tsx
@@ -37,6 +37,7 @@ export const ModalRole = ({
     mutate: updateTeamAccess,
     error: errorUpdate,
     isError: isErrorUpdate,
+    isPending,
   } = useUpdateTeamAccess({
     onSuccess: () => {
       toast(t('The role has been updated'), VariantType.SUCCESS, {
@@ -53,7 +54,12 @@ export const ModalRole = ({
     <Modal
       isOpen
       leftActions={
-        <Button color="secondary" fullWidth onClick={() => onClose()}>
+        <Button
+          color="secondary"
+          fullWidth
+          onClick={() => onClose()}
+          disabled={isPending}
+        >
           {t('Cancel')}
         </Button>
       }
@@ -71,7 +77,7 @@ export const ModalRole = ({
               accessId: access.id,
             });
           }}
-          disabled={isNotAllowed}
+          disabled={isNotAllowed || isPending}
         >
           {t('Validate')}
         </Button>
diff --git a/src/frontend/apps/desk/src/features/teams/components/CardCreateTeam.tsx b/src/frontend/apps/desk/src/features/teams/components/CardCreateTeam.tsx
index 9cb0210..b9ae887 100644
--- a/src/frontend/apps/desk/src/features/teams/components/CardCreateTeam.tsx
+++ b/src/frontend/apps/desk/src/features/teams/components/CardCreateTeam.tsx
@@ -57,7 +57,10 @@ export const CardCreateTeam = () => {
         <StyledLink href="/">
           <Button color="secondary">{t('Cancel')}</Button>
         </StyledLink>
-        <Button onClick={() => createTeam(teamName)} disabled={!teamName}>
+        <Button
+          onClick={() => createTeam(teamName)}
+          disabled={!teamName || isPending}
+        >
           {t('Create the team')}
         </Button>
       </Box>