From aed922cb519425299995a72672ca7d0d27e65eaa Mon Sep 17 00:00:00 2001 From: Alex Freska Date: Wed, 8 Jan 2025 10:07:55 -0500 Subject: [PATCH] refactor(renterd): split out uploads manager context --- .../FilesStatsMenuCount.tsx | 5 ++- .../FilesDirectory/FilesActionsMenu.tsx | 4 +- .../FilesDirectory/FilesExplorer.tsx | 3 +- apps/renterd/config/providers.tsx | 29 ++++++++------- .../renterd/contexts/filesManager/dataset.tsx | 3 +- apps/renterd/contexts/filesManager/index.tsx | 8 ---- apps/renterd/contexts/filesManager/types.ts | 15 -------- apps/renterd/contexts/uploads/types.ts | 2 +- .../contexts/uploads/useLocalUploads.tsx | 6 +-- .../contexts/uploads/useRemoteUploads.tsx | 7 ++-- .../uploads.tsx => uploadsManager/index.tsx} | 37 ++++++++++++++++--- apps/renterd/contexts/uploadsManager/types.ts | 16 ++++++++ .../useWarnActiveUploadsOnClose.tsx | 0 13 files changed, 81 insertions(+), 54 deletions(-) rename apps/renterd/contexts/{filesManager/uploads.tsx => uploadsManager/index.tsx} (92%) create mode 100644 apps/renterd/contexts/uploadsManager/types.ts rename apps/renterd/contexts/{filesManager => uploadsManager}/useWarnActiveUploadsOnClose.tsx (100%) diff --git a/apps/renterd/components/Files/FilesStatsMenuShared/FilesStatsMenuCount.tsx b/apps/renterd/components/Files/FilesStatsMenuShared/FilesStatsMenuCount.tsx index 4cb79de84..a434e1b3f 100644 --- a/apps/renterd/components/Files/FilesStatsMenuShared/FilesStatsMenuCount.tsx +++ b/apps/renterd/components/Files/FilesStatsMenuShared/FilesStatsMenuCount.tsx @@ -3,10 +3,11 @@ import { useObjectStats } from '@siafoundation/renterd-react' import { useFilesManager } from '../../../contexts/filesManager' import { useFilesDirectory } from '../../../contexts/filesDirectory' import { useFilesFlat } from '../../../contexts/filesFlat' +import { useUploadsManager } from '../../../contexts/uploadsManager' export function FilesStatsMenuCount() { - const { isViewingABucket, uploadsList, activeExplorerMode } = - useFilesManager() + const { isViewingABucket, activeExplorerMode } = useFilesManager() + const { uploadsList } = useUploadsManager() const { datasetPageTotal: directoryPageTotal } = useFilesDirectory() const { datasetPageTotal: flatPageTotal } = useFilesFlat() const datasetPageTotal = diff --git a/apps/renterd/components/FilesDirectory/FilesActionsMenu.tsx b/apps/renterd/components/FilesDirectory/FilesActionsMenu.tsx index e26ceb5d2..e3adbbb9b 100644 --- a/apps/renterd/components/FilesDirectory/FilesActionsMenu.tsx +++ b/apps/renterd/components/FilesDirectory/FilesActionsMenu.tsx @@ -10,12 +10,14 @@ import { useFilesManager } from '../../contexts/filesManager' import { FilesViewDropdownMenu } from '../Files/FilesViewDropdownMenu' import { useDialog } from '../../contexts/dialog' import { useCanUpload } from '../Files/useCanUpload' +import { useUploadsManager } from '../../contexts/uploadsManager' // esm compat const { useDropzone } = reactDropzone export function FilesActionsMenu() { const { openDialog } = useDialog() - const { uploadFiles, isViewingBuckets } = useFilesManager() + const { isViewingBuckets } = useFilesManager() + const { uploadFiles } = useUploadsManager() const canUpload = useCanUpload() diff --git a/apps/renterd/components/FilesDirectory/FilesExplorer.tsx b/apps/renterd/components/FilesDirectory/FilesExplorer.tsx index 19eb0fbfe..83c93d96b 100644 --- a/apps/renterd/components/FilesDirectory/FilesExplorer.tsx +++ b/apps/renterd/components/FilesDirectory/FilesExplorer.tsx @@ -4,10 +4,10 @@ import { EmptyState } from './EmptyState' import { useCanUpload } from '../Files/useCanUpload' import { useFilesManager } from '../../contexts/filesManager' import { pluralize } from '@siafoundation/units' +import { useUploadsManager } from '../../contexts/uploadsManager' export function FilesExplorer() { const { - uploadFiles, sortField, sortDirection, sortableColumns, @@ -15,6 +15,7 @@ export function FilesExplorer() { isViewingBuckets, visibleColumns, } = useFilesManager() + const { uploadFiles } = useUploadsManager() const { datasetPage, datasetPageTotal, diff --git a/apps/renterd/config/providers.tsx b/apps/renterd/config/providers.tsx index 87fd107f3..960a468ec 100644 --- a/apps/renterd/config/providers.tsx +++ b/apps/renterd/config/providers.tsx @@ -11,6 +11,7 @@ import { FilesManagerProvider } from '../contexts/filesManager' import { FilesDirectoryProvider } from '../contexts/filesDirectory' import { UploadsProvider } from '../contexts/uploads' import { AlertsProvider } from '../contexts/alerts' +import { UploadsManagerProvider } from '../contexts/uploadsManager' type Props = { children: React.ReactNode @@ -25,20 +26,22 @@ export function Providers({ children }: Props) { - - - - - - {/* this is here so that dialogs can use all the other providers, + + + + + + + {/* this is here so that dialogs can use all the other providers, and the other providers can trigger dialogs */} - - {children} - - - - - + + {children} + + + + + + diff --git a/apps/renterd/contexts/filesManager/dataset.tsx b/apps/renterd/contexts/filesManager/dataset.tsx index f2aac5915..a50d97047 100644 --- a/apps/renterd/contexts/filesManager/dataset.tsx +++ b/apps/renterd/contexts/filesManager/dataset.tsx @@ -13,6 +13,7 @@ import { import { useFilesManager } from '.' import { useEffect } from 'react' import { Maybe } from '@siafoundation/types' +import { useUploadsManager } from '../uploadsManager' type Props = { id: string @@ -27,13 +28,13 @@ export function useDataset({ id, objects }: Props) { activeBucket, activeBucketName, fileNamePrefixFilter, - uploadsList, sortDirection, sortField, activeDirectoryPath, buckets, setActiveDirectory, } = useFilesManager() + const { uploadsList } = useUploadsManager() const { dataset: allContracts } = useContracts() const response = useSWR>( objects.isValidating || buckets.isValidating diff --git a/apps/renterd/contexts/filesManager/index.tsx b/apps/renterd/contexts/filesManager/index.tsx index b97003339..f51ed9f84 100644 --- a/apps/renterd/contexts/filesManager/index.tsx +++ b/apps/renterd/contexts/filesManager/index.tsx @@ -18,7 +18,6 @@ import { getKeyFromPath, pathSegmentsToPath, } from '../../lib/paths' -import { useUploads } from './uploads' import { useBuckets } from '@siafoundation/renterd-react' import { routes } from '../../config/routes' import useLocalStorageState from 'use-local-storage-state' @@ -93,10 +92,6 @@ function useFilesManagerMain() { [router, activeDirectory] ) - const { uploadFiles, uploadsMap, uploadsList } = useUploads({ - activeDirectoryPath, - }) - const isViewingBuckets = activeDirectory.length === 0 const isViewingRootOfABucket = activeDirectory.length === 1 const isViewingABucket = activeDirectory.length > 0 @@ -220,9 +215,6 @@ function useFilesManagerMain() { setActiveDirectoryAndFileNamePrefix, activeDirectoryPath, navigateToModeSpecificFiltering, - uploadFiles, - uploadsMap, - uploadsList, configurableColumns, visibleColumnIds, visibleColumns, diff --git a/apps/renterd/contexts/filesManager/types.ts b/apps/renterd/contexts/filesManager/types.ts index b458b61fa..0779e1ea7 100644 --- a/apps/renterd/contexts/filesManager/types.ts +++ b/apps/renterd/contexts/filesManager/types.ts @@ -1,7 +1,6 @@ import { Bucket } from '@siafoundation/renterd-types' import { FullPath } from '../../lib/paths' import { MultiSelect, TableColumn } from '@siafoundation/design-system' -import { MultipartUpload } from '../../lib/multipartUpload' import { MouseEvent } from 'react' export type ObjectType = 'bucket' | 'directory' | 'file' @@ -81,17 +80,3 @@ export const sortOptions: { id: SortField; label: string; category: string }[] = ] export type ExplorerMode = 'directory' | 'flat' - -export type UploadStatus = 'queued' | 'uploading' | 'processing' - -export type ObjectUploadData = ObjectData & { - multipartId?: string - multipartUpload?: MultipartUpload - uploadStatus: UploadStatus - uploadAbort?: () => Promise - uploadFile?: File - remote?: boolean - createdAt: string -} - -export type UploadsMap = Record diff --git a/apps/renterd/contexts/uploads/types.ts b/apps/renterd/contexts/uploads/types.ts index 0c9593906..ff49d4448 100644 --- a/apps/renterd/contexts/uploads/types.ts +++ b/apps/renterd/contexts/uploads/types.ts @@ -1,5 +1,5 @@ import { TableColumn } from '@siafoundation/design-system' -import { ObjectUploadData } from '../filesManager/types' +import { ObjectUploadData } from '../uploadsManager/types' export type TableColumnId = 'actions' | 'path' | 'status' | 'size' | 'createdAt' diff --git a/apps/renterd/contexts/uploads/useLocalUploads.tsx b/apps/renterd/contexts/uploads/useLocalUploads.tsx index 717a10f80..b32e3a47a 100644 --- a/apps/renterd/contexts/uploads/useLocalUploads.tsx +++ b/apps/renterd/contexts/uploads/useLocalUploads.tsx @@ -6,14 +6,14 @@ import { import { useMemo } from 'react' import { columnsDefaultVisible, defaultSortField, sortOptions } from './types' import { columns } from './columns' -import { useFilesManager } from '../filesManager' -import { ObjectUploadData } from '../filesManager/types' +import { ObjectUploadData } from '../uploadsManager/types' import { Maybe } from '@siafoundation/types' +import { useUploadsManager } from '../uploadsManager' const defaultLimit = 50 export function useLocalUploads() { - const { uploadsList } = useFilesManager() + const { uploadsList } = useUploadsManager() const { limit, offset } = usePaginationOffset(defaultLimit) const datasetPage = useMemo>(() => { diff --git a/apps/renterd/contexts/uploads/useRemoteUploads.tsx b/apps/renterd/contexts/uploads/useRemoteUploads.tsx index 6cd943b48..822b64322 100644 --- a/apps/renterd/contexts/uploads/useRemoteUploads.tsx +++ b/apps/renterd/contexts/uploads/useRemoteUploads.tsx @@ -12,16 +12,17 @@ import { columnsDefaultVisible, defaultSortField, sortOptions } from './types' import { columns } from './columns' import { join, getFilename } from '../../lib/paths' import { useFilesManager } from '../filesManager' -import { ObjectUploadData } from '../filesManager/types' +import { ObjectUploadData } from '../uploadsManager/types' import { MultipartUploadListUploadsPayload } from '@siafoundation/renterd-types' import { maybeFromNullishArrayResponse } from '@siafoundation/react-core' import { Maybe, Nullable } from '@siafoundation/types' -import { getUploadId } from '../filesManager/uploads' +import { getUploadId, useUploadsManager } from '../uploadsManager' const defaultLimit = 50 export function useRemoteUploads() { - const { uploadsMap, activeBucket } = useFilesManager() + const { activeBucket } = useFilesManager() + const { uploadsMap } = useUploadsManager() const { limit, marker } = usePaginationMarker(defaultLimit) const markers = useMarkersFromParam(marker) diff --git a/apps/renterd/contexts/filesManager/uploads.tsx b/apps/renterd/contexts/uploadsManager/index.tsx similarity index 92% rename from apps/renterd/contexts/filesManager/uploads.tsx rename to apps/renterd/contexts/uploadsManager/index.tsx index fdc06fb69..ad12fd9e6 100644 --- a/apps/renterd/contexts/filesManager/uploads.tsx +++ b/apps/renterd/contexts/uploadsManager/index.tsx @@ -1,3 +1,5 @@ +'use client' + import { triggerErrorToast } from '@siafoundation/design-system' import { throttle, @@ -14,7 +16,14 @@ import { } from '@siafoundation/renterd-react' import { Bucket, busObjectsRoute } from '@siafoundation/renterd-types' import { MiBToBytes, minutesInMilliseconds } from '@siafoundation/units' -import { useCallback, useEffect, useMemo, useRef } from 'react' +import { + createContext, + useCallback, + useContext, + useEffect, + useMemo, + useRef, +} from 'react' import { MultipartUpload } from '../../lib/multipartUpload' import { FullPath, @@ -24,6 +33,7 @@ import { } from '../../lib/paths' import { ObjectUploadData, UploadsMap } from './types' import { useWarnActiveUploadsOnClose } from './useWarnActiveUploadsOnClose' +import { useFilesManager } from '../filesManager' const maxConcurrentUploads = 5 const maxConcurrentPartsPerUpload = 5 @@ -31,11 +41,8 @@ const getMultipartUploadPartSize = (minShards: number) => MiBToBytes(4).times(minShards) const checkAndStartUploadsInterval = 500 -type Props = { - activeDirectoryPath: string -} - -export function useUploads({ activeDirectoryPath }: Props) { +function useUploadsManagerMain() { + const { activeDirectoryPath } = useFilesManager() const buckets = useBuckets() const mutate = useMutate() const workerUploadPart = useMultipartUploadPart() @@ -348,6 +355,24 @@ export function useUploads({ activeDirectoryPath }: Props) { } } +export type UploadsManagerState = ReturnType + +const UploadsManagerContext = createContext({} as UploadsManagerState) +export const useUploadsManager = () => useContext(UploadsManagerContext) + +type Props = { + children: React.ReactNode +} + +export function UploadsManagerProvider({ children }: Props) { + const state = useUploadsManagerMain() + return ( + + {children} + + ) +} + export function getUploadId(path: FullPath) { return path } diff --git a/apps/renterd/contexts/uploadsManager/types.ts b/apps/renterd/contexts/uploadsManager/types.ts new file mode 100644 index 000000000..88caf8c2f --- /dev/null +++ b/apps/renterd/contexts/uploadsManager/types.ts @@ -0,0 +1,16 @@ +import { ObjectData } from '../filesManager/types' +import { MultipartUpload } from '../../lib/multipartUpload' + +export type UploadStatus = 'queued' | 'uploading' | 'processing' + +export type ObjectUploadData = ObjectData & { + multipartId?: string + multipartUpload?: MultipartUpload + uploadStatus: UploadStatus + uploadAbort?: () => Promise + uploadFile?: File + remote?: boolean + createdAt: string +} + +export type UploadsMap = Record diff --git a/apps/renterd/contexts/filesManager/useWarnActiveUploadsOnClose.tsx b/apps/renterd/contexts/uploadsManager/useWarnActiveUploadsOnClose.tsx similarity index 100% rename from apps/renterd/contexts/filesManager/useWarnActiveUploadsOnClose.tsx rename to apps/renterd/contexts/uploadsManager/useWarnActiveUploadsOnClose.tsx