TNT-Flo/sandbox-web-ide
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: comment out live collaboration features

Browse Source
This commit is contained in:
Akhileshrangani4 2024-11-17 17:52:39 -05:00
parent 9c3787b99d
commit b796f46dc2
6 changed files with 208 additions and 200 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
frontend/app/(app)/code/[id]/page.tsx
View File

@ -1,4 +1,4 @@
import { Room } from "@/components/editor/live/room" // import { Room } from "@/components/editor/live/room"
import Loading from "@/components/editor/loading" import Loading from "@/components/editor/loading"
import Navbar from "@/components/editor/navbar" import Navbar from "@/components/editor/navbar"
import { TerminalProvider } from "@/context/TerminalContext" import { TerminalProvider } from "@/context/TerminalContext"
@ -93,7 +93,7 @@ export default async function CodePage({ params }: { params: { id: string } }) {
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">
<Room id={sandboxId}> {/* <Room id={sandboxId}> */}
<TerminalProvider> <TerminalProvider>
<Navbar <Navbar
userData={userData} userData={userData}
@ -106,7 +106,7 @@ export default async function CodePage({ params }: { params: { id: string } }) {
<CodeEditor userData={userData} sandboxData={sandboxData} /> <CodeEditor userData={userData} sandboxData={sandboxData} />
</div> </div>
</TerminalProvider> </TerminalProvider>
</Room> {/* </Room> */}
</div> </div>
</> </>
) )

102
frontend/app/api/lb-auth/route.ts
View File

@ -1,57 +1,61 @@
import { colors } from "@/lib/colors" // import { colors } from "@/lib/colors"
import { User } from "@/lib/types" // import { User } from "@/lib/types"
import { currentUser } from "@clerk/nextjs" import { currentUser } from "@clerk/nextjs"
import { Liveblocks } from "@liveblocks/node" // import { Liveblocks } from "@liveblocks/node"
import { NextRequest } from "next/server" import { NextRequest } from "next/server"
const API_KEY = process.env.LIVEBLOCKS_SECRET_KEY! // const API_KEY = process.env.LIVEBLOCKS_SECRET_KEY!
const liveblocks = new Liveblocks({ // const liveblocks = new Liveblocks({
secret: API_KEY!, // secret: API_KEY!,
}) // })
export async function POST(request: NextRequest) { export async function POST(request: NextRequest) {
const clerkUser = await currentUser() // Temporarily return unauthorized while Liveblocks is disabled
return new Response("Liveblocks collaboration temporarily disabled", { status: 503 })
if (!clerkUser) { // Original implementation commented out:
return new Response("Unauthorized", { status: 401 }) // const clerkUser = await currentUser()
} //
// if (!clerkUser) {
const res = await fetch( // return new Response("Unauthorized", { status: 401 })
`${process.env.NEXT_PUBLIC_DATABASE_WORKER_URL}/api/user?id=${clerkUser.id}`, // }
{ //
headers: { // const res = await fetch(
Authorization: `${process.env.NEXT_PUBLIC_WORKERS_KEY}`, // `${process.env.NEXT_PUBLIC_DATABASE_WORKER_URL}/api/user?id=${clerkUser.id}`,
}, // {
} // headers: {
) // Authorization: `${process.env.NEXT_PUBLIC_WORKERS_KEY}`,
const user = (await res.json()) as User // },
// }
const colorNames = Object.keys(colors) // )
const randomColor = colorNames[ // const user = (await res.json()) as User
Math.floor(Math.random() * colorNames.length) //
] as keyof typeof colors // const colorNames = Object.keys(colors)
const code = colors[randomColor] // const randomColor = colorNames[
// Math.floor(Math.random() * colorNames.length)
// Create a session for the current user // ] as keyof typeof colors
// userInfo is made available in Liveblocks presence hooks, e.g. useOthers // const code = colors[randomColor]
const session = liveblocks.prepareSession(user.id, { //
userInfo: { // // Create a session for the current user
name: user.name, // // userInfo is made available in Liveblocks presence hooks, e.g. useOthers
email: user.email, // const session = liveblocks.prepareSession(user.id, {
color: randomColor, // userInfo: {
}, // name: user.name,
}) // email: user.email,
// color: randomColor,
// Give the user access to the room // },
user.sandbox.forEach((sandbox) => { // })
session.allow(`${sandbox.id}`, session.FULL_ACCESS) //
}) // // Give the user access to the room
user.usersToSandboxes.forEach((userToSandbox) => { // user.sandbox.forEach((sandbox) => {
session.allow(`${userToSandbox.sandboxId}`, session.FULL_ACCESS) // session.allow(`${sandbox.id}`, session.FULL_ACCESS)
}) // })
// user.usersToSandboxes.forEach((userToSandbox) => {
// Authorize the user and return the result // session.allow(`${userToSandbox.sandboxId}`, session.FULL_ACCESS)
const { body, status } = await session.authorize() // })
return new Response(body, { status }) //
// // Authorize the user and return the result
// const { body, status } = await session.authorize()
// return new Response(body, { status })
} }

