format

frontend/src/components/uploading_side_bar.tsx

@@ -7,41 +7,57 @@ export default function UploadingSideBar() {
 
   useEffect(() => {
     const listener = () => {
-      console.log("Uploading tasks changed; show uploading: ", uploadingManager.hasTasks());
-      setShowUploading(uploadingManager.hasTasks())
+      console.log(
+        "Uploading tasks changed; show uploading: ",
+        uploadingManager.hasTasks(),
+      );
+      setShowUploading(uploadingManager.hasTasks());
     };
 
-    uploadingManager.addListener(listener)
+    uploadingManager.addListener(listener);
 
     return () => {
-      uploadingManager.removeListener(listener)
-    }
+      uploadingManager.removeListener(listener);
+    };
   }, []);
 
   if (!showUploading) {
-    return <></>
+    return <></>;
   }
 
-  return <>
-    <label htmlFor={"uploading-drawer"} className={"btn btn-square btn-ghost relative btn-accent text-primary"}>
-      <div className={"w-6 h-6 overflow-hidden relative"}>
-        <MdArrowUpward className={"move-up-animation pb-0.5"} size={24} />
-        <div className={"absolute border-b-2 w-5 bottom-1 left-0.5"}></div>
-      </div>
-    </label>
-    <div className="drawer w-0">
-      <input id="uploading-drawer" type="checkbox" className="drawer-toggle" />
-      <div className="drawer-side">
-        <label htmlFor="uploading-drawer" aria-label="close sidebar" className="drawer-overlay"></label>
-        <div className="menu bg-base-200 text-base-content h-full w-80 p-4 overflow-y-auto ">
-          <div className={"grid grid-cols-1"}>
-            <h2 className={"text-xl mb-2"}>Uploading</h2>
-            <UploadingList />
+  return (
+    <>
+      <label
+        htmlFor={"uploading-drawer"}
+        className={"btn btn-square btn-ghost relative btn-accent text-primary"}
+      >
+        <div className={"w-6 h-6 overflow-hidden relative"}>
+          <MdArrowUpward className={"move-up-animation pb-0.5"} size={24} />
+          <div className={"absolute border-b-2 w-5 bottom-1 left-0.5"}></div>
+        </div>
+      </label>
+      <div className="drawer w-0">
+        <input
+          id="uploading-drawer"
+          type="checkbox"
+          className="drawer-toggle"
+        />
+        <div className="drawer-side">
+          <label
+            htmlFor="uploading-drawer"
+            aria-label="close sidebar"
+            className="drawer-overlay"
+          ></label>
+          <div className="menu bg-base-200 text-base-content h-full w-80 p-4 overflow-y-auto ">
+            <div className={"grid grid-cols-1"}>
+              <h2 className={"text-xl mb-2"}>Uploading</h2>
+              <UploadingList />
+            </div>
           </div>
         </div>
       </div>
-    </div>
-  </>
+    </>
+  );
 }
 
 function UploadingList() {
@@ -50,22 +66,22 @@ function UploadingList() {
   useEffect(() => {
     const listener = () => {
       setTasks(uploadingManager.getTasks());
-    }
+    };
 
-    uploadingManager.addListener(listener)
+    uploadingManager.addListener(listener);
 
     return () => {
-      uploadingManager.removeListener(listener)
-    }
+      uploadingManager.removeListener(listener);
+    };
   }, []);
 
-  return <>
-    {
-      tasks.map((task) => {
-        return <TaskTile key={task.id} task={task} />
-      })
-    }
-  </>
+  return (
+    <>
+      {tasks.map((task) => {
+        return <TaskTile key={task.id} task={task} />;
+      })}
+    </>
+  );
 }
 
 function TaskTile({ task }: { task: UploadingTask }) {
@@ -77,51 +93,73 @@ function TaskTile({ task }: { task: UploadingTask }) {
     const listener = () => {
       setProgress(task.progress);
       setError(task.errorMessage);
-    }
+    };
 
-    task.addListener(listener)
+    task.addListener(listener);
 
     return () => {
-      task.removeListener(listener)
-    }
+      task.removeListener(listener);
+    };
   }, [task]);
 
-  return <div className={"card card-border border-base-300 p-2 my-2 w-full"}>
-    <p className={"p-1 mb-2 w-full break-all line-clamp-2"}>{task.filename}</p>
-    <progress className="progress progress-primary my-2" value={100 * progress} max={100} />
-    {error && <p className={"text-error p-1"}>{error}</p>}
-    <div className={"my-2 flex flex-row-reverse"}>
-      {
-        error && <button className={"btn h-7 mr-1"} onClick={() => {
-          task.start();
-        }}>
-          Retry
-        </button>
-      }
-      <button className={"btn btn-error h-7"} onClick={() => {
-        const dialog = document.getElementById(`cancel_task_${task.id}`) as HTMLDialogElement;
-        dialog.showModal();
-      }}>
-        Cancel
-      </button>
-    </div>
-    <dialog id={`cancel_task_${task.id}`} className="modal">
-      <div className="modal-box">
-        <h3 className="text-lg font-bold">Cancel Task</h3>
-        <p className="py-4">Are you sure you want to cancel this task?</p>
-        <div className="modal-action">
-          <form method="dialog">
-            <button className="btn">Close</button>
-          </form>
-          <button className="btn btn-error mx-2" type={"button"} onClick={() => {
-            task.cancel();
-            const dialog = document.getElementById(`cancel_task_${task.id}`) as HTMLDialogElement;
-            dialog.close();
-          }}>
-            Confirm
+  return (
+    <div className={"card card-border border-base-300 p-2 my-2 w-full"}>
+      <p className={"p-1 mb-2 w-full break-all line-clamp-2"}>
+        {task.filename}
+      </p>
+      <progress
+        className="progress progress-primary my-2"
+        value={100 * progress}
+        max={100}
+      />
+      {error && <p className={"text-error p-1"}>{error}</p>}
+      <div className={"my-2 flex flex-row-reverse"}>
+        {error && (
+          <button
+            className={"btn h-7 mr-1"}
+            onClick={() => {
+              task.start();
+            }}
+          >
+            Retry
           </button>
-        </div>
+        )}
+        <button
+          className={"btn btn-error h-7"}
+          onClick={() => {
+            const dialog = document.getElementById(
+              `cancel_task_${task.id}`,
+            ) as HTMLDialogElement;
+            dialog.showModal();
+          }}
+        >
+          Cancel
+        </button>
       </div>
-    </dialog>
-  </div>
-}
+      <dialog id={`cancel_task_${task.id}`} className="modal">
+        <div className="modal-box">
+          <h3 className="text-lg font-bold">Cancel Task</h3>
+          <p className="py-4">Are you sure you want to cancel this task?</p>
+          <div className="modal-action">
+            <form method="dialog">
+              <button className="btn">Close</button>
+            </form>
+            <button
+              className="btn btn-error mx-2"
+              type={"button"}
+              onClick={() => {
+                task.cancel();
+                const dialog = document.getElementById(
+                  `cancel_task_${task.id}`,
+                ) as HTMLDialogElement;
+                dialog.close();
+              }}
+            >
+              Confirm
+            </button>
+          </div>
+        </div>
+      </dialog>
+    </div>
+  );
+}