feat(storage-browser): paginate upload view (#6628)

* feat(storage-browser): paginate upload view

Author: bobbor

.changeset/cold-comics-explode.md

@@ -0,0 +1,5 @@
+---
+"@aws-amplify/ui-react-storage": patch
+---
+
+feat(storage-browser): paginate upload view

packages/react-storage/src/components/StorageBrowser/actions/handlers/listLocationItems.ts

@@ -150,7 +150,7 @@ export const listLocationItemsHandler: ListLocationItemsHandler = async (
     result.push(
       ...(exclude ? items.filter((item) => item.type !== exclude) : items)
     );
-  } while (nextNextToken && result.length < pageSize);
+  } while (nextNextToken && result.length < _pageSize);
 
   return { items: result, nextToken: nextNextToken };
 };

packages/react-storage/src/components/StorageBrowser/views/LocationActionView/UploadView/UploadView.tsx

@@ -15,6 +15,7 @@ import {
   MessageControl,
   StatusDisplayControl,
   TitleControl,
+  PaginationControl,
 } from '../../../controls';
 
 import { UploadViewProvider } from './UploadViewProvider';
@@ -32,6 +33,7 @@ export const UploadView: UploadViewType = ({ className, ...props }) => {
         <ViewElement className={`${STORAGE_BROWSER_BLOCK}__controls`}>
           <OverwriteToggleControl />
           <ViewElement className={`${STORAGE_BROWSER_BLOCK}__buttons`}>
+            <PaginationControl />
             <AddFolderControl />
             <AddFilesControl />
           </ViewElement>
@@ -65,6 +67,7 @@ UploadView.Provider = UploadViewProvider;
 
 UploadView.AddFiles = AddFilesControl;
 UploadView.AddFolder = AddFolderControl;
+UploadView.Pagination = PaginationControl;
 UploadView.Cancel = ActionCancelControl;
 UploadView.Destination = ActionDestinationControl;
 UploadView.DropZone = DropZoneControl;

packages/react-storage/src/components/StorageBrowser/views/LocationActionView/UploadView/UploadViewProvider.tsx

@@ -32,6 +32,9 @@ export function UploadViewProvider({
   } = displayText;
 
   const {
+    hasNextPage,
+    highestPageVisited,
+    page,
     isOverwritingEnabled,
     isProcessing,
     isProcessingComplete,
@@ -42,6 +45,7 @@ export function UploadViewProvider({
     onActionStart,
     onActionCancel,
     onDropFiles,
+    onPaginate,
     onActionExit,
     onTaskRemove,
     onSelectFiles,
@@ -92,6 +96,11 @@ export function UploadViewProvider({
         isOverwriteToggleDisabled: isProcessing || isProcessingComplete,
         isOverwritingEnabled,
         overwriteToggleLabel,
+        paginationData: {
+          page,
+          hasNextPage,
+          highestPageVisited,
+        },
         destination: location,
         message: actionCompleteMessage ?? filesValidationMessage,
         statusCounts,
@@ -105,6 +114,7 @@ export function UploadViewProvider({
       onActionCancel={onActionCancel}
       onActionExit={onActionExit}
       onActionStart={onActionStart}
+      onPaginate={onPaginate}
       onAddFiles={() => {
         onSelectFiles('FILE');
       }}

packages/react-storage/src/components/StorageBrowser/views/LocationActionView/UploadView/__tests__/UploadView.spec.tsx

@@ -31,6 +31,7 @@ const onActionExit = jest.fn();
 const onDropFiles = jest.fn();
 const onSelectFiles = jest.fn();
 const onToggleOverwrite = jest.fn();
+const onPaginate = jest.fn();
 
 const callbacks = {
   onActionCancel,
@@ -39,6 +40,7 @@ const callbacks = {
   onActionExit,
   onSelectFiles,
   onToggleOverwrite,
+  onPaginate,
 };
 
 const statusCounts = { ...INITIAL_STATUS_COUNTS };
@@ -75,6 +77,9 @@ const initialViewState: UploadViewState = {
   isProcessingComplete: false,
   isProcessing: false,
   tasks: [],
+  page: 1,
+  hasNextPage: false,
+  highestPageVisited: 1,
   invalidFiles: undefined,
   statusCounts,
 };

packages/react-storage/src/components/StorageBrowser/views/LocationActionView/UploadView/types.ts

@@ -8,10 +8,14 @@ import type {
 } from '../types';
 
 export interface UploadViewState extends ActionViewState<UploadHandlerData> {
+  hasNextPage: boolean;
+  highestPageVisited: number;
   isOverwritingEnabled: boolean;
   onDropFiles: (files: File[]) => void;
   onSelectFiles: (type: 'FILE' | 'FOLDER') => void;
   onToggleOverwrite: () => void;
+  onPaginate: (page: number) => void;
+  page: number;
   invalidFiles: FileItems | undefined;
 }
 
@@ -38,6 +42,7 @@ export interface UploadViewType
   Statuses: () => React.JSX.Element | null;
   TasksTable: () => React.JSX.Element | null;
   Title: () => React.JSX.Element | null;
+  Pagination: () => React.JSX.Element | null;
 }
 
 export interface UseUploadViewOptions {

packages/react-storage/src/components/StorageBrowser/views/LocationActionView/UploadView/useUploadView.ts

@@ -8,7 +8,9 @@ import { useAction } from '../../../useAction';
 
 import { DEFAULT_OVERWRITE_ENABLED } from './constants';
 import type { UploadViewState, UseUploadViewOptions } from './types';
+import { usePaginate } from '../../hooks/usePaginate';
 
+const DEFAULT_PAGE_SIZE = 100;
 export const useUploadView = (
   options?: UseUploadViewOptions
 ): UploadViewState => {
@@ -38,6 +40,14 @@ export const useUploadView = (
     handleUploads,
   ] = useAction('upload', { items });
 
+  const {
+    currentPage,
+    handlePaginate,
+    pageItems: pageTasks,
+  } = usePaginate({
+    items: tasks,
+  });
+
   const onDropFiles = (files: File[]) => {
     if (files) {
       fileItemsDispatch({ type: 'ADD_FILES', files });
@@ -79,11 +89,15 @@ export const useUploadView = (
     location,
     invalidFiles,
     statusCounts,
-    tasks,
+    tasks: pageTasks,
+    page: currentPage,
+    hasNextPage: currentPage * DEFAULT_PAGE_SIZE < items.length,
+    highestPageVisited: Math.ceil(items.length / DEFAULT_PAGE_SIZE),
     onActionCancel,
     onActionExit,
     onActionStart,
     onDropFiles,
+    onPaginate: handlePaginate,
     onTaskRemove,
     onSelectFiles,
     onToggleOverwrite,

packages/react-storage/src/components/StorageBrowser/views/hooks/usePaginate.ts

@@ -51,7 +51,8 @@ export const usePaginate = <T>({
 
         if (isFunction(onPaginate)) onPaginate(page);
 
-        if (page > currentPage) visitedRef.current = page;
+        if (page > currentPage && page > highestPageVisited)
+          visitedRef.current = page;
 
         setCurrentPage(page);
       },