delete files

README.md

@@ -35,4 +35,8 @@
 - [ ] real homepage
 
 ## notes 2:40.44
-- [ ] Real homepage + onboarding
+- [ ] Real homepage + onboarding
+
+## followup
+
+[ ] folder deletion - make sure to recursively delete all files and folders.

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>

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>
   );

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 };
+
+}
+

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(),