@@ -63,7 +63,7 @@ class FeedList extends React.Component {
} else {
return (
- {ruleItems}
+
{this.props.isFetching &&
}
);
@@ -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,
diff --git a/src/newsreader/js/pages/homepage/components/feedlist/PostItem.js b/src/newsreader/js/pages/homepage/components/feedlist/PostItem.js
index 3848ef8..4513589 100644
--- a/src/newsreader/js/pages/homepage/components/feedlist/PostItem.js
+++ b/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}`}
{this.props.selected.type == CATEGORY_TYPE && (
-
{this.props.rule.name}
+
{rule.name}
)}
({
- selected: state.selected.item,
-});
-
const mapDispatchToProps = dispatch => ({
selectPost: post => dispatch(selectPost(post)),
});
-export default connect(mapStateToProps, mapDispatchToProps)(PostItem);
+export default connect(null, mapDispatchToProps)(PostItem);
diff --git a/src/newsreader/js/pages/homepage/components/feedlist/filters.js b/src/newsreader/js/pages/homepage/components/feedlist/filters.js
index a3ee886..95b8b41 100644
--- a/src/newsreader/js/pages/homepage/components/feedlist/filters.js
+++ b/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 {
- rule: { ...rule },
- posts: filteredPosts,
- };
+ return filteredPosts.map(post => ({ ...post, rule: { ...rule } }));
});
- return filteredData.filter(rule => rule.posts.length > 0);
+ return filteredData.length > 0 ? [...filteredData.flat()] : [];
};
export const filterPosts = state => {
diff --git a/src/newsreader/scss/components/posts/_posts.scss b/src/newsreader/scss/components/posts/_posts.scss
index f988f29..026d723 100644
--- a/src/newsreader/scss/components/posts/_posts.scss
+++ b/src/newsreader/scss/components/posts/_posts.scss
@@ -4,6 +4,7 @@
list-style: none;
+ width: 95%;
padding: 0;
&__item {