From 5136f3b329538e2b89a49659e8a58f5f260165da Mon Sep 17 00:00:00 2001
From: Palanikannan1437 <73993394+Palanikannan1437@users.noreply.github.com>
Date: Tue, 24 Oct 2023 19:52:50 +0530
Subject: [PATCH] fixed debounce logic and extracted the same

---
 web/components/issues/comment/add-comment.tsx | 31 +------------------
 web/components/issues/description-form.tsx    | 21 +++++++++----
 2 files changed, 16 insertions(+), 36 deletions(-)

diff --git a/web/components/issues/comment/add-comment.tsx b/web/components/issues/comment/add-comment.tsx
index f836efb01..7baca7d61 100644
--- a/web/components/issues/comment/add-comment.tsx
+++ b/web/components/issues/comment/add-comment.tsx
@@ -7,7 +7,7 @@ import { FileService } from "services/file.service";
 // components
 import { LiteTextEditorWithRef } from "@plane/lite-text-editor";
 // ui
-import { Button, Tooltip } from "@plane/ui";
+import { Button } from "@plane/ui";
 import { Globe2, Lock } from "lucide-react";
 
 // types
@@ -72,35 +72,6 @@ export const AddComment: React.FC<Props> = ({ disabled = false, onSubmit, showAc
       <form onSubmit={handleSubmit(handleAddComment)}>
         <div>
           <div className="relative">
-            {showAccessSpecifier && (
-              <div className="absolute bottom-2 left-3 z-[1]">
-                <Controller
-                  control={control}
-                  name="access"
-                  render={({ field: { onChange, value } }) => (
-                    <div className="flex border border-custom-border-300 divide-x divide-custom-border-300 rounded overflow-hidden">
-                      {commentAccess.map((access) => (
-                        <Tooltip key={access.key} tooltipContent={access.label}>
-                          <button
-                            type="button"
-                            onClick={() => onChange(access.key)}
-                            className={`grid place-items-center p-1 hover:bg-custom-background-80 ${
-                              value === access.key ? "bg-custom-background-80" : ""
-                            }`}
-                          >
-                            <access.icon
-                              className={`w-4 h-4 -mt-1 ${
-                                value === access.key ? "!text-custom-text-100" : "!text-custom-text-400"
-                              }`}
-                            />
-                          </button>
-                        </Tooltip>
-                      ))}
-                    </div>
-                  )}
-                />
-              </div>
-            )}
             <Controller
               name="access"
               control={control}
diff --git a/web/components/issues/description-form.tsx b/web/components/issues/description-form.tsx
index feb63c671..679e9a678 100644
--- a/web/components/issues/description-form.tsx
+++ b/web/components/issues/description-form.tsx
@@ -49,6 +49,15 @@ export const IssueDescriptionForm: FC<IssueDetailsProps> = (props) => {
     },
   });
 
+  const [localValue, setLocalValue] = useState("");
+  const nameValue = watch("name");
+
+  useEffect(() => {
+    if (localValue === "" && nameValue !== "") {
+      setLocalValue(nameValue);
+    }
+  }, [nameValue, localValue]);
+
   const handleDescriptionFormSubmit = useCallback(
     async (formData: Partial<IIssue>) => {
       if (!formData?.name || formData?.name.length === 0 || formData?.name.length > 255) return;
@@ -81,7 +90,7 @@ export const IssueDescriptionForm: FC<IssueDetailsProps> = (props) => {
     });
   }, [issue, reset]);
 
-  const debouncedTitleSave = useDebouncedCallback(async () => {
+  const debouncedFormSave = useDebouncedCallback(async () => {
     handleSubmit(handleDescriptionFormSubmit)().finally(() => setIsSubmitting("submitted"));
   }, 1500);
 
@@ -92,18 +101,19 @@ export const IssueDescriptionForm: FC<IssueDetailsProps> = (props) => {
           <Controller
             name="name"
             control={control}
-            render={({ field: { value, onChange } }) => (
+            render={({ field: { onChange } }) => (
               <TextArea
+                value={localValue}
                 id="name"
                 name="name"
-                value={value}
                 placeholder="Enter issue name"
                 onFocus={() => setCharacterLimit(true)}
                 onChange={(e: ChangeEvent<HTMLTextAreaElement>) => {
                   setCharacterLimit(false);
                   setIsSubmitting("submitting");
-                  debouncedTitleSave();
+                  setLocalValue(e.target.value);
                   onChange(e.target.value);
+                  debouncedFormSave();
                 }}
                 required={true}
                 className="min-h-10 block w-full resize-none overflow-hidden rounded border-none bg-transparent px-3 py-2 text-xl outline-none ring-0 focus:ring-1 focus:ring-custom-primary"
@@ -135,7 +145,6 @@ export const IssueDescriptionForm: FC<IssueDetailsProps> = (props) => {
               uploadFile={fileService.getUploadFileFunction(workspaceSlug)}
               deleteFile={fileService.deleteImage}
               value={value}
-              debouncedUpdatesEnabled={true}
               setShouldShowAlert={setShowAlert}
               setIsSubmitting={setIsSubmitting}
               customClassName={isAllowed ? "min-h-[150px] shadow-sm" : "!p-0 !pt-2 text-custom-text-200"}
@@ -144,7 +153,7 @@ export const IssueDescriptionForm: FC<IssueDetailsProps> = (props) => {
                 setShowAlert(true);
                 setIsSubmitting("submitting");
                 onChange(description_html);
-                handleSubmit(handleDescriptionFormSubmit)().finally(() => setIsSubmitting("submitted"));
+                debouncedFormSave();
               }}
             />
           )}