From b6b7ae39973c36f6625045b590c444b267271432 Mon Sep 17 00:00:00 2001
From: sonny <sonnyba871@gmail.com>
Date: Sun, 24 May 2020 23:07:03 +0200
Subject: [PATCH] Show rule info when a category is selected

---
 .../js/pages/homepage/components/feedlist/PostItem.js | 11 +++++++++--
 .../js/pages/homepage/components/feedlist/RuleItem.js |  3 +--
 src/newsreader/scss/components/posts/_posts.scss      |  4 ++++
 3 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/src/newsreader/js/pages/homepage/components/feedlist/PostItem.js b/src/newsreader/js/pages/homepage/components/feedlist/PostItem.js
index d281570..3848ef8 100644
--- a/src/newsreader/js/pages/homepage/components/feedlist/PostItem.js
+++ b/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);
diff --git a/src/newsreader/js/pages/homepage/components/feedlist/RuleItem.js b/src/newsreader/js/pages/homepage/components/feedlist/RuleItem.js
index 608e8a1..0b08bda 100644
--- a/src/newsreader/js/pages/homepage/components/feedlist/RuleItem.js
+++ b/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>
     );
diff --git a/src/newsreader/scss/components/posts/_posts.scss b/src/newsreader/scss/components/posts/_posts.scss
index 706c520..f988f29 100644
--- a/src/newsreader/scss/components/posts/_posts.scss
+++ b/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;