From 5b532dcfe764f7eeb2ed8a50054fcbe17e467bf0 Mon Sep 17 00:00:00 2001
From: Charles Bochet <charles@twenty.com>
Date: Sun, 9 Jul 2023 22:49:21 -0700
Subject: [PATCH] Fix bug latency on commentThread title edition

---
 .../components/right-drawer/CommentThread.tsx | 21 +++++++++++++++----
 1 file changed, 17 insertions(+), 4 deletions(-)

diff --git a/front/src/modules/comments/components/right-drawer/CommentThread.tsx b/front/src/modules/comments/components/right-drawer/CommentThread.tsx
index 7a48a11d2..328c165c5 100644
--- a/front/src/modules/comments/components/right-drawer/CommentThread.tsx
+++ b/front/src/modules/comments/components/right-drawer/CommentThread.tsx
@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import { getOperationName } from '@apollo/client/utilities';
 import styled from '@emotion/styled';
 
@@ -87,6 +87,11 @@ export function CommentThread({
     },
     skip: !commentThreadId,
   });
+  const commentThread = data?.findManyCommentThreads[0];
+
+  const [title, setTitle] = useState<string | null | undefined>(
+    commentThread?.title,
+  );
 
   const [updateCommentThreadTitleMutation] =
     useUpdateCommentThreadTitleMutation();
@@ -109,11 +114,16 @@ export function CommentThread({
   function updateTitleFromBody(body: string) {
     const title = JSON.parse(body)[0]?.content[0]?.text;
     if (!commentThread?.title || commentThread?.title === '') {
+      setTitle(title);
       debounceUpdateTitle(title);
     }
   }
 
-  const commentThread = data?.findManyCommentThreads[0];
+  useEffect(() => {
+    if (commentThread?.title) {
+      setTitle(commentThread.title);
+    }
+  }, [commentThread?.title]);
 
   if (!commentThread) {
     return <></>;
@@ -128,8 +138,11 @@ export function CommentThread({
         </StyledTopActionsContainer>
         <StyledEditableTitleInput
           placeholder="Note title (optional)"
-          onChange={(event) => debounceUpdateTitle(event.target.value)}
-          value={commentThread?.title ?? ''}
+          onChange={(event) => {
+            setTitle(event.target.value);
+            debounceUpdateTitle(event.target.value);
+          }}
+          value={title ?? ''}
         />
         <PropertyBox>
           <PropertyBoxItem