sandbox data route + cosmetic changes

This commit is contained in:
Ishaan Dey 2024-04-27 00:28:00 -04:00
parent 39696128db
commit 1b6bd01989
5 changed files with 42 additions and 8 deletions

View File

@ -46,8 +46,18 @@ export default {
}); });
return success; return success;
} else if (path === "/api/sandbox" && method === "GET") {
// } else if (path === "/api/sandbox/files") { const params = url.searchParams;
if (params.has("id")) {
const id = params.get("id") as string;
const res = await db.query.sandbox.findFirst({
where: (sandbox, { eq }) => eq(sandbox.id, id),
});
return json(res ?? {});
} else {
const res = await db.select().from(sandbox).all();
return json(res ?? {});
}
} else if (path === "/api/user") { } else if (path === "/api/user") {
if (method === "GET") { if (method === "GET") {
const params = url.searchParams; const params = url.searchParams;

View File

@ -1,5 +1,5 @@
import Navbar from "@/components/editor/navbar" import Navbar from "@/components/editor/navbar"
import { User } from "@/lib/types" import { Sandbox, User } from "@/lib/types"
import { currentUser } from "@clerk/nextjs" import { currentUser } from "@clerk/nextjs"
import dynamic from "next/dynamic" import dynamic from "next/dynamic"
import { redirect } from "next/navigation" import { redirect } from "next/navigation"
@ -14,6 +14,12 @@ const getUserData = async (id: string) => {
return userData return userData
} }
const getSandboxData = async (id: string) => {
const sandboxRes = await fetch(`http://localhost:8787/api/sandbox?id=${id}`)
const sandboxData: Sandbox = await sandboxRes.json()
return sandboxData
}
export default async function CodePage({ params }: { params: { id: string } }) { export default async function CodePage({ params }: { params: { id: string } }) {
const user = await currentUser() const user = await currentUser()
const sandboxId = params.id const sandboxId = params.id
@ -23,10 +29,11 @@ export default async function CodePage({ params }: { params: { id: string } }) {
} }
const userData = await getUserData(user.id) const userData = await getUserData(user.id)
const sandboxData = await getSandboxData(sandboxId)
return ( return (
<div className="overflow-hidden overscroll-none w-screen flex flex-col h-screen bg-background"> <div className="overflow-hidden overscroll-none w-screen flex flex-col h-screen bg-background">
<Navbar userData={userData} /> <Navbar userData={userData} sandboxData={sandboxData} />
<div className="w-screen flex grow"> <div className="w-screen flex grow">
<CodeEditor userId={user.id} sandboxId={sandboxId} /> <CodeEditor userId={user.id} sandboxId={sandboxId} />
</div> </div>

View File

@ -23,6 +23,7 @@ import { TFile, TFileData, TFolder } from "./sidebar/types"
import { io } from "socket.io-client" import { io } from "socket.io-client"
import { set } from "zod" import { set } from "zod"
import { processFileType } from "@/lib/utils"
export default function CodeEditor({ export default function CodeEditor({
userId, userId,
@ -92,7 +93,7 @@ export default function CodeEditor({
socket.emit("getFile", tab.id, (response: string) => { socket.emit("getFile", tab.id, (response: string) => {
setActiveFile(response) setActiveFile(response)
}) })
setEditorLanguage(tab.name.split(".").pop() ?? "plaintext") setEditorLanguage(processFileType(tab.name))
setActiveId(tab.id) setActiveId(tab.id)
} }

View File

@ -2,10 +2,16 @@ import Image from "next/image"
import Logo from "@/assets/logo.svg" import Logo from "@/assets/logo.svg"
import { Pencil } from "lucide-react" import { Pencil } from "lucide-react"
import Link from "next/link" import Link from "next/link"
import { User } from "@/lib/types" import { Sandbox, User } from "@/lib/types"
import UserButton from "@/components/ui/userButton" import UserButton from "@/components/ui/userButton"
export default function Navbar({ userData }: { userData: User }) { export default function Navbar({
userData,
sandboxData,
}: {
userData: User
sandboxData: Sandbox
}) {
return ( return (
<div className="h-14 px-2 w-full flex items-center justify-between border-b border-border"> <div className="h-14 px-2 w-full flex items-center justify-between border-b border-border">
<div className="flex items-center space-x-4"> <div className="flex items-center space-x-4">
@ -16,7 +22,7 @@ export default function Navbar({ userData }: { userData: User }) {
<Image src={Logo} alt="Logo" width={36} height={36} /> <Image src={Logo} alt="Logo" width={36} height={36} />
</Link> </Link>
<div className="text-sm font-medium flex items-center"> <div className="text-sm font-medium flex items-center">
My React Project{" "} {sandboxData.name}
<div className="h-7 w-7 ml-2 flex items-center justify-center transition-colors bg-transparent hover:bg-muted-foreground/25 cursor-pointer rounded-md"> <div className="h-7 w-7 ml-2 flex items-center justify-center transition-colors bg-transparent hover:bg-muted-foreground/25 cursor-pointer rounded-md">
<Pencil className="w-4 h-4" /> <Pencil className="w-4 h-4" />
</div> </div>

View File

@ -4,3 +4,13 @@ import { twMerge } from "tailwind-merge"
export function cn(...inputs: ClassValue[]) { export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs)) return twMerge(clsx(inputs))
} }
export function processFileType(file: string) {
const ending = file.split(".").pop()
if (ending === "ts" || ending === "tsx") return "typescript"
if (ending === "js" || ending === "jsx") return "javascript"
if (ending) return ending
return "plaintext"
}