added delete function & subtitle language to collection table

kurianbenoy · Feb 22, 2024 · f2ea632 · f2ea632
1 parent 3a45510
commit f2ea632
Show file tree

Hide file tree

Showing 2 changed files with 96 additions and 73 deletions.
diff --git a/ui/src/components/CollectionTable.jsx b/ui/src/components/CollectionTable.jsx
@@ -0,0 +1,79 @@
+import { formatFileSize, formattedDate } from "@components/utils";
+import { useRouter } from "next/router";
+import DownloadFileDropdown from "./DownloadFileDropdown";
+import { IconEdit, IconTrash } from "@tabler/icons-react";
+import { SOURCE_LANGUAGES } from "@components/constants";
+
+export default function CollectionTable({ storedFiles, setStoredFiles }) {
+  const router = useRouter();
+  function handleDelete(index) {
+    const copyOfStoredFiles = [...storedFiles];
+    copyOfStoredFiles.splice(index, 1);
+    setStoredFiles(copyOfStoredFiles);
+  }
+  if (storedFiles?.length) {
+    return (
+      <div className="overflow-x-auto min-h-[75vh]">
+        <table className="table md:text-lg ">
+          <thead>
+            <tr className="text-lg text-gray-600">
+              <th></th>
+              <th>Name</th>
+              <th>Date</th>
+              <th>Size</th>
+              <th>Subtitle Language</th>
+              <th></th>
+              <th></th>
+            </tr>
+          </thead>
+          <tbody>
+            {storedFiles.map((element, index) => (
+              <tr key={index}>
+                <th>{index + 1}</th>
+                <td>{element.filename}</td>
+                <td>{formattedDate(element.uploadDate)}</td>
+                <td>{formatFileSize(element?.size)}</td>
+
+                <td>
+                  {
+                    SOURCE_LANGUAGES.find(
+                      (lang) =>
+                        lang.id ===
+                        (element.targetLanguage ?? element.outputLanguage)
+                    )?.name
+                  }
+                </td>
+                <td>
+                  <DownloadFileDropdown
+                    file={element.transcribedData}
+                    filename={element.filename}
+                  />
+                </td>
+                <td>
+                  <button
+                    onClick={() => router.push(`/generate?id=${index}`)}
+                    className="flex items-center gap-2"
+                  >
+                    <IconEdit />
+                    <p className="font-medium">Edit</p>
+                  </button>
+                </td>
+                <td>
+                  <button onClick={() => handleDelete(index)}>
+                    <IconTrash />
+                  </button>
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    );
+  } else {
+    return (
+      <div className="flex justify-center items-center min-h-48">
+        <h5 className="text-xl font-medium">Upload a file to edit subtitles</h5>
+      </div>
+    );
+  }
+}
diff --git a/ui/src/pages/collection.js b/ui/src/pages/collection.js
@@ -1,88 +1,32 @@
 import dynamic from "next/dynamic";
-import Header from "@components/components/Header";
 import SecondaryBtn from "@components/components/SecondaryBtn";
 import useLocalStorage from "@components/hooks/useLocalStorage";
-import { formatFileSize, formattedDate } from "@components/utils";
-import { IconEdit } from "@tabler/icons-react";
 import { useRouter } from "next/router";
 import React from "react";
-import DownloadFileDropdown from "@components/components/DownloadFileDropdown";
-
-function TableRows({ storedFiles }) {
-  const router = useRouter();
-
-  if (storedFiles?.length) {
-    return (
-      <div className="overflow-x-auto min-h-[75vh]">
-        <table className="table md:text-lg ">
-          <thead>
-            <tr className="text-lg text-gray-600">
-              <th></th>
-              <th>Name</th>
-              <th>Date</th>
-              <th>Size</th>
-              <th></th>
-              <th></th>
-            </tr>
-          </thead>
-          <tbody>
-            {storedFiles.map((element, index) => (
-              <tr key={index}>
-                <th>{index + 1}</th>
-                <td>{element.filename}</td>
-                <td>{formattedDate(element.uploadDate)}</td>
-                <td>{formatFileSize(element?.size)}</td>
-                <td>
-                  <button
-                    onClick={() => router.push(`/generate?id=${index}`)}
-                    className="flex items-center gap-2"
-                  >
-                    <IconEdit />
-                    <p className="font-medium">Edit</p>
-                  </button>
-                </td>
-                <td>
-                  <DownloadFileDropdown
-                    file={element.transcribedData}
-                    filename={element.filename}
-                  />
-                </td>
-              </tr>
-            ))}
-          </tbody>
-        </table>
-      </div>
-    );
-  } else {
-    return (
-      <div className="flex justify-center items-center min-h-48">
-        <h5 className="text-xl font-medium">Upload a file to edit subtitles</h5>
-      </div>
-    );
-  }
-}
+import CollectionTable from "@components/components/CollectionTable";
 
 const Collection = () => {
   const [storedFiles, setStoredFiles] = useLocalStorage("file", []);
   const router = useRouter();
 
   return (
-    <>
-      <section className="flex justify-center">
-        <div className=" w-full lg:w-[70%] md:mx-0 mx-8 border-2 rounded-md">
-          <div className="flex justify-between items-center border-b-[2px] py-2 px-2">
-            <p className="text-lg text-gray-500 font-medium">
-              {storedFiles.length}
-              {storedFiles.length === 1 ? " item" : " items"}
-            </p>
-            <SecondaryBtn fn={() => router.push("/generate")}>
-              Generate New Subtitles
-            </SecondaryBtn>
-          </div>
-          <TableRows storedFiles={storedFiles} />
+    <section className="flex justify-center">
+      <main className=" w-full lg:w-[80%] border-2 rounded-md">
+        <div className="flex justify-between items-center border-b-[2px] py-2 px-2">
+          <p className="text-lg text-gray-500 font-medium">
+            {storedFiles.length}
+            {storedFiles.length === 1 ? " item" : " items"}
+          </p>
+          <SecondaryBtn fn={() => router.push("/generate")}>
+            Generate New Subtitles
+          </SecondaryBtn>
         </div>
-      </section>
-    </>
+        <CollectionTable
+          storedFiles={storedFiles}
+          setStoredFiles={setStoredFiles}
+        />
+      </main>
+    </section>
   );
 };