Show rules inside one list

Alot of post components can be refactored now. The API endpoint can also
order by publication date only (drop ordering by rule too).

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

@@ -6,7 +6,7 @@ import { fetchPostsBySection } from '../../actions/posts.js';
 import { filterPosts } from './filters.js';
 
 import LoadingIndicator from '../../../../components/LoadingIndicator.js';
-import RuleItem from './RuleItem.js';
+import PostItem from './PostItem.js';
 
 class FeedList extends React.Component {
   checkScrollHeight = ::this.checkScrollHeight;
@@ -37,8 +37,8 @@ class FeedList extends React.Component {
   }
 
   render() {
-    const ruleItems = this.props.posts.map((item, index) => {
+    const postItems = this.props.postsBySection.map((item, index) => {
-      return <RuleItem key={index} posts={item.posts} rule={item.rule} />;
+      return <PostItem key={index} post={item} selected={this.props.selected} />;
     });
 
     if (isEqual(this.props.selected, {})) {
@@ -50,7 +50,7 @@ class FeedList extends React.Component {
           </div>
         </div>
       );
-    } else if (ruleItems.length === 0 && !this.props.isFetching) {
+    } else if (postItems.length === 0 && !this.props.isFetching) {
       return (
         <div className="post-message">
           <div className="post-message__block">
@@ -63,7 +63,7 @@ class FeedList extends React.Component {
     } else {
       return (
         <div className="post-block">
-          {ruleItems}
+          <ul className="posts">{postItems}</ul>
           {this.props.isFetching && <LoadingIndicator />}
         </div>
       );
@@ -73,7 +73,7 @@ class FeedList extends React.Component {
 
 const mapStateToProps = state => ({
   isFetching: state.posts.isFetching,
-  posts: filterPosts(state),
+  postsBySection: filterPosts(state),
   next: state.selected.next,
   lastReached: state.selected.lastReached,
   selected: state.selected.item,

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

@@ -7,7 +7,8 @@ import { formatDatetime } from '../../../../utils.js';
 
 class PostItem extends React.Component {
   render() {
-    const post = this.props.post;
+    const rule = { ...this.props.post.rule };
+    const post = { ...this.props.post, rule: rule.id };
     const publicationDate = formatDatetime(post.publicationDate);
     const titleClassName = post.read
       ? 'posts-header__title posts-header__title--read'
@@ -29,7 +30,7 @@ class PostItem extends React.Component {
             {publicationDate} {post.author && `By ${post.author}`}
           </span>
           {this.props.selected.type == CATEGORY_TYPE && (
-            <span className="badge">{this.props.rule.name}</span>
+            <span className="badge">{rule.name}</span>
           )}
           <a
             className="posts-info__link"
@@ -45,12 +46,8 @@ class PostItem extends React.Component {
   }
 }
 
-const mapStateToProps = state => ({
-  selected: state.selected.item,
-});
-
 const mapDispatchToProps = dispatch => ({
   selectPost: post => dispatch(selectPost(post)),
 });
 
-export default connect(mapStateToProps, mapDispatchToProps)(PostItem);
+export default connect(null, mapDispatchToProps)(PostItem);

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

@@ -9,7 +9,9 @@ export const filterPostsByRule = (rule = {}, posts = []) => {
     return post.rule === rule.id;
   });
 
-  return filteredPosts.length > 0 ? [{ rule, posts: filteredPosts }] : [];
+  const filteredData = filteredPosts.map(post => ({ ...post, rule: { ...rule } }));
+
+  return filteredData.length > 0 ? [...filteredData] : [];
 };
 
 export const filterPostsByCategory = (category = {}, rules = [], posts = []) => {
@@ -22,13 +24,10 @@ export const filterPostsByCategory = (category = {}, rules = [], posts = []) =>
       return post.rule === rule.id;
     });
 
-    return {
+    return filteredPosts.map(post => ({ ...post, rule: { ...rule } }));
-      rule: { ...rule },
-      posts: filteredPosts,
-    };
   });
 
-  return filteredData.filter(rule => rule.posts.length > 0);
+  return filteredData.length > 0 ? [...filteredData.flat()] : [];
 };
 
 export const filterPosts = state => {

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

@@ -4,6 +4,7 @@
 
   list-style: none;
 
+  width: 95%;
   padding: 0;
 
   &__item {