diff --git a/README.md b/README.md index 5ebf872..c0bccca 100644 --- a/README.md +++ b/README.md @@ -85,10 +85,11 @@ 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 @@ -96,5 +97,12 @@ 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 diff --git a/src/app/drive-contents.tsx b/src/app/drive-contents.tsx new file mode 100644 index 0000000..c7e3d71 --- /dev/null +++ b/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 ( +
+
+
+
+ + {breadcrumbs.map((folder) => ( +
+ + +
+ ))} +
+ +
+
+
+
+
Name
+
Type
+
Size
+
+
+
    + {props.folders.map((folder) => ( + handleFolderClick(folder.id)} + /> + ))} + {props.files.map((file) => ( + + ))} +
+
+
+
+ ); +} diff --git a/src/app/f/[folderId]/page.tsx b/src/app/f/[folderId]/page.tsx new file mode 100644 index 0000000..19392fe --- /dev/null +++ b/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
Invalid Folder ID
; + + 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 ; +} diff --git a/src/app/file-row.tsx b/src/app/file-row.tsx index 01788bb..10cf885 100644 --- a/src/app/file-row.tsx +++ b/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; diff --git a/src/app/page.tsx b/src/app/page.tsx index 47de2c9..74ab28a 100644 --- a/src/app/page.tsx +++ b/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 ( -
-
-
-
- - {breadcrumbs.map((folder) => ( -
- - -
- ))} -
- -
-
-
-
-
Name
-
Type
-
Size
-
-
-
    - {getCurrentFolders().map((folder) => ( - handleFolderClick(folder.id)} - /> - ))} - {getCurrentFiles().map((file) => ( - - ))} -
-
-
-
- ); +export default async function HomePage() { + return

Welcome to your Drive

; } diff --git a/src/server/db/schema.ts b/src/server/db/schema.ts index 52dba32..30b873a 100644 --- a/src/server/db/schema.ts +++ b/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 }), },