Web: Files: Upload panel: fixed files list

packages/client/src/components/panels/UploadPanel/FileRow.js

@@ -12,9 +12,6 @@ import ActionsUploadedFile from "./SubComponents/ActionsUploadedFile";
 import { isMobile } from "react-device-detect";
 import NoUserSelect from "@docspace/components/utils/commonStyles";
 import Button from "@docspace/components/button";
-import globalColors from "@docspace/components/utils/globalColors";
-
-const buttonColor = globalColors.blueDisabled;
 
 const StyledFileRow = styled(Row)`
   width: calc(100% - 16px);
@@ -228,8 +225,6 @@ class FileRow extends Component {
       t,
       item,
       uploaded,
-      //onMediaClick,
-      currentFileUploadProgress,
       fileIcon,
       isMedia,
       ext,
@@ -314,7 +309,7 @@ class FileRow extends Component {
                 data-id={item.uniqueId}
                 onClick={this.onCancelCurrentUpload}
               >
-                <LoadingButton percent={currentFileUploadProgress} />
+                <LoadingButton item={item} />
               </div>
             )}
             {showPasswordInput && (
@@ -365,7 +360,6 @@ export default inject(
     const { canViewedDocs, getIconSrc, isArchive } = settingsStore;
     const {
       uploaded,
-      primaryProgressDataStore,
       cancelCurrentUpload,
       cancelCurrentFileConversion,
       setUploadPanelVisible,
@@ -373,14 +367,12 @@ export default inject(
       convertFile,
       files: uploadedFiles,
       clearUploadedFilesHistory,
-      isParallel,
     } = uploadDataStore;
     const {
       playlist,
       setMediaViewerData,
       setCurrentItem,
     } = mediaViewerDataStore;
-    const { loadingFile: file } = primaryProgressDataStore;
 
     const isMedia =
       item.fileInfo?.viewAccessability?.ImageView ||
@@ -391,29 +383,16 @@ export default inject(
 
     const fileIcon = getIconSrc(ext, 24);
 
-    const loadingFile = !file || !file.uniqueId ? null : file;
-
-    const currentFileUploadProgress =
-      file && loadingFile.uniqueId === item.uniqueId
-        ? loadingFile.percent
-        : null;
-
     const downloadInCurrentTab = isArchive(ext) || !canViewedDocs(ext);
 
     return {
       isPersonal: personal,
       theme,
-      currentFileUploadProgress: isParallel
-        ? item?.percent
-          ? item.percent
-          : null
-        : currentFileUploadProgress,
       uploaded,
-      isMedia,
+      isMedia: !!isMedia,
       fileIcon,
       ext,
       name,
-      loadingFile,
       isMediaActive,
       downloadInCurrentTab,
       removeFileFromList,

packages/client/src/components/panels/UploadPanel/SubComponents/LoadingButton.js

@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from "react";
+import { inject, observer } from "mobx-react";
 import {
   StyledCircle,
-  StyledCircleWrap,
   StyledLoadingButton,
 } from "@docspace/common/components/StyledLoadingButton";
 
@@ -16,7 +16,6 @@ const LoadingButton = (props) => {
     onClick,
     isConversion,
     inConversion,
-    ...rest
   } = props;
   const [isAnimation, setIsAnimation] = useState(true);
 
@@ -61,4 +60,20 @@ const LoadingButton = (props) => {
   );
 };
 
-export default LoadingButton;
+export default inject(({ uploadDataStore }, { item }) => {
+  const { primaryProgressDataStore, isParallel } = uploadDataStore;
+  const { loadingFile: file } = primaryProgressDataStore;
+
+  const loadingFile = !file || !file.uniqueId ? null : file;
+
+  const currentFileUploadProgress =
+    file && loadingFile.uniqueId === item.uniqueId ? loadingFile.percent : null;
+
+  return {
+    percent: isParallel
+      ? item?.percent
+        ? item.percent
+        : null
+      : currentFileUploadProgress,
+  };
+})(observer(LoadingButton));