feat: add button and API endpoint to delete job (#423)

Author: paramsiddharth

src/icons/delete.tsx

@@ -0,0 +1,18 @@
+export function DeleteIcon() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      strokeWidth="1.5"
+      stroke="currentColor"
+      class={`size-6`}
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0"
+      />
+    </svg>
+  );
+}

src/index.tsx

@@ -10,6 +10,7 @@ import { AUTO_DELETE_EVERY_N_HOURS, WEBROOT } from "./helpers/env";
 import { chooseConverter } from "./pages/chooseConverter";
 import { convert } from "./pages/convert";
 import { deleteFile } from "./pages/deleteFile";
+import { deleteJob } from "./pages/deleteJob";
 import { download } from "./pages/download";
 import { history } from "./pages/history";
 import { listConverters } from "./pages/listConverters";
@@ -42,6 +43,7 @@ const app = new Elysia({
   .use(history)
   .use(convert)
   .use(download)
+  .use(deleteJob)
   .use(results)
   .use(deleteFile)
   .use(listConverters)

src/pages/deleteJob.tsx

@@ -0,0 +1,38 @@
+import { rmSync } from "node:fs";
+import { Elysia } from "elysia";
+import { outputDir, uploadsDir } from "..";
+import db from "../db/db";
+import { WEBROOT } from "../helpers/env";
+import { userService } from "./user";
+import { Jobs } from "../db/types";
+
+export const deleteJob = new Elysia().use(userService).get(
+  "/delete/:userId/:jobId",
+  async ({ params, redirect, user }) => {
+    const job = db
+      .query("SELECT * FROM jobs WHERE user_id = ? AND id = ?")
+      .as(Jobs)
+      .get(user.id, params.jobId);
+
+    if (!job) {
+      return redirect(`${WEBROOT}/results`, 302);
+    }
+
+    // delete the directories
+    rmSync(`${outputDir}${job.user_id}/${job.id}`, {
+      recursive: true,
+      force: true,
+    });
+    rmSync(`${uploadsDir}${job.user_id}/${job.id}`, {
+      recursive: true,
+      force: true,
+    });
+
+    // delete the job
+    db.query("DELETE FROM jobs WHERE id = ?").run(job.id);
+    return redirect(`${WEBROOT}/history`, 302);
+  },
+  {
+    auth: true,
+  },
+);

src/pages/results.tsx

@@ -6,6 +6,7 @@ import db from "../db/db";
 import { Filename, Jobs } from "../db/types";
 import { ALLOW_UNAUTHENTICATED, WEBROOT } from "../helpers/env";
 import { DownloadIcon } from "../icons/download";
+import { DeleteIcon } from "../icons/delete";
 import { EyeIcon } from "../icons/eye";
 import { userService } from "./user";
 
@@ -39,6 +40,14 @@ function ResultsArticle({
           <button class="flex btn-primary flex-row gap-2 text-contrast" onclick="downloadAll()">
             <DownloadIcon /> <p>All</p>
           </button>
+          <a
+            style={files.length !== job.num_files ? "pointer-events: none;" : ""}
+            class="flex btn-primary flex-row gap-2 text-contrast"
+            href={`${WEBROOT}/delete/${user.id}/${job.id}`}
+            {...(files.length !== job.num_files ? { disabled: true, "aria-busy": "true" } : "")}
+          >
+            <DeleteIcon /> <p>Delete</p>
+          </a>
         </div>
       </div>
       <progress