perf: Cache posts in redux store or performance

src/App.js

@@ -28,7 +28,7 @@ const routes = [{
   render: HomeRender,
 }, {
   key: 'source',
-  path: '/source/:source',
+  path: '/source/:sourceId',
   render: HomeRender,
 }, {
   key: 'for-you',

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}</Link>
           </li>
         ))}

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 {
         <PageHeader>
           <PageTitle title="For You" />
 
-          <Sort current={this.state.sort} onClick={this.changeSort} />
+          <Sort current={this.state.sort} />
         </PageHeader>
 
         <PageContent>
@@ -95,5 +79,12 @@ class ForYou extends Component {
     );
   }
 }
-
-export default ForYou;
+ForYou.propTypes = propTypes;
+
+export default connect(
+  state => ({
+    getPosts: postsSelectors.getForYouPosts(state),
+  }), {
+    getForYouPosts,
+  },
+)(ForYou);

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(
-    <MemoryRouter>
-      <ForYou />
-    </MemoryRouter>, div);
+    <ReduxProvider store={store}>
+      <MemoryRouter>
+        <ForYou />
+      </MemoryRouter>
+    </ReduxProvider>, div);
 });

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,17 +20,21 @@ 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 {
   constructor(props) {
     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
           && <SubscribeButton source={this.props.source} />}
 
-          <Sort current={this.state.sort} onClick={this.changeSort} />
+          <Sort current={this.state.sort} />
         </PageHeader>
 
         <PageContent>
@@ -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);

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 <Home title={title} source={source} {...rest} />;

src/components/Posts/PostsList.js

@@ -21,7 +21,6 @@ export const PostsList = ({ posts, getMore }) => (
         <Post key={post.id} post={post} index={index} />
       ))}
     </ul>
-
     {getMore && <div className="get-more-wrapper">
       <button type="button" name="get-more" className="btn btn-get-more" onClick={getMore}>
         Read More