4
frontend/components/dashboard/index.tsx
View File

@ -78,14 +78,14 @@ export default function Dashboard({
<FolderDot className="w-4 h-4 mr-2" /> <FolderDot className="w-4 h-4 mr-2" />
My Projects My Projects
</Button> </Button>
<Button {/* <Button
variant="ghost" variant="ghost"
onClick={() => setScreen("shared")} onClick={() => setScreen("shared")}
className={activeScreen("shared")} className={activeScreen("shared")}
> >
<Users className="w-4 h-4 mr-2" /> <Users className="w-4 h-4 mr-2" />
Shared With Me Shared With Me
</Button> </Button> */}
{/* <Button {/* <Button
variant="ghost" variant="ghost"
onClick={() => setScreen("settings")} onClick={() => setScreen("settings")}

278
frontend/components/editor/index.tsx
View File

@ -7,11 +7,11 @@ import * as monaco from "monaco-editor"
import { useCallback, useEffect, useRef, useState } from "react" import { useCallback, useEffect, useRef, useState } from "react"
import { toast } from "sonner" import { toast } from "sonner"
import { TypedLiveblocksProvider, useRoom, useSelf } from "@/liveblocks.config" // import { TypedLiveblocksProvider, useRoom, useSelf } from "@/liveblocks.config"
import LiveblocksProvider from "@liveblocks/yjs" // import LiveblocksProvider from "@liveblocks/yjs"
import { MonacoBinding } from "y-monaco" // import { MonacoBinding } from "y-monaco"
import { Awareness } from "y-protocols/awareness" // import { Awareness } from "y-protocols/awareness"
import * as Y from "yjs" // import * as Y from "yjs"
import { import {
ResizableHandle, ResizableHandle,
@ -45,7 +45,7 @@ import { Button } from "../ui/button"
import Tab from "../ui/tab" import Tab from "../ui/tab"
import AIChat from "./AIChat" import AIChat from "./AIChat"
import GenerateInput from "./generate" import GenerateInput from "./generate"
import { Cursors } from "./live/cursors" // import { Cursors } from "./live/cursors"
import DisableAccessModal from "./live/disableModal" import DisableAccessModal from "./live/disableModal"
import Loading from "./loading" import Loading from "./loading"
import PreviewWindow from "./preview" import PreviewWindow from "./preview"
@ -146,20 +146,20 @@ export default function CodeEditor({
const isOwner = sandboxData.userId === userData.id const isOwner = sandboxData.userId === userData.id
const clerk = useClerk() const clerk = useClerk()
// Liveblocks hooks // // Liveblocks hooks
const room = useRoom() // const room = useRoom()
const [provider, setProvider] = useState<TypedLiveblocksProvider>() // const [provider, setProvider] = useState<TypedLiveblocksProvider>()
const userInfo = useSelf((me) => me.info) // const userInfo = useSelf((me) => me.info)
// Liveblocks providers map to prevent reinitializing providers // // Liveblocks providers map to prevent reinitializing providers
type ProviderData = { // type ProviderData = {
provider: LiveblocksProvider<never, never, never, never> // provider: LiveblocksProvider<never, never, never, never>
yDoc: Y.Doc // yDoc: Y.Doc
yText: Y.Text // yText: Y.Text
binding?: MonacoBinding // binding?: MonacoBinding
onSync: (isSynced: boolean) => void // onSync: (isSynced: boolean) => void
} // }
const providersMap = useRef(new Map<string, ProviderData>()) // const providersMap = useRef(new Map<string, ProviderData>())
// Refs for libraries / features // Refs for libraries / features
const editorContainerRef = useRef<HTMLDivElement>(null) const editorContainerRef = useRef<HTMLDivElement>(null)
@ -573,82 +573,82 @@ export default function CodeEditor({
} }
}, [activeFileId, tabs, debouncedSaveData, setIsAIChatOpen, editorRef]) }, [activeFileId, tabs, debouncedSaveData, setIsAIChatOpen, editorRef])
// Liveblocks live collaboration setup effect // // Liveblocks live collaboration setup effect
useEffect(() => { // useEffect(() => {
const tab = tabs.find((t) => t.id === activeFileId) // const tab = tabs.find((t) => t.id === activeFileId)
const model = editorRef?.getModel() // const model = editorRef?.getModel()
if (!editorRef || !tab || !model) return // if (!editorRef || !tab || !model) return
let providerData: ProviderData // let providerData: ProviderData
// When a file is opened for the first time, create a new provider and store in providersMap. // // When a file is opened for the first time, create a new provider and store in providersMap.
if (!providersMap.current.has(tab.id)) { // if (!providersMap.current.has(tab.id)) {
const yDoc = new Y.Doc() // const yDoc = new Y.Doc()
const yText = yDoc.getText(tab.id) // const yText = yDoc.getText(tab.id)
const yProvider = new LiveblocksProvider(room, yDoc) // const yProvider = new LiveblocksProvider(room, yDoc)
// Inserts the file content into the editor once when the tab is changed. // // Inserts the file content into the editor once when the tab is changed.
const onSync = (isSynced: boolean) => { // const onSync = (isSynced: boolean) => {
if (isSynced) { // if (isSynced) {
const text = yText.toString() // const text = yText.toString()
if (text === "") { // if (text === "") {
if (activeFileContent) { // if (activeFileContent) {
yText.insert(0, activeFileContent) // yText.insert(0, activeFileContent)
} else { // } else {
setTimeout(() => { // setTimeout(() => {
yText.insert(0, editorRef.getValue()) // yText.insert(0, editorRef.getValue())
}, 0) // }, 0)
} // }
} // }
} // }
} // }
yProvider.on("sync", onSync) // yProvider.on("sync", onSync)
// Save the provider to the map. // // Save the provider to the map.
providerData = { provider: yProvider, yDoc, yText, onSync } // providerData = { provider: yProvider, yDoc, yText, onSync }
providersMap.current.set(tab.id, providerData) // providersMap.current.set(tab.id, providerData)
} else { // } else {
// When a tab is opened that has been open before, reuse the existing provider. // // When a tab is opened that has been open before, reuse the existing provider.
providerData = providersMap.current.get(tab.id)! // providerData = providersMap.current.get(tab.id)!
} // }
const binding = new MonacoBinding( // const binding = new MonacoBinding(
providerData.yText, // providerData.yText,
model, // model,
new Set([editorRef]), // new Set([editorRef]),
providerData.provider.awareness as unknown as Awareness // providerData.provider.awareness as unknown as Awareness
) // )
providerData.binding = binding // providerData.binding = binding
setProvider(providerData.provider) // setProvider(providerData.provider)
return () => { // return () => {
// Cleanup logic // // Cleanup logic
if (binding) { // if (binding) {
binding.destroy() // binding.destroy()
} // }
if (providerData.binding) { // if (providerData.binding) {
providerData.binding = undefined // providerData.binding = undefined
} // }
} // }
}, [room, activeFileContent]) // }, [room, activeFileContent])
// Added this effect to clean up when the component unmounts // // Added this effect to clean up when the component unmounts
useEffect(() => { // useEffect(() => {
return () => { // return () => {
// Clean up all providers when the component unmounts // // Clean up all providers when the component unmounts
providersMap.current.forEach((data) => { // providersMap.current.forEach((data) => {
if (data.binding) { // if (data.binding) {
data.binding.destroy() // data.binding.destroy()
} // }
data.provider.disconnect() // data.provider.disconnect()
data.yDoc.destroy() // data.yDoc.destroy()
}) // })
providersMap.current.clear() // providersMap.current.clear()
} // }
}, []) // }, [])
// Connection/disconnection effect // Connection/disconnection effect
useEffect(() => { useEffect(() => {
@ -1088,62 +1088,62 @@ export default function CodeEditor({
</div> </div>
</> </>
) : // Note clerk.loaded is required here due to a bug: https://github.com/clerk/javascript/issues/1643 ) : // Note clerk.loaded is required here due to a bug: https://github.com/clerk/javascript/issues/1643
clerk.loaded ? ( clerk.loaded ? (
<> <>
{provider && userInfo ? ( {/* {provider && userInfo ? (
<Cursors yProvider={provider} userInfo={userInfo} /> <Cursors yProvider={provider} userInfo={userInfo} />
) : null} ) : null} */}
<Editor <Editor
height="100%" height="100%"
language={editorLanguage} language={editorLanguage}
beforeMount={handleEditorWillMount} beforeMount={handleEditorWillMount}
onMount={handleEditorMount} onMount={handleEditorMount}
onChange={(value) => { onChange={(value) => {
// If the new content is different from the cached content, update it // If the new content is different from the cached content, update it
if (value !== fileContents[activeFileId]) { if (value !== fileContents[activeFileId]) {
setActiveFileContent(value ?? "") // Update the active file content setActiveFileContent(value ?? "") // Update the active file content
// Mark the file as unsaved by setting 'saved' to false // Mark the file as unsaved by setting 'saved' to false
setTabs((prev) => setTabs((prev) =>
prev.map((tab) => prev.map((tab) =>
tab.id === activeFileId tab.id === activeFileId
? { ...tab, saved: false } ? { ...tab, saved: false }
: tab : tab
)
) )
) } else {
} else { // If the content matches the cached content, mark the file as saved
// If the content matches the cached content, mark the file as saved setTabs((prev) =>
setTabs((prev) => prev.map((tab) =>
prev.map((tab) => tab.id === activeFileId
tab.id === activeFileId ? { ...tab, saved: true }
? { ...tab, saved: true } : tab
: tab )
) )
) }
} }}
}} options={{
options={{ tabSize: 2,
tabSize: 2, minimap: {
minimap: { enabled: false,
enabled: false, },
}, padding: {
padding: { bottom: 4,
bottom: 4, top: 4,
top: 4, },
}, scrollBeyondLastLine: false,
scrollBeyondLastLine: false, fixedOverflowWidgets: true,
fixedOverflowWidgets: true, fontFamily: "var(--font-geist-mono)",
fontFamily: "var(--font-geist-mono)", }}
}} theme={theme === "light" ? "vs" : "vs-dark"}
theme={theme === "light" ? "vs" : "vs-dark"} value={activeFileContent}
value={activeFileContent} />
/> </>
</> ) : (
) : ( <div className="w-full h-full flex items-center justify-center text-xl font-medium text-muted-foreground/50 select-none">
<div className="w-full h-full flex items-center justify-center text-xl font-medium text-muted-foreground/50 select-none"> <Loader2 className="animate-spin w-6 h-6 mr-3" />
<Loader2 className="animate-spin w-6 h-6 mr-3" /> Waiting for Clerk to load...
Waiting for Clerk to load... </div>
</div> )}
)}
</div> </div>
</ResizablePanel> </ResizablePanel>
<ResizableHandle /> <ResizableHandle />

