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
Download Patch File Download Diff File Expand all files Collapse all files

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 { 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} />

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

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

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