diff --git a/client/coral-embed-stream/src/components/Stream.js b/client/coral-embed-stream/src/components/Stream.js index 0cfaf0368..c6a88178f 100644 --- a/client/coral-embed-stream/src/components/Stream.js +++ b/client/coral-embed-stream/src/components/Stream.js @@ -238,7 +238,12 @@ class Stream extends React.Component { :

{asset.settings.closedMessage}

} - + {loggedIn && ( { + return ( +
+

+ {comment.body} +

+ +
+ ); +}; + +export default FeaturedComment; diff --git a/plugins/talk-plugin-featured-comments/client/components/FeaturedComments.js b/plugins/talk-plugin-featured-comments/client/components/FeaturedComments.js new file mode 100644 index 000000000..cd8c360dd --- /dev/null +++ b/plugins/talk-plugin-featured-comments/client/components/FeaturedComments.js @@ -0,0 +1,35 @@ +import React from 'react'; +import styles from './styles.css'; +import FeaturedComment from './FeaturedComment'; + +const isFeatured = (tags) => !!tags.filter((t) => t.tag.name === 'FEATURED').length; + +class FeaturedComments extends React.Component { + render() { + + const {view : comments} = this.props; + + const featuredComments = comments.reduce((acc, curr) => { + if (isFeatured(curr.tags)) { + acc.push(curr); + } + + return acc; + }, []); + + return ( +
+ { + featuredComments.map((comment, i) => + + ) + } +
+ ); + } +} + +export default FeaturedComments; diff --git a/plugins/talk-plugin-featured-comments/client/components/styles.css b/plugins/talk-plugin-featured-comments/client/components/styles.css index 9bca2406c..266f7d2da 100644 --- a/plugins/talk-plugin-featured-comments/client/components/styles.css +++ b/plugins/talk-plugin-featured-comments/client/components/styles.css @@ -22,7 +22,7 @@ } .tag { - background: #f7917a; + background-color: #f7917a; font-size: 12px; font-weight: bold; color: white; @@ -30,4 +30,10 @@ margin: 0px 5px; padding: 5px 5px; border-radius: 2px; +} + +.featuredComments { + padding: 20px; + background-color: #f9f9f9; + margin: 10px 0; } \ No newline at end of file diff --git a/plugins/talk-plugin-featured-comments/client/index.js b/plugins/talk-plugin-featured-comments/client/index.js index 613d70d13..9bed9f46e 100644 --- a/plugins/talk-plugin-featured-comments/client/index.js +++ b/plugins/talk-plugin-featured-comments/client/index.js @@ -1,11 +1,13 @@ import translations from './translations.json'; import FeaturedTag from './components/FeaturedTag'; import FeaturedButton from './components/FeaturedButton'; +import FeaturedComments from './components/FeaturedComments'; export default { translations, slots: { commentInfoBar: [FeaturedTag], - commentReactions: [FeaturedButton] + commentReactions: [FeaturedButton], + stream: [FeaturedComments] } };