fix: update post when comment is marked as answer; reload topics on open [BD-38] [TNL-9646] [TNL-9703]

src/discussions/comments/CommentsView.test.jsx

@@ -288,6 +288,43 @@ describe('CommentsView', () => {
         name: /reason \d/i,
       })).toHaveLength(2);
     });
+
+    it('handles liking a comment', async () => {
+      renderComponent(discussionPostId);
+
+      // Wait for the content to load
+      await screen.findByText('comment number 7', { exact: false });
+      const view = screen.getByTestId('comment-comment-1');
+
+      const likeButton = within(view).getByRole('button', { name: /like/i });
+      await act(async () => {
+        fireEvent.click(likeButton);
+      });
+      expect(axiosMock.history.patch).toHaveLength(2);
+      expect(JSON.parse(axiosMock.history.patch[1].data)).toMatchObject({ voted: true });
+    });
+
+    it.each([
+      ['endorsing comments', 'Endorse', { endorsed: true }],
+      ['reporting comments', 'Report', { abuse_flagged: true }],
+    ])('handles %s', async (label, buttonLabel, patchData) => {
+      renderComponent(discussionPostId);
+
+      // Wait for the content to load
+      await screen.findByText('comment number 7', { exact: false });
+
+      // There should be three buttons, one for the post, the second for the
+      // comment and the third for a response to that comment
+      const actionButtons = screen.queryAllByRole('button', { name: /actions menu/i });
+      await act(async () => {
+        fireEvent.click(actionButtons[1]);
+      });
+      await act(async () => {
+        fireEvent.click(screen.getByRole('button', { name: buttonLabel }));
+      });
+      expect(axiosMock.history.patch).toHaveLength(2);
+      expect(JSON.parse(axiosMock.history.patch[1].data)).toMatchObject(patchData);
+    });
   });
 
   describe('for discussion thread', () => {

src/discussions/comments/comment/Comment.jsx

@@ -8,6 +8,7 @@ import { Button, useToggle } from '@edx/paragon';
 
 import { ContentActions } from '../../../data/constants';
 import { AlertBanner, DeleteConfirmation } from '../../common';
+import { fetchThread } from '../../posts/data/thunks';
 import CommentIcons from '../comment-icons/CommentIcons';
 import { selectCommentCurrentPage, selectCommentHasMorePages, selectCommentResponses } from '../data/selectors';
 import { editComment, fetchCommentResponses, removeComment } from '../data/thunks';
@@ -39,7 +40,10 @@ function Comment({
   }, [comment.id]);
   const actionHandlers = {
     [ContentActions.EDIT_CONTENT]: () => setEditing(true),
-    [ContentActions.ENDORSE]: () => dispatch(editComment(comment.id, { endorsed: !comment.endorsed })),
+    [ContentActions.ENDORSE]: async () => {
+      await dispatch(editComment(comment.id, { endorsed: !comment.endorsed }));
+      await dispatch(fetchThread(comment.threadId));
+    },
     [ContentActions.DELETE]: showDeleteConfirmation,
     [ContentActions.REPORT]: () => dispatch(editComment(comment.id, { flagged: !comment.abuseFlagged })),
   };

src/discussions/topics/TopicsView.jsx

@@ -1,12 +1,14 @@
-import React from 'react';
+import React, { useContext, useEffect } from 'react';
 
-import { useSelector } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 import { useParams } from 'react-router';
 
 import { DiscussionProvider } from '../../data/constants';
 import { selectSequences } from '../../data/selectors';
+import { DiscussionContext } from '../common/context';
 import { selectDiscussionProvider } from '../data/selectors';
 import { selectCategories, selectNonCoursewareTopics, selectTopicFilter } from './data/selectors';
+import { fetchCourseTopics } from './data/thunks';
 import LegacyTopicGroup from './topic-group/LegacyTopicGroup';
 import Topic from './topic-group/topic/Topic';
 import TopicGroup from './topic-group/TopicGroup';
@@ -57,6 +59,14 @@ function LegacyCoursewareTopics() {
 
 function TopicsView() {
   const provider = useSelector(selectDiscussionProvider);
+  const { courseId } = useContext(DiscussionContext);
+  const dispatch = useDispatch();
+  useEffect(() => {
+    // Don't load till the provider information is available
+    if (provider) {
+      dispatch(fetchCourseTopics(courseId));
+    }
+  }, [provider]);
 
   return (
     <div