11
frontend/components/editor/navbar/index.tsx
View File

@ -9,7 +9,7 @@ import { Pencil, Users } from "lucide-react"
import Image from "next/image" import Image from "next/image"
import Link from "next/link" import Link from "next/link"
import { useState } from "react" import { useState } from "react"
import { Avatars } from "../live/avatars" // import { Avatars } from "../live/avatars"
import DeployButtonModal from "./deploy" import DeployButtonModal from "./deploy"
import DownloadButton from "./downloadButton" import DownloadButton from "./downloadButton"
import EditSandboxModal from "./edit" import EditSandboxModal from "./edit"
@ -70,17 +70,16 @@ export default function Navbar({
sandboxData={sandboxData} sandboxData={sandboxData}
/> />
<div className="flex items-center h-full space-x-4"> <div className="flex items-center h-full space-x-4">
<Avatars /> {/* <Avatars /> */}
{isOwner ? ( {isOwner ? (
<> <>
<DeployButtonModal data={sandboxData} userData={userData} /> <DeployButtonModal data={sandboxData} userData={userData} />
<Button variant="outline" onClick={() => setIsShareOpen(true)}> {/* <Button variant="outline" onClick={() => setIsShareOpen(true)}>
<Users className="w-4 h-4 mr-2" /> <Users className="w-4 h-4 mr-2" />
Share Share
</Button> </Button> */}
<DownloadButton name={sandboxData.name} /> <DownloadButton name={sandboxData.name} /></>
</>
) : null} ) : null}
<ThemeSwitcher /> <ThemeSwitcher />
<UserButton userData={userData} /> <UserButton userData={userData} />

7
frontend/components/landing/index.tsx
View File

@ -45,9 +45,14 @@ export default function Landing() {
<h1 className="text-2xl font-medium text-center mt-16"> <h1 className="text-2xl font-medium text-center mt-16">
A Collaborative + AI-Powered Code Environment A Collaborative + AI-Powered Code Environment
</h1> </h1>
<p className="text-muted-foreground mt-4 text-center "> {/* <p className="text-muted-foreground mt-4 text-center ">
Sandbox is an open-source cloud-based code editing environment with Sandbox is an open-source cloud-based code editing environment with
custom AI code autocompletion and real-time collaboration. custom AI code autocompletion and real-time collaboration.
</p> */}
<p className="text-muted-foreground mt-4 text-center ">
A cloud-based code editor featuring real-time collaboration,
intelligent code autocompletion, and an AI assistant to help you code
faster and smarter.
</p> </p>
<div className="mt-8 flex space-x-4"> <div className="mt-8 flex space-x-4">
<Link href="/sign-up"> <Link href="/sign-up">