Connect UI to Database

README.md

@@ -85,16 +85,24 @@ pnpm run dev
 
 Tracking progress on key features and tasks for the project.
 
-- [ ] 🛢️ Set up the database and define data models
-- [ ] 🔗 Sync folder open state with the URL
+- [x] 🛢️ Set up the database and define data models
+- [x] 🔗 Sync folder open state with the URL
 - [ ] 🔐 Implement user authentication
 - [ ] 📁 Enable file upload functionality
+- [ ] 📊 Add analytics tracking
 
 ### 📝 Note from 5-28-2025
 
 Just finished up the database connection, next steps:
 
 - [x] Update schema to show files and folders
 - [x] Manually insert examples
-- [ ] Render them in the UI
-- [ ] Push and make sure it all works
+- [x] Render them in the UI
+
+### 📝 Note from 6-4-2025
+
+The database and UI are now connected, some improvements to make:
+
+- [ ] Change folders to link components, remove all client state
+- [ ] Clean up the database and data fetching patterns
+- [ ] Real homepage

src/app/drive-contents.tsx

@@ -0,0 +1,98 @@
+"use client";
+
+import { ChevronRight, Upload } from "lucide-react";
+import { useMemo, useState } from "react";
+
+import { Button } from "~/components/ui/button";
+import type { files, folders } from "~/server/db/schema";
+import { FileRow, FolderRow } from "./file-row";
+
+export default function DriveContents(props: {
+  files: (typeof files.$inferSelect)[];
+  folders: (typeof folders.$inferSelect)[];
+}) {
+  const [currentFolder, setCurrentFolder] = useState(1);
+
+  const handleFolderClick = (folderId: number) => {
+    setCurrentFolder(folderId);
+  };
+
+  const breadcrumbs = useMemo(() => {
+    const breadcrumbs = [];
+    let currentId = currentFolder;
+
+    while (currentId !== 1) {
+      const folder = props.folders.find((file) => file.id === currentId);
+      if (folder) {
+        breadcrumbs.unshift(folder);
+        currentId = folder.parent ?? 1;
+      } else {
+        break;
+      }
+    }
+
+    return breadcrumbs;
+  }, [currentFolder, props.folders]);
+
+  const handleUpload = () => {
+    alert("Upload functionality would be implemented here");
+  };
+
+  return (
+    <div className="min-h-screen bg-gray-900 p-8 text-gray-100">
+      <div className="mx-auto max-w-6xl">
+        <div className="mb-6 flex items-center justify-between">
+          <div className="flex items-center">
+            <Button
+              onClick={() => setCurrentFolder(1)}
+              variant="ghost"
+              className="mr-2 text-gray-300 hover:text-white"
+            >
+              My Drive
+            </Button>
+            {breadcrumbs.map((folder) => (
+              <div key={folder.id} className="flex items-center">
+                <ChevronRight className="mx-2 text-gray-500" size={16} />
+                <Button
+                  onClick={() => handleFolderClick(folder.id)}
+                  variant="ghost"
+                  className="text-gray-300 hover:text-white"
+                >
+                  {folder.name}
+                </Button>
+              </div>
+            ))}
+          </div>
+          <Button
+            onClick={handleUpload}
+            className="bg-blue-600 text-white hover:bg-blue-700"
+          >
+            <Upload className="mr-2" size={20} />
+            Upload
+          </Button>
+        </div>
+        <div className="rounded-lg bg-gray-800 shadow-xl">
+          <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-3">Size</div>
+            </div>
+          </div>
+          <ul>
+            {props.folders.map((folder) => (
+              <FolderRow
+                key={folder.id}
+                folder={folder}
+                onFolderClick={() => handleFolderClick(folder.id)}
+              />
+            ))}
+            {props.files.map((file) => (
+              <FileRow key={file.id} file={file} />
+            ))}
+          </ul>
+        </div>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,35 @@
+import { eq } from "drizzle-orm";
+import { z } from "zod";
+
+import { db } from "~/server/db";
+import {
+  files as fileSchema,
+  folders as folderSchema,
+} from "~/server/db/schema";
+
+import DriveContents from "../../drive-contents";
+
+export default async function GoogleDriveClone(props: {
+  params: Promise<{ folderId: number }>;
+}) {
+  const params = await props.params;
+  const { data, success } = z
+    .object({ folderId: z.coerce.number() })
+    .safeParse(params);
+
+  if (!success) return <div>Invalid Folder ID</div>;
+
+  const folderId = data.folderId;
+  console.log(folderId);
+
+  const folders = await db
+    .select()
+    .from(folderSchema)
+    .where(eq(folderSchema.parent, folderId));
+  const files = await db
+    .select()
+    .from(fileSchema)
+    .where(eq(fileSchema.parent, folderId));
+
+  return <DriveContents folders={folders} files={files} />;
+}

src/app/file-row.tsx

@@ -1,8 +1,8 @@
 import { FileIcon, Folder as FolderIcon } from "lucide-react";
 
-import type { File, Folder } from "~/lib/mock-data";
+import type { files, folders } from "~/server/db/schema";
 
-export function FileRow(props: { file: File }) {
+export function FileRow(props: { file: typeof files.$inferSelect }) {
   const { file } = props;
 
   return (
@@ -29,7 +29,7 @@ export function FileRow(props: { file: File }) {
 }
 
 export function FolderRow(props: {
-  folder: Folder;
+  folder: typeof folders.$inferSelect;
   onFolderClick: () => void;
 }) {
   const { folder, onFolderClick } = props;

src/app/page.tsx

@@ -1,103 +1,3 @@
-"use client";
-
-import { ChevronRight, Upload } from "lucide-react";
-import { useMemo, useState } from "react";
-
-import { Button } from "~/components/ui/button";
-import { mockFiles, mockFolders } from "~/lib/mock-data";
-import { FileRow, FolderRow } from "./file-row";
-
-export default function GoogleDriveClone() {
-  const [currentFolder, setCurrentFolder] = useState("root");
-
-  const getCurrentFiles = () => {
-    return mockFiles.filter((file) => file.parent === currentFolder);
-  };
-
-  const getCurrentFolders = () => {
-    return mockFolders.filter((folder) => folder.parent === currentFolder);
-  };
-
-  const handleFolderClick = (folderId: string) => {
-    setCurrentFolder(folderId);
-  };
-
-  const breadcrumbs = useMemo(() => {
-    const breadcrumbs = [];
-    let currentId = currentFolder;
-
-    while (currentId !== "root") {
-      const folder = mockFolders.find((file) => file.id === currentId);
-      if (folder) {
-        breadcrumbs.unshift(folder);
-        currentId = folder.parent ?? "root";
-      } else {
-        break;
-      }
-    }
-
-    return breadcrumbs;
-  }, [currentFolder]);
-
-  const handleUpload = () => {
-    alert("Upload functionality would be implemented here");
-  };
-
-  return (
-    <div className="min-h-screen bg-gray-900 p-8 text-gray-100">
-      <div className="mx-auto max-w-6xl">
-        <div className="mb-6 flex items-center justify-between">
-          <div className="flex items-center">
-            <Button
-              onClick={() => setCurrentFolder("root")}
-              variant="ghost"
-              className="mr-2 text-gray-300 hover:text-white"
-            >
-              My Drive
-            </Button>
-            {breadcrumbs.map((folder) => (
-              <div key={folder.id} className="flex items-center">
-                <ChevronRight className="mx-2 text-gray-500" size={16} />
-                <Button
-                  onClick={() => handleFolderClick(folder.id)}
-                  variant="ghost"
-                  className="text-gray-300 hover:text-white"
-                >
-                  {folder.name}
-                </Button>
-              </div>
-            ))}
-          </div>
-          <Button
-            onClick={handleUpload}
-            className="bg-blue-600 text-white hover:bg-blue-700"
-          >
-            <Upload className="mr-2" size={20} />
-            Upload
-          </Button>
-        </div>
-        <div className="rounded-lg bg-gray-800 shadow-xl">
-          <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-3">Size</div>
-            </div>
-          </div>
-          <ul>
-            {getCurrentFolders().map((folder) => (
-              <FolderRow
-                key={folder.id}
-                folder={folder}
-                onFolderClick={() => handleFolderClick(folder.id)}
-              />
-            ))}
-            {getCurrentFiles().map((file) => (
-              <FileRow key={file.id} file={file} />
-            ))}
-          </ul>
-        </div>
-      </div>
-    </div>
-  );
+export default async function HomePage() {
+  return <h1>Welcome to your Drive</h1>;
 }

src/server/db/schema.ts

@@ -15,6 +15,7 @@ export const files = createTable(
       .primaryKey()
       .autoincrement(),
     name: text("name").notNull(),
+    url: text("url").notNull(),
     size: int("size").notNull(),
     parent: bigint("parent", { mode: "number", unsigned: true }),
   },