From 68012c9264f8a3ddd8e557435e51b75c8b873350 Mon Sep 17 00:00:00 2001
From: Simon Backx <simon@ghost.org>
Date: Thu, 7 Jul 2022 11:39:12 +0200
Subject: [PATCH] Implemented editing replies

---
 apps/comments-ui/src/actions.js             | 15 +++++++++++++--
 apps/comments-ui/src/components/Comment.js  |  6 +++---
 apps/comments-ui/src/components/EditForm.js |  7 +++++--
 apps/comments-ui/src/components/Replies.js  |  4 +++-
 4 files changed, 24 insertions(+), 8 deletions(-)

diff --git a/apps/comments-ui/src/actions.js b/apps/comments-ui/src/actions.js
index 00d28a312a..4d86334ea4 100644
--- a/apps/comments-ui/src/actions.js
+++ b/apps/comments-ui/src/actions.js
@@ -143,7 +143,7 @@ async function deleteComment({state, api, data: comment}) {
     };
 }
 
-async function editComment({state, api, data: comment}) {
+async function editComment({state, api, data: {comment, parent}}) {
     const data = await api.comments.edit({
         comment
     });
@@ -152,9 +152,20 @@ async function editComment({state, api, data: comment}) {
     // Replace the comment in the state with the new one
     return {
         comments: state.comments.map((c) => {
-            if (c.id === comment.id) {
+            if (parent && parent.id === c.id) {
+                return {
+                    ...c,
+                    replies: c.replies.map((r) => {
+                        if (r.id === comment.id) {
+                            return comment;
+                        }
+                        return r;
+                    })
+                };
+            } else if (c.id === comment.id) {
                 return comment;
             }
+            
             return c;
         })
     };
diff --git a/apps/comments-ui/src/components/Comment.js b/apps/comments-ui/src/components/Comment.js
index d76beec668..01cc2868c3 100644
--- a/apps/comments-ui/src/components/Comment.js
+++ b/apps/comments-ui/src/components/Comment.js
@@ -30,7 +30,7 @@ const Comment = (props) => {
 
     if (isInEditMode) {
         return (
-            <EditForm comment={comment} toggle={toggleEditMode} />
+            <EditForm comment={comment} toggle={toggleEditMode} parent={props.parent} />
         );
     } else {
         return (
@@ -48,13 +48,13 @@ const Comment = (props) => {
                     </div>
                     <div className="flex gap-6">
                         <Like comment={comment} />
-                        {!props.isReply && <Reply comment={comment} toggleReply={toggleReplyMode} isReplying={isInReplyMode} />}
+                        {!props.parent && <Reply comment={comment} toggleReply={toggleReplyMode} isReplying={isInReplyMode} />}
                         <More comment={comment} toggleEdit={toggleEditMode} />
                     </div>
                 </div>    
                 {hasReplies && 
                     <div className={`ml-14 ${isInReplyMode ? 'mt-8' : 'mt-14'}`}>
-                        <Replies replies={comment.replies} />
+                        <Replies comment={comment} />
                     </div>
                 }
                 {isInReplyMode &&
diff --git a/apps/comments-ui/src/components/EditForm.js b/apps/comments-ui/src/components/EditForm.js
index c6bf4dd410..24f1b3654f 100644
--- a/apps/comments-ui/src/components/EditForm.js
+++ b/apps/comments-ui/src/components/EditForm.js
@@ -17,8 +17,11 @@ const EditForm = (props) => {
         event.preventDefault();
 
         await dispatchAction('editComment', {
-            id: props.comment.id,
-            html: getHTML()
+            comment: {
+                id: props.comment.id,
+                html: getHTML()
+            },
+            parent: props.parent
         });
 
         props.toggle();
diff --git a/apps/comments-ui/src/components/Replies.js b/apps/comments-ui/src/components/Replies.js
index 7cd2483e16..55d8a3cf62 100644
--- a/apps/comments-ui/src/components/Replies.js
+++ b/apps/comments-ui/src/components/Replies.js
@@ -1,9 +1,11 @@
 import Comment from './Comment';
 
 const Replies = (props) => {
+    const comment = props.comment;
+
     return (
         <div>
-            {props.replies.map((reply => <Comment comment={reply} key={reply.id} isReply={true} />))}
+            {comment.replies.map((reply => <Comment comment={reply} parent={comment} key={reply.id} />))}
         </div>
     );
 };