sandbox data route + cosmetic changes
This commit is contained in:
parent
39696128db
commit
1b6bd01989
@ -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;
|
||||||
|
@ -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>
|
||||||
|
@ -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)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -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>
|
||||||
|
@ -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"
|
||||||
|
}
|
||||||
|
Loading…
x
Reference in New Issue
Block a user