487 lines
16 KiB
TypeScript
487 lines
16 KiB
TypeScript
import React, { useState, useEffect, useCallback } from "react";
|
|
import {
|
|
Plus,
|
|
Share,
|
|
DownloadSimple,
|
|
Gear,
|
|
X,
|
|
GithubLogo,
|
|
SignOut,
|
|
ArrowSquareOut,
|
|
CloudArrowUp,
|
|
CaretDown,
|
|
User,
|
|
FilePlus,
|
|
} from "phosphor-react";
|
|
import Image from "next/image";
|
|
import {
|
|
DropdownMenu,
|
|
DropdownMenuTrigger,
|
|
DropdownMenuContent,
|
|
DropdownMenuItem,
|
|
DropdownMenuArrow,
|
|
DropdownMenuSeparator,
|
|
} from "./DropdownMenu";
|
|
import NewWindow from "react-new-window";
|
|
import { signOut, useSession } from "next-auth/react";
|
|
import { useSnapshot } from "valtio";
|
|
|
|
import { createNewFile, syncToGist, updateEditorSettings, downloadAsZip } from "../state/actions";
|
|
import state from "../state";
|
|
import Box from "./Box";
|
|
import Button from "./Button";
|
|
import Container from "./Container";
|
|
import {
|
|
Dialog,
|
|
DialogTrigger,
|
|
DialogContent,
|
|
DialogTitle,
|
|
DialogDescription,
|
|
DialogClose,
|
|
} from "./Dialog";
|
|
import Flex from "./Flex";
|
|
import Stack from "./Stack";
|
|
import Input from "./Input";
|
|
import Text from "./Text";
|
|
import toast from "react-hot-toast";
|
|
import {
|
|
AlertDialog,
|
|
AlertDialogContent,
|
|
AlertDialogTitle,
|
|
AlertDialogDescription,
|
|
AlertDialogCancel,
|
|
AlertDialogAction,
|
|
} from "./AlertDialog";
|
|
import { styled } from "../stitches.config";
|
|
|
|
const DEFAULT_EXTENSION = ".c";
|
|
|
|
const ErrorText = styled(Text, {
|
|
color: "$red9",
|
|
mt: "$1",
|
|
display: "block",
|
|
});
|
|
|
|
const EditorNavigation = ({ showWat }: { showWat?: boolean }) => {
|
|
const snap = useSnapshot(state);
|
|
const [createNewAlertOpen, setCreateNewAlertOpen] = useState(false);
|
|
const [editorSettingsOpen, setEditorSettingsOpen] = useState(false);
|
|
const [isNewfileDialogOpen, setIsNewfileDialogOpen] = useState(false);
|
|
const [newfileError, setNewfileError] = useState<string | null>(null);
|
|
const [filename, setFilename] = useState("");
|
|
const { data: session, status } = useSession();
|
|
const [popup, setPopUp] = useState(false);
|
|
const [editorSettings, setEditorSettings] = useState(snap.editorSettings);
|
|
useEffect(() => {
|
|
if (session && session.user && popup) {
|
|
setPopUp(false);
|
|
}
|
|
}, [session, popup]);
|
|
|
|
// when filename changes, reset error
|
|
useEffect(() => {
|
|
setNewfileError(null);
|
|
}, [filename, setNewfileError]);
|
|
|
|
const validateFilename = useCallback(
|
|
(filename: string): { error: string | null } => {
|
|
if (snap.files.find(file => file.name === filename)) {
|
|
return { error: "Filename already exists." };
|
|
}
|
|
// More checks in future
|
|
return { error: null };
|
|
},
|
|
[snap.files]
|
|
);
|
|
const handleConfirm = useCallback(() => {
|
|
// add default extension in case omitted
|
|
let _filename = filename.includes(".") ? filename : filename + DEFAULT_EXTENSION;
|
|
const chk = validateFilename(_filename);
|
|
if (chk.error) {
|
|
setNewfileError(`Error: ${chk.error}`);
|
|
return;
|
|
}
|
|
|
|
setIsNewfileDialogOpen(false);
|
|
createNewFile(_filename);
|
|
setFilename("");
|
|
}, [filename, setIsNewfileDialogOpen, setFilename, validateFilename]);
|
|
|
|
const files = snap.files;
|
|
return (
|
|
<Flex css={{ flexShrink: 0, gap: "$0" }}>
|
|
<Flex
|
|
css={{
|
|
overflowX: "scroll",
|
|
py: "$3",
|
|
flex: 1,
|
|
"&::-webkit-scrollbar": {
|
|
height: 0,
|
|
background: "transparent",
|
|
},
|
|
}}
|
|
>
|
|
<Container css={{ flex: 1 }}>
|
|
<Stack
|
|
css={{
|
|
gap: "$3",
|
|
flex: 1,
|
|
flexWrap: "nowrap",
|
|
marginBottom: "-1px",
|
|
}}
|
|
>
|
|
{files &&
|
|
files.length > 0 &&
|
|
files.map((file, index) => {
|
|
if (!file.compiledContent && showWat) {
|
|
return null;
|
|
}
|
|
return (
|
|
<Button
|
|
size="sm"
|
|
outline={showWat ? snap.activeWat !== index : snap.active !== index}
|
|
onClick={() => (state.active = index)}
|
|
key={file.name + index}
|
|
css={{
|
|
"&:hover": {
|
|
span: {
|
|
visibility: "visible",
|
|
},
|
|
},
|
|
}}
|
|
>
|
|
{file.name}
|
|
{showWat && ".wat"}
|
|
{!showWat && (
|
|
<Box
|
|
as="span"
|
|
css={{
|
|
display: "flex",
|
|
p: "2px",
|
|
borderRadius: "$full",
|
|
mr: "-4px",
|
|
"&:hover": {
|
|
// boxSizing: "0px 0px 1px",
|
|
backgroundColor: "$mauve2",
|
|
color: "$mauve12",
|
|
},
|
|
}}
|
|
onClick={(ev: React.MouseEvent<HTMLElement>) => {
|
|
ev.stopPropagation();
|
|
// Remove file from state
|
|
state.files.splice(index, 1);
|
|
// Change active file state
|
|
// If deleted file is behind active tab
|
|
// we keep the current state otherwise
|
|
// select previous file on the list
|
|
state.active = index > snap.active ? snap.active : snap.active - 1;
|
|
}}
|
|
>
|
|
<X size="9px" weight="bold" />
|
|
</Box>
|
|
)}
|
|
</Button>
|
|
);
|
|
})}
|
|
{!showWat && (
|
|
<Dialog open={isNewfileDialogOpen} onOpenChange={setIsNewfileDialogOpen}>
|
|
<DialogTrigger asChild>
|
|
<Button ghost size="sm" css={{ alignItems: "center", px: "$2", mr: "$3" }}>
|
|
<Plus size="16px" /> {snap.files.length === 0 && "Add new file"}
|
|
</Button>
|
|
</DialogTrigger>
|
|
<DialogContent>
|
|
<DialogTitle>Create new file</DialogTitle>
|
|
<DialogDescription>
|
|
<label>Filename</label>
|
|
<Input
|
|
value={filename}
|
|
onChange={e => setFilename(e.target.value)}
|
|
onKeyPress={e => {
|
|
if (e.key === "Enter") {
|
|
handleConfirm();
|
|
}
|
|
}}
|
|
/>
|
|
<ErrorText>{newfileError}</ErrorText>
|
|
</DialogDescription>
|
|
|
|
<Flex
|
|
css={{
|
|
marginTop: 25,
|
|
justifyContent: "flex-end",
|
|
gap: "$3",
|
|
}}
|
|
>
|
|
<DialogClose asChild>
|
|
<Button outline>Cancel</Button>
|
|
</DialogClose>
|
|
<Button
|
|
variant="primary"
|
|
onClick={handleConfirm}
|
|
>
|
|
Create file
|
|
</Button>
|
|
</Flex>
|
|
<DialogClose asChild>
|
|
<Box css={{ position: "absolute", top: "$3", right: "$3" }}>
|
|
<X size="20px" />
|
|
</Box>
|
|
</DialogClose>
|
|
</DialogContent>
|
|
</Dialog>
|
|
)}
|
|
</Stack>
|
|
</Container>
|
|
</Flex>
|
|
<Flex
|
|
css={{
|
|
py: "$3",
|
|
backgroundColor: "$mauve3",
|
|
zIndex: 1,
|
|
}}
|
|
>
|
|
<Container css={{ width: "unset", display: "flex", alignItems: "center" }}>
|
|
{status === "authenticated" ? (
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger asChild>
|
|
<Box
|
|
css={{
|
|
display: "flex",
|
|
borderRadius: "$full",
|
|
overflow: "hidden",
|
|
width: "$6",
|
|
height: "$6",
|
|
boxShadow: "0px 0px 0px 1px $colors$mauve11",
|
|
position: "relative",
|
|
mr: "$3",
|
|
"@hover": {
|
|
"&:hover": {
|
|
cursor: "pointer",
|
|
boxShadow: "0px 0px 0px 1px $colors$mauve12",
|
|
},
|
|
},
|
|
}}
|
|
>
|
|
<Image
|
|
src={session?.user?.image || ""}
|
|
width="30px"
|
|
height="30px"
|
|
objectFit="cover"
|
|
alt="User avatar"
|
|
/>
|
|
</Box>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent>
|
|
<DropdownMenuItem disabled onClick={() => signOut()}>
|
|
<User size="16px" /> {session?.user?.username} ({session?.user.name})
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem
|
|
onClick={() => window.open(`http://gist.github.com/${session?.user.username}`)}
|
|
>
|
|
<ArrowSquareOut size="16px" />
|
|
Go to your Gist
|
|
</DropdownMenuItem>
|
|
<DropdownMenuSeparator />
|
|
<DropdownMenuItem onClick={() => signOut({ callbackUrl: "/" })}>
|
|
<SignOut size="16px" /> Log out
|
|
</DropdownMenuItem>
|
|
|
|
<DropdownMenuArrow offset={10} />
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
) : (
|
|
<Button outline size="sm" css={{ mr: "$3" }} onClick={() => setPopUp(true)}>
|
|
<GithubLogo size="16px" /> Login
|
|
</Button>
|
|
)}
|
|
|
|
<Stack
|
|
css={{
|
|
display: "inline-flex",
|
|
marginLeft: "auto",
|
|
flexShrink: 0,
|
|
gap: "$0",
|
|
borderRadius: "$sm",
|
|
boxShadow: "inset 0px 0px 0px 1px $colors$mauve10",
|
|
zIndex: 9,
|
|
position: "relative",
|
|
button: {
|
|
borderRadius: 0,
|
|
px: "$2",
|
|
alignSelf: "flex-start",
|
|
boxShadow: "none",
|
|
},
|
|
"button:not(:first-child):not(:last-child)": {
|
|
borderRight: 0,
|
|
borderLeft: 0,
|
|
},
|
|
"button:first-child": {
|
|
borderTopLeftRadius: "$sm",
|
|
borderBottomLeftRadius: "$sm",
|
|
},
|
|
"button:last-child": {
|
|
borderTopRightRadius: "$sm",
|
|
borderBottomRightRadius: "$sm",
|
|
boxShadow: "inset 0px 0px 0px 1px $colors$mauve10",
|
|
"&:hover": {
|
|
boxShadow: "inset 0px 0px 0px 1px $colors$mauve12",
|
|
},
|
|
},
|
|
}}
|
|
>
|
|
<Button isLoading={snap.zipLoading} onClick={downloadAsZip} outline size="sm" css={{ alignItems: "center" }}>
|
|
<DownloadSimple size="16px" />
|
|
</Button>
|
|
<Button
|
|
outline
|
|
size="sm"
|
|
css={{ alignItems: "center" }}
|
|
onClick={() => {
|
|
navigator.clipboard.writeText(`${window.location.origin}/develop/${snap.gistId}`);
|
|
toast.success("Copied share link to clipboard!");
|
|
}}
|
|
>
|
|
<Share size="16px" />
|
|
</Button>
|
|
<Button
|
|
outline
|
|
size="sm"
|
|
disabled={!session || !session.user}
|
|
isLoading={snap.gistLoading}
|
|
css={{ alignItems: "center" }}
|
|
onClick={() => {
|
|
if (snap.gistOwner === session?.user.username) {
|
|
syncToGist(session);
|
|
} else {
|
|
setCreateNewAlertOpen(true);
|
|
}
|
|
}}
|
|
>
|
|
<CloudArrowUp size="16px" />
|
|
</Button>
|
|
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger asChild>
|
|
<Button outline size="sm">
|
|
<CaretDown size="16px" />
|
|
</Button>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent>
|
|
<DropdownMenuItem disabled={snap.zipLoading} onClick={downloadAsZip}>
|
|
<DownloadSimple size="16px" /> Download as ZIP
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem
|
|
onClick={() => {
|
|
navigator.clipboard.writeText(
|
|
`${window.location.origin}/develop/${snap.gistId}`
|
|
);
|
|
toast.success("Copied share link to clipboard!");
|
|
}}
|
|
>
|
|
<Share size="16px" />
|
|
Copy share link to clipboard
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem
|
|
disabled={session?.user.username !== snap.gistOwner || !snap.gistId}
|
|
onClick={() => {
|
|
syncToGist(session);
|
|
}}
|
|
>
|
|
<CloudArrowUp size="16px" /> Push to Gist
|
|
</DropdownMenuItem>
|
|
<DropdownMenuSeparator />
|
|
<DropdownMenuItem
|
|
disabled={status !== "authenticated"}
|
|
onClick={() => {
|
|
setCreateNewAlertOpen(true);
|
|
}}
|
|
>
|
|
<FilePlus size="16px" /> Create as a new Gist
|
|
</DropdownMenuItem>
|
|
|
|
<DropdownMenuItem onClick={() => setEditorSettingsOpen(true)}>
|
|
<Gear size="16px" /> Editor Settings
|
|
</DropdownMenuItem>
|
|
|
|
<DropdownMenuArrow offset={10} />
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
</Stack>
|
|
|
|
{popup && !session ? <NewWindow center="parent" url="/sign-in" /> : null}
|
|
</Container>
|
|
</Flex>
|
|
<AlertDialog open={createNewAlertOpen} onOpenChange={value => setCreateNewAlertOpen(value)}>
|
|
<AlertDialogContent>
|
|
<AlertDialogTitle>Are you sure?</AlertDialogTitle>
|
|
<AlertDialogDescription>
|
|
This action will create new <strong>public</strong> Github Gist from your current saved
|
|
files. You can delete gist anytime from your GitHub Gists page.
|
|
</AlertDialogDescription>
|
|
<Flex css={{ justifyContent: "flex-end", gap: "$3" }}>
|
|
<AlertDialogCancel asChild>
|
|
<Button outline>Cancel</Button>
|
|
</AlertDialogCancel>
|
|
<AlertDialogAction asChild>
|
|
<Button
|
|
variant="primary"
|
|
onClick={() => {
|
|
syncToGist(session, true);
|
|
}}
|
|
>
|
|
<FilePlus size="15px" /> Create new Gist
|
|
</Button>
|
|
</AlertDialogAction>
|
|
</Flex>
|
|
</AlertDialogContent>
|
|
</AlertDialog>
|
|
|
|
<Dialog open={editorSettingsOpen} onOpenChange={setEditorSettingsOpen}>
|
|
<DialogTrigger asChild>
|
|
{/* <Button outline size="sm" css={{ alignItems: "center" }}>
|
|
<Gear size="16px" />
|
|
</Button> */}
|
|
</DialogTrigger>
|
|
<DialogContent>
|
|
<DialogTitle>Editor settings</DialogTitle>
|
|
<DialogDescription>
|
|
<label>Tab size</label>
|
|
<Input
|
|
type="number"
|
|
min="1"
|
|
value={editorSettings.tabSize}
|
|
onChange={e =>
|
|
setEditorSettings(curr => ({
|
|
...curr,
|
|
tabSize: Number(e.target.value),
|
|
}))
|
|
}
|
|
/>
|
|
</DialogDescription>
|
|
|
|
<Flex css={{ marginTop: 25, justifyContent: "flex-end", gap: "$3" }}>
|
|
<DialogClose asChild>
|
|
<Button outline onClick={() => updateEditorSettings(editorSettings)}>
|
|
Cancel
|
|
</Button>
|
|
</DialogClose>
|
|
<DialogClose asChild>
|
|
<Button variant="primary" onClick={() => updateEditorSettings(editorSettings)}>
|
|
Save changes
|
|
</Button>
|
|
</DialogClose>
|
|
</Flex>
|
|
<DialogClose asChild>
|
|
<Box css={{ position: "absolute", top: "$3", right: "$3" }}>
|
|
<X size="20px" />
|
|
</Box>
|
|
</DialogClose>
|
|
</DialogContent>
|
|
</Dialog>
|
|
</Flex>
|
|
);
|
|
};
|
|
|
|
export default EditorNavigation;
|