From 86c151bbbb5f6f4e448d6c06460c7c5391cd18a6 Mon Sep 17 00:00:00 2001
From: emmanuel macharia <samuelmarsha@outlook.com>
Date: Fri, 4 Apr 2025 21:38:44 +0300
Subject: [PATCH] delete files

---
 README.md                                    |  6 ++-
 src/app/folder/[folderId]/drive-contents.tsx |  3 +-
 src/app/folder/[folderId]/file-row.tsx       | 17 +++++++-
 src/server/db/actions.ts                     | 43 ++++++++++++++++++++
 src/server/db/schema.ts                      |  1 +
 5 files changed, 66 insertions(+), 4 deletions(-)
 create mode 100644 src/server/db/actions.ts

diff --git a/README.md b/README.md
index 8c27ff7..299c42a 100644
--- a/README.md
+++ b/README.md
@@ -35,4 +35,8 @@
 - [ ] real homepage
 
 ## notes 2:40.44
-- [ ] Real homepage + onboarding
\ No newline at end of file
+- [ ] Real homepage + onboarding
+
+## followup
+
+[ ] folder deletion - make sure to recursively delete all files and folders.
\ No newline at end of file
diff --git a/src/app/folder/[folderId]/drive-contents.tsx b/src/app/folder/[folderId]/drive-contents.tsx
index 3d05ed9..f88ae01 100644
--- a/src/app/folder/[folderId]/drive-contents.tsx
+++ b/src/app/folder/[folderId]/drive-contents.tsx
@@ -48,8 +48,9 @@ export default function DriveContents(props: {
           <div className="border-b border-gray-700 px-6 py-4">
             <div className="grid grid-cols-12 gap-4 text-sm font-medium text-gray-400">
               <div className="col-span-6">Name</div>
-              <div className="col-span-3">Type</div>
+              <div className="col-span-2">Type</div>
               <div className="col-span-3">Size</div>
+              <div className="col-span-1"></div>
             </div>
           </div>
           <ul>
diff --git a/src/app/folder/[folderId]/file-row.tsx b/src/app/folder/[folderId]/file-row.tsx
index f316072..5b5a2eb 100644
--- a/src/app/folder/[folderId]/file-row.tsx
+++ b/src/app/folder/[folderId]/file-row.tsx
@@ -1,5 +1,7 @@
-import { Folder as FolderIcon, FileIcon } from "lucide-react";
+import { Folder as FolderIcon, FileIcon, Trash2Icon } from "lucide-react";
 import Link from "next/link";
+import { Button } from "~/components/ui/button";
+import { deleteFile } from "~/server/db/actions";
 import type { files_table, folders_table } from "~/server/db/schema";
 
 export function FileRow(props: { file: typeof files_table.$inferSelect }) {
@@ -34,10 +36,21 @@ export function FileRow(props: { file: typeof files_table.$inferSelect }) {
             {file.name}
           </a>
         </div>
-        <div className="col-span-3 text-gray-400"> File </div>
+        <div className="col-span-2 text-gray-400"> File </div>{" "}
+        {/* TODO: add file type */}
         <div className="col-span-3 text-gray-400">
           {getFileSizes(file.size)}
         </div>
+        <div className="col-span-1 text-gray-400">
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={() => deleteFile(file.id)}
+            aria-label="Delete file"
+          >
+            <Trash2Icon size={16} />
+          </Button>
+        </div>
       </div>
     </li>
   );
diff --git a/src/server/db/actions.ts b/src/server/db/actions.ts
new file mode 100644
index 0000000..5ab2670
--- /dev/null
+++ b/src/server/db/actions.ts
@@ -0,0 +1,43 @@
+"use server";
+
+import { db } from "~/server/db";
+import { eq, and } from "drizzle-orm";
+import { files_table as fileSchema, folders_table as foldersSchema } from "~/server/db/schema";
+import { auth } from "@clerk/nextjs/server";
+import { UTApi } from "uploadthing/server";
+import { cookies } from "next/headers";
+const utApi = new UTApi();
+
+export async function deleteFile(fileId: number) {
+    const session = await auth();
+    if (!session.userId) {
+        return { error: "Unauthorized"} 
+    }
+
+    const [file] = await db
+        .select()
+        .from(fileSchema)
+        .where(
+            and(eq(fileSchema.id, fileId), eq(fileSchema.ownerId, session.userId))
+        );
+
+    if (!file) {
+        return { error: "File not found"}
+    }
+
+    const utApiResult = await utApi.deleteFiles([file.url.replace("https://utfs.io/f/", "")]);
+
+    if (!utApiResult.success) {
+        return { error: "Failed deleting file from Uploadthing"}
+    }
+
+    await db.delete(fileSchema).where(eq(fileSchema.id, fileId));
+
+    const c = await cookies();
+
+    c.set("force-refresh", JSON.stringify(Math.random()));
+
+    return { success: true };
+
+}
+
diff --git a/src/server/db/schema.ts b/src/server/db/schema.ts
index 34e8fa3..e899f1b 100644
--- a/src/server/db/schema.ts
+++ b/src/server/db/schema.ts
@@ -49,6 +49,7 @@ export const files_table = createTable(
     ownerId: text("owner_id").notNull(),
     name: text("name").notNull(),
     size: int("size").notNull(),
+    // add file key
     url: text("url").notNull(),
     parent: bigint("parent", { mode: "number", unsigned: true }).notNull(),
     updatedAt: timestamp("updated_at").notNull().defaultNow(),