From bcd1c6ebdb2647ed9ab28b99fe1029395fa32dde Mon Sep 17 00:00:00 2001
From: David Hordiienko <shiraz0david@gmail.com>
Date: Wed, 5 Mar 2025 12:15:48 +0200
Subject: [PATCH] fix: tables behavior

---
 .../src/modules/attachments/table/table-wrapper.tsx    |  4 ++--
 frontend/src/modules/attachments/table/table.tsx       |  6 +++---
 .../memberships/members-table/table-wrapper.tsx        |  6 +++---
 frontend/src/modules/organizations/table/table.tsx     |  2 +-
 frontend/src/modules/requests/table/table.tsx          |  2 +-
 frontend/src/modules/users/table/table-wrapper.tsx     |  5 ++---
 frontend/src/modules/users/table/table.tsx             |  3 +--
 frontend/src/query/hybrid-fetch.ts                     | 10 ++++++++--
 8 files changed, 21 insertions(+), 17 deletions(-)

diff --git a/frontend/src/modules/attachments/table/table-wrapper.tsx b/frontend/src/modules/attachments/table/table-wrapper.tsx
index 5b698f83f..ca2b922fa 100644
--- a/frontend/src/modules/attachments/table/table-wrapper.tsx
+++ b/frontend/src/modules/attachments/table/table-wrapper.tsx
@@ -42,6 +42,8 @@ const AttachmentsTable = ({ organization, canUpload = true, isSheet = false }: A
   const { q, sort, order, attachmentPreview, groupId } = search;
   const limit = LIMIT;
 
+  useAttachmentDialog({ orgIdOrSlug: organization.id, attachmentPreview, groupId });
+
   // State for selected and total counts
   const [total, setTotal] = useState<number | undefined>(undefined);
   const [selected, setSelected] = useState<Attachment[]>([]);
@@ -62,8 +64,6 @@ const AttachmentsTable = ({ organization, canUpload = true, isSheet = false }: A
     });
   };
 
