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 &&