From 814a2936e651c32f8f759bcd04c5d21d3b040de3 Mon Sep 17 00:00:00 2001
From: Travis Vachon <travis@dag.house>
Date: Wed, 1 Feb 2023 10:57:37 +0800
Subject: [PATCH] feat: allow users to set page size in W3APIProvider (#308)

Allow users to set page size in W3APIProvider.

It feels like it would be cleaner to make it possible to set page size
in the `useUploadsList` hook, but a bit of work on that revealed some
complexity that will take a bit more planning and design to get right -
see
https://github.com/web3-storage/w3ui/commit/e50e02594bdf608b9add0241f22bed09c7dc2902
for the work I did toward this and a short description of the issues I
ran into.

For now I think this is good enough to ship, and I'd like to think more
carefully about how we handle state in the UploadsList in future
versions of these libs.
---
 examples/react/w3console/src/app.tsx   | 2 +-
 packages/react/src/providers/W3API.tsx | 9 +++++++--
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/examples/react/w3console/src/app.tsx b/examples/react/w3console/src/app.tsx
index c7c2074b..b2792e95 100644
--- a/examples/react/w3console/src/app.tsx
+++ b/examples/react/w3console/src/app.tsx
@@ -136,7 +136,7 @@ export function Logo (): JSX.Element {
 
 export function App (): JSX.Element {
   return (
-    <W3APIProvider>
+    <W3APIProvider uploadsListPageSize={20}>
       <Authenticator>
         <div className='flex min-h-full w-full'>
           <nav className='flex-none w-64 bg-gray-900 text-white px-4 pb-4 border-r border-gray-800'>
diff --git a/packages/react/src/providers/W3API.tsx b/packages/react/src/providers/W3API.tsx
index 80810dab..78c65d25 100644
--- a/packages/react/src/providers/W3API.tsx
+++ b/packages/react/src/providers/W3API.tsx
@@ -13,11 +13,16 @@ export interface UploaderProviderProps extends ServiceConfig {
   children?: JSX.Element
 }
 
-export function W3APIProvider ({ children }: { children: JSX.Element | JSX.Element[] }): JSX.Element {
+export interface W3APIProviderProps {
+  children: JSX.Element | JSX.Element[]
+  uploadsListPageSize?: number
+}
+
+export function W3APIProvider ({ children, uploadsListPageSize }: W3APIProviderProps): JSX.Element {
   return (
     <KeyringProvider>
       <UploaderProvider>
-        <UploadsListProvider>
+        <UploadsListProvider size={uploadsListPageSize}>
           <>{children}</>
         </UploadsListProvider>
       </UploaderProvider>