Fix comment insertion from context views. Fixes #2030 (#2031)

diff --git a/src/shared/components/post/post.tsx b/src/shared/components/post/post.tsx
index 49e7348608960a9d12478bc04b152b9e0cb97c3e..77fe78045311265e8e82209c18b59c7d4e0fbb20 100644 (file)
--- a/src/shared/components/post/post.tsx
+++ b/src/shared/components/post/post.tsx
@@ -389,15 +389,19 @@ export class Post extends Component<any, PostState> {
                 onMarkPostAsRead={this.handleMarkPostAsRead}
               />
               <div ref={this.state.commentSectionRef} className="mb-2" />
-              <CommentForm
-                node={res.post_view.post.id}
-                disabled={res.post_view.post.locked}
-                allLanguages={this.state.siteRes.all_languages}
-                siteLanguages={this.state.siteRes.discussion_languages}
-                containerClass="post-comment-container"
-                onUpsertComment={this.handleCreateComment}
-                finished={this.state.finished.get(0)}
-              />
+
+              {/* Only show the top level comment form if its not a context view */}
+              {!this.state.commentId && (
+                <CommentForm
+                  node={res.post_view.post.id}
+                  disabled={res.post_view.post.locked}
+                  allLanguages={this.state.siteRes.all_languages}
+                  siteLanguages={this.state.siteRes.discussion_languages}
+                  containerClass="post-comment-container"
+                  onUpsertComment={this.handleCreateComment}
+                  finished={this.state.finished.get(0)}
+                />
+              )}
               <div className="d-block d-md-none">
                 <button
                   className="btn btn-secondary d-inline-block mb-2 me-3"
@@ -1034,13 +1038,21 @@ export class Post extends Component<any, PostState> {
   createAndUpdateComments(res: RequestState<CommentResponse>) {
     this.setState(s => {
       if (s.commentsRes.state === "success" && res.state === "success") {
-        s.commentsRes.data.comments.unshift(res.data.comment_view);
+        // The comment must be inserted not at the very beginning of the list,
+        // because the buildCommentsTree needs a correct path ordering.
+        // It should be inserted right after its parent is found
+        const comments = s.commentsRes.data.comments;
+        const newComment = res.data.comment_view;
+        const newCommentParentId = getCommentParentId(newComment.comment);
+
+        const foundCommentParentIndex = comments.findIndex(
+          c => c.comment.id === newCommentParentId,
+        );
+
+        comments.splice(foundCommentParentIndex + 1, 0, newComment);
 
         // Set finished for the parent
-        s.finished.set(
-          getCommentParentId(res.data.comment_view.comment) ?? 0,
-          true,
-        );
+        s.finished.set(newCommentParentId ?? 0, true);
       }
       return s;
     });

diff --git a/src/shared/utils/app/build-comments-tree.ts b/src/shared/utils/app/build-comments-tree.ts
index 2b47e393da38e5121cb26edb39a642cbb260368d..2ff44e0bc5d9536cf28cf2628aa2f3e6c7c4d33e 100644 (file)
--- a/src/shared/utils/app/build-comments-tree.ts
+++ b/src/shared/utils/app/build-comments-tree.ts
@@ -32,6 +32,10 @@ export default function buildCommentsTree(
     }
   }
 
+  // This should not be sorted on the front end, in order to preserve the
+  // back end sorts. However, the parent ids must be sorted, so make sure
+  // When adding new comments to trees, that they're inserted right after
+  // their parent index. This is done in post.tsx
   for (const comment_view of comments) {
     const child = map.get(comment_view.comment.id);
     if (child) {