plane/web/pages/m/[workspaceSlug]/editor.tsx
deepsource-autofix[bot] 80e6d7e1ea
refactor: remove true from boolean attribute (#2579)
When using a boolean attribute in JSX, you can set the attribute value to true or omit the value. This helps to keep consistency in code.

Co-authored-by: deepsource-autofix[bot] <62050782+deepsource-autofix[bot]@users.noreply.github.com>
2023-11-01 12:30:21 +05:30

100 lines
2.8 KiB
TypeScript

import { useEffect, useState } from "react";
// next
import type { NextPage } from "next";
import { useRouter } from "next/router";
// cookies
import Cookies from "js-cookie";
// react-hook-form
import { Controller, useForm } from "react-hook-form";
// layouts
import WebViewLayout from "layouts/web-view-layout";
// components
import { Button, Spinner } from "@plane/ui";
import { RichTextEditor } from "@plane/rich-text-editor";
// services
import { FileService } from "services/file.service";
const fileService = new FileService();
const Editor: NextPage = () => {
const [isLoading, setIsLoading] = useState(false);
const router = useRouter();
const { workspaceSlug, editable } = router.query;
const isEditable = editable === "true";
const { watch, setValue, control } = useForm({
defaultValues: {
data: "",
data_html: "",
},
});
useEffect(() => {
setIsLoading(true);
if (!router?.query?.["editable"]) return;
setIsLoading(false);
const data_html = Cookies.get("data_html");
setValue("data_html", data_html ?? "");
}, [isEditable, setValue, router]);
return (
<WebViewLayout fullScreen>
{isLoading ? (
<div className="w-full h-full flex items-center justify-center">
<Spinner />
</div>
) : (
<div className="w-full h-full flex flex-col justify-between">
<Controller
name="data_html"
control={control}
render={({ field: { value, onChange } }) => {
if (value == null) return <></>;
return (
<RichTextEditor
uploadFile={fileService.getUploadFileFunction(workspaceSlug as string)}
deleteFile={fileService.deleteImage}
borderOnFocus={false}
value={!value || value === "" ? "<p></p>" : value}
noBorder
customClassName="h-full shadow-sm overflow-auto"
editorContentCustomClassNames="pb-9"
onChange={(description: Object, description_html: string) => {
onChange(description_html);
setValue("data_html", description_html);
setValue("data", JSON.stringify(description));
}}
/>
);
}}
/>
{isEditable && (
<Button
variant="primary"
className="mt-4 w-[calc(100%-30px)] h-[45px] mx-[15px] text-[17px]"
onClick={() => {
console.log(
"submitted",
JSON.stringify({
data_html: watch("data_html"),
})
);
}}
>
Submit
</Button>
)}
</div>
)}
</WebViewLayout>
);
};
export default Editor;