fixed bugs

Author: yash0g-dev

frontend/src/components/Main.jsx

@@ -8,7 +8,14 @@ import { useRetry } from "../hooks/UseRetry";
 import { useSessionContext } from "../contexts/SessionContext";
 import FileList from "./FileList";
 const Main = () => {
-  const { files, expiry, setExpiry, updateState, findFailedFiles } = useFile();
+  const {
+    files,
+    expiry,
+    setExpiry,
+    updateState,
+    findFailedFiles,
+    failedFiles,
+  } = useFile();
   const { sendRequest, uploadAllFiles, requestState, uploadState } =
     useUpload();
   const { retryRequest, isConnecting } = useRetry();
@@ -64,12 +71,12 @@ const Main = () => {
           <div className="flex justify-between mt-2">
             <ExpiresIn value={expiry} onChange={setExpiry} />
             <div>
-              {sessionInfo.newRequest && findFailedFiles().length > 0 && (
+              {sessionInfo.newRequest && failedFiles.length > 0 && (
                 <button
                   type="button"
                   className="py-2 px-6 bg-neutral-900 text-xs sm:text-sm text-white rounded-md overflow-hidden hover:bg-white hover:text-black
                    transition-all duration-300"
-                  onClick={() => retry(findFailedFiles())}
+                  onClick={() => retry(failedFiles)}
                   disabled={isConnecting || uploadState.uploading}
                 >
                   {isConnecting ? (

frontend/src/components/NewRequest.jsx

@@ -1,33 +1,21 @@
 import { useFile } from "../contexts/FileContext";
 import { useKey } from "../contexts/KeyContext";
 import KeyHolder from "./KeyHolder";
-import { useEffect, useState } from "react";
+import { useEffect } from "react";
 import { useSessionContext } from "../contexts/SessionContext";
-import { PulseLoader } from "react-spinners";
 
 const NewRequest = () => {
-  const { clearFiles, updateState, filesRef, fileVersion, findFailedFiles } =
-    useFile();
+  const { clearFiles, updateState, files, failedFiles } = useFile();
   const { key, removeKey } = useKey();
-  const [failedFile, setFailedFiles] = useState([]);
   const { setSessionInfo } = useSessionContext();
 
   useEffect(() => {
-    for (const file of filesRef.current) {
-      if (
-        file.state.status !== "success" &&
-        file.state.status !== "uploading"
-      ) {
+    files.forEach((file) => {
+      if (!["success", "uploading"].includes(file.state.status)) {
         updateState({ status: "error" }, file.fileInfo.id);
       }
-    }
-  }, []);
-
-  useEffect(() => {
-    setTimeout(() => {
-      setFailedFiles(findFailedFiles(), 0);
     });
-  }, [fileVersion]);
+  }, []);
 
   const handleNewRequest = () => {
     sessionStorage.removeItem("page");
@@ -39,14 +27,16 @@ const NewRequest = () => {
       newRequest: false,
     }));
   };
+
+  const successCount = files.length - failedFiles.length;
+
   return (
-    <div className="relative flex flex-col items-center justify-center   space-y-4">
+    <div className="relative flex flex-col items-center justify-center space-y-4">
       <p className="text-green-400 text-sm sm:text-lg font-semibold">
-        Uploaded files {filesRef.current.length - failedFile.length}/
-        {filesRef.current.length}!
+        Uploaded files {successCount}/{files.length}!
       </p>
 
-      {key && filesRef.current.length - failedFile.length > 0 && <KeyHolder />}
+      {key && successCount > 0 && <KeyHolder />}
 
       <button
         onClick={handleNewRequest}

frontend/src/contexts/FileContext.jsx

@@ -16,7 +16,6 @@ export const FileProvider = ({ children }) => {
   } = useIndexedDb();
   const abortController = useRef(null);
   const filesRef = useRef(files);
-  const [fileVersion, setFileVersion] = useState(0);
   useEffect(() => {
     filesRef.current = files;
   }, [files]);
@@ -69,7 +68,6 @@ export const FileProvider = ({ children }) => {
       const updatedFile = prev.map((file) => {
         if (file.fileInfo.id === id) {
           found = true;
-          setFileVersion((v) => v + 1);
           return {
             ...file,
             state: { ...file.state, ...update },
@@ -85,15 +83,8 @@ export const FileProvider = ({ children }) => {
       return updatedFile;
     });
   };
-  const findFailedFiles = () => {
-    const f = [];
-    for (const file of filesRef.current) {
-      if (file.state.status !== "success") {
-        f.push(file);
-      }
-    }
-    return f;
-  };
+
+  const failedFiles = files.filter((f) => f.state.status !== "success");
 
   return (
     <FileContext.Provider
@@ -107,8 +98,7 @@ export const FileProvider = ({ children }) => {
         expiry,
         filesRef,
         abortController,
-        fileVersion,
-        findFailedFiles,
+        failedFiles,
       }}
     >
       {children}