Fixing Breadcrumbs

Author: ThomasCode92

src/app/drive-contents.tsx

@@ -11,12 +11,8 @@ import { FileRow, FolderRow } from "./file-row";
 export default function DriveContents(props: {
   files: (typeof files.$inferSelect)[];
   folders: (typeof folders.$inferSelect)[];
+  parents: (typeof folders.$inferSelect)[];
 }) {
-  
- 
-
-  const breadcrumbs: unknown[] = [];
-
   const handleUpload = () => {
     alert("Upload functionality would be implemented here");
   };
@@ -29,7 +25,7 @@ export default function DriveContents(props: {
             <Link href="/f/1" className="mr-2 text-gray-300 hover:text-white">
               My Drive
             </Link>
-            {breadcrumbs.map((folder) => (
+            {props.parents.map((folder) => (
               <div key={folder.id} className="flex items-center">
                 <ChevronRight className="mx-2 text-gray-500" size={16} />
                 <Link

src/app/f/[folderId]/page.tsx

@@ -9,6 +9,24 @@ import {
 
 import DriveContents from "../../drive-contents";
 
+async function getAllParents(folderId: number) {
+  const parents = [];
+  let currentId: number | null = folderId;
+  while (currentId != null) {
+    const folders = await db
+      .selectDistinct()
+      .from(folderSchema)
+      .where(eq(folderSchema.id, currentId));
+
+    if (!folders[0]) throw new Error("parent folder not found");
+
+    parents.unshift(folders[0]);
+    currentId = folders[0]?.parent; // parent can be null
+  }
+
+  return parents;
+}
+
 export default async function GoogleDriveClone(props: {
   params: Promise<{ folderId: number }>;
 }) {
@@ -20,16 +38,22 @@ export default async function GoogleDriveClone(props: {
   if (!success) return <div>Invalid Folder ID</div>;
 
   const folderId = data.folderId;
-  console.log(folderId);
+  const parentsPromise = getAllParents(folderId);
 
-  const folders = await db
+  const foldersPromise = db
     .select()
     .from(folderSchema)
     .where(eq(folderSchema.parent, folderId));
-  const files = await db
+  const filesPromise = db
     .select()
     .from(fileSchema)
     .where(eq(fileSchema.parent, folderId));
 
-  return <DriveContents folders={folders} files={files} />;
+  const [folders, files, parents] = await Promise.all([
+    foldersPromise,
+    filesPromise,
+    parentsPromise,
+  ]);
+
+  return <DriveContents folders={folders} files={files} parents={parents} />;
 }