From d1269cd55de23d24dff383129b460cf33588ad46 Mon Sep 17 00:00:00 2001
From: timothycarambat <rambat1010@gmail.com>
Date: Fri, 26 Apr 2024 17:37:22 -0700
Subject: [PATCH 1/2] Improve uploader expierence - Wipe upload container
 (fadeout) after uploading - debounce fetchKeys by 1s

---
 .../UploadFile/FileUploadProgress/index.jsx   | 39 +++++++++++++--
 .../Documents/UploadFile/index.jsx            | 14 +++---
 frontend/src/index.css                        | 50 +++++++++++++++++++
 3 files changed, 91 insertions(+), 12 deletions(-)

diff --git a/frontend/src/components/Modals/MangeWorkspace/Documents/UploadFile/FileUploadProgress/index.jsx b/frontend/src/components/Modals/MangeWorkspace/Documents/UploadFile/FileUploadProgress/index.jsx
index e1f4651eb74..d5a46a8f617 100644
--- a/frontend/src/components/Modals/MangeWorkspace/Documents/UploadFile/FileUploadProgress/index.jsx
+++ b/frontend/src/components/Modals/MangeWorkspace/Documents/UploadFile/FileUploadProgress/index.jsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect, memo } from "react";
+import React, { useState, useEffect, memo, useRef } from "react";
 import truncate from "truncate";
 import { CheckCircle, XCircle } from "@phosphor-icons/react";
 import Workspace from "../../../../../../models/workspace";
