Feat/files progress feedback (#1495)

package.json

@@ -43,7 +43,7 @@
     "i18next-xhr-backend": "^3.2.2",
     "internal-nav-helper": "^3.1.0",
     "ip": "^1.1.5",
-    "ipfs-css": "^1.0.0",
+    "ipfs-css": "^1.1.0",
     "ipfs-geoip": "^4.0.0",
     "ipfs-redux-bundle": "^7.0.0",
     "ipld-explorer-components": "^1.5.1",
@@ -75,6 +75,7 @@
     "react-overlays": "^2.1.0",
     "react-router-dom": "^5.1.2",
     "react-scripts": "3.3.0",
+    "react-spring": "^8.0.27",
     "react-test-renderer": "^16.12.0",
     "react-virtualized": "^9.21.2",
     "redux-bundler": "^26.0.0",

public/locales/en/files.json

@@ -75,6 +75,13 @@
   "filesList": {
     "noFiles": "<0>No files in this directory. Click the “Add” button to add some.</0>"
   },
+  "filesImportStatus": {
+    "imported": "{count, plural, one {Imported 1 item} other {Imported {count} items}}",
+    "importing": "{count, plural, one {Importing 1 item} other {Importing {count} items}}",
+    "toggleDropdown": "Toggle dropdown",
+    "closeDropdown": "Close dropdown",
+    "count": "{count} of {count}"
+  },
   "addFilesInfo": "<0>Add files to your local IPFS node by clicking the <1>Add to IPFS</1> button above.</0>",
   "companionInfo": "<0>As you are using <1>IPFS Companion</1>, the files view is limited to files added while using the extension.</0>",
   "tour": {

src/bundles/files/actions.js

@@ -179,8 +179,17 @@ export default () => ({
       }
     })
 
+    const paths = files.map(f => ({ path: f.path, size: f.size }))
+
     const updateProgress = (sent) => {
-      dispatch({ type: 'FILES_WRITE_UPDATED', payload: { id: id, progress: sent / totalSize * 100 } })
+      dispatch({
+        type: 'FILES_WRITE_UPDATED',
+        payload: {
+          id,
+          paths,
+          progress: sent / totalSize * 100
+        }
+      })
     }
 
     updateProgress(0)
@@ -273,6 +282,8 @@ export default () => ({
     dispatch({ type: 'FILES_UPDATE_SORT', payload: { by, asc } })
   },
 
+  doFilesClear: () => async ({ dispatch }) => dispatch({ type: 'FILES_CLEAR_ALL' }),
+
   doFilesSizeGet: make(ACTIONS.FILES_SIZE_GET, async (ipfs) => {
     const stat = await ipfs.files.stat('/')
     return { size: stat.cumulativeSize }

src/bundles/files/index.js

@@ -23,6 +23,15 @@ export default () => {
         }
       }
 
+      if (action.type === 'FILES_CLEAR_ALL') {
+        return {
+          ...state,
+          failed: [],
+          finished: [],
+          pending: []
+        }
+      }
+
       if (action.type === 'FILES_UPDATE_SORT') {
         const pageContent = state.pageContent
 
@@ -65,7 +74,10 @@ export default () => {
             ...state.pending.filter(a => a.id !== id),
             {
               ...pendingAction,
-              data: data
+              data: {
+                ...data,
+                hasError: true
+              }
             }
           ]
         }

src/bundles/files/selectors.js

@@ -18,16 +18,9 @@ export default () => ({
 
   selectFilesSorting: (state) => state.files.sorting,
 
-  selectWriteFilesProgress: (state) => {
-    const writes = state.files.pending.filter(s => s.type === ACTIONS.WRITE && s.data.progress)
+  selectFilesPending: (state) => state.files.pending.filter(s => s.type === ACTIONS.WRITE && s.data.progress),
 
-    if (writes.length === 0) {
-      return null
-    }
-
-    const sum = writes.reduce((acc, s) => s.data.progress + acc, 0)
-    return sum / writes.length
-  },
+  selectFilesFinished: (state) => state.files.finished.filter(s => s.type === ACTIONS.WRITE),
 
   selectFilesHasError: (state) => state.files.failed.length > 0,
 

src/bundles/files/utils.js

@@ -18,7 +18,17 @@ export const make = (basename, action, options = {}) => (...args) => async (args
 
   try {
     data = await action(getIpfs(), ...args, id, args2)
-    dispatch({ type: `FILES_${basename}_FINISHED`, payload: { id, ...data } })
+
+    const paths = args[0] ? args[0].flat() : []
+
+    dispatch({
+      type: `FILES_${basename}_FINISHED`,
+      payload: {
+        id,
+        ...data,
+        paths
+      }
+    })
 
     // Rename specific logic
     if (basename === ACTIONS.MOVE) {

src/components/notify/Toast.js

@@ -1,5 +1,5 @@
 import React from 'react'
-import CancelIcon from '../../icons/GlyphCancel'
+import CancelIcon from '../../icons/GlyphSmallCancel'
 
 const Toast = ({ error, children, onDismiss }) => {
   const bg = error ? 'bg-yellow' : 'bg-green'
@@ -9,7 +9,7 @@ const Toast = ({ error, children, onDismiss }) => {
         {children}
         <CancelIcon
           className='dib fill-current-color ph3 glow o-80 pointer'
-          style={{ height: '28px', verticalAlign: '-8px' }}
+          style={{ height: '28px', transform: 'scale(1.5)', verticalAlign: 'bottom' }}
           onClick={onDismiss} />
       </div>
     </div>

src/files/FilesPage.js

@@ -19,6 +19,7 @@ import { getJoyrideLocales } from '../helpers/i8n'
 // Icons
 import Modals, { DELETE, NEW_FOLDER, SHARE, RENAME, ADD_BY_PATH } from './modals/Modals'
 import Header from './header/Header'
+import FileImportStatus from './file-import-status/FileImportStatus'
 
 const defaultState = {
   downloadAbort: null,
@@ -258,6 +259,8 @@ class FilesPage extends React.Component {
           onAddByPath={this.onAddByPath}
           { ...this.state.modals } />
 
+        <FileImportStatus />
+
         <ReactJoyride
           run={toursEnabled}
           steps={filesTour.getSteps({ t, Trans })}

src/files/file-import-status/FileImportStatus.css

@@ -0,0 +1,63 @@
+.fileImportStatus {
+    left: 50%;
+    transform: translateX(-50%);
+}
+
+.fileImportStatusButton {
+    max-height: 3rem;
+}
+
+.fileImportStatusButton .fileImportStatusArrow {
+    transition: transform 0.2s ease-in-out;
+}
+
+.fileImportStatusButton[aria-expanded="false"] .fileImportStatusArrow {
+    transform: rotate(180deg) translateY(-2px);
+}
+
+.fileImportStatusArrow {
+    margin-left: auto;
+    width: 1rem;
+}
+
+.fileImportStatusCancel {
+    height: 3rem;
+    margin-left: 0.5rem;
+    margin-right: -1.2rem;
+}
+
+.fileImportStatusRow {
+    height: 153px;
+    overflow: auto;
+
+    transition: height 0.2s ease-in-out;
+}
+
+.fileImportStatusRow[aria-hidden="true"] {
+    height: 0
+}
+
+.fileImportStatusIcon {
+    width: 36px;
+}
+
+.fileLoadingIndicator {
+    height: 4px;
+    overflow: hidden;
+}
+
+.fileLoadingIndicatorBar {
+    width: 25%;
+    height: 100%;
+    animation: fileLoadingIndicatorBar 2s ease-in-out infinite;
+}
+
+@keyframes fileLoadingIndicatorBar {
+    0% { transform: translateX(-100%) }
+    99.9% { transform: translateX(450%) }
+    100% { transform: translateX(-100%) }
+}
+
+.fileImportStatusName {
+    flex: 1 1;
+}

src/files/file-import-status/FileImportStatus.js

@@ -0,0 +1,116 @@
+import React, { useMemo, useState, useCallback } from 'react'
+import classNames from 'classnames'
+import filesize from 'filesize'
+import PropTypes from 'prop-types'
+import { connect } from 'redux-bundler-react'
+import { withTranslation } from 'react-i18next'
+// Icons
+import DocumentIcon from '../../icons/GlyphDocGeneric'
+import FolderIcon from '../../icons/GlyphFolder'
+import './FileImportStatus.css'
+import GlyphSmallArrows from '../../icons/GlyphSmallArrow'
+import GlyphTick from '../../icons/GlyphTick'
+import GlyphCancel from '../../icons/GlyphCancel'
+import GlyphSmallCancel from '../../icons/GlyphSmallCancel'
+
+const File = ({ paths = [], hasError }, t) => {
+  const pathsByFolder = paths.reduce((prev, currentPath) => {
+    const isFolder = currentPath.path.includes('/')
+    if (!isFolder) {
+      return [...prev, currentPath]
+    }
+
+    const baseFolder = currentPath.path.split('/')[0]
+
+    const alreadyExistentBaseFolder = prev.find(previousPath => previousPath.path.startsWith(`${baseFolder}/`))
+
+    if (alreadyExistentBaseFolder) {
+      alreadyExistentBaseFolder.count = alreadyExistentBaseFolder.count + 1
+
+      return prev
+    }
+
+    return [...prev, { ...currentPath, name: baseFolder, count: 1 }]
+  }, [])
+
+  return pathsByFolder.map(({ count, name, path, size, progress }) => (
+    <li className="flex w-100 bb b--light-gray items-center f6 charcoal" key={ path || name }>
+      { count ? <FolderIcon className='fileImportStatusIcon fill-aqua pa1'/> : <DocumentIcon className='fileImportStatusIcon fill-aqua pa1'/> }
+      <span className="fileImportStatusName truncate">{ name || path }</span>
+      <span className='gray mh2'> |
+        { count && (<span> { t('filesImportStatus.count', { count }) } | </span>) }
+        <span className='ml2'>{ filesize(size) }</span>
+      </span>
+      { hasError ? <GlyphCancel className="dark-red w2 ph1" fill="currentColor"/> : <LoadingIndicator complete={ !progress }/> }
+    </li>
+  ))
+}
+
+const LoadingIndicator = ({ complete }) => (
+  <>
+    <div className={ classNames('fileLoadingIndicator bg-light-gray mh4 flex-auto relative', complete && 'dn') }>
+      <div className='fileLoadingIndicatorBar bg-blue absolute left-0'></div>
+    </div>
+    { complete && <GlyphTick className="green w2 ph1" fill="currentColor"/>}
+  </>
+)
+
+const FileImportStatus = ({ filesFinished, filesPending, filesErrors, doFilesClear, t }) => {
+  const sortedFilesFinished = useMemo(() => filesFinished.sort((fileA, fileB) => fileB.start - fileA.start), [filesFinished])
+  const [expanded, setExpanded] = useState(true)
+
+  const handleImportStatusClose = useCallback((ev) => {
+    doFilesClear()
+    ev.stopPropagation() // Prevent setExpanded from being called
+  }, [doFilesClear])
+
+  if (!filesFinished.length && !filesPending.length && !filesErrors.length) {
+    return null
+  }
+
+  const numberOfImportedFiles = !filesFinished.length ? 0 : filesFinished.reduce((prev, finishedFile) => prev + finishedFile?.data?.paths?.length, 0)
+
+  return (
+    <div className='fileImportStatus fixed bottom-1 w-100 flex justify-center' style={{ zIndex: 14, pointerEvents: 'none' }}>
+      <div className="br1 dark-gray w-40 center ba b--light-gray bg-white" style={{ pointerEvents: 'auto' }}>
+        <div className="fileImportStatusButton pv2 ph3 relative flex items-center no-select pointer charcoal" style={{ background: '#F0F6FA' }}
+          onClick={() => setExpanded(!expanded)} aria-expanded={expanded} aria-label={ t('filesImportStatus.toggleDropdown') } role="button">
+          { filesPending.length
+            ? t('filesImportStatus.importing', { count: filesPending.length })
+            : t('filesImportStatus.imported', { count: numberOfImportedFiles })
+          }
+          <GlyphSmallArrows className='fileImportStatusArrow' fill="currentColor" opacity="0.7"/>
+          <div onClick={ handleImportStatusClose } aria-label={ t('filesImportStatus.closeDropdown') } role="button">
+            <GlyphSmallCancel className='fileImportStatusCancel' fill="currentColor" opacity="0.7"/>
+          </div>
+        </div>
+        <ul className='fileImportStatusRow pa0 ma0' aria-hidden={!expanded}>
+          { filesPending.map(file => File(file.data, t)) }
+          { sortedFilesFinished.map(file => File(file.data, t)) }
+          { filesErrors.map(file => File(file.data, t)) }
+        </ul>
+      </div>
+    </div>
+  )
+}
+
+FileImportStatus.propTypes = {
+  filesFinished: PropTypes.array,
+  filesPending: PropTypes.array,
+  filesErrors: PropTypes.array,
+  doFilesClear: PropTypes.func
+}
+
+FileImportStatus.defaultProps = {
+  filesFinished: [],
+  filesPending: [],
+  filesErrors: []
+}
+
+export default connect(
+  'selectFilesFinished',
+  'selectFilesPending',
+  'selectFilesErrors',
+  'doFilesClear',
+  withTranslation('files')(FileImportStatus)
+)