refactor(renterd): split out uploads manager context

Author: alexfreska

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/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 { useDownloads } from './downloads'
 import { useBuckets } from '@siafoundation/renterd-react'
 import { routes } from '../../config/routes'
@@ -94,9 +93,6 @@ function useFilesManagerMain() {
     [router, activeDirectory]
   )
 
-  const { uploadFiles, uploadsMap, uploadsList } = useUploads({
-    activeDirectoryPath,
-  })
   const { downloadFiles, downloadsList, getFileUrl, downloadCancel } =
     useDownloads()
 
@@ -223,9 +219,6 @@ function useFilesManagerMain() {
     setActiveDirectoryAndFileNamePrefix,
     activeDirectoryPath,
     navigateToModeSpecificFiltering,
-    uploadFiles,
-    uploadsMap,
-    uploadsList,
     downloadFiles,
     downloadsList,
     downloadCancel,

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/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,15 +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 { 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)