more upload changes

src/components/Uploader/Uploader.jsx

@@ -1,38 +0,0 @@
-import { useAppSelector } from "../../hooks/store";
-import UploadItem from "../UploadItem";
-import React from "react";
-
-const Uploader = React.forwardRef((props, ref) => {
-  const uploads = useAppSelector((state) => state.uploader.uploads);
-
-  return (
-    <div className="upload__status">
-      <div className="head__upload">
-        <p>
-          Uploading {uploads.length} {uploads.length === 1 ? "file" : "files"}
-        </p>
-        <div className="hide__upload">
-          <a onClick={() => props.minimizeUploader()}>
-            <img src="/assets/upload_hide.svg" alt="upload__hide" />
-          </a>
-          <a onClick={() => props.cancelAllUploadsEvent()}>
-            <img
-              src="/assets/close-white.svg"
-              style={{ height: "24px" }}
-              alt="upload__hide"
-            />
-          </a>
-        </div>
-      </div>
-      <div className="content__upload">
-        {props.uploaderShow
-          ? uploads.map((upload) => {
-              return <UploadItem key={upload.id} {...upload} />;
-            })
-          : undefined}
-      </div>
-    </div>
-  );
-});
-
-export default Uploader;

src/components/Uploader/index.jsx

@@ -1,60 +0,0 @@
-import Uploader from "./Uploader";
-import {showUploader, hideUploader} from "../../actions/main";
-import {startCancelAllUploads} from "../../actions/uploads";
-import {connect} from "react-redux";
-import React from "react";
-
-class UploaderContainer extends React.Component {
-    
-    constructor(props) {
-        super(props);
-
-        this.uploaderWrapper = React.createRef()
-        this.prevUploadLength = 0;
-    }
-
-    minimizeUploader = () => {
-    
-        const uploaderShow = this.props.uploaderShow;
-        const dispatch = this.props.dispatch;
-    
-        if (uploaderShow) {
-    
-            dispatch(hideUploader())
-    
-        } else {
-    
-            dispatch(showUploader())
-        }
-    }
-    
-    cancelAllUploadsEvent = () => {
-    
-        this.props.dispatch(startCancelAllUploads(this.props.uploads))
-    }
-
-    componentDidUpdate = () => {
-
-        if (this.props.uploads.length !== this.prevUploadLength) {
-            if (this.uploaderWrapper.current) this.uploaderWrapper.current.scrollTop = 0;
-        }
-
-        this.prevUploadLength = this.props.uploads.length;
-    }
-
-    render() {
-        return <Uploader 
-                minimizeUploader={this.minimizeUploader}
-                cancelAllUploadsEvent={this.cancelAllUploadsEvent}
-                ref={this.uploaderWrapper}
-                {...this.props}/>
-    }
-
-}
-
-const connectStateToProp = (state) => ({
-    uploads: state.uploads,
-    uploaderShow: state.main.uploaderShow
-})
-
-export default connect(connectStateToProp)(UploaderContainer);

src/components/Uploader/index.tsx

@@ -0,0 +1,61 @@
+import { useAppDispatch, useAppSelector } from "../../hooks/store";
+import CloseIcon from "../../icons/CloseIcon";
+import MinimizeIcon from "../../icons/MinimizeIcon";
+import { resetUploads } from "../../reducers/uploader";
+import { cancelAllFileUploads } from "../../utils/cancelTokenManager";
+import UploadItem from "../UploadItem";
+import { memo, useMemo, useState } from "react";
+
+const Uploader = memo(() => {
+  const [minimized, setMinimized] = useState(false);
+  const uploads = useAppSelector((state) => state.uploader.uploads);
+  const dispatch = useAppDispatch();
+
+  const toggleMinimize = () => {
+    setMinimized(!minimized);
+  };
+
+  const uploadTitle = useMemo(() => {
+    const uploadedCount = uploads.filter((upload) => upload.completed).length;
+    const currentlyUploadingCount = uploads.filter(
+      (upload) => !upload.completed
+    ).length;
+
+    if (currentlyUploadingCount) {
+      return `Uploading ${currentlyUploadingCount} file${
+        currentlyUploadingCount > 1 ? "s" : ""
+      }`;
+    } else {
+      return `Uploaded ${uploadedCount} file${uploadedCount > 1 ? "s" : ""}`;
+    }
+  }, [uploads]);
+
+  const closeUploader = () => {
+    cancelAllFileUploads();
+    dispatch(resetUploads());
+  };
+
+  return (
+    <div className="fixed bottom-0 right-[20px] z-10 bg-white shadow-lg rounded-t-md w-[315px]">
+      <div className="flex flex-row bg-[#3c85ee] justify-between p-4 rounded-t-md">
+        <p className="text-white">{uploadTitle}</p>
+        <div className="flex flex-row items-center justify-center">
+          <a onClick={toggleMinimize}>
+            <MinimizeIcon className="w-[24px] h-[24px] text-white cursor-pointer mr-2" />
+          </a>
+          <a onClick={closeUploader}>
+            <CloseIcon className="w-[24px] h-[24px] text-white" />
+          </a>
+        </div>
+      </div>
+      <div className="overflow-y-scroll animate max-h-[300px]">
+        {!minimized &&
+          uploads.map((upload) => {
+            return <UploadItem key={upload.id} {...upload} />;
+          })}
+      </div>
+    </div>
+  );
+});
+
+export default Uploader;