+
-
-
-
+
+
+
+
+
+
+
+ {intl.formatMessage(voted ? messages.removeLike : messages.like)}
+
+ )}
+ >
+
+ {count}
+
+ );
+}
+
+LikeButton.propTypes = {
+ count: PropTypes.number.isRequired,
+ intl: intlShape.isRequired,
+ onClick: PropTypes.func,
+ voted: PropTypes.bool,
+};
+
+LikeButton.defaultProps = {
+ voted: false,
+ onClick: undefined,
+};
+
+export default injectIntl(LikeButton);
diff --git a/src/discussions/posts/post/Post.jsx b/src/discussions/posts/post/Post.jsx
index d4a77927..15f8d668 100644
--- a/src/discussions/posts/post/Post.jsx
+++ b/src/discussions/posts/post/Post.jsx
@@ -1,28 +1,23 @@
import React from 'react';
import PropTypes from 'prop-types';
-import {
- faQuestionCircle,
- faStar as faEmptyStar,
- faThumbsUp as faEmptyThumb,
-} from '@fortawesome/free-regular-svg-icons';
-import {
- faComments,
- faStar as faSolidStar,
- faThumbsUp as faSolidThumb,
- faThumbtack,
-} from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { useDispatch } from 'react-redux';
import * as timeago from 'timeago.js';
import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
import {
- Avatar, IconButton, OverlayTrigger, Tooltip,
+ Avatar, Icon, IconButton, OverlayTrigger, Tooltip,
} from '@edx/paragon';
+import {
+ Pin,
+ QuestionAnswer,
+ StarFilled,
+ StarOutline,
+} from '@edx/paragon/icons';
import { updateExistingThread } from '../data/thunks';
import messages from './messages';
+import LikeButton from './LikeButton';
export const postShape = PropTypes.shape({
abuseFlagged: PropTypes.bool,
@@ -43,18 +38,11 @@ export const postShape = PropTypes.shape({
function PostTypeIcon(props) {
return (
- {props.type === 'question' &&
@@ -71,27 +59,32 @@ function PostHeader({
post,
}) {
return (
-
-
-
+
);
@@ -109,35 +102,22 @@ function Post({
const dispatch = useDispatch();
return (
-
-
+
{post.title}
-
- {post.author}{' | '}
+
- {intl.formatMessage(messages.postedOn, { time: timeago.format(post.createdAt, intl.locale) })}
+ {intl.formatMessage(
+ messages.postedOn,
+ {
+ author: post.author,
+ time: timeago.format(post.createdAt, intl.locale),
+ },
+ )}
-
-
+
+
+
-
- {intl.formatMessage(post.following ? messages.unfollow : messages.follow)}
-
- )}
>
{
@@ -145,8 +125,9 @@ function Post({
return true;
}}
alt="Follow"
+ iconAs={Icon}
size="inline"
- icon={post.following ? faSolidStar : faEmptyStar}
+ src={post.following ? StarFilled : StarOutline}
/>
diff --git a/src/discussions/posts/post/PostLink.jsx b/src/discussions/posts/post/PostLink.jsx
index 835d7910..64d53d1d 100644
--- a/src/discussions/posts/post/PostLink.jsx
+++ b/src/discussions/posts/post/PostLink.jsx
@@ -1,10 +1,10 @@
import React from 'react';
-import { faCircle, faFlag } from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { Link } from 'react-router-dom';
import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { Icon } from '@edx/paragon';
+import { Flag, Unread } from '@edx/paragon/icons';
import { Routes } from '../../../data/constants';
import messages from './messages';
@@ -24,13 +24,13 @@ function PostLink({
}
>
{post.abuseFlagged && (
-
- dispatch(updateExistingThread(post.id, { voted: !post.voted }))}
+ voted={post.voted}
+ />
+
- {intl.formatMessage(post.voted ? messages.removeLike : messages.like)}
+ {intl.formatMessage(post.following ? messages.unfollow : messages.follow)}
)}
- >
- {
- e.preventDefault();
- dispatch(updateExistingThread(post.id, { voted: !post.voted }));
- return false;
- }}
- alt="Like"
- size="inline"
- icon={post.voted ? faSolidThumb : faEmptyThumb}
- />
-
- {post.voteCount}
-
-
- dispatch(setSortBy(option.value))}
- label={
-
);
+
)}
-
-
+ {!post.read &&
diff --git a/src/discussions/posts/post/messages.js b/src/discussions/posts/post/messages.js
index 3f941910..fa0bf3cc 100644
--- a/src/discussions/posts/post/messages.js
+++ b/src/discussions/posts/post/messages.js
@@ -7,7 +7,7 @@ const messages = defineMessages({
},
postedOn: {
id: 'discussions.post.posted-on',
- defaultMessage: 'Posted {time}',
+ defaultMessage: 'Posted {time} by {author}',
},
contentReported: {
id: 'discussions.post.content-reported',
diff --git a/src/discussions/topics/topic-group/topic/Topic.jsx b/src/discussions/topics/topic-group/topic/Topic.jsx
index 66bf3d60..dd8f8b84 100644
--- a/src/discussions/topics/topic-group/topic/Topic.jsx
+++ b/src/discussions/topics/topic-group/topic/Topic.jsx
@@ -2,9 +2,8 @@
import React from 'react';
import PropTypes from 'prop-types';
-import { faQuestionCircle } from '@fortawesome/free-regular-svg-icons';
-import { faComments, faFlag } from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { Icon } from '@edx/paragon';
+import { Flag, Help, QuestionAnswer } from '@edx/paragon/icons';
import { useParams } from 'react-router';
import { Link } from 'react-router-dom';
@@ -33,16 +32,16 @@ function Topic({
-
-
{flags !== null && (
-
)}
diff --git a/src/discussions/topics/topic-search-bar/TopicSearchBar.jsx b/src/discussions/topics/topic-search-bar/TopicSearchBar.jsx
index 668f284b..2303af09 100644
--- a/src/discussions/topics/topic-search-bar/TopicSearchBar.jsx
+++ b/src/discussions/topics/topic-search-bar/TopicSearchBar.jsx
@@ -1,11 +1,10 @@
import React from 'react';
-import { faSort } from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { useDispatch } from 'react-redux';
import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
-import { SearchField } from '@edx/paragon';
+import { Icon, SearchField } from '@edx/paragon';
+import { ArrowDropUpDown } from '@edx/paragon/icons';
import { SelectableDropdown } from '../../../components';
import { TopicOrdering } from '../../../data/constants';
@@ -27,9 +26,7 @@ function TopicSearchBar({ intl }) {