Refactor post list css classes

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

@@ -62,8 +62,8 @@ class FeedList extends React.Component {
       );
     } else {
       return (
-        <div className="post-block">
+        <div className="posts">
-          <ul className="posts">{postItems}</ul>
+          <ul className="posts__list">{postItems}</ul>
           {this.props.isFetching && <LoadingIndicator />}
         </div>
       );

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

@@ -11,17 +11,16 @@ class PostItem extends React.Component {
     const post = { ...this.props.post, rule: rule.id };
     const publicationDate = formatDatetime(post.publicationDate);
     const titleClassName = post.read
-      ? 'posts-header__title posts-header__title--read'
+      ? 'posts__header posts__header--read'
-      : 'posts-header__title';
+      : 'posts__header';
 
     return (
-      <li
+      <li className="posts__item">
-        className="posts__item"
+        <h5
-        onClick={() => {
+          className={titleClassName}
-          this.props.selectPost(post);
+          title={post.title}
-        }}
+          onClick={() => this.props.selectPost(post)}
         >
-        <h5 className={titleClassName} title={post.title}>
           {post.title}
         </h5>
 

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

@@ -1,23 +0,0 @@
-import React from 'react';
-
-import PostItem from './PostItem.js';
-
-class RuleItem extends React.Component {
-  render() {
-    const posts = Object.values(this.props.posts).sort((firstEl, secondEl) => {
-      return new Date(secondEl.publicationDate) - new Date(firstEl.publicationDate);
-    });
-
-    const postItems = posts.map(post => {
-      return <PostItem key={post.id} post={post} rule={this.props.rule} />;
-    });
-
-    return (
-      <section className="posts-section">
-        <ul className="posts">{postItems}</ul>
-      </section>
-    );
-  }
-}
-
-export default RuleItem;

src/newsreader/scss/components/index.scss

@@ -1,28 +1,25 @@
-@import "body/index";
+@import "./body/index";
-@import "form/index";
+@import "./form/index";
-@import "main/index";
+@import "./main/index";
-@import "navbar/index";
+@import "./navbar/index";
-@import "loading-indicator/index";
+@import "./loading-indicator/index";
 
-@import "modal/index";
+@import "./modal/index";
 
-@import "card/index";
+@import "./card/index";
-@import "list/index";
+@import "./list/index";
-@import "messages/index";
+@import "./messages/index";
-@import "section/index";
+@import "./section/index";
-@import "errorlist/index";
+@import "./errorlist/index";
-@import "fieldset/index";
+@import "./fieldset/index";
-@import "pagination/index";
+@import "./pagination/index";
-@import "sidebar/index";
+@import "./sidebar/index";
-@import "table/index";
+@import "./table/index";
 
-@import "rules/index";
+@import "./rules/index";
-@import "category/index";
+@import "./category/index";
 
-@import "post/index";
+@import "./post/index";
-@import "post-block/index";
+@import "./post-message/index";
-@import "post-message/index";
+@import "./posts/index";
-@import "posts/index";
+@import "./posts-info/index";
-@import "posts-header/index";
-@import "posts-info/index";
-@import "posts-section/index";

src/newsreader/scss/components/post-block/_post-block.scss

@@ -1,10 +0,0 @@
-.post-block {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-
-  width: 70%;
-  margin: 0 0 2% 0;
-
-  border-radius: 2px;
-}

src/newsreader/scss/components/post-block/index.scss

@@ -1 +0,0 @@
-@import "post-block";

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

@@ -1,15 +0,0 @@
-.posts-header {
-
-  &__title {
-    width: 80%;
-
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    font-size: 16px;
-
-    &--read {
-      color: darken($gainsboro, +10%);
-    }
-  }
-}

src/newsreader/scss/components/posts-header/index.scss

@@ -1 +0,0 @@
-@import "posts-header";

src/newsreader/scss/components/posts-section/_post-section.scss

@@ -1,20 +0,0 @@
-.posts-section {
-  display: flex;
-  flex-direction: column;
-  width: 95%;
-
-  margin: 20px;
-  padding: 10px;
-  border-radius: 5px;
-
-  background-color: $white;
-
-  &:first-child {
-    padding: 0 10px 10px 10px;
-    margin: 0 20px 20px 20px;
-  }
-
-  &__name {
-    padding: 0 10px 10px 10px;
-  }
-}

src/newsreader/scss/components/posts-section/index.scss

@@ -1 +0,0 @@
-@import "post-section";

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

@@ -1,4 +1,8 @@
 .posts {
+  width: 70%;
+  margin: 0 0 2% 0;
+
+  &__list {
     display: flex;
     flex-direction: column;
 
@@ -6,6 +10,7 @@
 
     width: 95%;
     padding: 0;
+  }
 
   &__item {
     display: flex;
@@ -17,11 +22,6 @@
       padding: 0 10px 10px 10px;
     }
 
-    &:hover {
-      cursor: pointer;
-      background-color: $gainsboro;
-    }
-
     & span {
       font-size: small;
       text-overflow: ellipsis;
@@ -37,4 +37,21 @@
       border-bottom: 0;
     }
   }
+
+  &__header {
+    width: 80%;
+
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-size: 16px;
+
+    &--read {
+      color: darken($gainsboro, +10%);
+    }
+
+    &:hover {
+      cursor: pointer;
+    }
+  }
 }