🚸(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.
This commit is contained in:
Anthony LC
2025-10-21 10:45:32 +02:00
parent 7d5cc4e84b
commit 950d215632
2 changed files with 29 additions and 6 deletions

View File

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

View File

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