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

start disable modal ui + logic

Browse Source
This commit is contained in:
Ishaan Dey 2024-05-07 21:19:32 -07:00
parent beab0f7845
commit 9d288f580d
8 changed files with 283 additions and 222 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -62,13 +62,9 @@ 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">
<Suspense fallback={<Loading />}> {/* <Suspense fallback={<Loading />}> */}
<Room id={sandboxId}> <Room id={sandboxId}>
<Navbar <Navbar userData={userData} sandboxData={sandboxData} shared={shared} />
userData={userData}
sandboxData={sandboxData}
shared={shared}
/>
<div className="w-screen flex grow"> <div className="w-screen flex grow">
<CodeEditor <CodeEditor
userData={userData} userData={userData}
@ -77,7 +73,7 @@ export default async function CodePage({ params }: { params: { id: string } }) {
/> />
</div> </div>
</Room> </Room>
</Suspense> {/* </Suspense> */}
</div> </div>
); );
} }

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

@ -1,7 +1,7 @@
"use client" "use client";
import CustomButton from "@/components/ui/customButton" import CustomButton from "@/components/ui/customButton";
import { Button } from "@/components/ui/button" import { Button } from "@/components/ui/button";
import { import {
Code2, Code2,
FolderDot, FolderDot,
@ -9,44 +9,44 @@ import {
Plus, Plus,
Settings, Settings,
Users, Users,
} from "lucide-react" } from "lucide-react";
import { useState } from "react" import { useState } from "react";
import { Sandbox } from "@/lib/types" import { Sandbox } from "@/lib/types";
import DashboardProjects from "./projects" import DashboardProjects from "./projects";
import DashboardSharedWithMe from "./shared" import DashboardSharedWithMe from "./shared";
import NewProjectModal from "./newProject" import NewProjectModal from "./newProject";
import Link from "next/link" import Link from "next/link";
import { useSearchParams } from "next/navigation" import { useSearchParams } from "next/navigation";
import AboutModal from "./about" import AboutModal from "./about";
import { toast } from "sonner" import { toast } from "sonner";
type TScreen = "projects" | "shared" | "settings" | "search" type TScreen = "projects" | "shared" | "settings" | "search";
export default function Dashboard({ export default function Dashboard({
sandboxes, sandboxes,
shared, shared,
}: { }: {
sandboxes: Sandbox[] sandboxes: Sandbox[];
shared: { shared: {
id: string id: string;
name: string name: string;
type: "react" | "node" type: "react" | "node";
author: string author: string;
sharedOn: Date sharedOn: Date;
}[] }[];
}) { }) {
const [screen, setScreen] = useState<TScreen>("projects") const [screen, setScreen] = useState<TScreen>("projects");
const [newProjectModalOpen, setNewProjectModalOpen] = useState(false) const [newProjectModalOpen, setNewProjectModalOpen] = useState(false);
const [aboutModalOpen, setAboutModalOpen] = useState(false) const [aboutModalOpen, setAboutModalOpen] = useState(false);
const activeScreen = (s: TScreen) => { const activeScreen = (s: TScreen) => {
if (screen === s) return "justify-start" if (screen === s) return "justify-start";
else return "justify-start font-normal text-muted-foreground" else return "justify-start font-normal text-muted-foreground";
} };
const searchParams = useSearchParams() const searchParams = useSearchParams();
const q = searchParams.get("q") const q = searchParams.get("q");
return ( return (
<> <>
@ -61,10 +61,10 @@ export default function Dashboard({
<CustomButton <CustomButton
onClick={() => { onClick={() => {
if (sandboxes.length >= 8) { if (sandboxes.length >= 8) {
toast.error("You reached the maximum # of sandboxes.") toast.error("You reached the maximum # of sandboxes.");
return return;
} }
setNewProjectModalOpen(true) setNewProjectModalOpen(true);
}} }}
className="mb-4" className="mb-4"
> >
@ -97,7 +97,7 @@ export default function Dashboard({
</Button> */} </Button> */}
</div> </div>
<div className="flex flex-col"> <div className="flex flex-col">
<Link href="https://github.com/ishaan1013/sandbox"> <a target="_blank" href="https://github.com/ishaan1013/sandbox">
<Button <Button
variant="ghost" variant="ghost"
className="justify-start font-normal text-muted-foreground" className="justify-start font-normal text-muted-foreground"
@ -105,7 +105,7 @@ export default function Dashboard({
<Code2 className="w-4 h-4 mr-2" /> <Code2 className="w-4 h-4 mr-2" />
GitHub Repository GitHub Repository
</Button> </Button>
</Link> </a>
<Button <Button
onClick={() => setAboutModalOpen(true)} onClick={() => setAboutModalOpen(true)}
variant="ghost" variant="ghost"
@ -123,5 +123,5 @@ export default function Dashboard({
) : screen === "settings" ? null : null} ) : screen === "settings" ? null : null}
</div> </div>
</> </>
) );
} }

51
frontend/components/dashboard/projects.tsx
View File

@ -1,35 +1,36 @@
"use client" "use client";
import { Sandbox } from "@/lib/types" import { Sandbox } from "@/lib/types";
import ProjectCard from "./projectCard" import ProjectCard from "./projectCard";
import Image from "next/image" import Image from "next/image";
import ProjectCardDropdown from "./projectCard/dropdown" import ProjectCardDropdown from "./projectCard/dropdown";
import { Clock, Globe, Lock } from "lucide-react" import { Clock, Globe, Lock } from "lucide-react";
import Link from "next/link" import Link from "next/link";
import { Card } from "../ui/card" import { Card } from "../ui/card";
import { deleteSandbox, updateSandbox } from "@/lib/actions" import { deleteSandbox, updateSandbox } from "@/lib/actions";
import { toast } from "sonner" import { toast } from "sonner";
export default function DashboardProjects({ export default function DashboardProjects({
sandboxes, sandboxes,
q, q,
}: { }: {
sandboxes: Sandbox[] sandboxes: Sandbox[];
q: string | null q: string | null;
}) { }) {
const onDelete = async (sandbox: Sandbox) => { const onDelete = async (sandbox: Sandbox) => {
toast(`Project ${sandbox.name} deleted.`) toast(`Project ${sandbox.name} deleted.`);
await deleteSandbox(sandbox.id) await deleteSandbox(sandbox.id);
} };
const onVisibilityChange = async (sandbox: Sandbox) => { const onVisibilityChange = async (sandbox: Sandbox) => {
const newVisibility = sandbox.visibility === "public" ? "private" : "public" const newVisibility =
toast(`Project ${sandbox.name} is now ${newVisibility}.`) sandbox.visibility === "public" ? "private" : "public";
toast(`Project ${sandbox.name} is now ${newVisibility}.`);
await updateSandbox({ await updateSandbox({
id: sandbox.id, id: sandbox.id,
visibility: newVisibility, visibility: newVisibility,
}) });
} };
return ( return (
<div className="grow p-4 flex flex-col"> <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"} {q && q.length > 0 ? `Showing search results for: ${q}` : "My Projects"}
</div> </div>
<div className="grow w-full "> <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"> <div className="w-full grid lg:grid-cols-3 2xl:grid-cols-4 md:grid-cols-2 gap-4">
{sandboxes.map((sandbox) => { {sandboxes.map((sandbox) => {
if (q && q.length > 0) { if (q && q.length > 0) {
if (!sandbox.name.toLowerCase().includes(q.toLowerCase())) { if (!sandbox.name.toLowerCase().includes(q.toLowerCase())) {
return null return null;
} }
} }
return ( return (
@ -91,10 +93,15 @@ export default function DashboardProjects({
{/* </ProjectCard> */} {/* </ProjectCard> */}
</Card> </Card>
</Link> </Link>
) );
})} })}
</div> </div>
) : (
<div className="text-muted-foreground text-sm">
You don't have any projects yet. Create one to get started!
</div>
)}
</div> </div>
</div> </div>
) );
} }

35
frontend/components/dashboard/shared.tsx
View File

@ -1,4 +1,4 @@
import { Sandbox } from "@/lib/types" import { Sandbox } from "@/lib/types";
import { import {
Table, Table,
TableBody, TableBody,
@ -7,27 +7,28 @@ import {
TableHead, TableHead,
TableHeader, TableHeader,
TableRow, TableRow,
} from "@/components/ui/table" } from "@/components/ui/table";
import Image from "next/image" import Image from "next/image";
import Button from "../ui/customButton" import Button from "../ui/customButton";
import { ChevronRight } from "lucide-react" import { ChevronRight } from "lucide-react";
import Avatar from "../ui/avatar" import Avatar from "../ui/avatar";
import Link from "next/link" import Link from "next/link";
export default function DashboardSharedWithMe({ export default function DashboardSharedWithMe({
shared, shared,
}: { }: {
shared: { shared: {
id: string id: string;
name: string name: string;
type: "react" | "node" type: "react" | "node";
author: string author: string;
sharedOn: Date sharedOn: Date;
}[] }[];
}) { }) {
return ( return (
<div className="grow p-4 flex flex-col"> <div className="grow p-4 flex flex-col">
<div className="text-xl font-medium mb-8">Shared With Me</div> <div className="text-xl font-medium mb-8">Shared With Me</div>
{shared.length > 0 ? (
<div className="grow w-full"> <div className="grow w-full">
<Table> <Table>
<TableHeader> <TableHeader>
@ -78,6 +79,12 @@ export default function DashboardSharedWithMe({
</TableBody> </TableBody>
</Table> </Table>
</div> </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>
) )}
</div>
);
} }

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

@ -39,6 +39,8 @@ import { Sandbox, User, TFile, TFileData, TFolder, TTab } from "@/lib/types";
import { processFileType, validateName } from "@/lib/utils"; import { processFileType, validateName } from "@/lib/utils";
import { Cursors } from "./live/cursors"; import { Cursors } from "./live/cursors";
import { Terminal } from "@xterm/xterm"; import { Terminal } from "@xterm/xterm";
import DisableAccessModal from "./live/disableModal";
import Loading from "./loading";
export default function CodeEditor({ export default function CodeEditor({
userData, userData,
@ -77,6 +79,10 @@ export default function CodeEditor({
const [creatingTerminal, setCreatingTerminal] = useState(false); const [creatingTerminal, setCreatingTerminal] = useState(false);
const [provider, setProvider] = useState<TypedLiveblocksProvider>(); const [provider, setProvider] = useState<TypedLiveblocksProvider>();
const [ai, setAi] = useState(false); const [ai, setAi] = useState(false);
const [disableAccess, setDisableAccess] = useState({
isDisabled: false,
message: "",
});
const isOwner = sandboxData.userId === userData.id; const isOwner = sandboxData.userId === userData.id;
const clerk = useClerk(); 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 ( return (
<> <>
<div ref={generateRef} /> <div ref={generateRef} />

33
frontend/components/editor/live/disableModal.tsx Normal file
View File

@ -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>
);
}

13
frontend/components/editor/live/room.tsx
View File

@ -1,15 +1,14 @@
"use client" "use client";
import { RoomProvider } from "@/liveblocks.config" import { RoomProvider } from "@/liveblocks.config";
import { ClientSideSuspense } from "@liveblocks/react" import { ClientSideSuspense } from "@liveblocks/react";
import Loading from "../loading"
export function Room({ export function Room({
id, id,
children, children,
}: { }: {
id: string id: string;
children: React.ReactNode children: React.ReactNode;
}) { }) {
return ( return (
<RoomProvider <RoomProvider
@ -22,5 +21,5 @@ export function Room({
{children} {children}
{/* </ClientSideSuspense> */} {/* </ClientSideSuspense> */}
</RoomProvider> </RoomProvider>
) );
} }

24
frontend/components/editor/loading.tsx
View File

@ -5,17 +5,17 @@ import { Loader, Loader2 } from "lucide-react";
export default function Loading() { export default function Loading() {
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">
<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">
<Image src={Logo} alt="Logo" width={36} height={36} /> // <Image src={Logo} alt="Logo" width={36} height={36} />
<Skeleton className="w-[100px] h-[24px] rounded-md" /> // <Skeleton className="w-[100px] h-[24px] rounded-md" />
</div> // </div>
<div className="flex items-center space-x-4"> // <div className="flex items-center space-x-4">
<Skeleton className="w-[64px] h-[36px] rounded-md" /> // <Skeleton className="w-[64px] h-[36px] rounded-md" />
<Skeleton className="w-[36px] h-[36px] rounded-full" /> // <Skeleton className="w-[36px] h-[36px] rounded-full" />
</div> // </div>
</div> // </div>
<div className="grow flex w-screen"> <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="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="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" /> <Skeleton className="w-full h-full col-span-2 rounded-md" />
</div> </div>
</div> </div>
</div> // </div>
); );
} }