refactor(renterd): split out uploads manager context

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 =

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()
 

apps/renterd/components/FilesDirectory/FilesExplorer.tsx

@@ -4,17 +4,18 @@ 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,
     toggleSort,
     isViewingBuckets,
     visibleColumns,
   } = useFilesManager()
+  const { uploadFiles } = useUploadsManager()
   const {
     datasetPage,
     datasetPageTotal,

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) {
             <ContractsProvider>
               <HostsProvider>
                 <FilesManagerProvider>
-                  <UploadsProvider>
-                    <FilesDirectoryProvider>
-                      <FilesFlatProvider>
-                        <KeysProvider>
-                          <AlertsProvider>
-                            {/* this is here so that dialogs can use all the other providers,
+                  <UploadsManagerProvider>
+                    <UploadsProvider>
+                      <FilesDirectoryProvider>
+                        <FilesFlatProvider>
+                          <KeysProvider>
+                            <AlertsProvider>
+                              {/* this is here so that dialogs can use all the other providers,
                   and the other providers can trigger dialogs */}
-                            <Dialogs />
-                            {children}
-                          </AlertsProvider>
-                        </KeysProvider>
-                      </FilesFlatProvider>
-                    </FilesDirectoryProvider>
-                  </UploadsProvider>
+                              <Dialogs />
+                              {children}
+                            </AlertsProvider>
+                          </KeysProvider>
+                        </FilesFlatProvider>
+                      </FilesDirectoryProvider>
+                    </UploadsProvider>
+                  </UploadsManagerProvider>
                 </FilesManagerProvider>
               </HostsProvider>
             </ContractsProvider>

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<Maybe<ObjectData[]>>(
     objects.isValidating || buckets.isValidating

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,

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<void>
-  uploadFile?: File
-  remote?: boolean
-  createdAt: string
-}
-
-export type UploadsMap = Record<string, ObjectUploadData>

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'
 

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 = 500
 
 export function useLocalUploads() {
-  const { uploadsList } = useFilesManager()
+  const { uploadsList } = useUploadsManager()
   const { limit, offset } = usePaginationOffset(defaultLimit)
 
   const datasetPage = useMemo<Maybe<ObjectUploadData[]>>(() => {

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 = 500
 
 export function useRemoteUploads() {
-  const { uploadsMap, activeBucket } = useFilesManager()
+  const { activeBucket } = useFilesManager()
+  const { uploadsMap } = useUploadsManager()
   const { limit, marker } = usePaginationMarker(defaultLimit)
   const markers = useMarkersFromParam(marker)
 

apps/renterd/contexts/filesManager/uploads.tsx → 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,18 +33,16 @@ import {
 } from '../../lib/paths'
 import { ObjectUploadData, UploadsMap } from './types'
 import { useWarnActiveUploadsOnClose } from './useWarnActiveUploadsOnClose'
+import { useFilesManager } from '../filesManager'
 
 const maxConcurrentUploads = 5
 const maxConcurrentPartsPerUpload = 5
 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<typeof useUploadsManagerMain>
+
+const UploadsManagerContext = createContext({} as UploadsManagerState)
+export const useUploadsManager = () => useContext(UploadsManagerContext)
+
+type Props = {
+  children: React.ReactNode
+}
+
+export function UploadsManagerProvider({ children }: Props) {
+  const state = useUploadsManagerMain()
+  return (
+    <UploadsManagerContext.Provider value={state}>
+      {children}
+    </UploadsManagerContext.Provider>
+  )
+}
+
 export function getUploadId(path: FullPath) {
   return path
 }

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<void>
+  uploadFile?: File
+  remote?: boolean
+  createdAt: string
+}
+
+export type UploadsMap = Record<string, ObjectUploadData>