diff options
author | 2018-06-19 01:06:06 +0300 | |
---|---|---|
committer | 2023-01-13 10:37:52 +0300 | |
commit | 4dfdee5313ef74b6e541c0f3be58b80f1c306dbc (patch) | |
tree | 1cc680d07033cbe1f8c687293f4a1159e86b41fb /vnext/src/components/Feeds.js | |
parent | 3a6ac190800644dba207b0c7b4d65640ca7175c3 (diff) |
paging
Diffstat (limited to 'vnext/src/components/Feeds.js')
-rw-r--r-- | vnext/src/components/Feeds.js | 61 |
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 }) }; |