plane/web/components/pages/create-block.tsx

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