From 54fe6a2319dcea2dd8ffd4cf9f5c1a05c1dfd6e9 Mon Sep 17 00:00:00 2001
From: Anthony LC <anthony.le-courric@mail.numerique.gouv.fr>
Date: Mon, 14 Oct 2024 17:57:22 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B(frontend)=20invalidate=20queries?=
 =?UTF-8?q?=20after=20removing=20user?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

When we remove a user from the list of members,
we need to invalidate the user query for the
user to be found again.
We improve the error message when a user is
already a member of the document.
---
 CHANGELOG.md                                         |  4 ++++
 .../members/members-add/components/AddMembers.tsx    | 12 +++++++++++-
 .../members/members-add/components/SearchUsers.tsx   |  4 ++--
 .../src/features/docs/members/members-add/index.ts   |  1 +
 .../members/members-list/api/useDeleteDocAccess.ts   |  4 ++++
 5 files changed, 22 insertions(+), 3 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index b3891a23..d5101a16 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -13,6 +13,10 @@ and this project adheres to
 
 ♻️(frontend) More multi theme friendly #325
 
+## Fixed
+
+🐛(frontend) invalidate queries after removing user #336
+
 
 ## [1.5.1] - 2024-10-10
 
diff --git a/src/frontend/apps/impress/src/features/docs/members/members-add/components/AddMembers.tsx b/src/frontend/apps/impress/src/features/docs/members/members-add/components/AddMembers.tsx
index 1492f694..1a3c8726 100644
--- a/src/frontend/apps/impress/src/features/docs/members/members-add/components/AddMembers.tsx
+++ b/src/frontend/apps/impress/src/features/docs/members/members-add/components/AddMembers.tsx
@@ -94,6 +94,15 @@ export const AddMembers = ({ currentRole, doc }: ModalAddMembersProps) => {
       });
     }
 
+    if (
+      dataError.cause?.[0] ===
+      'This email is already associated to a registered user.'
+    ) {
+      messageError = t('"{{email}}" is already member of the document.', {
+        email: dataError['data']?.value,
+      });
+    }
+
     toast(messageError, VariantType.ERROR, toastOptions);
   };
 
@@ -123,6 +132,7 @@ export const AddMembers = ({ currentRole, doc }: ModalAddMembersProps) => {
     setIsPending(false);
     setResetKey(resetKey + 1);
     setSelectedUsers([]);
+    setSelectedRole(undefined);
 
     settledPromises.forEach((settledPromise) => {
       switch (settledPromise.status) {
@@ -156,7 +166,7 @@ export const AddMembers = ({ currentRole, doc }: ModalAddMembersProps) => {
         <Box $gap="0.7rem" $direction="row" $wrap="wrap" $css="flex: 80%;">
           <Box $css="flex: auto;" $width="15rem">
             <SearchUsers
-              key={resetKey + 1}
+              key={resetKey}
               doc={doc}
               setSelectedUsers={setSelectedUsers}
               selectedUsers={selectedUsers}
diff --git a/src/frontend/apps/impress/src/features/docs/members/members-add/components/SearchUsers.tsx b/src/frontend/apps/impress/src/features/docs/members/members-add/components/SearchUsers.tsx
index 6bf8a80b..5d6a172a 100644
--- a/src/frontend/apps/impress/src/features/docs/members/members-add/components/SearchUsers.tsx
+++ b/src/frontend/apps/impress/src/features/docs/members/members-add/components/SearchUsers.tsx
@@ -70,6 +70,7 @@ export const SearchUsers = ({
 
       if (!isFoundUser && !isFoundEmail) {
         users = [
+          ...users,
           {
             value: { email: userQuery },
             label: userQuery,
@@ -83,8 +84,7 @@ export const SearchUsers = ({
     resolveOptionsRef.current = null;
 
     return users;
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [options, selectedUsers]);
+  }, [options, selectedUsers, userQuery]);
 
   const loadOptions = (): Promise<OptionsSelect> => {
     return new Promise<OptionsSelect>((resolve) => {
diff --git a/src/frontend/apps/impress/src/features/docs/members/members-add/index.ts b/src/frontend/apps/impress/src/features/docs/members/members-add/index.ts
index 07635cbb..0ef46430 100644
--- a/src/frontend/apps/impress/src/features/docs/members/members-add/index.ts
+++ b/src/frontend/apps/impress/src/features/docs/members/members-add/index.ts
@@ -1 +1,2 @@
+export * from './api';
 export * from './components';
diff --git a/src/frontend/apps/impress/src/features/docs/members/members-list/api/useDeleteDocAccess.ts b/src/frontend/apps/impress/src/features/docs/members/members-list/api/useDeleteDocAccess.ts
index 1e1943f8..debc6d59 100644
--- a/src/frontend/apps/impress/src/features/docs/members/members-list/api/useDeleteDocAccess.ts
+++ b/src/frontend/apps/impress/src/features/docs/members/members-list/api/useDeleteDocAccess.ts
@@ -6,6 +6,7 @@ import {
 
 import { APIError, errorCauses, fetchAPI } from '@/api';
 import { KEY_DOC, KEY_LIST_DOC } from '@/features/docs/doc-management';
+import { KEY_LIST_USER } from '@/features/docs/members/members-add';
 
 import { KEY_LIST_DOC_ACCESSES } from './useDocAccesses';
 
@@ -51,6 +52,9 @@ export const useDeleteDocAccess = (options?: UseDeleteDocAccessOptions) => {
       void queryClient.resetQueries({
         queryKey: [KEY_LIST_DOC],
       });
+      void queryClient.invalidateQueries({
+        queryKey: [KEY_LIST_USER],
+      });
       if (options?.onSuccess) {
         options.onSuccess(data, variables, context);
       }