From 39ad60a519ca732f0895fe035e6273c45e24a335 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa@nocodb.com>
Date: Thu, 19 Oct 2023 11:31:15 +0000
Subject: [PATCH] fix: Comments are adding to FE state before api calls

---
 .../smartsheet/expanded-form/Comments.vue     |  3 +--
 .../composables/useExpandedFormStore.ts       | 19 ++++++++++++-------
 2 files changed, 13 insertions(+), 9 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/expanded-form/Comments.vue b/packages/nc-gui/components/smartsheet/expanded-form/Comments.vue
index 31c3c094b9..2b6c132625 100644
--- a/packages/nc-gui/components/smartsheet/expanded-form/Comments.vue
+++ b/packages/nc-gui/components/smartsheet/expanded-form/Comments.vue
@@ -97,8 +97,7 @@ function scrollComments() {
 }
 
 const saveComment = async () => {
-  await _saveComment()
-  scrollComments()
+  await _saveComment(() => setTimeout(() => scrollComments(), 100))
 }
 
 watch(commentsWrapperEl, () => {
diff --git a/packages/nc-gui/composables/useExpandedFormStore.ts b/packages/nc-gui/composables/useExpandedFormStore.ts
index 96804dfb22..7a69e5b84e 100644
--- a/packages/nc-gui/composables/useExpandedFormStore.ts
+++ b/packages/nc-gui/composables/useExpandedFormStore.ts
@@ -131,7 +131,7 @@ const [useProvideExpandedFormStore, useExpandedFormStore] = useInjectionState((m
     }
   }
 
-  const saveComment = async () => {
+  const saveComment = async (scrollToCreateComment?: any) => {
     try {
       if (!row.value || !comment.value) return
 
@@ -142,10 +142,11 @@ const [useProvideExpandedFormStore, useExpandedFormStore] = useInjectionState((m
       isSaving.value = true
 
       const createdDate = new Date().toISOString()
+      const createdIndex = commentsAndLogs.value.length
 
       commentsAndLogs.value.push({
         created_at: createdDate,
-        description: `The following comment has been created:${comment.value}`,
+        description: `The following comment has been created: ${comment.value}`,
         email: user?.value?.email,
         user: user?.value?.email,
         id: '',
@@ -153,19 +154,23 @@ const [useProvideExpandedFormStore, useExpandedFormStore] = useInjectionState((m
         row_id: rowId,
         updated_at: createdDate,
         op_type: 'COMMENT',
+        new: true,
       })
 
-      await api.utils.commentRow({
+      const commentValue = comment.value
+      comment.value = ''
+
+      if (scrollToCreateComment) scrollToCreateComment()
+
+      const createdComment = await api.utils.commentRow({
         fk_model_id: meta.value?.id as string,
         row_id: rowId,
-        description: `The following comment has been created: ${comment.value}`,
+        description: `The following comment has been created: ${commentValue}`,
       })
 
-      comment.value = ''
+      commentsAndLogs.value[createdIndex] = createdComment
 
       reloadTrigger?.trigger()
-
-      await loadCommentsAndLogs()
     } catch (e: any) {
       message.error(e.message)
     } finally {