diff --git a/src/App.js b/src/App.js
index 2bf11ed..0be4fb9 100644
--- a/src/App.js
+++ b/src/App.js
@@ -28,7 +28,7 @@ const routes = [{
render: HomeRender,
}, {
key: 'source',
- path: '/source/:source',
+ path: '/source/:sourceId',
render: HomeRender,
}, {
key: 'for-you',
diff --git a/src/components/Common/Sort/Sort.js b/src/components/Common/Sort/Sort.js
index a95cb6c..e9b0fa4 100644
--- a/src/components/Common/Sort/Sort.js
+++ b/src/components/Common/Sort/Sort.js
@@ -6,19 +6,15 @@ import './Sort.scss';
const propTypes = {
current: PropTypes.string.isRequired,
- onClick: PropTypes.func.isRequired,
};
-const Sort = ({ current, onClick }) => {
+const Sort = ({ current }) => {
const items = [{
display: 'New',
value: 'new',
}, {
display: 'Best',
value: 'best',
- // }, {
- // display: 'Daily',
- // value: 'daily',
}];
return (
@@ -30,7 +26,6 @@ const Sort = ({ current, onClick }) => {
to={{
search: `?sort=${value}`,
}}
- onClick={() => onClick(value)}
>{display}
))}
diff --git a/src/components/ForYou/ForYou.js b/src/components/ForYou/ForYou.js
index 6a7807a..6c7f571 100644
--- a/src/components/ForYou/ForYou.js
+++ b/src/components/ForYou/ForYou.js
@@ -1,7 +1,10 @@
import React, { Component } from 'react';
-import { Users } from '@gorillab/reader-js';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
import qs from 'qs';
+import { getForYouPosts, postsSelectors } from '../../state/ducks/posts';
+
import PageHeader from '../Common/PageHeader';
import PageTitle from '../Common/PageTitle';
import Sort from '../Common/Sort';
@@ -12,6 +15,11 @@ import './ForYou.scss';
const LIMIT = 25;
+const propTypes = {
+ getPosts: PropTypes.func.isRequired,
+ getForYouPosts: PropTypes.func.isRequired,
+};
+
class ForYou extends Component {
constructor(props) {
super(props);
@@ -26,52 +34,28 @@ class ForYou extends Component {
};
this.getMore = this.getMore.bind(this);
- this.changeSort = this.changeSort.bind(this);
- }
-
- componentDidMount() {
- this.getPosts();
}
- async getPosts(query = {}) {
- try {
- const posts = await Users.getForYou({
+ async componentDidMount() {
+ if (!this.props.getPosts(this.state.sort).length) {
+ await this.props.getForYouPosts({
sort: this.state.sort,
limit: this.state.limit,
page: this.state.page,
- ...query,
});
-
- this.setState({
- posts,
- ...query,
- });
- } catch (error) {
- // eslint-disable-next-line no-console
- console.error(error);
}
+ // eslint-disable-next-line react/no-did-mount-set-state
+ this.setState({
+ posts: [...this.props.getPosts(this.state.sort)],
+ });
}
- async getMore() {
- try {
- const posts = await Users.getForYou({
- sort: this.state.sort,
- limit: LIMIT,
- page: Math.floor(this.state.posts.length / LIMIT) + 1,
- });
-
- this.setState({
- posts: this.state.posts.concat(posts),
- limit: this.state.limit + LIMIT,
- });
- } catch (error) {
- // eslint-disable-next-line no-console
- console.error(error);
- }
- }
-
- changeSort(sort) {
- this.getPosts({ sort });
+ getMore() {
+ this.props.getForYouPosts({
+ sort: this.state.sort,
+ limit: LIMIT,
+ page: Math.floor(this.props.getPosts(this.state.sort).length / LIMIT) + 1,
+ });
}
render() {
@@ -80,7 +64,7 @@ class ForYou extends Component {
-
+
@@ -95,5 +79,12 @@ class ForYou extends Component {
);
}
}
-
-export default ForYou;
+ForYou.propTypes = propTypes;
+
+export default connect(
+ state => ({
+ getPosts: postsSelectors.getForYouPosts(state),
+ }), {
+ getForYouPosts,
+ },
+)(ForYou);
diff --git a/src/components/ForYou/ForYou.test.js b/src/components/ForYou/ForYou.test.js
index 29f3693..8bbb45a 100644
--- a/src/components/ForYou/ForYou.test.js
+++ b/src/components/ForYou/ForYou.test.js
@@ -1,13 +1,18 @@
import React from 'react';
import ReactDOM from 'react-dom';
+import { Provider as ReduxProvider } from 'react-redux';
import { MemoryRouter } from 'react-router-dom';
import ForYou from './ForYou';
+import configureStore from '../../state';
it('renders without crashing', () => {
const div = document.createElement('div');
+ const store = configureStore(window.REDUX_INITIAL_DATA);
ReactDOM.render(
-
-
- , div);
+
+
+
+
+ , div);
});
diff --git a/src/components/Home/Home.js b/src/components/Home/Home.js
index 92bf9c2..0f0dcc3 100644
--- a/src/components/Home/Home.js
+++ b/src/components/Home/Home.js
@@ -1,8 +1,10 @@
import React, { Component } from 'react';
import PropTypes from 'prop-types';
-import { Posts } from '@gorillab/reader-js';
+import { connect } from 'react-redux';
import qs from 'qs';
+import { getHomePosts, getSourcePosts, postsSelectors } from '../../state/ducks/posts';
+
import PageHeader from '../Common/PageHeader';
import PageTitle from '../Common/PageTitle';
import Sort from '../Common/Sort';
@@ -18,9 +20,14 @@ const propTypes = {
isLoggedIn: PropTypes.bool.isRequired,
title: PropTypes.string.isRequired,
source: PropTypes.any,
+ getPosts: PropTypes.func.isRequired,
+ // eslint-disable-next-line react/no-unused-prop-types
+ getHomePosts: PropTypes.func.isRequired,
+ // eslint-disable-next-line react/no-unused-prop-types
+ getPostsBySource: PropTypes.func.isRequired,
};
const defaultProps = {
- source: undefined,
+ source: {},
};
class Home extends Component {
@@ -28,7 +35,6 @@ class Home extends Component {
super(props);
const { sort } = qs.parse(location.search, { ignoreQueryPrefix: true });
-
this.state = {
posts: [],
sort: sort || 'new',
@@ -37,54 +43,60 @@ class Home extends Component {
};
this.getMore = this.getMore.bind(this);
- this.changeSort = this.changeSort.bind(this);
- }
-
- componentDidMount() {
- this.getPosts();
}
- async getPosts(query = {}) {
- try {
- const posts = await Posts.getPosts({
- source: this.props.source ? this.props.source.id : undefined,
- sort: this.state.sort,
- limit: this.state.limit,
- page: this.state.page,
- ...query,
+ async componentDidMount() {
+ const sourceId = this.props.source.id;
+ if (sourceId) {
+ if (!this.props.getPostsBySource(sourceId, this.state.sort).length) {
+ await this.props.getSourcePosts({
+ source: sourceId,
+ sort: this.state.sort,
+ limit: this.state.limit,
+ page: this.state.page,
+ });
+ }
+ // eslint-disable-next-line react/no-did-mount-set-state
+ this.setState({
+ posts: [...this.props.getPostsBySource(sourceId, this.state.sort)],
});
-
+ } else {
+ if (!this.props.getPosts(this.state.sort).length) {
+ await this.props.getHomePosts({
+ sort: this.state.sort,
+ limit: this.state.limit,
+ page: this.state.page,
+ });
+ }
+ // eslint-disable-next-line react/no-did-mount-set-state
this.setState({
- posts,
- ...query,
+ posts: [...this.props.getPosts(this.state.sort)],
});
- } catch (error) {
- // eslint-disable-next-line no-console
- console.error(error);
}
}
async getMore() {
- try {
- const posts = await Posts.getPosts({
- source: this.props.source ? this.props.source.id : undefined,
+ if (this.props.source) {
+ await this.props.getSourcePosts({
+ source: this.props.source.id,
sort: this.state.sort,
- limit: LIMIT,
+ limit: this.state.limit,
page: Math.floor(this.state.posts.length / LIMIT) + 1,
});
-
this.setState({
- posts: this.state.posts.concat(posts),
- limit: this.state.limit + LIMIT,
+ posts: [...this.props.getPostsBySource(this.props.source.id, this.state.sort)],
});
- } catch (error) {
- // eslint-disable-next-line no-console
- console.error(error);
+ return;
}
- }
-
- changeSort(sort) {
- this.getPosts({ sort });
+ await this.props.getHomePosts({
+ source: this.props.source ? this.props.source.id : undefined,
+ sort: this.state.sort,
+ limit: LIMIT,
+ page: Math.floor(this.state.posts.length / LIMIT) + 1,
+ });
+ this.setState({
+ posts: [...this.props.getPosts(this.state.sort)],
+ });
}
render() {
@@ -96,7 +108,7 @@ class Home extends Component {
{this.props.isLoggedIn && this.props.source
&& }
-
+
@@ -115,4 +127,12 @@ class Home extends Component {
Home.propTypes = propTypes;
Home.defaultProps = defaultProps;
-export default Home;
+export default connect(
+ state => ({
+ getPosts: postsSelectors.getHomePosts(state),
+ getPostsBySource: postsSelectors.getSourcePosts(state),
+ }), {
+ getHomePosts,
+ getSourcePosts,
+ },
+)(Home);
diff --git a/src/components/Home/Home.render.js b/src/components/Home/Home.render.js
index 55acfc9..54c8fef 100644
--- a/src/components/Home/Home.render.js
+++ b/src/components/Home/Home.render.js
@@ -14,7 +14,7 @@ const propTypes = {
};
const HomeRender = ({ match, getSource, ...rest }) => {
- const source = match.params.source ? getSource(match.params.source) : undefined;
+ const source = match.params.sourceId ? getSource(match.params.sourceId) : undefined;
const title = source ? source.title : 'Explore';
return ;
diff --git a/src/components/Posts/PostsList.js b/src/components/Posts/PostsList.js
index f617b81..210c817 100644
--- a/src/components/Posts/PostsList.js
+++ b/src/components/Posts/PostsList.js
@@ -21,7 +21,6 @@ export const PostsList = ({ posts, getMore }) => (
))}
-
{getMore &&