feat: Upload progress feedback (#1261)

* feat: Upload progress component increments file upload percentage * fix: Linting errors * test: Upload rate calculation * test: Upload rate calculation * test: Upload rate calculation * chore: Code formating * test: Rate calculation * test: Fix miss named object property * test: Add upload progress cleanup function * test: Upload rate calculation integrated into percentage value * fix: Linting errors * test: Update upload rate increment value * test: Update upload rate increment value * test: Rate calculation moved to UploadProgress component * test: Set interval to update progress * cleanup: Commented out code removed, console log statements removed
web3-storage · May 16, 2022 · 3392a06 · 3392a06
1 parent 86ddacf
commit 3392a06
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 7 deletions.
diff --git a/packages/website/components/account/fileUploader/fileUploader.js b/packages/website/components/account/fileUploader/fileUploader.js
@@ -64,7 +64,7 @@ const FileUploader = ({ className = '', content, uploadModalState, background })
   // Mapped out file progress info
   const filesInfo = useMemo(
     () =>
-      Object.values(uploadsProgress.files).map(({ inputFile, progress, uploadId, status }) => ({
+      Object.values(uploadsProgress.files).map(({ inputFile, progress, uploadId, status }, i) => ({
         uploadId,
         name: inputFile.name,
         progress: progress.percentage,

diff --git a/packages/website/modules/zero/components/dropzone/dropzone.js b/packages/website/modules/zero/components/dropzone/dropzone.js
@@ -1,6 +1,7 @@
 import clsx from 'clsx';
 import { useCallback, Fragment, useState } from 'react';
 import { useDropzone } from 'react-dropzone';
+import UploadProgress from './uploadProgress';
 
 /**
  * @typedef {Object} DropzoneProps
@@ -16,7 +17,7 @@ import { useDropzone } from 'react-dropzone';
  *          progress: number,
  *          name: string, uploadId:
  *          string,
- *          failed: boolean
+ *          failed: boolean,
  *        }[]} [filesInfo] external upload information of files
  * @prop {{loading: string, complete: string, failed: string}} [content]
  */
@@ -64,17 +65,17 @@ const Dropzone = ({
         {dragAreaText && <p className="dragAreaText">{dragAreaText}</p>}
       </div>
       <div className="filelist">
-        {filesInfo.map(fileInfo => (
+        {filesInfo.map((fileInfo, i) => (
           <Fragment key={`file-${fileInfo.uploadId}`}>
             <div className="filename">{fileInfo.name}</div>
             <div className="status">
               {!!fileInfo.failed
                 ? content.failed
                 : fileInfo.progress !== 100
-                ? <div className="loading-c">
-                    <span className="loading-label">{content.loading}</span>
-                    <span className="loading-count">{fileInfo.progress || 0}%</span>
-                  </div>
+                ? <UploadProgress
+                    label={content.loading}
+                    progress={fileInfo.progress}
+                  />
                 : content.complete}
             </div>
           </Fragment>

diff --git a/packages/website/modules/zero/components/dropzone/uploadProgress.js b/packages/website/modules/zero/components/dropzone/uploadProgress.js
@@ -0,0 +1,49 @@
+import clsx from 'clsx';
+import { useState, useEffect, useRef } from 'react';
+
+/**
+ * @prop {string} [label]
+ * @prop {number} [progress]
+ */
+
+const UploadProgress = ({ label, progress }) => {
+  const [displayValue, setDisplayValue] = useState(0);
+  const lastChunkProgress = useRef(0);
+  const lastChunkTime = useRef(0);
+  const rate = useRef(0.1);
+  const fps = 1;
+  const fpsInterval = 1000 / fps;
+
+  const incrementDisplayValue = () => {
+    setDisplayValue(displayValue => displayValue + rate.current);
+  }
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      incrementDisplayValue();
+    }, 1000);
+    return () => {
+      clearInterval(interval);
+    };
+  }, []);
+
+  useEffect(() => {
+    if (lastChunkProgress.current === 0 || lastChunkTime.current === 0) {
+      rate.current = 0.1;
+    } else {
+      rate.current = Math.min(3, Math.max(0.1, ((progress - lastChunkProgress.current) / (Date.now() - lastChunkTime.current)) * 100));
+    }
+    setDisplayValue(progress);
+    lastChunkProgress.current = progress;
+    lastChunkTime.current = Date.now();
+  }, [progress]);
+
+  return (
+    <div className="loading-c">
+      <span className="loading-label">{label}</span>
+      <span className="loading-count">{Math.min(displayValue, 99.9).toFixed(1)}%</span>
+    </div>
+  );
+}
+
+export default UploadProgress;