🚸(frontend) fresh data on share modal open

When we open the share modal, the requests were
then in cache, if other users where interacting
with the share settings in parallel,
we would not see the changes until the cache expired.
We now force a fresh fetch of the data when opening
the share modal, it ensures we always have the
latest data when opening the modal.

Author: AntoLC

src/frontend/apps/impress/src/features/docs/doc-share/api/index.ts

@@ -1,9 +1,10 @@
-export * from './useDeleteDocAccess';
-export * from './useDocAccesses';
-export * from './useUpdateDocAccess';
 export * from './useCreateDocAccess';
-export * from './useUsers';
 export * from './useCreateDocInvitation';
+export * from './useDeleteDocAccess';
 export * from './useDeleteDocInvitation';
+export * from './useDocAccesses';
+export * from './useDocAccessRequest';
 export * from './useDocInvitations';
+export * from './useUpdateDocAccess';
 export * from './useUpdateDocInvitation';
+export * from './useUsers';

src/frontend/apps/impress/src/features/docs/doc-share/components/DocShareModal.tsx

@@ -1,5 +1,6 @@
 import { Modal, ModalSize } from '@openfun/cunningham-react';
-import { useMemo, useRef, useState } from 'react';
+import { useQueryClient } from '@tanstack/react-query';
+import { useEffect, useMemo, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { createGlobalStyle, css } from 'styled-components';
 import { useDebouncedCallback } from 'use-debounce';
@@ -15,7 +16,14 @@ import { User } from '@/features/auth';
 import { useResponsiveStore } from '@/stores';
 import { isValidEmail } from '@/utils';
 
-import { KEY_LIST_USER, useDocAccesses, useUsers } from '../api';
+import {
+  KEY_LIST_DOC_ACCESSES,
+  KEY_LIST_DOC_ACCESS_REQUESTS,
+  KEY_LIST_DOC_INVITATIONS,
+  KEY_LIST_USER,
+  useDocAccesses,
+  useUsers,
+} from '../api';
 
 import { DocInheritedShareContent } from './DocInheritedShareContent';
 import {
@@ -48,6 +56,7 @@ type Props = {
 export const DocShareModal = ({ doc, onClose, isRootDoc = true }: Props) => {
   const { t } = useTranslation();
   const selectedUsersRef = useRef<HTMLDivElement>(null);
+  const queryClient = useQueryClient();
 
   const { isDesktop } = useResponsiveStore();
 
@@ -128,6 +137,19 @@ export const DocShareModal = ({ doc, onClose, isRootDoc = true }: Props) => {
   const showInheritedShareContent =
     inheritedAccesses.length > 0 && showMemberSection && !isRootDoc;
 
+  // Invalidate relevant queries to ensure fresh data on modal open
+  useEffect(() => {
+    [
+      KEY_LIST_DOC_INVITATIONS,
+      KEY_LIST_DOC_ACCESS_REQUESTS,
+      KEY_LIST_DOC_ACCESSES,
+    ].forEach((key) => {
+      void queryClient.invalidateQueries({
+        queryKey: [key],
+      });
+    });
+  }, [queryClient]);
+
   return (
     <>
       <Modal