start disable modal ui + logic

2024-05-07 21:19:32 -07:00 · 2024-05-07 21:19:32 -07:00 · 9d288f580d
commit 9d288f580d
parent beab0f7845
8 changed files with 283 additions and 222 deletions
--- a/frontend/app/(app)/code/[id]/page.tsx
+++ b/frontend/app/(app)/code/[id]/page.tsx
@ -62,22 +62,18 @@ export default async function CodePage({ params }: { params: { id: string } }) {

  return (
    <div className="overflow-hidden overscroll-none w-screen flex flex-col h-screen bg-background">
-      <Suspense fallback={<Loading />}>
-        <Room id={sandboxId}>
-          <Navbar
+      {/* <Suspense fallback={<Loading />}> */}
+      <Room id={sandboxId}>
+        <Navbar userData={userData} sandboxData={sandboxData} shared={shared} />
+        <div className="w-screen flex grow">
+          <CodeEditor
            userData={userData}
            sandboxData={sandboxData}
-            shared={shared}
+            isSharedUser={isSharedUser}
          />
-          <div className="w-screen flex grow">
-            <CodeEditor
-              userData={userData}
-              sandboxData={sandboxData}
-              isSharedUser={isSharedUser}
-            />
-          </div>
-        </Room>
-      </Suspense>
+        </div>
+      </Room>
+      {/* </Suspense> */}
    </div>
  );
 }
--- a/frontend/components/dashboard/index.tsx
+++ b/frontend/components/dashboard/index.tsx
@ -1,7 +1,7 @@
-"use client"
+"use client";

-import CustomButton from "@/components/ui/customButton"
-import { Button } from "@/components/ui/button"
+import CustomButton from "@/components/ui/customButton";
+import { Button } from "@/components/ui/button";
 import {
  Code2,
  FolderDot,
@ -9,44 +9,44 @@ import {
  Plus,
  Settings,
  Users,
-} from "lucide-react"
-import { useState } from "react"
-import { Sandbox } from "@/lib/types"
-import DashboardProjects from "./projects"
-import DashboardSharedWithMe from "./shared"
-import NewProjectModal from "./newProject"
-import Link from "next/link"
-import { useSearchParams } from "next/navigation"
-import AboutModal from "./about"
-import { toast } from "sonner"
+} from "lucide-react";
+import { useState } from "react";
+import { Sandbox } from "@/lib/types";
+import DashboardProjects from "./projects";
+import DashboardSharedWithMe from "./shared";
+import NewProjectModal from "./newProject";
+import Link from "next/link";
+import { useSearchParams } from "next/navigation";
+import AboutModal from "./about";
+import { toast } from "sonner";

-type TScreen = "projects" | "shared" | "settings" | "search"
+type TScreen = "projects" | "shared" | "settings" | "search";

 export default function Dashboard({
  sandboxes,
  shared,
 }: {
-  sandboxes: Sandbox[]
+  sandboxes: Sandbox[];
  shared: {
-    id: string
-    name: string
-    type: "react" | "node"
-    author: string
-    sharedOn: Date
-  }[]
+    id: string;
+    name: string;
+    type: "react" | "node";
+    author: string;
+    sharedOn: Date;
+  }[];
 }) {
-  const [screen, setScreen] = useState<TScreen>("projects")
+  const [screen, setScreen] = useState<TScreen>("projects");

-  const [newProjectModalOpen, setNewProjectModalOpen] = useState(false)
-  const [aboutModalOpen, setAboutModalOpen] = useState(false)
+  const [newProjectModalOpen, setNewProjectModalOpen] = useState(false);
+  const [aboutModalOpen, setAboutModalOpen] = useState(false);

  const activeScreen = (s: TScreen) => {
-    if (screen === s) return "justify-start"
-    else return "justify-start font-normal text-muted-foreground"
-  }
+    if (screen === s) return "justify-start";
+    else return "justify-start font-normal text-muted-foreground";
+  };

