fix: tables behavior

cellajs · Mar 5, 2025 · bcd1c6e · bcd1c6e
1 parent 6c30a9e
commit bcd1c6e
Show file tree

Hide file tree

Showing 8 changed files with 21 additions and 17 deletions.
diff --git 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
@@ -21,16 +21,16 @@ 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
       const { rows, selectedRows, setRows, setSelectedRows, totalCount, isLoading, isFetching, error, fetchNextPage } = useDataFromInfiniteQuery(
         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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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