From 5d071187f502ba836032676bd826a860ec689112 Mon Sep 17 00:00:00 2001
From: Charles Bochet <charlesBochet@users.noreply.github.com>
Date: Mon, 10 Jul 2023 15:20:57 -0700
Subject: [PATCH] Fix bug autofill title (#573)

* Fix bug autofill title

* Remove useless loading
---
 .../CommentThreadBodyEditor.tsx               | 14 +++++++++++---
 .../components/right-drawer/CommentThread.tsx | 19 ++++++++++---------
 .../create/RightDrawerCreateCommentThread.tsx |  1 +
 3 files changed, 22 insertions(+), 12 deletions(-)

diff --git a/front/src/modules/comments/components/comment-thread/CommentThreadBodyEditor.tsx b/front/src/modules/comments/components/comment-thread/CommentThreadBodyEditor.tsx
index ae087ace0e..8e7283cad0 100644
--- a/front/src/modules/comments/components/comment-thread/CommentThreadBodyEditor.tsx
+++ b/front/src/modules/comments/components/comment-thread/CommentThreadBodyEditor.tsx
@@ -1,4 +1,4 @@
-import { useMemo } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { getOperationName } from '@apollo/client/utilities';
 import { BlockNoteEditor } from '@blocknote/core';
 import { useBlockNote } from '@blocknote/react';
@@ -25,9 +25,17 @@ export function CommentThreadBodyEditor({ commentThread, onChange }: OwnProps) {
   const [updateCommentThreadBodyMutation] =
     useUpdateCommentThreadBodyMutation();
 
+  const [body, setBody] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (body) {
+      onChange?.(body);
+    }
+  }, [body, onChange]);
+
   const debounceOnChange = useMemo(() => {
     function onInternalChange(commentThreadBody: string) {
-      onChange?.(commentThreadBody);
+      setBody(commentThreadBody);
       updateCommentThreadBodyMutation({
         variables: {
           commentThreadId: commentThread.id,
@@ -40,7 +48,7 @@ export function CommentThreadBodyEditor({ commentThread, onChange }: OwnProps) {
     }
 
     return debounce(onInternalChange, 200);
-  }, [commentThread, updateCommentThreadBodyMutation, onChange]);
+  }, [commentThread, updateCommentThreadBodyMutation, setBody]);
 
   const editor: BlockNoteEditor | null = useBlockNote({
     initialContent: commentThread.body
diff --git a/front/src/modules/comments/components/right-drawer/CommentThread.tsx b/front/src/modules/comments/components/right-drawer/CommentThread.tsx
index a216f352d0..41eecedf99 100644
--- a/front/src/modules/comments/components/right-drawer/CommentThread.tsx
+++ b/front/src/modules/comments/components/right-drawer/CommentThread.tsx
@@ -85,11 +85,13 @@ const StyledTopActionsContainer = styled.div`
 type OwnProps = {
   commentThreadId: string;
   showComment?: boolean;
+  autoFillTitle?: boolean;
 };
 
 export function CommentThread({
   commentThreadId,
   showComment = true,
+  autoFillTitle = false,
 }: OwnProps) {
   const { data } = useGetCommentThreadQuery({
     variables: {
@@ -100,7 +102,8 @@ export function CommentThread({
   const commentThread = data?.findManyCommentThreads[0];
 
   const [title, setTitle] = useState<string | null | undefined>(undefined);
-  const [isLoading, setIsLoading] = useState(true);
+  const [hasUserManuallySetTitle, setHasUserManuallySetTitle] =
+    useState<boolean>(false);
 
   const [updateCommentThreadTitleMutation] =
     useUpdateCommentThreadTitleMutation();
@@ -121,21 +124,18 @@ export function CommentThread({
   }, [commentThreadId, updateCommentThreadTitleMutation]);
 
   function updateTitleFromBody(body: string) {
-    const title = JSON.parse(body)[0]?.content[0]?.text;
-    if (!commentThread?.title || commentThread?.title === '') {
-      setTitle(title);
-      debounceUpdateTitle(title);
+    const parsedTitle = JSON.parse(body)[0]?.content[0]?.text;
+    if (!hasUserManuallySetTitle && autoFillTitle) {
+      setTitle(parsedTitle);
+      debounceUpdateTitle(parsedTitle);
     }
   }
 
   useEffect(() => {
     if (commentThread) {
-      setIsLoading(false);
-    }
-    if (isLoading) {
       setTitle(commentThread?.title ?? '');
     }
-  }, [commentThread, isLoading]);
+  }, [commentThread]);
 
   if (!commentThread) {
     return <></>;
@@ -152,6 +152,7 @@ export function CommentThread({
           <StyledEditableTitleInput
             placeholder="Note title (optional)"
             onChange={(event) => {
+              setHasUserManuallySetTitle(true);
               setTitle(event.target.value);
               debounceUpdateTitle(event.target.value);
             }}
diff --git a/front/src/modules/comments/components/right-drawer/create/RightDrawerCreateCommentThread.tsx b/front/src/modules/comments/components/right-drawer/create/RightDrawerCreateCommentThread.tsx
index 862a47f8ac..0b52875168 100644
--- a/front/src/modules/comments/components/right-drawer/create/RightDrawerCreateCommentThread.tsx
+++ b/front/src/modules/comments/components/right-drawer/create/RightDrawerCreateCommentThread.tsx
@@ -30,6 +30,7 @@ export function RightDrawerCreateCommentThread() {
           <CommentThread
             commentThreadId={commentThreadId}
             showComment={false}
+            autoFillTitle={true}
           />
         )}
       </RightDrawerBody>