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,13 +62,9 @@ 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 />}>
+      {/* <Suspense fallback={<Loading />}> */}
      <Room id={sandboxId}>
-          <Navbar
-            userData={userData}
-            sandboxData={sandboxData}
-            shared={shared}
-          />
+        <Navbar userData={userData} sandboxData={sandboxData} shared={shared} />
        <div className="w-screen flex grow">
          <CodeEditor
            userData={userData}
@ -77,7 +73,7 @@ export default async function CodePage({ params }: { params: { id: string } }) {
          />
        </div>
      </Room>
-      </Suspense>
+      {/* </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,11 +38,12 @@ export default function DashboardProjects({
        {q && q.length > 0 ? `Showing search results for: ${q}` : "My Projects"}
      </div>
      <div className="grow w-full ">
+        {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 null;
                }
              }
              return (
@ -91,10 +93,15 @@ export default function DashboardProjects({
                    {/* </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,27 +7,28 @@ 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>
+      {shared.length > 0 ? (
        <div className="grow w-full">
          <Table>
            <TableHeader>
@ -78,6 +79,12 @@ export default function DashboardSharedWithMe({
            </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,17 +5,17 @@ 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>
-        <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="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 ">
@ -40,6 +40,6 @@ export default function Loading() {
        <Skeleton className="w-full h-full col-span-2 rounded-md" />
      </div>
    </div>
-    </div>
+    // </div>
  );
 }