From caae548d8abe7f8ddea894ea35f846916a64c6ab Mon Sep 17 00:00:00 2001 From: Travis Vachon Date: Fri, 20 Jan 2023 14:57:51 -0800 Subject: [PATCH 1/5] fix: load first page of uploads list in provider rather than doing this in the headless component, do it in the provider so that hook users also get a page of results --- packages/react-uploads-list/src/UploadsList.tsx | 4 ---- packages/react-uploads-list/src/providers/UploadsList.tsx | 8 +++++--- 2 files changed, 5 insertions(+), 7 deletions(-) diff --git a/packages/react-uploads-list/src/UploadsList.tsx b/packages/react-uploads-list/src/UploadsList.tsx index 6a27224c..d24feace 100644 --- a/packages/react-uploads-list/src/UploadsList.tsx +++ b/packages/react-uploads-list/src/UploadsList.tsx @@ -68,10 +68,6 @@ export const UploadsListRoot = (props: UploadsListRootProps): JSX.Element => { } else { renderedChildren = children as React.ReactNode } - useEffect(() => { - // load the first page of results asynchronously - void actions.next() - }, []) return ( {renderedChildren} diff --git a/packages/react-uploads-list/src/providers/UploadsList.tsx b/packages/react-uploads-list/src/providers/UploadsList.tsx index a0c81247..1fbec3b7 100644 --- a/packages/react-uploads-list/src/providers/UploadsList.tsx +++ b/packages/react-uploads-list/src/providers/UploadsList.tsx @@ -1,4 +1,4 @@ -import React, { useContext, createContext, useState } from 'react' +import React, { useContext, createContext, useState, useEffect } from 'react' import { UploadListResult, UploadsListContextState, UploadsListContextActions, ServiceConfig, list } from '@w3ui/uploads-list-core' import { useKeyring } from '@w3ui/react-keyring' import { list as uploadList } from '@web3-storage/capabilities/upload' @@ -13,8 +13,8 @@ export const uploadsListContextDefaultValue: UploadsListContextValue = [ loading: false }, { - next: async () => {}, - reload: async () => {} + next: async () => { }, + reload: async () => { } } ] @@ -72,6 +72,8 @@ export function UploadsListProvider ({ size, servicePrincipal, connection, child setLoading(false) } } + // automatically load the first page of results + useEffect(() => { void loadPage() }, []) const state = { data, loading, error } const actions = { From 2b0faef312dbc6176a092f8aeb29b41b98b0a324 Mon Sep 17 00:00:00 2001 From: Travis Vachon Date: Fri, 20 Jan 2023 15:12:54 -0800 Subject: [PATCH 2/5] fix: move first page load to hook weird timing issues occur when you try to do this in the provider - move it to the hook to get around them --- .../react-uploads-list/src/providers/UploadsList.tsx | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/packages/react-uploads-list/src/providers/UploadsList.tsx b/packages/react-uploads-list/src/providers/UploadsList.tsx index 1fbec3b7..5f005e56 100644 --- a/packages/react-uploads-list/src/providers/UploadsList.tsx +++ b/packages/react-uploads-list/src/providers/UploadsList.tsx @@ -72,8 +72,6 @@ export function UploadsListProvider ({ size, servicePrincipal, connection, child setLoading(false) } } - // automatically load the first page of results - useEffect(() => { void loadPage() }, []) const state = { data, loading, error } const actions = { @@ -93,7 +91,10 @@ export function UploadsListProvider ({ size, servicePrincipal, connection, child /** * Use the scoped uploads list context state from a parent `UploadsListProvider`. - */ +*/ export function useUploadsList (): UploadsListContextValue { - return useContext(UploadsListContext) + const ctx = useContext(UploadsListContext) + // automatically load the first page of results + useEffect(() => { ctx[1].next() }, []) + return ctx } From d86966ff83e60d946ce0bdf6e699e4a163ced056 Mon Sep 17 00:00:00 2001 From: Travis Vachon Date: Fri, 20 Jan 2023 15:29:51 -0800 Subject: [PATCH 3/5] fix: make the linter happy --- packages/react-uploads-list/src/UploadsList.tsx | 2 +- packages/react-uploads-list/src/providers/UploadsList.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/react-uploads-list/src/UploadsList.tsx b/packages/react-uploads-list/src/UploadsList.tsx index d24feace..ef388a3d 100644 --- a/packages/react-uploads-list/src/UploadsList.tsx +++ b/packages/react-uploads-list/src/UploadsList.tsx @@ -1,7 +1,7 @@ import type { As, Component, Props, Options, RenderProp } from 'ariakit-react-utils' import type { UploadsListContextState, UploadsListContextActions } from '@w3ui/uploads-list-core' -import React, { Fragment, createContext, useContext, useMemo, useCallback, useEffect } from 'react' +import React, { Fragment, createContext, useContext, useMemo, useCallback } from 'react' import { createComponent, createElement } from 'ariakit-react-utils' import { useUploadsList } from './providers/UploadsList' diff --git a/packages/react-uploads-list/src/providers/UploadsList.tsx b/packages/react-uploads-list/src/providers/UploadsList.tsx index 5f005e56..3699d432 100644 --- a/packages/react-uploads-list/src/providers/UploadsList.tsx +++ b/packages/react-uploads-list/src/providers/UploadsList.tsx @@ -95,6 +95,6 @@ export function UploadsListProvider ({ size, servicePrincipal, connection, child export function useUploadsList (): UploadsListContextValue { const ctx = useContext(UploadsListContext) // automatically load the first page of results - useEffect(() => { ctx[1].next() }, []) + useEffect(() => { void ctx[1].next() }, []) return ctx } From 119d6f298ca91bf6050f7109c7962131e76a59b8 Mon Sep 17 00:00:00 2001 From: Travis Vachon Date: Mon, 23 Jan 2023 16:29:24 -0800 Subject: [PATCH 4/5] fix: move loadPage useEffect into provider I think it's better to have this in the provider so that anyone using this context gets a page of results previously I thought this wouldn't work, but that was just because I wasn't doing a good job with dependency management - now that it's configured to re-run the load any time the space or agent change, it seems to work as expected --- .../react-uploads-list/src/providers/UploadsList.tsx | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/react-uploads-list/src/providers/UploadsList.tsx b/packages/react-uploads-list/src/providers/UploadsList.tsx index 3699d432..9c075eb8 100644 --- a/packages/react-uploads-list/src/providers/UploadsList.tsx +++ b/packages/react-uploads-list/src/providers/UploadsList.tsx @@ -13,8 +13,8 @@ export const uploadsListContextDefaultValue: UploadsListContextValue = [ loading: false }, { - next: async () => { }, - reload: async () => { } + next: async () => {}, + reload: async () => {} } ] @@ -82,6 +82,9 @@ export function UploadsListProvider ({ size, servicePrincipal, connection, child } } + // we should reload the page any time the space or agent change + useEffect(() => { void loadPage() }, [space, agent]) + return ( {children} @@ -93,8 +96,5 @@ export function UploadsListProvider ({ size, servicePrincipal, connection, child * Use the scoped uploads list context state from a parent `UploadsListProvider`. */ export function useUploadsList (): UploadsListContextValue { - const ctx = useContext(UploadsListContext) - // automatically load the first page of results - useEffect(() => { void ctx[1].next() }, []) - return ctx + return useContext(UploadsListContext) } From 9c75990d41160cde68263712a1ba6b69a20d8979 Mon Sep 17 00:00:00 2001 From: Travis Vachon Date: Tue, 24 Jan 2023 12:25:29 -0800 Subject: [PATCH 5/5] fix: whitespace --- packages/react-uploads-list/src/providers/UploadsList.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-uploads-list/src/providers/UploadsList.tsx b/packages/react-uploads-list/src/providers/UploadsList.tsx index 9c075eb8..f19f4528 100644 --- a/packages/react-uploads-list/src/providers/UploadsList.tsx +++ b/packages/react-uploads-list/src/providers/UploadsList.tsx @@ -94,7 +94,7 @@ export function UploadsListProvider ({ size, servicePrincipal, connection, child /** * Use the scoped uploads list context state from a parent `UploadsListProvider`. -*/ + */ export function useUploadsList (): UploadsListContextValue { return useContext(UploadsListContext) }