-  useAttachmentDialog({ orgIdOrSlug: organization.id, attachmentPreview, groupId });
-
   return (
     <div className="flex flex-col gap-4 h-full">
       <AttachmentsTableBar
diff --git a/frontend/src/modules/attachments/table/table.tsx b/frontend/src/modules/attachments/table/table.tsx
index 53c33a0d6..c869d4ad3 100644
--- a/frontend/src/modules/attachments/table/table.tsx
+++ b/frontend/src/modules/attachments/table/table.tsx
@@ -21,8 +21,6 @@ const BaseDataTable = memo(
     ({ organization, columns, queryVars, sortColumns, setSortColumns, setTotal, setSelected }, ref) => {
       const { t } = useTranslation();
 
-      useSync(organization.id);
-
       const { q, sort, order, limit } = queryVars;
 
       // Query attachments
@@ -30,7 +28,9 @@ const BaseDataTable = memo(
         attachmentsQueryOptions({ orgIdOrSlug: organization.id, q, sort, order, limit }),
       );
 
+      useSync(organization.id);
       const attachmentUpdateMutation = useAttachmentUpdateMutation();
+
       // Update rows
       const onRowsChange = (changedRows: Attachment[], { indexes, column }: RowsChangeData<Attachment>) => {
         if (column.key === 'name') {
@@ -77,7 +77,7 @@ const BaseDataTable = memo(
             fetchMore: fetchNextPage,
             isFiltered: !!q,
             selectedRows,
-            onSelectedRowsChange: setSelectedRows,
+            onSelectedRowsChange,
             sortColumns,
             onSortColumnsChange: setSortColumns,
             NoRowsComponent: (
diff --git a/frontend/src/modules/memberships/members-table/table-wrapper.tsx b/frontend/src/modules/memberships/members-table/table-wrapper.tsx
index e7e7f9edf..c64e51303 100644
--- a/frontend/src/modules/memberships/members-table/table-wrapper.tsx
+++ b/frontend/src/modules/memberships/members-table/table-wrapper.tsx
@@ -44,6 +44,9 @@ const MembersTable = ({ entity: baseEntity, isSheet = false }: MembersTableProps
   const { q, role, sort, order, sheetId } = search;
   const limit = LIMIT;
 
+  // Render user sheet if sheetId is present
+  useUserSheet({ sheetId, organizationId });
+
   // State for selected, total counts and entity
   const [total, setTotal] = useState<number | undefined>(undefined);
   const [selected, setSelected] = useState<Member[]>([]);
@@ -57,9 +60,6 @@ const MembersTable = ({ entity: baseEntity, isSheet = false }: MembersTableProps
     if (dataTableRef.current) dataTableRef.current.clearSelection();
   };
 
-  // Render user sheet if sheetId is present
-  useUserSheet({ sheetId, organizationId });
-
   const openInviteDialog = (container?: HTMLElement | null) => {
     if (!onlineManager.isOnline()) return toaster(t('common:action.offline.text'), 'warning');
 
diff --git a/frontend/src/modules/organizations/table/table.tsx b/frontend/src/modules/organizations/table/table.tsx
index c1cc932f0..cdd993ab8 100644
--- a/frontend/src/modules/organizations/table/table.tsx
+++ b/frontend/src/modules/organizations/table/table.tsx
@@ -84,7 +84,7 @@ const BaseDataTable = memo(
           selectedRows,
           onRowsChange,
           fetchMore: fetchNextPage,
-          onSelectedRowsChange: setSelectedRows,
+          onSelectedRowsChange,
           sortColumns,
           onSortColumnsChange: setSortColumns,
           NoRowsComponent: (
diff --git a/frontend/src/modules/requests/table/table.tsx b/frontend/src/modules/requests/table/table.tsx
index 250b5814a..c32731387 100644
--- a/frontend/src/modules/requests/table/table.tsx
+++ b/frontend/src/modules/requests/table/table.tsx
@@ -55,7 +55,7 @@ const BaseRequestsTable = memo(
           fetchMore: fetchNextPage,
           sortColumns,
           selectedRows,
-          onSelectedRowsChange: setSelectedRows,
+          onSelectedRowsChange,
           onSortColumnsChange: setSortColumns,
           NoRowsComponent: <ContentPlaceholder Icon={Bird} title={t('common:no_resource_yet', { resource: t('common:requests').toLowerCase() })} />,
         }}
diff --git a/frontend/src/modules/users/table/table-wrapper.tsx b/frontend/src/modules/users/table/table-wrapper.tsx
index 9665c16b8..8d3f2a93c 100644
--- a/frontend/src/modules/users/table/table-wrapper.tsx
+++ b/frontend/src/modules/users/table/table-wrapper.tsx
@@ -33,6 +33,8 @@ const UsersTable = () => {
   const limit = LIMIT;
 
   const mutateQuery = useMutateQueryData(usersKeys.list(), (item) => usersKeys.single(item.id), ['update']);
+  // Render user sheet if sheetId is present
+  useUserSheet({ sheetId });
 
   // State for selected and total counts
   const [total, setTotal] = useState<number | undefined>(undefined);
@@ -46,9 +48,6 @@ const UsersTable = () => {
     if (dataTableRef.current) dataTableRef.current.clearSelection();
   };
 
-  // Render user sheet if sheetId is present
-  useUserSheet({ sheetId });
-
   const openInviteDialog = (container: HTMLElement | null) => {
     dialog(<InviteUsers mode={'email'} dialog />, {
       id: 'user-invite',
diff --git a/frontend/src/modules/users/table/table.tsx b/frontend/src/modules/users/table/table.tsx
index c281102e1..b308fb32e 100644
--- a/frontend/src/modules/users/table/table.tsx
+++ b/frontend/src/modules/users/table/table.tsx
@@ -30,7 +30,6 @@ const BaseDataTable = memo(
     );
 
     const mutateQuery = useMutateQueryData(usersKeys.list(), (item) => usersKeys.single(item.id), ['update']);
-
     // Update user role
     const { mutate: updateUserRole } = useUpdateUserMutation();
 
@@ -81,7 +80,7 @@ const BaseDataTable = memo(
           fetchMore: fetchNextPage,
           isFiltered: role !== undefined || !!q,
           selectedRows,
-          onSelectedRowsChange: setSelectedRows,
+          onSelectedRowsChange,
           sortColumns,
           onSortColumnsChange: setSortColumns,
         }}
diff --git a/frontend/src/query/hybrid-fetch.ts b/frontend/src/query/hybrid-fetch.ts
index 8014504eb..c67c8fdf8 100644
--- a/frontend/src/query/hybrid-fetch.ts
+++ b/frontend/src/query/hybrid-fetch.ts
@@ -20,7 +20,10 @@ export const hybridFetch = async <T>(options: FetchQueryOptions<any, any, any, a
 
   try {
     // Remove cached queries to trigger re-fetch if online
-    if (refetchIfOnline) queryClient.removeQueries({ queryKey, exact: true });
+    if (refetchIfOnline) {
+      await queryClient.cancelQueries({ queryKey, exact: true }); // To avoid CancelledError
+      await queryClient.invalidateQueries({ queryKey, exact: true });
+    }
     return queryClient.fetchQuery(options);
   } catch (error) {
     return cachedData ?? undefined; // Fallback to cached data if available
@@ -44,7 +47,10 @@ export const hybridFetchInfinite = async (options: FetchInfiniteQueryOptions<any
   if (!onlineManager.isOnline()) return cachedData ?? undefined;
 
   try {
-    if (refetchIfOnline) queryClient.removeQueries({ queryKey, exact: true });
+    if (refetchIfOnline) {
+      await queryClient.cancelQueries({ queryKey, exact: true }); // To avoid CancelledError
+      await queryClient.invalidateQueries({ queryKey, exact: true });
+    }
     return queryClient.fetchInfiniteQuery(options);
   } catch (error) {
     return cachedData ?? undefined; // Fallback to cached data if available