From bc1ea821277b0c9f47e47a7b5ca6389021f5f95d Mon Sep 17 00:00:00 2001
From: ilya-bkv <i.yablokov@ccmp.me>
Date: Mon, 4 Mar 2024 13:47:11 +0300
Subject: [PATCH] Fix comment edit without refresh

---
 src/components/Article/Comment/Comment.tsx | 8 ++++++--
 src/context/reactions.tsx                  | 5 +++--
 2 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/src/components/Article/Comment/Comment.tsx b/src/components/Article/Comment/Comment.tsx
index d5b794e6..af60cf7d 100644
--- a/src/components/Article/Comment/Comment.tsx
+++ b/src/components/Article/Comment/Comment.tsx
@@ -38,6 +38,7 @@ export const Comment = (props: Props) => {
   const [loading, setLoading] = createSignal(false)
   const [editMode, setEditMode] = createSignal(false)
   const [clearEditor, setClearEditor] = createSignal(false)
+  const [editedBody, setEditedBody] = createSignal<string>()
   const { author, session } = useSession()
   const { createReaction, deleteReaction, updateReaction } = useReactions()
   const { showConfirm } = useConfirm()
@@ -49,7 +50,7 @@ export const Comment = (props: Props) => {
       (props.comment?.created_by?.slug === author().slug || session()?.user?.roles.includes('editor')),
   )
 
-  const body = createMemo(() => (props.comment.body || '').trim())
+  const body = createMemo(() => (editedBody() ? editedBody().trim() : props.comment.body.trim() || ''))
 
   const remove = async () => {
     if (props.comment?.id) {
@@ -97,12 +98,15 @@ export const Comment = (props: Props) => {
   const handleUpdate = async (value) => {
     setLoading(true)
     try {
-      await updateReaction({
+      const reaction = await updateReaction({
         id: props.comment.id,
         kind: ReactionKind.Comment,
         body: value,
         shout: props.comment.shout.id,
       })
+      if (reaction) {
+        setEditedBody(value)
+      }
       setEditMode(false)
       setLoading(false)
     } catch (error) {
diff --git a/src/context/reactions.tsx b/src/context/reactions.tsx
index ae4c7b95..f23c5044 100644
--- a/src/context/reactions.tsx
+++ b/src/context/reactions.tsx
@@ -18,7 +18,7 @@ type ReactionsContextType = {
     offset?: number
   }) => Promise<Reaction[]>
   createReaction: (reaction: ReactionInput) => Promise<void>
-  updateReaction: (reaction: ReactionInput) => Promise<void>
+  updateReaction: (reaction: ReactionInput) => Promise<Reaction>
   deleteReaction: (id: number) => Promise<void>
 }
 
@@ -88,9 +88,10 @@ export const ReactionsProvider = (props: { children: JSX.Element }) => {
     }
   }
 
-  const updateReaction = async (input: ReactionInput): Promise<void> => {
+  const updateReaction = async (input: ReactionInput): Promise<Reaction> => {
     const reaction = await apiClient.updateReaction(input)
     setReactionEntities(reaction.id, reaction)
+    return reaction
   }
 
   onCleanup(() => setReactionEntities(reconcile({})))