plane/web/components/web-view/issue-web-view-form.tsx
2023-09-11 11:44:16 +05:30

165 lines
5.3 KiB
TypeScript

// react
import React, { useCallback, useEffect, useState } from "react";
// next
import { useRouter } from "next/router";
// react hook forms
import { Controller } from "react-hook-form";
// hooks
import { useDebouncedCallback } from "use-debounce";
import useReloadConfirmations from "hooks/use-reload-confirmation";
// ui
import { TextArea } from "components/ui";
// components
import { TipTapEditor } from "components/tiptap";
import { Label } from "components/web-view";
// types
import type { IIssue } from "types";
type Props = {
isAllowed: boolean;
issueDetails: IIssue;
submitChanges: (data: Partial<IIssue>) => Promise<void>;
register: any;
control: any;
watch: any;
handleSubmit: any;
};
export const IssueWebViewForm: React.FC<Props> = (props) => {
const { isAllowed, issueDetails, submitChanges, register, control, watch, handleSubmit } = props;
const router = useRouter();
const { workspaceSlug } = router.query;
const [characterLimit, setCharacterLimit] = useState(false);
const [isSubmitting, setIsSubmitting] = useState<"submitting" | "submitted" | "saved">("saved");
const { setShowAlert } = useReloadConfirmations();
useEffect(() => {
if (isSubmitting === "submitted") {
setShowAlert(false);
setTimeout(async () => {
setIsSubmitting("saved");
}, 2000);
} else if (isSubmitting === "submitting") {
setShowAlert(true);
}
}, [isSubmitting, setShowAlert]);
const debouncedTitleSave = useDebouncedCallback(async () => {
setTimeout(async () => {
handleSubmit(handleDescriptionFormSubmit)().finally(() => setIsSubmitting("submitted"));
}, 500);
}, 1000);
const handleDescriptionFormSubmit = useCallback(
async (formData: Partial<IIssue>) => {
if (!formData?.name || formData?.name.length === 0 || formData?.name.length > 255) return;
await submitChanges({
name: formData.name ?? "",
description_html: formData.description_html ?? "<p></p>",
});
},
[submitChanges]
);
return (
<>
<div className="flex flex-col">
<Label>Title</Label>
<div className="relative">
{isAllowed ? (
<TextArea
id="name"
name="name"
placeholder="Enter issue name"
register={register}
onFocus={() => setCharacterLimit(true)}
onChange={(e) => {
setCharacterLimit(false);
setIsSubmitting("submitting");
debouncedTitleSave();
}}
required={true}
className="min-h-10 block w-full resize-none overflow-hidden rounded border bg-transparent px-3 py-2 text-xl outline-none ring-0 focus:ring-1 focus:ring-custom-primary"
role="textbox"
disabled={!isAllowed}
/>
) : (
<h4 className="break-words text-2xl font-semibold">{issueDetails?.name}</h4>
)}
{characterLimit && isAllowed && (
<div className="pointer-events-none absolute bottom-1 right-1 z-[2] rounded bg-custom-background-100 text-custom-text-200 p-0.5 text-xs">
<span
className={`${
watch("name").length === 0 || watch("name").length > 255 ? "text-red-500" : ""
}`}
>
{watch("name").length}
</span>
/255
</div>
)}
</div>
</div>
<div>
<Label>Description</Label>
<div className="relative">
<Controller
name="description_html"
control={control}
render={({ field: { value, onChange } }) => {
if (!value) return <></>;
return (
<TipTapEditor
value={
!value ||
value === "" ||
(typeof value === "object" && Object.keys(value).length === 0)
? "<p></p>"
: value
}
workspaceSlug={workspaceSlug!.toString()}
debouncedUpdatesEnabled={true}
setShouldShowAlert={setShowAlert}
setIsSubmitting={setIsSubmitting}
customClassName={
isAllowed ? "min-h-[150px] shadow-sm" : "!p-0 !pt-2 text-custom-text-200"
}
noBorder={!isAllowed}
onChange={(description: Object, description_html: string) => {
setShowAlert(true);
setIsSubmitting("submitting");
onChange(description_html);
handleSubmit(handleDescriptionFormSubmit)().finally(() =>
setIsSubmitting("submitted")
);
}}
editable={isAllowed}
/>
);
}}
/>
<div
className={`absolute right-5 bottom-5 text-xs text-custom-text-200 border border-custom-border-400 rounded-xl w-[6.5rem] py-1 z-10 flex items-center justify-center ${
isSubmitting === "saved" ? "fadeOut" : "fadeIn"
}`}
>
{isSubmitting === "submitting" ? "Saving..." : "Saved"}
</div>
</div>
</div>
</>
);
};