Create `getObjectOfFilesPerState` in core for plugins (#2961)

packages/@uppy/core/src/index.js

@@ -223,22 +223,8 @@ class Uppy {
     }
 
     this.addListeners()
-
-    // Re-enable if we’ll need some capabilities on boot, like isMobileDevice
-    // this._setCapabilities()
   }
 
-  // _setCapabilities = () => {
-  //   const capabilities = {
-  //     isMobileDevice: isMobileDevice()
-  //   }
-
-  //   this.setState({
-  //     ...this.getState().capabilities,
-  //     capabilities
-  //   })
-  // }
-
   on (event, callback) {
     this.emitter.on(event, callback)
     return this
@@ -428,7 +414,44 @@ class Uppy {
    */
   getFiles () {
     const { files } = this.getState()
-    return Object.keys(files).map((fileID) => files[fileID])
+    return Object.values(files)
+  }
+
+  getObjectOfFilesPerState () {
+    const { files: filesObject, totalProgress, error } = this.getState()
+    const files = Object.values(filesObject)
+    const inProgressFiles = files.filter(({ progress }) => !progress.uploadComplete && progress.uploadStarted)
+    const newFiles =  files.filter((file) => !file.progress.uploadStarted)
+    const startedFiles = files.filter(
+      file => file.progress.uploadStarted || file.progress.preprocess || file.progress.postprocess
+    )
+    const uploadStartedFiles = files.filter((file) => file.progress.uploadStarted)
+    const pausedFiles = files.filter((file) => file.isPaused)
+    const completeFiles = files.filter((file) => file.progress.uploadComplete)
+    const erroredFiles = files.filter((file) => file.error)
+    const inProgressNotPausedFiles = inProgressFiles.filter((file) => !file.isPaused)
+    const processingFiles = files.filter((file) => file.progress.preprocess || file.progress.postprocess)
+
+    return {
+      newFiles,
+      startedFiles,
+      uploadStartedFiles,
+      pausedFiles,
+      completeFiles,
+      erroredFiles,
+      inProgressFiles,
+      inProgressNotPausedFiles,
+      processingFiles,
+
+      isUploadStarted: uploadStartedFiles.length > 0,
+      isAllComplete: totalProgress === 100
+        && completeFiles.length === files.length
+        && processingFiles.length === 0,
+      isAllErrored: !!error && erroredFiles.length === files.length,
+      isAllPaused: inProgressFiles.length !== 0 && pausedFiles.length === inProgressFiles.length,
+      isUploadInProgress: inProgressFiles.length > 0,
+      isSomeGhost: files.some(file => file.isGhost),
+    }
   }
 
   /**

packages/@uppy/core/types/index.d.ts

@@ -189,6 +189,24 @@ declare module Uppy {
       TMeta extends IndexedObject<any> = {},
       TBody extends IndexedObject<any> = {}
     >(): Array<UppyFile<TMeta, TBody>>
+    getObjectOfFilesPerState(): {
+      newFiles: Array<UppyFile>,
+      startedFiles: Array<UppyFile>,
+      uploadStartedFiles: Array<UppyFile>,
+      pausedFiles: Array<UppyFile>,
+      completeFiles: Array<UppyFile>,
+      erroredFiles: Array<UppyFile>,
+      inProgressFiles: Array<UppyFile>,
+      inProgressNotPausedFiles: Array<UppyFile>,
+      processingFiles: Array<UppyFile>,
+
+      isUploadStarted: boolean,
+      isAllComplete: boolean,
+      isAllErrored: boolean,
+      isAllPaused: boolean,
+      isUploadInProgress: boolean,
+      isSomeGhost: boolean,
+    }
     addFile<TMeta extends IndexedObject<any> = {}>(
       file: AddFileOptions<TMeta>
     ): string

packages/@uppy/dashboard/src/index.js

@@ -871,53 +871,20 @@ module.exports = class Dashboard extends UIPlugin {
   render = (state) => {
     const pluginState = this.getPluginState()
     const { files, capabilities, allowNewUpload } = state
+    const {
+      newFiles,
+      uploadStartedFiles,
+      completeFiles,
+      erroredFiles,
+      inProgressFiles,
+      inProgressNotPausedFiles,
+      processingFiles,
 
-    // TODO: move this to Core, to share between Status Bar and Dashboard
-    // (and any other plugin that might need it, too)
-    const newFiles = Object.keys(files).filter((file) => {
-      return !files[file].progress.uploadStarted
-    })
-
-    const uploadStartedFiles = Object.keys(files).filter((file) => {
-      return files[file].progress.uploadStarted
-    })
-
-    const pausedFiles = Object.keys(files).filter((file) => {
-      return files[file].isPaused
-    })
-
-    const completeFiles = Object.keys(files).filter((file) => {
-      return files[file].progress.uploadComplete
-    })
-
-    const erroredFiles = Object.keys(files).filter((file) => {
-      return files[file].error
-    })
-
-    const inProgressFiles = Object.keys(files).filter((file) => {
-      return !files[file].progress.uploadComplete
-             && files[file].progress.uploadStarted
-    })
-
-    const inProgressNotPausedFiles = inProgressFiles.filter((file) => {
-      return !files[file].isPaused
-    })
-
-    const processingFiles = Object.keys(files).filter((file) => {
-      return files[file].progress.preprocess || files[file].progress.postprocess
-    })
-
-    const isUploadStarted = uploadStartedFiles.length > 0
-
-    const isAllComplete = state.totalProgress === 100
-      && completeFiles.length === Object.keys(files).length
-      && processingFiles.length === 0
-
-    const isAllErrored = isUploadStarted
-      && erroredFiles.length === uploadStartedFiles.length
-
-    const isAllPaused = inProgressFiles.length !== 0
-      && pausedFiles.length === inProgressFiles.length
+      isUploadStarted,
+      isAllComplete,
+      isAllErrored,
+      isAllPaused,
+    } = this.uppy.getObjectOfFilesPerState()
 
     const acquirers = this._getAcquirers(pluginState.targets)
     const progressindicators = this._getProgressIndicators(pluginState.targets)

packages/@uppy/status-bar/src/index.js

@@ -1,10 +1,10 @@
 const { UIPlugin } = require('@uppy/core')
 const Translator = require('@uppy/utils/lib/Translator')
-const StatusBarUI = require('./StatusBar')
-const statusBarStates = require('./StatusBarStates')
 const getSpeed = require('@uppy/utils/lib/getSpeed')
 const getBytesRemaining = require('@uppy/utils/lib/getBytesRemaining')
 const getTextDirection = require('@uppy/utils/lib/getTextDirection')
+const statusBarStates = require('./StatusBarStates')
+const StatusBarUI = require('./StatusBar')
 
 /**
  * StatusBar: renders a status bar with upload/pause/resume/cancel/retry buttons,
@@ -132,7 +132,7 @@ module.exports = class StatusBar extends UIPlugin {
     let state = statusBarStates.STATE_WAITING
     const fileIDs = Object.keys(files)
     for (let i = 0; i < fileIDs.length; i++) {
-      const progress = files[fileIDs[i]].progress
+      const { progress } = files[fileIDs[i]]
       // If ANY files are being uploaded right now, show the uploading state.
       if (progress.uploadStarted && !progress.uploadComplete) {
         return statusBarStates.STATE_UPLOADING
@@ -161,69 +161,36 @@ module.exports = class StatusBar extends UIPlugin {
       recoveredState,
     } = state
 
-    // TODO: move this to Core, to share between Status Bar and Dashboard
-    // (and any other plugin that might need it, too)
-
-    const filesArray = Object.keys(files).map(file => files[file])
+    const {
+      newFiles,
+      startedFiles,
+      completeFiles,
+      inProgressNotPausedFiles,
 
-    let newFiles = filesArray.filter((file) => {
-      return !file.progress.uploadStarted
-        && !file.progress.preprocess
-        && !file.progress.postprocess
-    })
+      isUploadStarted,
+      isAllComplete,
+      isAllErrored,
+      isAllPaused,
+      isUploadInProgress,
+      isSomeGhost,
+    } = this.uppy.getObjectOfFilesPerState()
 
     // If some state was recovered, we want to show Upload button/counter
     // for all the files, because in this case it’s not an Upload button,
     // but “Confirm Restore Button”
-    if (recoveredState) {
-      newFiles = filesArray
-    }
-
-    const uploadStartedFiles = filesArray.filter(file => file.progress.uploadStarted)
-    const pausedFiles = uploadStartedFiles.filter(file => file.isPaused)
-    const completeFiles = filesArray.filter(file => file.progress.uploadComplete)
-    const erroredFiles = filesArray.filter(file => file.error)
-
-    const inProgressFiles = filesArray.filter((file) => {
-      return !file.progress.uploadComplete
-             && file.progress.uploadStarted
-    })
-
-    const inProgressNotPausedFiles = inProgressFiles.filter(file => !file.isPaused)
-
-    const startedFiles = filesArray.filter((file) => {
-      return file.progress.uploadStarted
-        || file.progress.preprocess
-        || file.progress.postprocess
-    })
-
-    const processingFiles = filesArray.filter(file => file.progress.preprocess || file.progress.postprocess)
-
+    const newFilesOrRecovered = recoveredState ? Object.values(files) : newFiles
     const totalETA = this.getTotalETA(inProgressNotPausedFiles)
+    const resumableUploads = !!capabilities.resumableUploads
+    const supportsUploadProgress = capabilities.uploadProgress !== false
 
     let totalSize = 0
     let totalUploadedSize = 0
+
     startedFiles.forEach((file) => {
       totalSize += (file.progress.bytesTotal || 0)
       totalUploadedSize += (file.progress.bytesUploaded || 0)
     })
 
-    const isUploadStarted = startedFiles.length > 0
-
-    const isAllComplete = totalProgress === 100
-      && completeFiles.length === Object.keys(files).length
-      && processingFiles.length === 0
-
-    const isAllErrored = error && erroredFiles.length === filesArray.length
-
-    const isAllPaused = inProgressFiles.length !== 0
-      && pausedFiles.length === inProgressFiles.length
-
-    const isUploadInProgress = inProgressFiles.length > 0
-    const resumableUploads = capabilities.resumableUploads || false
-    const supportsUploadProgress = capabilities.uploadProgress !== false
-    const isSomeGhost = filesArray.some((file) => file.isGhost)
-
     return StatusBarUI({
       error,
       uploadState: this.getUploadingState(isAllErrored, isAllComplete, recoveredState, state.files || {}),
@@ -239,7 +206,7 @@ module.exports = class StatusBar extends UIPlugin {
       isSomeGhost,
       recoveredState,
       complete: completeFiles.length,
-      newFiles: newFiles.length,
+      newFiles: newFilesOrRecovered.length,
       numUploads: startedFiles.length,
       totalETA,
       files,
@@ -272,7 +239,7 @@ module.exports = class StatusBar extends UIPlugin {
   }
 
   install () {
-    const target = this.opts.target
+    const { target } = this.opts
     if (target) {
       this.mount(target, this)
     }