Show rule info when a category is selected

src/newsreader/js/pages/homepage/components/feedlist/PostItem.js

@@ -1,8 +1,8 @@
 import React from 'react';
 import { connect } from 'react-redux';
 
+import { CATEGORY_TYPE, RULE_TYPE } from '../../constants.js';
 import { selectPost } from '../../actions/posts.js';
-
 import { formatDatetime } from '../../../../utils.js';
 
 class PostItem extends React.Component {
@@ -28,6 +28,9 @@ class PostItem extends React.Component {
           <span className="posts-info__date" title={publicationDate}>
             {publicationDate} {post.author && `By ${post.author}`}
           </span>
+          {this.props.selected.type == CATEGORY_TYPE && (
+            <span className="badge">{this.props.rule.name}</span>
+          )}
           <a
             className="posts-info__link"
             href={post.url}
@@ -42,8 +45,12 @@ class PostItem extends React.Component {
   }
 }
 
+const mapStateToProps = state => ({
+  selected: state.selected.item,
+});
+
 const mapDispatchToProps = dispatch => ({
   selectPost: post => dispatch(selectPost(post)),
 });
 
-export default connect(null, mapDispatchToProps)(PostItem);
+export default connect(mapStateToProps, mapDispatchToProps)(PostItem);

src/newsreader/js/pages/homepage/components/feedlist/RuleItem.js

@@ -9,12 +9,11 @@ class RuleItem extends React.Component {
     });
 
     const postItems = posts.map(post => {
-      return <PostItem key={post.id} post={post} />;
+      return <PostItem key={post.id} post={post} rule={this.props.rule} />;
     });
 
     return (
       <section className="posts-section">
-        <h3 className="posts-section__name">{this.props.rule.name}</h3>
         <ul className="posts">{postItems}</ul>
       </section>
     );

src/newsreader/scss/components/posts/_posts.scss

@@ -12,6 +12,10 @@
 
     padding: 10px;
 
+    &:first-child {
+      padding: 0 10px 10px 10px;
+    }
+
     &:hover {
       cursor: pointer;
       background-color: $gainsboro;