plane/web/components/pages/create-block.tsx
sriram veeraghanta 8d15b9e7de
chore: format all files in monorepo (#3054)
* chore: format all files in the project

* fix: removing @types/react from dependencies

* fix: adding prettier and eslint config

* chore: format files

* fix: upgrading turbo version

* chore: ignoring warnings and adding todos

* fix: updated the type of bubble menu item in the document editor

* chore: format files

---------

Co-authored-by: Aaryan Khandelwal <aaryankhandu123@gmail.com>
2023-12-10 15:48:10 +05:30

118 lines
3.1 KiB
TypeScript

import { FC } from "react";
import { useRouter } from "next/router";
import { mutate } from "swr";
import { SendHorizonal } from "lucide-react";
import { Controller, useForm } from "react-hook-form";
// services
import { PageService } from "services/page.service";
// hooks
import useToast from "hooks/use-toast";
// ui
import { TextArea } from "@plane/ui";
// types
import { IUser, IPageBlock } from "types";
// fetch-keys
import { PAGE_BLOCKS_LIST } from "constants/fetch-keys";
const defaultValues = {
name: "",
};
type Props = {
user: IUser | undefined;
};
const pageService = new PageService();
export const CreateBlock: FC<Props> = () => {
// const [blockTitle, setBlockTitle] = useState("");
// router
const router = useRouter();
const { workspaceSlug, projectId, pageId } = router.query;
// toast
const { setToastAlert } = useToast();
// form info
const {
handleSubmit,
control,
watch,
reset,
formState: { errors },
} = useForm<IPageBlock>({
defaultValues,
});
const createPageBlock = async () => {
if (!workspaceSlug || !projectId || !pageId) return;
await pageService
.createPageBlock(workspaceSlug as string, projectId as string, pageId as string, {
name: watch("name"),
})
.then((res) => {
mutate<IPageBlock[]>(
PAGE_BLOCKS_LIST(pageId as string),
(prevData) => [...(prevData as IPageBlock[]), res],
false
);
})
.catch(() => {
setToastAlert({
type: "error",
title: "Error!",
message: "Page could not be created. Please try again.",
});
});
reset();
};
const handleKeyDown = (e: any) => {
const keyCombination = ((e.ctrlKey || e.metaKey) && e.key === "Enter") || (e.shiftKey && e.key === "Enter");
if (e.key === "Enter" && !keyCombination) {
if (watch("name") && watch("name") !== "") {
e.preventDefault();
createPageBlock();
reset();
}
}
};
return (
<div className="relative">
<form
className="relative flex h-32 flex-col items-center justify-between rounded border-2 border-custom-border-200 p-2"
onSubmit={handleSubmit(createPageBlock)}
>
<div className="flex min-h-full w-full">
<Controller
name="name"
control={control}
render={({ field: { value, onChange } }) => (
<TextArea
id="name"
name="name"
value={value}
placeholder="Title"
role="textbox"
onKeyDown={handleKeyDown}
maxLength={255}
onChange={onChange}
className="block min-h-full w-full resize-none overflow-hidden border-none bg-transparent !px-1 !py-1 text-sm font-medium"
hasError={Boolean(errors?.name)}
/>
)}
/>
</div>
<div className="absolute bottom-2 right-2 flex items-center p-1">
<button type="submit">
<SendHorizonal className="h-5 w-5 text-custom-text-100" />
</button>
</div>
</form>
</div>
);
};