Tidying Up (#11)

Author: ThomasCode92

README.md

@@ -91,6 +91,9 @@ Tracking progress on key features and tasks for the project.
 - [x] 📁 Enable file upload functionality
 - [x] 📊 Add analytics tracking
 
+<details>
+<summary>Click to expand the logbook</summary>
+
 ### 📝 Note from 5-28-2025
 
 Just finished up the database connection, next steps:
@@ -114,5 +117,14 @@ can be approved:
 
 - [x] Add "ownership" to files and folders
 - [x] Upload files to the right folder
-- [ ] Delete file button
+- [x] Delete file button
 - [x] Allow files that are not images to be uploaded
+
+</details>
+
+## 🎯 Fun Follow Ups
+
+### Folder deletion
+
+Make sure to fetch all of the folders that have it as a parent, and their
+children too.

src/app/f/drive-contents.tsx

@@ -51,8 +51,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 text-right">Actions</div>
             </div>
           </div>
           <ul>

src/app/f/file-row.tsx

@@ -1,6 +1,8 @@
-import { FileIcon, Folder as FolderIcon } from "lucide-react";
+import { FileIcon, Folder as FolderIcon, Trash2Icon } from "lucide-react";
 import Link from "next/link";
 
+import { Button } from "~/components/ui/button";
+import { deleteFile } from "~/server/actions";
 import type { File, Folder } from "~/server/db/schema";
 
 export function FileRow(props: { file: File }) {
@@ -22,8 +24,17 @@ export function FileRow(props: { file: File }) {
             {file.name}
           </a>
         </div>
-        <div className="col-span-3 text-gray-400">{"file"}</div>
+        <div className="col-span-2 text-gray-400">{"File"}</div>
         <div className="col-span-3 text-gray-400">{file.size}</div>
+        <div className="col-span-1 text-right text-gray-400">
+          <Button
+            aria-label="Delete file"
+            variant="ghost"
+            onClick={() => deleteFile(file.id)}
+          >
+            <Trash2Icon className="" size={20} />
+          </Button>
+        </div>
       </div>
     </li>
   );

src/server/actions.ts

@@ -0,0 +1,33 @@
+"use server";
+
+import { auth } from "@clerk/nextjs/server";
+import { and, eq } from "drizzle-orm";
+import { cookies } from "next/headers";
+import { UTApi } from "uploadthing/server";
+
+import { db } from "~/server/db";
+import { files_table as fileSchema } from "~/server/db/schema";
+
+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" };
+
+  await utApi.deleteFiles([file.url.replace("https://utfs.io/f/", "")]); // TODO: add fileKey to db schema
+  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/queries.ts

@@ -11,6 +11,7 @@ import {
 export async function getAllParentsForFolder(folderId: number) {
   const parents = [];
   let currentId: number | null = folderId;
+
   while (currentId != null) {
     const folders = await db
       .selectDistinct()
@@ -30,7 +31,8 @@ export function getAllFolders(folderId: number) {
   return db
     .select()
     .from(folderSchema)
-    .where(eq(folderSchema.parent, folderId));
+    .where(eq(folderSchema.parent, folderId))
+    .orderBy(folderSchema.name);
 }
 
 export async function getFolderById(folderId: number) {
@@ -42,5 +44,9 @@ export async function getFolderById(folderId: number) {
 }
 
 export function getAllFiles(folderId: number) {
-  return db.select().from(fileSchema).where(eq(fileSchema.parent, folderId));
+  return db
+    .select()
+    .from(fileSchema)
+    .where(eq(fileSchema.parent, folderId))
+    .orderBy(fileSchema.name);
 }