-  const searchParams = useSearchParams()
-  const q = searchParams.get("q")
+  const searchParams = useSearchParams();
+  const q = searchParams.get("q");

  return (
    <>
@ -61,10 +61,10 @@ export default function Dashboard({
            <CustomButton
              onClick={() => {
                if (sandboxes.length >= 8) {
-                  toast.error("You reached the maximum # of sandboxes.")
-                  return
+                  toast.error("You reached the maximum # of sandboxes.");
+                  return;
                }
-                setNewProjectModalOpen(true)
+                setNewProjectModalOpen(true);
              }}
              className="mb-4"
            >
@ -97,7 +97,7 @@ export default function Dashboard({
            </Button> */}
          </div>
          <div className="flex flex-col">
-            <Link href="https://github.com/ishaan1013/sandbox">
+            <a target="_blank" href="https://github.com/ishaan1013/sandbox">
              <Button
                variant="ghost"
                className="justify-start font-normal text-muted-foreground"
@ -105,7 +105,7 @@ export default function Dashboard({
                <Code2 className="w-4 h-4 mr-2" />
                GitHub Repository
              </Button>
-            </Link>
+            </a>
            <Button
              onClick={() => setAboutModalOpen(true)}
              variant="ghost"
@ -123,5 +123,5 @@ export default function Dashboard({
        ) : screen === "settings" ? null : null}
      </div>
    </>
-  )
+  );
 }
--- a/frontend/components/dashboard/projects.tsx
+++ b/frontend/components/dashboard/projects.tsx
@ -1,35 +1,36 @@
-"use client"
+"use client";

-import { Sandbox } from "@/lib/types"
-import ProjectCard from "./projectCard"
-import Image from "next/image"
-import ProjectCardDropdown from "./projectCard/dropdown"
-import { Clock, Globe, Lock } from "lucide-react"
-import Link from "next/link"
-import { Card } from "../ui/card"
-import { deleteSandbox, updateSandbox } from "@/lib/actions"
-import { toast } from "sonner"
+import { Sandbox } from "@/lib/types";
+import ProjectCard from "./projectCard";
+import Image from "next/image";
+import ProjectCardDropdown from "./projectCard/dropdown";
+import { Clock, Globe, Lock } from "lucide-react";
+import Link from "next/link";
+import { Card } from "../ui/card";
+import { deleteSandbox, updateSandbox } from "@/lib/actions";
+import { toast } from "sonner";

 export default function DashboardProjects({
  sandboxes,
  q,
 }: {
-  sandboxes: Sandbox[]
-  q: string | null
+  sandboxes: Sandbox[];
+  q: string | null;
 }) {
  const onDelete = async (sandbox: Sandbox) => {
-    toast(`Project ${sandbox.name} deleted.`)
-    await deleteSandbox(sandbox.id)
-  }
+    toast(`Project ${sandbox.name} deleted.`);
+    await deleteSandbox(sandbox.id);
+  };

  const onVisibilityChange = async (sandbox: Sandbox) => {
-    const newVisibility = sandbox.visibility === "public" ? "private" : "public"
-    toast(`Project ${sandbox.name} is now ${newVisibility}.`)
+    const newVisibility =
+      sandbox.visibility === "public" ? "private" : "public";
+    toast(`Project ${sandbox.name} is now ${newVisibility}.`);
    await updateSandbox({
      id: sandbox.id,
      visibility: newVisibility,
-    })
-  }
+    });
+  };

  return (
    <div className="grow p-4 flex flex-col">
@ -37,64 +38,70 @@ export default function DashboardProjects({
        {q && q.length > 0 ? `Showing search results for: ${q}` : "My Projects"}
      </div>
      <div className="grow w-full ">
-        <div className="w-full grid lg:grid-cols-3 2xl:grid-cols-4 md:grid-cols-2 gap-4">
-          {sandboxes.map((sandbox) => {
-            if (q && q.length > 0) {
-              if (!sandbox.name.toLowerCase().includes(q.toLowerCase())) {
-                return null
+        {sandboxes.length > 0 ? (
+          <div className="w-full grid lg:grid-cols-3 2xl:grid-cols-4 md:grid-cols-2 gap-4">
+            {sandboxes.map((sandbox) => {
+              if (q && q.length > 0) {
+                if (!sandbox.name.toLowerCase().includes(q.toLowerCase())) {
+                  return null;
+                }
              }
-            }
-            return (
-              <Link
-                key={sandbox.id}
-                href={`/code/${sandbox.id}`}
-                className="cursor-pointer transition-all focus-visible:outline-none focus-visible:ring-offset-2 focus-visible:ring-offset-background focus-visible:ring-2 focus-visible:ring-ring rounded-lg"
-              >
-                <Card className="p-4 h-48 flex flex-col justify-between items-start hover:border-foreground transition-all">
-                  {/* <ProjectCard key={sandbox.id} id={sandbox.id}> */}
-                  <div className="space-x-2 flex items-center justify-start w-full">
-                    <Image
-                      alt=""
-                      src={
-                        sandbox.type === "react"
-                          ? "/project-icons/react.svg"
-                          : "/project-icons/node.svg"
-                      }
-                      width={20}
-                      height={20}
-                    />
-                    <div className="font-medium static whitespace-nowrap w-full text-ellipsis overflow-hidden">
-                      {sandbox.name}
+              return (
+                <Link
+                  key={sandbox.id}
+                  href={`/code/${sandbox.id}`}
+                  className="cursor-pointer transition-all focus-visible:outline-none focus-visible:ring-offset-2 focus-visible:ring-offset-background focus-visible:ring-2 focus-visible:ring-ring rounded-lg"
+                >
+                  <Card className="p-4 h-48 flex flex-col justify-between items-start hover:border-foreground transition-all">
+                    {/* <ProjectCard key={sandbox.id} id={sandbox.id}> */}
+                    <div className="space-x-2 flex items-center justify-start w-full">
+                      <Image
+                        alt=""
+                        src={
+                          sandbox.type === "react"
+                            ? "/project-icons/react.svg"
+                            : "/project-icons/node.svg"
+                        }
+                        width={20}
+                        height={20}
+                      />
+                      <div className="font-medium static whitespace-nowrap w-full text-ellipsis overflow-hidden">
+                        {sandbox.name}
+                      </div>
+                      <ProjectCardDropdown
+                        sandbox={sandbox}
+                        onVisibilityChange={onVisibilityChange}
+                        onDelete={onDelete}
+                      />
                    </div>
-                    <ProjectCardDropdown
-                      sandbox={sandbox}
-                      onVisibilityChange={onVisibilityChange}
-                      onDelete={onDelete}
-                    />
-                  </div>
-                  <div className="flex flex-col text-muted-foreground space-y-0.5 text-sm">
-                    <div className="flex items-center">
-                      {sandbox.visibility === "private" ? (
-                        <>
-                          <Lock className="w-3 h-3 mr-2" /> Private
-                        </>
-                      ) : (
-                        <>
-                          <Globe className="w-3 h-3 mr-2" /> Public
-                        </>
-                      )}
+                    <div className="flex flex-col text-muted-foreground space-y-0.5 text-sm">
+                      <div className="flex items-center">
+                        {sandbox.visibility === "private" ? (
+                          <>
+                            <Lock className="w-3 h-3 mr-2" /> Private
+                          </>
+                        ) : (
+                          <>
+                            <Globe className="w-3 h-3 mr-2" /> Public
+                          </>
+                        )}
+                      </div>
+                      <div className="flex items-center">
+                        <Clock className="w-3 h-3 mr-2" /> 3d ago
+                      </div>
                    </div>
-                    <div className="flex items-center">
-                      <Clock className="w-3 h-3 mr-2" /> 3d ago
-                    </div>
-                  </div>
-                  {/* </ProjectCard> */}
-                </Card>
-              </Link>
-            )
-          })}
-        </div>
+                    {/* </ProjectCard> */}
+                  </Card>
+                </Link>
+              );
+            })}
+          </div>
+        ) : (
+          <div className="text-muted-foreground text-sm">
+            You don't have any projects yet. Create one to get started!
+          </div>
+        )}
      </div>
    </div>
-  )
+  );
 }
--- a/frontend/components/dashboard/shared.tsx
+++ b/frontend/components/dashboard/shared.tsx
@ -1,4 +1,4 @@
-import { Sandbox } from "@/lib/types"
+import { Sandbox } from "@/lib/types";
 import {
  Table,
  TableBody,
@ -7,77 +7,84 @@ import {
  TableHead,
  TableHeader,
  TableRow,
-} from "@/components/ui/table"
-import Image from "next/image"
-import Button from "../ui/customButton"
-import { ChevronRight } from "lucide-react"
-import Avatar from "../ui/avatar"
-import Link from "next/link"
+} from "@/components/ui/table";
+import Image from "next/image";
+import Button from "../ui/customButton";
+import { ChevronRight } from "lucide-react";
+import Avatar from "../ui/avatar";
+import Link from "next/link";

 export default function DashboardSharedWithMe({
  shared,
 }: {
  shared: {
-    id: string
-    name: string
-    type: "react" | "node"
-    author: string
-    sharedOn: Date
-  }[]
+    id: string;
+    name: string;
+    type: "react" | "node";
+    author: string;
+    sharedOn: Date;
+  }[];
 }) {
  return (
    <div className="grow p-4 flex flex-col">
      <div className="text-xl font-medium mb-8">Shared With Me</div>
-      <div className="grow w-full">
-        <Table>
-          <TableHeader>
-            <TableRow className="hover:bg-background">
-              <TableHead>Sandbox Name</TableHead>
-              <TableHead>Shared By</TableHead>
-              <TableHead>Sent On</TableHead>
-              <TableHead className="text-right"></TableHead>
-            </TableRow>
-          </TableHeader>
-          <TableBody>
-            {shared.map((sandbox) => (
-              <TableRow>
-                <TableCell>
-                  <div className="font-medium flex items-center">
-                    <Image
-                      alt=""
-                      src={
-                        sandbox.type === "react"
-                          ? "/project-icons/react.svg"
-                          : "/project-icons/node.svg"
-                      }
-                      width={20}
-                      height={20}
-                      className="mr-2"
-                    />
-                    {sandbox.name}
-                  </div>
-                </TableCell>
-                <TableCell>
-                  <div className="flex items-center">
-                    <Avatar name={sandbox.author} className="mr-2" />
-                    {sandbox.author}
-                  </div>
-                </TableCell>
-                <TableCell>
-                  {new Date(sandbox.sharedOn).toLocaleDateString()}
-                </TableCell>
-                <TableCell className="text-right">
-                  <Link href={`/code/${sandbox.id}`}>
-                    <Button>
-                      Open <ChevronRight className="w-4 h-4 ml-2" />
-                    </Button>
-                  </Link>
-                </TableCell>
+      {shared.length > 0 ? (
+        <div className="grow w-full">
+          <Table>
+            <TableHeader>
+              <TableRow className="hover:bg-background">
+                <TableHead>Sandbox Name</TableHead>
+                <TableHead>Shared By</TableHead>
+                <TableHead>Sent On</TableHead>
+                <TableHead className="text-right"></TableHead>
              </TableRow>
-            ))}
-          </TableBody>
-        </Table>
-      </div>
+            </TableHeader>
+            <TableBody>
+              {shared.map((sandbox) => (
+                <TableRow>
+                  <TableCell>
+                    <div className="font-medium flex items-center">
+                      <Image
+                        alt=""
+                        src={
+                          sandbox.type === "react"
+                            ? "/project-icons/react.svg"
+                            : "/project-icons/node.svg"
+                        }
+                        width={20}
+                        height={20}
+                        className="mr-2"
+                      />
+                      {sandbox.name}
+                    </div>
+                  </TableCell>
+                  <TableCell>
+                    <div className="flex items-center">
+                      <Avatar name={sandbox.author} className="mr-2" />
+                      {sandbox.author}
+                    </div>
+                  </TableCell>
+                  <TableCell>
+                    {new Date(sandbox.sharedOn).toLocaleDateString()}
+                  </TableCell>
+                  <TableCell className="text-right">
+                    <Link href={`/code/${sandbox.id}`}>
+                      <Button>
+                        Open <ChevronRight className="w-4 h-4 ml-2" />
+                      </Button>
+                    </Link>
+                  </TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        </div>
+      ) : (
+        <div className="text-muted-foreground text-sm">
+          No sandboxes here. Get a friend to share one with you, and try out
+          live collaboration!
+        </div>
+      )}
    </div>
-  )
+  );
 }
--- a/frontend/components/editor/index.tsx
+++ b/frontend/components/editor/index.tsx
@ -39,6 +39,8 @@ import { Sandbox, User, TFile, TFileData, TFolder, TTab } from "@/lib/types";
 import { processFileType, validateName } from "@/lib/utils";
 import { Cursors } from "./live/cursors";
 import { Terminal } from "@xterm/xterm";
+import DisableAccessModal from "./live/disableModal";
+import Loading from "./loading";

 export default function CodeEditor({
  userData,
@ -77,6 +79,10 @@ export default function CodeEditor({
  const [creatingTerminal, setCreatingTerminal] = useState(false);
  const [provider, setProvider] = useState<TypedLiveblocksProvider>();
  const [ai, setAi] = useState(false);
+  const [disableAccess, setDisableAccess] = useState({
+    isDisabled: false,
+    message: "",
+  });

  const isOwner = sandboxData.userId === userData.id;
  const clerk = useClerk();
@ -519,6 +525,19 @@ export default function CodeEditor({
    // })
  };

+  if (disableAccess.isDisabled) {
+    return (
+      <>
+        <DisableAccessModal
+          message={disableAccess.message}
+          open={disableAccess.isDisabled}
+          setOpen={() => {}}
+        />
+        <Loading />
+      </>
+    );
+  }
+
  return (
    <>
      <div ref={generateRef} />
--- a/frontend/components/editor/live/disableModal.tsx
+++ b/frontend/components/editor/live/disableModal.tsx
@ -0,0 +1,33 @@
+"use client";
+
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+
+import { ChevronRight, FileStack, Globe, TextCursor } from "lucide-react";
+
+export default function DisableAccessModal({
+  open,
+  setOpen,
+  message,
+}: {
+  open: boolean;
+  setOpen: (open: boolean) => void;
+  message: string;
+}) {
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Live Collaboration Disabled</DialogTitle>
+        </DialogHeader>
+        <div className="text-sm text-muted-foreground">{message}</div>
+      </DialogContent>
+    </Dialog>
+  );
+}
--- a/frontend/components/editor/live/room.tsx
+++ b/frontend/components/editor/live/room.tsx
@ -1,15 +1,14 @@
-"use client"
+"use client";

-import { RoomProvider } from "@/liveblocks.config"
-import { ClientSideSuspense } from "@liveblocks/react"
-import Loading from "../loading"
+import { RoomProvider } from "@/liveblocks.config";
+import { ClientSideSuspense } from "@liveblocks/react";

 export function Room({
  id,
  children,
 }: {
-  id: string
-  children: React.ReactNode
+  id: string;
+  children: React.ReactNode;
 }) {
  return (
    <RoomProvider
@ -22,5 +21,5 @@ export function Room({
      {children}
      {/* </ClientSideSuspense> */}
    </RoomProvider>
-  )
+  );
 }
--- a/frontend/components/editor/loading.tsx
+++ b/frontend/components/editor/loading.tsx
@ -5,41 +5,41 @@ import { Loader, Loader2 } from "lucide-react";

 export default function Loading() {
  return (
-    <div className="overflow-hidden overscroll-none w-screen flex flex-col h-screen bg-background">
-      <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">
-          <Image src={Logo} alt="Logo" width={36} height={36} />
-          <Skeleton className="w-[100px] h-[24px] rounded-md" />
+    // <div className="overflow-hidden overscroll-none w-screen flex flex-col h-screen bg-background">
+    // <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">
+    //     <Image src={Logo} alt="Logo" width={36} height={36} />
+    //     <Skeleton className="w-[100px] h-[24px] rounded-md" />
+    //   </div>
+    //   <div className="flex items-center space-x-4">
+    //     <Skeleton className="w-[64px] h-[36px] rounded-md" />
+    //     <Skeleton className="w-[36px] h-[36px] rounded-full" />
+    //   </div>
+    // </div>
+    <div className="grow flex w-screen">
+      <div className="h-full w-56 select-none flex flex-col text-sm items-start p-2">
+        <div className="flex w-full items-center justify-between h-8 mb-1 ">
+          <div className="text-muted-foreground">Explorer</div>
+          <div className="flex space-x-1">
+            <Skeleton className="w-6 h-6 rounded-md" />
+            <Skeleton className="w-6 h-6 rounded-md" />
+          </div>
        </div>
-        <div className="flex items-center space-x-4">
-          <Skeleton className="w-[64px] h-[36px] rounded-md" />
-          <Skeleton className="w-[36px] h-[36px] rounded-full" />
+        <div className="w-full mt-1 flex flex-col">
+          <div className="w-full flex justify-center">
+            <Loader2 className="w-4 h-4 animate-spin" />
+          </div>
        </div>
      </div>
-      <div className="grow flex w-screen">
-        <div className="h-full w-56 select-none flex flex-col text-sm items-start p-2">
-          <div className="flex w-full items-center justify-between h-8 mb-1 ">
-            <div className="text-muted-foreground">Explorer</div>
-            <div className="flex space-x-1">
-              <Skeleton className="w-6 h-6 rounded-md" />
-              <Skeleton className="w-6 h-6 rounded-md" />
-            </div>
-          </div>
-          <div className="w-full mt-1 flex flex-col">
-            <div className="w-full flex justify-center">
-              <Loader2 className="w-4 h-4 animate-spin" />
-            </div>
-          </div>
-        </div>
-        <div className="w-full h-full grid grid-cols-5 grid-rows-2 gap-4 p-2">
-          <div className="w-full h-full col-span-3 row-span-2 flex items-center justify-center text-xl font-medium text-secondary select-none">
-            <Loader2 className="w-6 h-6 mr-3 animate-spin" />
-            Loading...
-          </div>
-          <Skeleton className="w-full h-full col-span-2 rounded-md" />
-          <Skeleton className="w-full h-full col-span-2 rounded-md" />
+      <div className="w-full h-full grid grid-cols-5 grid-rows-2 gap-4 p-2">
+        <div className="w-full h-full col-span-3 row-span-2 flex items-center justify-center text-xl font-medium text-secondary select-none">
+          <Loader2 className="w-6 h-6 mr-3 animate-spin" />
+          Loading...
        </div>
+        <Skeleton className="w-full h-full col-span-2 rounded-md" />
+        <Skeleton className="w-full h-full col-span-2 rounded-md" />
      </div>
    </div>
+    // </div>
  );
 }