add edit + share modals

2024-04-30 22:48:36 -04:00 · 2024-04-30 22:48:36 -04:00 · 260de4f3b5
commit 260de4f3b5
parent a0c2bb1bc3
7 changed files with 323 additions and 22 deletions
--- a/backend/server/dist/index.js
+++ b/backend/server/dist/index.js
@ -157,6 +157,7 @@ io.on("connection", (socket) => __awaiter(void 0, void 0, void 0, function* () {
            });
        });
        const onExit = pty.onExit((code) => console.log("exit :(", code));
+        pty.write("clear\r");
        terminals[id] = {
            terminal: pty,
            onData,
--- a/backend/server/src/index.ts
+++ b/backend/server/src/index.ts
@ -187,6 +187,8 @@ io.on("connection", async (socket) => {

    const onExit = pty.onExit((code) => console.log("exit :(", code))

+    pty.write("clear\r")
+
    terminals[id] = {
      terminal: pty,
      onData,
--- a/frontend/components/dashboard/newProject.tsx
+++ b/frontend/components/dashboard/newProject.tsx
@ -14,7 +14,6 @@ import { set, z } from "zod"
 import { zodResolver } from "@hookform/resolvers/zod"
 import { useForm } from "react-hook-form"

-import CustomButton from "@/components/ui/customButton"
 import {
  Form,
  FormControl,
@ -36,6 +35,7 @@ import { useUser } from "@clerk/nextjs"
 import { createSandbox } from "@/lib/actions"
 import { useRouter } from "next/navigation"
 import { Loader2 } from "lucide-react"
+import { Button } from "../ui/button"

 type TOptions = "react" | "node"

@ -160,7 +160,7 @@ export default function NewProjectModal({
                </FormItem>
              )}
            />
-            <CustomButton disabled={loading} type="submit" className="w-full">
+            <Button disabled={loading} type="submit" className="w-full">
              {loading ? (
                <>
                  <Loader2 className="animate-spin mr-2 h-4 w-4" /> Loading...
@ -168,7 +168,7 @@ export default function NewProjectModal({
              ) : (
                "Submit"
              )}
-            </CustomButton>
+            </Button>
          </form>
        </Form>
      </DialogContent>
--- a/frontend/components/editor/navbar/edit.tsx
+++ b/frontend/components/editor/navbar/edit.tsx
@ -0,0 +1,130 @@
+"use client"
+
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog"
+import { z } from "zod"
+import { zodResolver } from "@hookform/resolvers/zod"
+import { useForm } from "react-hook-form"
+
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form"
+import { Input } from "@/components/ui/input"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select"
+import { Loader2 } from "lucide-react"
+import { useState } from "react"
+import { Sandbox } from "@/lib/types"
+import { Button } from "@/components/ui/button"
+
+const formSchema = z.object({
+  name: z.string().min(1).max(16),
+  visibility: z.enum(["public", "private"]),
+})
+
+export default function EditSandboxModal({
+  open,
+  setOpen,
+  data,
+}: {
+  open: boolean
+  setOpen: (open: boolean) => void
+  data: Sandbox
+}) {
+  const [loading, setLoading] = useState(false)
+
+  const form = useForm<z.infer<typeof formSchema>>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      name: data.name,
+      visibility: data.visibility,
+    },
+  })
+
+  async function onSubmit(values: z.infer<typeof formSchema>) {
+    // if (!user.isSignedIn) return
+    // const sandboxData = { type: selected, userId: user.user.id, ...values }
+    // setLoading(true)
+    // const id = await createSandbox(sandboxData)
+
+    console.log(values)
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Edit Sandbox Info</DialogTitle>
+        </DialogHeader>
+
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(onSubmit)}>
+            <FormField
+              control={form.control}
+              name="name"
+              render={({ field }) => (
+                <FormItem className="mb-4">
+                  <FormLabel>Name</FormLabel>
+                  <FormControl>
+                    <Input placeholder="My Project" {...field} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <FormField
+              control={form.control}
+              name="visibility"
+              render={({ field }) => (
+                <FormItem className="mb-8">
+                  <FormLabel>Visibility</FormLabel>
+                  <Select
+                    onValueChange={field.onChange}
+                    defaultValue={field.value}
+                  >
+                    <FormControl>
+                      <SelectTrigger>
+                        <SelectValue />
+                      </SelectTrigger>
+                    </FormControl>
+                    <SelectContent>
+                      <SelectItem value="public">Public</SelectItem>
+                      <SelectItem value="private">Private</SelectItem>
+                    </SelectContent>
+                  </Select>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <Button disabled={loading} type="submit" className="w-full">
+              {loading ? (
+                <>
+                  <Loader2 className="animate-spin mr-2 h-4 w-4" /> Loading...
+                </>
+              ) : (
+                "Submit"
+              )}
+            </Button>
+          </form>
+        </Form>
+      </DialogContent>
+    </Dialog>
+  )
+}
--- a/frontend/components/editor/navbar/index.tsx
+++ b/frontend/components/editor/navbar/index.tsx
@ -1,9 +1,15 @@
+"use client"
+
 import Image from "next/image"
 import Logo from "@/assets/logo.svg"
-import { Pencil } from "lucide-react"
+import { Pencil, Users } from "lucide-react"
 import Link from "next/link"
 import { Sandbox, User } from "@/lib/types"
 import UserButton from "@/components/ui/userButton"
+import { Button } from "@/components/ui/button"
+import { useState } from "react"
+import EditSandboxModal from "./edit"
+import ShareSandboxModal from "./share"

 export default function Navbar({
  userData,
@ -12,23 +18,47 @@ export default function Navbar({
  userData: User
  sandboxData: Sandbox
 }) {
+  const [isEditOpen, setIsEditOpen] = useState(false)
+  const [isShareOpen, setIsShareOpen] = useState(false)
+
  return (
+    <>
+      <EditSandboxModal
+        open={isEditOpen}
+        setOpen={setIsEditOpen}
+        data={sandboxData}
+      />
+      <ShareSandboxModal
+        open={isShareOpen}
+        setOpen={setIsShareOpen}
+        data={sandboxData}
+      />
      <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">
          <Link
            href="/"
-          className="ring-offset-2 ring-offset-background focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none rounded-sm"
+            className="ring-offset-2 transition-all ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring rounded-md"
          >
            <Image src={Logo} alt="Logo" width={36} height={36} />
          </Link>
          <div className="text-sm font-medium flex items-center">
            {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">
+            <button
+              onClick={() => setIsEditOpen(true)}
+              className="h-7 w-7 ml-2 flex items-center justify-center bg-transparent hover:bg-muted-foreground/25 cursor-pointer rounded-md ring-offset-2 transition-all ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+            >
              <Pencil className="w-4 h-4" />
+            </button>
          </div>
        </div>
-      </div>
+        <div className="flex items-center space-x-4">
+          <Button variant="outline" onClick={() => setIsShareOpen(true)}>
+            <Users className="w-4 h-4 mr-2" />
+            Share
+          </Button>
          <UserButton userData={userData} />
        </div>
+      </div>
+    </>
  )
 }
--- a/frontend/components/editor/navbar/share.tsx
+++ b/frontend/components/editor/navbar/share.tsx
@ -0,0 +1,127 @@
+"use client"
+
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog"
+import { z } from "zod"
+import { zodResolver } from "@hookform/resolvers/zod"
+import { useForm } from "react-hook-form"
+
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form"
+import { Input } from "@/components/ui/input"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select"
+import { Loader2, UserPlus, X } from "lucide-react"
+import { useState } from "react"
+import { Sandbox } from "@/lib/types"
+import { Button } from "@/components/ui/button"
+
+const formSchema = z.object({
+  email: z.string().email(),
+})
+
+export default function ShareSandboxModal({
+  open,
+  setOpen,
+  data,
+}: {
+  open: boolean
+  setOpen: (open: boolean) => void
+  data: Sandbox
+}) {
+  const [loading, setLoading] = useState(false)
+
+  const form = useForm<z.infer<typeof formSchema>>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      email: "",
+    },
+  })
+
+  async function onSubmit(values: z.infer<typeof formSchema>) {
+    // if (!user.isSignedIn) return
+    // const sandboxData = { type: selected, userId: user.user.id, ...values }
+    // setLoading(true)
+    // const id = await createSandbox(sandboxData)
+
+    console.log(values)
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogContent className="p-0">
+        <div className="p-6 pb-3 space-y-6">
+          <DialogHeader>
+            <DialogTitle>Share Sandbox</DialogTitle>
+          </DialogHeader>
+          <Form {...form}>
+            <form onSubmit={form.handleSubmit(onSubmit)} className="flex">
+              <FormField
+                control={form.control}
+                name="email"
+                render={({ field }) => (
+                  <FormItem className="mr-4 w-full">
+                    <FormControl>
+                      <Input
+                        placeholder="yourfriend@domain.com"
+                        {...field}
+                        className="w-full"
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <Button disabled={loading} type="submit" className="">
+                {loading ? (
+                  <>
+                    <Loader2 className="animate-spin mr-2 h-4 w-4" /> Loading...
+                  </>
+                ) : (
+                  <>
+                    <UserPlus className="mr-2 h-4 w-4" /> Share
+                  </>
+                )}
+              </Button>
+            </form>
+          </Form>
+        </div>
+        <div className="w-full h-[1px] bg-border" />
+        <div className="p-6 pt-3">
+          <DialogHeader className="mb-6">
+            <DialogTitle>Share Sandbox</DialogTitle>
+          </DialogHeader>
+          <div className="space-y-2">
+            <div className="flex items-center justify-between">
+              <div className="flex items-center">
+                <div className="h-5 w-5 bg-red-500 rounded-full mr-2" />
+                Ishaan Dey
+              </div>
+              <Button variant="ghost" size="smIcon">
+                <X className="w-4 h-4" />
+              </Button>
+            </div>
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  )
+}
--- a/frontend/components/editor/terminal/index.tsx
+++ b/frontend/components/editor/terminal/index.tsx
@ -6,6 +6,7 @@ import "./xterm.css"

 import { useEffect, useRef, useState } from "react"
 import { Socket } from "socket.io-client"
+import { Loader2 } from "lucide-react"

 export default function EditorTerminal({ socket }: { socket: Socket }) {
  const terminalRef = useRef(null)
@ -32,9 +33,8 @@ export default function EditorTerminal({ socket }: { socket: Socket }) {
    if (!term) return

    const onConnect = () => {
-      console.log("Connected to server", socket.connected)
+      // console.log("Connected to server", socket.connected)
      setTimeout(() => {
-        console.log("sending createTerminal")
        socket.emit("createTerminal", { id: "testId" })
      }, 500)
    }
@ -42,7 +42,6 @@ export default function EditorTerminal({ socket }: { socket: Socket }) {
    const onTerminalResponse = (response: { data: string }) => {
      // const res = Buffer.from(response.data, "base64").toString("utf-8")
      const res = response.data
-      console.log("terminal response", res)
      term.write(res)
    }

@ -71,5 +70,17 @@ export default function EditorTerminal({ socket }: { socket: Socket }) {
    }
  }, [term, terminalRef.current])

-  return <div ref={terminalRef} className="w-full h-full text-left"></div>
+  return (
+    <div
+      ref={terminalRef}
+      className="w-full font-mono text-sm h-full text-left"
+    >
+      {term === null ? (
+        <div className="flex items-center text-muted-foreground p-2">
+          <Loader2 className="animate-spin mr-2 h-4 w-4" />
+          <span>Connecting to terminal...</span>
+        </div>
+      ) : null}
+    </div>
+  )
 }