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

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