feat: Add topic link to discussion post

Refactors the topics code and adds the topic relation box to posts.

src/discussions/posts/post-editor/PostEditor.jsx

@@ -16,7 +16,7 @@ import FormikErrorFeedback from '../../../components/FormikErrorFeedback';
 import { selectCourseCohorts } from '../../cohorts/data/selectors';
 import { fetchCourseCohorts } from '../../cohorts/data/thunks';
 import { selectAnonymousPostingConfig } from '../../data/selectors';
-import { selectCourseTopics } from '../../topics/data/selectors';
+import { selectCoursewareTopics, selectNonCoursewareTopics } from '../../topics/data/selectors';
 import { fetchCourseTopics } from '../../topics/data/thunks';
 import { formikCompatibleHandler, isFormikFieldInvalid, useCommentsPagePath } from '../../utils';
 import { hidePostEditor } from '../data';
@@ -69,10 +69,8 @@ function PostEditor({
     topicId,
     postId,
   } = useParams();
-  const {
-    coursewareTopics,
-    nonCoursewareTopics,
-  } = useSelector(selectCourseTopics());
+  const coursewareTopics = useSelector(selectCoursewareTopics);
+  const nonCoursewareTopics = useSelector(selectNonCoursewareTopics);
   const {
     allowAnonymous,
     allowAnonymousToPeers,

src/discussions/posts/post/Post.jsx

@@ -1,12 +1,18 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import { useDispatch } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 import { useHistory, useLocation } from 'react-router-dom';
 
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { Hyperlink } from '@edx/paragon';
+
 import { ContentActions } from '../../../data/constants';
+import { selectTopicContext } from '../../../data/selectors';
 import { AlertBanner } from '../../common';
+import { selectTopic } from '../../topics/data/selectors';
 import { removeThread, updateExistingThread } from '../data/thunks';
+import messages from './messages';
 import PostFooter from './PostFooter';
 import PostHeader from './PostHeader';
 import { postShape } from './proptypes';
@@ -14,10 +20,13 @@ import { postShape } from './proptypes';
 function Post({
   post,
   preview,
+  intl,
 }) {
   const location = useLocation();
   const history = useHistory();
   const dispatch = useDispatch();
+  const topic = useSelector(selectTopic(post.topicId));
+  const topicContext = useSelector(selectTopicContext(post.topicId));
   const actionHandlers = {
     [ContentActions.EDIT_CONTENT]: () => history.push(`${location.pathname}/edit`),
     // TODO: Add flow to confirm before deleting
@@ -26,7 +35,6 @@ function Post({
     [ContentActions.PIN]: () => dispatch(updateExistingThread(post.id, { pinned: !post.pinned })),
     [ContentActions.REPORT]: () => dispatch(updateExistingThread(post.id, { flagged: !post.abuseFlagged })),
   };
-
   return (
     <div className="d-flex flex-column p-2.5 w-100 mw-100">
       <div className="mb-4">
@@ -37,12 +45,19 @@ function Post({
         {/* eslint-disable-next-line react/no-danger */}
         <div dangerouslySetInnerHTML={{ __html: post.renderedBody }} />
       </div>
+      {topicContext && topic && (
+        <div className="border p-3 rounded mb-3 mt-2 align-self-start">
+          {intl.formatMessage(messages.relatedTo)}{' '}
+          <Hyperlink destination={topicContext.unitLink}>{`${topic.categoryId} / ${topic.name}`}</Hyperlink>
+        </div>
+      )}
       <PostFooter post={post} preview={preview} />
     </div>
   );
 }
 
 Post.propTypes = {
+  intl: intlShape.isRequired,
   post: postShape.isRequired,
   preview: PropTypes.bool,
 };
@@ -51,4 +66,4 @@ Post.defaultProps = {
   preview: false,
 };
 
-export default Post;
+export default injectIntl(Post);

src/discussions/posts/post/messages.js

@@ -52,6 +52,11 @@ const messages = defineMessages({
     defaultMessage: 'Post closed for responses and comments',
     description: 'Tooltip/alttext for icon displayed when post is closed',
   },
+  relatedTo: {
+    id: 'discussions.post.relatedTo',
+    defaultMessage: 'Related to',
+    description: 'Message followed the category and topic of post linking to in-course context',
+  },
   visibleToAll: {
     id: 'discussions.post.cohort.everyone',
     defaultMessage: 'Everyone',