Implement toast for upload event (#214)

* WIP success fail messages for upload document

* added success/error msgs for uploading feedback and disabled fileUploadProgress in backend

* implemented toast instead of success/error msg on modal for upload

* left over merge

---------

Co-authored-by: timothycarambat <rambat1010@gmail.com>

frontend/package.json

@@ -24,6 +24,7 @@
     "react-loading-icons": "^1.1.0",
     "react-loading-skeleton": "^3.1.0",
     "react-router-dom": "^6.3.0",
+    "react-toastify": "^9.1.3",
     "text-case": "^1.0.9",
     "truncate": "^3.0.0",
     "uuid": "^9.0.0"

frontend/src/App.jsx

@@ -2,6 +2,8 @@ import React, { lazy, Suspense } from "react";
 import { Routes, Route } from "react-router-dom";
 import { ContextWrapper } from "./AuthContext";
 import PrivateRoute, { AdminRoute } from "./components/PrivateRoute";
+import { ToastContainer } from "react-toastify";
+import "react-toastify/dist/ReactToastify.css";
 
 const Main = lazy(() => import("./pages/Main"));
 const InvitePage = lazy(() => import("./pages/Invite"));
@@ -51,6 +53,7 @@ export default function App() {
             element={<AdminRoute Component={AdminAppearance} />}
           />
         </Routes>
+        <ToastContainer />
       </ContextWrapper>
     </Suspense>
   );

frontend/src/components/Modals/MangeWorkspace/Upload/index.jsx

@@ -6,21 +6,18 @@ import { useDropzone } from "react-dropzone";
 import { v4 } from "uuid";
 import System from "../../../../models/system";
 import { Frown } from "react-feather";
+import showToast from "../../../../utils/toast";
 
 export default function UploadToWorkspace({ workspace, fileTypes }) {
   const [ready, setReady] = useState(null);
   const [files, setFiles] = useState([]);
-  const [successMsg, setSuccessMsg] = useState("");
-  const [errorMsg, setErrorMsg] = useState("");
 
   const handleUploadSuccess = () => {
-    setSuccessMsg("File uploaded successfully");
+    showToast("File uploaded successfully", "success");
-    setErrorMsg(null);
   };
 
   const handleUploadError = (message) => {
-    setErrorMsg(`Upload failed: ${message}`);
+    showToast(`Error uploading file: ${message}`, "error");
-    setSuccessMsg(null);
   };
 
   const onDrop = useCallback(async (acceptedFiles, rejections) => {
@@ -50,20 +47,6 @@ export default function UploadToWorkspace({ workspace, fileTypes }) {
     checkProcessorOnline();
   }, []);
 
-  useEffect(() => {
-    if (!!successMsg) {
-      setTimeout(() => {
-        setSuccessMsg("");
-      }, 3_500);
-    }
-
-    if (!!errorMsg) {
-      setTimeout(() => {
-        setErrorMsg("");
-      }, 3_500);
-    }
-  }, [successMsg, errorMsg]);
-
   const { getRootProps, getInputProps } = useDropzone({
     onDrop,
     accept: {
@@ -173,16 +156,6 @@ export default function UploadToWorkspace({ workspace, fileTypes }) {
           {Object.values(fileTypes).flat().join(" ")}
         </code>
       </p>
-      {successMsg && (
-        <p className="text-green-600 dark:text-green-400 text-sm text-center pt-2">
-          {successMsg}
-        </p>
-      )}
-      {errorMsg && (
-        <p className="text-red-600 dark:text-red-400 text-sm text-center pt-2">
-          {errorMsg}
-        </p>
-      )}
     </ModalWrapper>
   );
 }

frontend/src/utils/toast.js

@@ -0,0 +1,34 @@
+import { toast } from "react-toastify";
+import usePrefersDarkMode from "../hooks/usePrefersDarkMode";
+
+const showToast = (message, type = "default") => {
+  const prefersDarkMode = usePrefersDarkMode();
+  const options = {
+    position: "bottom-center",
+    autoClose: 5000,
+    hideProgressBar: false,
+    closeOnClick: true,
+    pauseOnHover: true,
+    draggable: true,
+    theme: prefersDarkMode ? "dark" : "light",
+  };
+
+  switch (type) {
+    case "success":
+      toast.success(message, options);
+      break;
+    case "error":
+      toast.error(message, options);
+      break;
+    case "info":
+      toast.info(message, options);
+      break;
+    case "warning":
+      toast.warn(message, options);
+      break;
+    default:
+      toast(message, options);
+  }
+};
+
+export default showToast;

frontend/yarn.lock

@@ -729,6 +729,11 @@ clone@^1.0.2:
   resolved "https://registry.npmjs.org/clone/-/clone-1.0.4.tgz"
   integrity sha512-JQHZ2QMW6l3aH/j6xCqQThY/9OH4D/9ls34cgkUBiEeocRTU04tHfKPBsUK1PqZCUQM7GiA0IIXJSuXHI64Kbg==
 
+clsx@^1.1.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.2.1.tgz#0ddc4a20a549b59c93a4116bb26f5294ca17dc12"
+  integrity sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==
+
 color-convert@^1.3.0, color-convert@^1.9.0:
   version "1.9.3"
   resolved "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz"
@@ -2043,6 +2048,13 @@ react-router@6.12.1:
   dependencies:
     "@remix-run/router" "1.6.3"
 
+react-toastify@^9.1.3:
+  version "9.1.3"
+  resolved "https://registry.yarnpkg.com/react-toastify/-/react-toastify-9.1.3.tgz#1e798d260d606f50e0fab5ee31daaae1d628c5ff"
+  integrity sha512-fPfb8ghtn/XMxw3LkxQBk3IyagNpF/LIKjOBflbexr2AWxAH1MJgvnESwEwBn9liLFXgTKWgBSdZpw9m4OTHTg==
+  dependencies:
+    clsx "^1.1.1"
+
 react@^18.2.0:
   version "18.2.0"
   resolved "https://registry.npmjs.org/react/-/react-18.2.0.tgz"