github/plane
0
0
Fork 1
mirror of https://github.com/makeplane/plane synced 2024-06-14 14:31:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

[WEB-495] chore: issue title improvement (#3780)

Browse Source 
* chore: trim issue title

* chore: issue title improvement
This commit is contained in:
Anmol Singh Bhatia 2024-02-25 22:37:25 +05:30 committed by GitHub
parent 31ebecba52
commit b4fb9f1aa2
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 28 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
web/components/issues/title-input.tsx
View File

@ -19,11 +19,10 @@ export type IssueTitleInputProps = {
}; };
export const IssueTitleInput: FC<IssueTitleInputProps> = observer((props) => { export const IssueTitleInput: FC<IssueTitleInputProps> = observer((props) => {
const { disabled, value, workspaceSlug, setIsSubmitting, issueId, issueOperations, projectId } = props; const { disabled, value, workspaceSlug, isSubmitting, setIsSubmitting, issueId, issueOperations, projectId } = props;
// states // states
const [title, setTitle] = useState(""); const [title, setTitle] = useState("");
// hooks // hooks
const debouncedValue = useDebounce(title, 1500); const debouncedValue = useDebounce(title, 1500);
useEffect(() => { useEffect(() => {
@ -31,15 +30,41 @@ export const IssueTitleInput: FC<IssueTitleInputProps> = observer((props) => {
}, [value]); }, [value]);
useEffect(() => { useEffect(() => {
const textarea = document.querySelector("#title-input");
if (debouncedValue && debouncedValue !== value) { if (debouncedValue && debouncedValue !== value) {
issueOperations.update(workspaceSlug, projectId, issueId, { name: debouncedValue }, false).finally(() => { issueOperations.update(workspaceSlug, projectId, issueId, { name: debouncedValue }, false).finally(() => {
setIsSubmitting("saved"); setIsSubmitting("saved");
if (textarea && !textarea.matches(":focus")) {
const trimmedTitle = debouncedValue.trim();
if (trimmedTitle !== title) setTitle(trimmedTitle);
}
}); });
} }
// DO NOT Add more dependencies here. It will cause multiple requests to be sent. // DO NOT Add more dependencies here. It will cause multiple requests to be sent.
// eslint-disable-next-line react-hooks/exhaustive-deps // eslint-disable-next-line react-hooks/exhaustive-deps
}, [debouncedValue]); }, [debouncedValue]);
useEffect(() => {
const handleBlur = () => {
const trimmedTitle = title.trim();
if (trimmedTitle !== title && isSubmitting !== "submitting") {
setTitle(trimmedTitle);
setIsSubmitting("submitting");
}
};
const textarea = document.querySelector("#title-input"); // You might need to change this selector according to your TextArea component
if (textarea) {
textarea.addEventListener("blur", handleBlur);
}
return () => {
if (textarea) {
textarea.removeEventListener("blur", handleBlur);
}
};
}, [title, isSubmitting, setIsSubmitting]);
const handleTitleChange = useCallback( const handleTitleChange = useCallback(
(e: React.ChangeEvent<HTMLTextAreaElement>) => { (e: React.ChangeEvent<HTMLTextAreaElement>) => {
setIsSubmitting("submitting"); setIsSubmitting("submitting");
@ -53,6 +78,7 @@ export const IssueTitleInput: FC<IssueTitleInputProps> = observer((props) => {
return ( return (
<div className="relative"> <div className="relative">
<TextArea <TextArea
id="title-input"
className={`min-h-min block w-full resize-none overflow-hidden rounded border-none bg-transparent px-3 py-2 text-2xl font-medium outline-none ring-0 focus:ring-1 focus:ring-custom-primary ${ className={`min-h-min block w-full resize-none overflow-hidden rounded border-none bg-transparent px-3 py-2 text-2xl font-medium outline-none ring-0 focus:ring-1 focus:ring-custom-primary ${
title?.length === 0 ? "!ring-red-400" : "" title?.length === 0 ? "!ring-red-400" : ""
}`} }`}