paging

1 files changed, 50 insertions, 11 deletions

diff --git a/vnext/src/components/Feeds.js b/vnext/src/components/Feeds.js
index 0216a1b4..f7abd399 100644
--- a/vnext/src/components/Feeds.js
+++ b/vnext/src/components/Feeds.js
@@ -2,26 +2,49 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Link } from 'react-router-dom';
 import * as qs from 'query-string';
+import moment from 'moment';
 
 import Message from './Message';
 import Spinner from './Spinner';
 
 export function Discover(props) {
-  return (<Feed query={{ baseUrl: "https://api.juick.com/messages" }} {...props} />)
+  const query = {
+    baseUrl: "https://api.juick.com/messages",
+    pageParam: 'before_mid'
+  };
+  return (<Feed query={query} {...props} />)
 }
 
 export function Discussions(props) {
-  return (<Feed authRequired="true" query={{ baseUrl: "https://api.juick.com/messages/discussions" }} {...props} />)
+  const query = {
+    baseUrl: "https://api.juick.com/messages/discussions",
+    pageParam: 'to'
+  };
+  return (<Feed authRequired="true" query={query} {...props} />)
 }
 
 export function Blog(props) {
   const { user } = props.match.params;
-  return (<Feed query={{ baseUrl: `https://api.juick.com/messages`, search: { uname: user } }} {...props} />)
+  const query = {
+    baseUrl: `https://api.juick.com/messages`,
+    search: {
+      uname: user
+    },
+    pageParam: 'before_mid'
+  };
+  return (<Feed query={query} {...props} />)
 }
 
 export function Tag(props) {
   const { tag } = props.match.params;
-  return (<Feed query={{ baseUrl: `https://api.juick.com/messages`, search: { tag: tag } }} {...props} />)
+  const query = {
+    baseUrl: `https://api.juick.com/messages`,
+    search: {
+      tag: tag
+    },
+    pageParam: 'before_mid'
+  };
+  return (<Feed query={query} {...props} />)
 }
 
 class Feed extends React.Component {
@@ -45,7 +68,8 @@ class Feed extends React.Component {
   }
   loadMessages(hash = '', filter = '') {
     this.setState({ msgs: [] })
-    let params = Object.assign({}, qs.parse(filter) || {}, this.props.query.search || {});
+    const filterParams = qs.parse(filter);
+    let params = Object.assign({}, filterParams || {}, this.props.query.search || {});
     let url = this.props.query.baseUrl;
     if (hash) {
       params.hash = hash;
@@ -60,9 +84,15 @@ class Feed extends React.Component {
       .then(response => {
         return response.json()
       })
-      .then(data =>
-        this.setState({ msgs: data })
-      ).catch(ex => {
+      .then(data => {
+        const { pageParam } = this.props.query;
+        const lastMessage = data.slice(-1)[0] || {};
+        const pageValue = pageParam === 'before_mid' ? lastMessage.mid : moment.utc(lastMessage.updated).valueOf();
+        let newFilter = Object.assign({}, filterParams);
+        newFilter[pageParam] = pageValue;
+        const nextpage = `?${qs.stringify(newFilter)}`;
+        this.setState({ msgs: data, nextpage: nextpage })
+      }).catch(ex => {
         console.log(ex);
       });
   }
@@ -80,8 +110,16 @@ class Feed extends React.Component {
             </p>
           )
         }
-        {this.state.msgs.map(msg =>
-          <Message key={msg.mid} data={msg} visitor={this.props.visitor} />)
+        {
+          this.state.msgs.map(msg =>
+            <Message key={msg.mid} data={msg} visitor={this.props.visitor} />)
+        }
+        {
+          this.state.msgs.length >= 20 && (
+            <p className="page">
+              <Link to={{ pathname: this.props.location.pathname, search: this.state.nextpage }} rel="prev">Next →</Link>
+            </p>
+          )
         }
       </React.Fragment>
     );
@@ -95,6 +133,7 @@ Feed.propTypes = {
   msgs: PropTypes.array,
   query: PropTypes.shape({
     baseUrl: PropTypes.string.isRequired,
-    search: PropTypes.object
+    search: PropTypes.object,
+    pageParam: PropTypes.string.isRequired
   })
 };