🐛(frontend) invalidate queries after removing user

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

@@ -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
 

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}

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, userQuery]);
-  }, [options, selectedUsers]);
 
   const loadOptions = (): Promise<OptionsSelect> => {
     return new Promise<OptionsSelect>((resolve) => {

src/frontend/apps/impress/src/features/docs/members/members-add/index.ts

@@ -1 +1,2 @@
+export * from './api';
 export * from './components';

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);
       }