aboutsummaryrefslogtreecommitdiff
path: root/vnext/src/components
diff options
context:
space:
mode:
authorGravatar Vitaly Takmazov2018-06-19 01:06:06 +0300
committerGravatar Vitaly Takmazov2023-01-13 10:37:52 +0300
commit4dfdee5313ef74b6e541c0f3be58b80f1c306dbc (patch)
tree1cc680d07033cbe1f8c687293f4a1159e86b41fb /vnext/src/components
parent3a6ac190800644dba207b0c7b4d65640ca7175c3 (diff)
paging
Diffstat (limited to 'vnext/src/components')
-rw-r--r--vnext/src/components/Feeds.js61
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
})
};