From 4dfdee5313ef74b6e541c0f3be58b80f1c306dbc Mon Sep 17 00:00:00 2001
From: Vitaly Takmazov
Date: Tue, 19 Jun 2018 01:06:06 +0300
Subject: paging
---
vnext/src/components/Feeds.js | 61 +++++++++++++++++++++++++++++++++++--------
1 file changed, 50 insertions(+), 11 deletions(-)
(limited to 'vnext')
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 ()
+ const query = {
+ baseUrl: "https://api.juick.com/messages",
+ pageParam: 'before_mid'
+ };
+ return ()
}
export function Discussions(props) {
- return ()
+ const query = {
+ baseUrl: "https://api.juick.com/messages/discussions",
+ pageParam: 'to'
+ };
+ return ()
}
export function Blog(props) {
const { user } = props.match.params;
- return ()
+ const query = {
+ baseUrl: `https://api.juick.com/messages`,
+ search: {
+ uname: user
+ },
+ pageParam: 'before_mid'
+ };
+ return ()
}
export function Tag(props) {
const { tag } = props.match.params;
- return ()
+ const query = {
+ baseUrl: `https://api.juick.com/messages`,
+ search: {
+ tag: tag
+ },
+ pageParam: 'before_mid'
+ };
+ return ()
}
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 {
)
}
- {this.state.msgs.map(msg =>
- )
+ {
+ this.state.msgs.map(msg =>
+ )
+ }
+ {
+ this.state.msgs.length >= 20 && (
+
+ Next →
+
+ )
}
);
@@ -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
})
};
--
cgit v1.2.3