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

src/shared/components/post/post.tsx

@@ -386,15 +386,19 @@ export class Post extends Component<any, PostState> {
                 onFeaturePost={this.handleFeaturePost}
               />
               <div ref={this.state.commentSectionRef} className="mb-2" />
-              <CommentForm
+
-                node={res.post_view.post.id}
+              {/* Only show the top level comment form if its not a context view */}
-                disabled={res.post_view.post.locked}
+              {!this.state.commentId && (
-                allLanguages={this.state.siteRes.all_languages}
+                <CommentForm
-                siteLanguages={this.state.siteRes.discussion_languages}
+                  node={res.post_view.post.id}
-                containerClass="post-comment-container"
+                  disabled={res.post_view.post.locked}
-                onUpsertComment={this.handleCreateComment}
+                  allLanguages={this.state.siteRes.all_languages}
-                finished={this.state.finished.get(0)}
+                  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"
@@ -1010,13 +1014,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(
+        s.finished.set(newCommentParentId ?? 0, true);
-          getCommentParentId(res.data.comment_view.comment) ?? 0,
-          true,
-        );
       }
       return s;
     });

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) {