@@ -7,7 +7,9 @@ import PreLoader from "../../../../../Preloader";
 
 function FileUploadProgressComponent({
   slug,
+  uuid,
   file,
+  setFiles,
   rejected = false,
   reason = null,
   onUploadSuccess,
@@ -18,6 +20,19 @@ function FileUploadProgressComponent({
   const [timerMs, setTimerMs] = useState(10);
   const [status, setStatus] = useState("pending");
   const [error, setError] = useState("");
+  const [isFadingOut, setIsFadingOut] = useState(false);
+
+  const fadeOut = (cb) => {
+    setIsFadingOut(true);
+    cb?.();
+  };
+
+  const beginFadeOut = () => {
+    setIsFadingOut(false);
+    setFiles((prev) => {
+      return prev.filter((item) => item.uid !== uuid);
+    });
+  };
 
   useEffect(() => {
     async function uploadFile() {
@@ -44,13 +59,21 @@ function FileUploadProgressComponent({
         clearInterval(timer);
         onUploadSuccess();
       }
+
+      setTimeout(() => {
+        fadeOut(() => setTimeout(() => beginFadeOut(), 300));
+      }, 5000);
     }
     !!file && !rejected && uploadFile();
   }, []);
 
   if (rejected) {
     return (
-      <div className="h-14 px-2 py-2 flex items-center gap-x-4 rounded-lg bg-white/5 border border-white/40">
+      <div
+        className={`${
+          isFadingOut ? "file-upload-fadeout" : "file-upload"
+        } h-14 px-2 py-2 flex items-center gap-x-4 rounded-lg bg-white/5 border border-white/40`}
+      >
         <div className="w-6 h-6 flex-shrink-0">
           <XCircle className="w-6 h-6 stroke-white bg-red-500 rounded-full p-1 w-full h-full" />
         </div>
@@ -66,7 +89,11 @@ function FileUploadProgressComponent({
 
   if (status === "failed") {
     return (
-      <div className="h-14 px-2 py-2 flex items-center gap-x-4 rounded-lg bg-white/5 border border-white/40 overflow-y-auto">
+      <div
+        className={`${
+          isFadingOut ? "file-upload-fadeout" : "file-upload"
+        } h-14 px-2 py-2 flex items-center gap-x-4 rounded-lg bg-white/5 border border-white/40 overflow-y-auto`}
+      >
         <div className="w-6 h-6 flex-shrink-0">
           <XCircle className="w-6 h-6 stroke-white bg-red-500 rounded-full p-1 w-full h-full" />
         </div>
@@ -81,7 +108,11 @@ function FileUploadProgressComponent({
   }
 
   return (
-    <div className="h-14 px-2 py-2 flex items-center gap-x-4 rounded-lg bg-white/5 border border-white/40">
+    <div
+      className={`${
+        isFadingOut ? "file-upload-fadeout" : "file-upload"
+      } h-14 px-2 py-2 flex items-center gap-x-4 rounded-lg bg-white/5 border border-white/40`}
+    >
       <div className="w-6 h-6 flex-shrink-0">
         {status !== "complete" ? (
           <div className="flex items-center justify-center">
diff --git a/frontend/src/components/Modals/MangeWorkspace/Documents/UploadFile/index.jsx b/frontend/src/components/Modals/MangeWorkspace/Documents/UploadFile/index.jsx
index e57997a830c..8996829c1f4 100644
--- a/frontend/src/components/Modals/MangeWorkspace/Documents/UploadFile/index.jsx
+++ b/frontend/src/components/Modals/MangeWorkspace/Documents/UploadFile/index.jsx
@@ -6,6 +6,7 @@ import { useDropzone } from "react-dropzone";
 import { v4 } from "uuid";
 import FileUploadProgress from "./FileUploadProgress";
 import Workspace from "../../../../../models/workspace";
+import debounce from "lodash.debounce";
 
 export default function UploadFile({
   workspace,
@@ -39,14 +40,9 @@ export default function UploadFile({
     setFetchingUrl(false);
   };
 
-  const handleUploadSuccess = () => {
-    fetchKeys(true);
-    showToast("File uploaded successfully", "success", { clear: true });
-  };
-
-  const handleUploadError = (message) => {
-    showToast(`Error uploading file: ${message}`, "error");
-  };
+  // Don't spam fetchKeys, wait 1s between calls at least.
+  const handleUploadSuccess = debounce(() => fetchKeys(true), 1000);
+  const handleUploadError = (_msg) => null; // stubbed.
 
   const onDrop = async (acceptedFiles, rejections) => {
     const newAccepted = acceptedFiles.map((file) => {
@@ -115,6 +111,8 @@ export default function UploadFile({
               <FileUploadProgress
                 key={file.uid}
                 file={file.file}
+                uuid={file.uid}
+                setFiles={setFiles}
                 slug={workspace.slug}
                 rejected={file?.rejected}
                 reason={file?.reason}
diff --git a/frontend/src/index.css b/frontend/src/index.css
index e5066f6792e..35159b3f1ba 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -692,3 +692,53 @@ does not extend the close button beyond the viewport. */
 .text-tremor-content {
   padding-bottom: 10px;
 }
+
+.file-upload {
+  -webkit-animation: fadein 0.3s linear forwards;
+  animation: fadein 0.3s linear forwards;
+}
+
+.file-upload-fadeout {
+  -webkit-animation: fadeout 0.3s linear forwards;
+  animation: fadeout 0.3s linear forwards;
+}
+
+@-webkit-keyframes fadein {
+  0% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes fadein {
+  0% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+
+@-webkit-keyframes fadeout {
+  0% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 0;
+  }
+}
+
+@keyframes fadeout {
+  0% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 0;
+  }
+}

From 5a482c1bd73a19032e136a701d8e9279c3bd3584 Mon Sep 17 00:00:00 2001
From: timothycarambat <rambat1010@gmail.com>
Date: Fri, 26 Apr 2024 17:41:01 -0700
Subject: [PATCH 2/2] patch unneded exports

---
 .../Documents/UploadFile/FileUploadProgress/index.jsx          | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/Modals/MangeWorkspace/Documents/UploadFile/FileUploadProgress/index.jsx b/frontend/src/components/Modals/MangeWorkspace/Documents/UploadFile/FileUploadProgress/index.jsx
index d5a46a8f617..104d45a1662 100644
--- a/frontend/src/components/Modals/MangeWorkspace/Documents/UploadFile/FileUploadProgress/index.jsx
+++ b/frontend/src/components/Modals/MangeWorkspace/Documents/UploadFile/FileUploadProgress/index.jsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect, memo, useRef } from "react";
+import React, { useState, useEffect, memo } from "react";
 import truncate from "truncate";
 import { CheckCircle, XCircle } from "@phosphor-icons/react";
 import Workspace from "../../../../../../models/workspace";
@@ -60,6 +60,7 @@ function FileUploadProgressComponent({
         onUploadSuccess();
       }
 
+      // Begin fadeout timer to clear uploader queue.
       setTimeout(() => {
         fadeOut(() => setTimeout(() => beginFadeOut(), 300));
       }, 5000);