add sort and don't flash when updating query

cloud-gov · Feb 26, 2025 · 9017b73 · 9017b73
1 parent 518a901
commit 9017b73
Show file tree

Hide file tree

Showing 4 changed files with 68 additions and 31 deletions.
diff --git a/frontend/hooks/useFileStorage.js b/frontend/hooks/useFileStorage.js
@@ -1,22 +1,53 @@
 import { useQuery } from '@tanstack/react-query';
+import { useRef, useEffect } from 'react';
 import federalist from '@util/federalistApi';
 
-export default function useFileStorage(fileStorageId, path = '') {
+export default function useFileStorage(
+  fileStorageId,
+  path = '',
+  sortKey = null,
+  sortOrder = null
+) {
+  // Create a ref to store previous data. (Declare it first!)
+  const previousData = useRef();
+
   const fetchPublicFiles = async () => {
-    const response = await federalist.fetchPublicFiles(fileStorageId, path);
+    const response = await federalist.fetchPublicFiles(
+      fileStorageId,
+      path,
+      sortKey,
+      sortOrder
+    );
     if (response.error) {
       throw new Error(response.error);
     }
     return response.data;
   };
 
-  const { data = [], isLoading, error, refetch } = useQuery({
-    queryKey: ['fileStorage', fileStorageId, path],
+  // Use placeholderData: previousData.current if available.
+  const { data, isLoading, isFetching, error, refetch } = useQuery({
+    queryKey: ['fileStorage', fileStorageId, path, sortKey, sortOrder],
     queryFn: fetchPublicFiles,
     enabled: !!fileStorageId,
+    keepPreviousData: true,
+    staleTime: 2000,
+    placeholderData: previousData.current || undefined,
     onError: (err) => console.error('Error fetching public files:', err),
   });
 
+  // Update previousData whenever new data is available.
+  useEffect(() => {
+    if (data !== undefined) {
+      previousData.current = data;
+    }
+  }, [data]);
 
-  return { data, isLoading, error, refetch };
+  return {
+    data,
+    previousData: previousData.current,
+    isLoading,
+    isFetching,
+    error,
+    refetch
+  };
 }
diff --git a/frontend/pages/file-storage/FileList.jsx b/frontend/pages/file-storage/FileList.jsx
@@ -122,8 +122,8 @@ const FileList = ({
   onViewDetails,
   currentSortKey,
   currentSortOrder,
+  children,
 }) => {
-  const EMPTY_STATE_MESSAGE = 'No files or folders found.';
   const TABLE_CAPTION = `
     Listing all contents for the current folder, sorted by ${currentSortKey} in 
     ${ariaFormatSort(currentSortOrder)} order
@@ -192,6 +192,7 @@ const FileList = ({
         </tr>
       </thead>
       <tbody>
+        {children}
         {data.map((item) => (
           <FileListRow
             key={item.name}
@@ -204,13 +205,6 @@ const FileList = ({
             onViewDetails={onViewDetails}
           />
         ))}
-        {data.length === 0 && (
-          <tr>
-            <td colSpan="99" className="text-italic">
-              {EMPTY_STATE_MESSAGE}
-            </td>
-          </tr>
-        )}
       </tbody>
     </table>
   );
@@ -255,6 +249,7 @@ FileList.propTypes = {
   onSort: PropTypes.func.isRequired,
   currentSortKey: PropTypes.string.isRequired,
   currentSortOrder: PropTypes.oneOf(['asc', 'desc']).isRequired,
+  children: PropTypes.node,
 };
 
 FileListRow.propTypes = {

diff --git a/frontend/pages/file-storage/index.js b/frontend/pages/file-storage/index.js
@@ -24,34 +24,29 @@ function FileStoragePage() {
   if (path !== "/") {
     path = path.replace(/\/+$/, "") + "/";
   }
+  const DEFAULT_SORT_KEY = "updatedAt";
+  const DEFAULT_SORT_ORDER = "desc";
+  const REVERSE_SORT_ORDER = "asc";
+
+  const sortKey = searchParams.get('sortKey') || DEFAULT_SORT_KEY;
+  const sortOrder = searchParams.get('sortOrder') || DEFAULT_SORT_ORDER;
   const {
     data: fetchedPublicFiles,
     isLoading,
     error,
     // refetch (if we need to manually update)
-  } = useFileStorage(fileStorageServiceId, path);
-
+  } = useFileStorage(fileStorageServiceId, path, sortKey, sortOrder);
 
   const detailsFile = searchParams.get('details');
   const storageRoot = `${site.siteOrigin}/~assets`
-
-
   const fileDetails = fetchedPublicFiles?.find(file => file.name === detailsFile);
 
-
   const mockPagination = {
     currentPage: parseInt(searchParams.get('page')) || 1,
     totalPages: 20,
     totalItems: 392,
   };
 
-  const DEFAULT_SORT_KEY = "name";
-  const DEFAULT_SORT_ORDER = "asc";
-  const REVERSE_SORT_ORDER = "desc";
-
-  const sortKey = searchParams.get('sortKey') || DEFAULT_SORT_KEY;
-  const sortOrder = searchParams.get('sortOrder') || DEFAULT_SORT_ORDER;
-
   const mockedSort = {
     ...mockPagination,
     sortKey,
@@ -130,7 +125,8 @@ function FileStoragePage() {
     });
   };
 
-  if (isLoading) {
+
+  if (isLoading && fetchedPublicFiles === undefined) {
     return <LoadingIndicator />;
   }
 
@@ -169,15 +165,22 @@ function FileStoragePage() {
           <FileList
             path={path}
             storageRoot={storageRoot}
-            data={fetchedPublicFiles}
+            data={fetchedPublicFiles || []}
             onDelete={handleDelete}
             onNavigate={handleNavigate}
             onSort={handleSort}
             onViewDetails={handleViewDetails}
             currentSortKey={mockedSort.sortKey}
             currentSortOrder={mockedSort.sortOrder}
-          />
-
+          >
+            {!isLoading && fetchedPublicFiles?.length === 0 && (
+              <tr>
+                <td colSpan="99" className="text-italic">
+                  No files or folders found.
+                </td>
+              </tr>
+            )}
+          </FileList>
           <Pagination
             currentPage={mockPagination.currentPage}
             totalPages={mockPagination.totalPages}

diff --git a/frontend/util/federalistApi.js b/frontend/util/federalistApi.js
@@ -366,12 +366,20 @@ export default {
     return request(`tasks/${id}/report/${subPage || ''}`);
   },
 
-  fetchPublicFiles(fileStorageId, path = '/') {
-    return request(`file-storage/${fileStorageId}?path=${path}`, {
+  // default sort from backend is updatedAt, descending. 'name' is also a possible key
+  fetchPublicFiles(fileStorageId, path = '/', sortKey = 'updatedAt', sortOrder = 'desc') {
+    const params = new URLSearchParams({
+      path,
+      sortKey,
+      sortOrder,
+    });
+    return request(`file-storage/${fileStorageId}?${params.toString()}`, {
       method: 'GET',
     });
   },
 
+
+
   createPublicDirectory(fileStorageId, parent = '/', name) {
     return request(`file-storage/${fileStorageId}/directory`, {
       method: 'POST',