From 1194a4070369896c60bfc94b8635bd5a312065c1 Mon Sep 17 00:00:00 2001 From: Vitaly Takmazov Date: Mon, 25 Feb 2019 19:29:08 +0300 Subject: Feed using hooks --- vnext/src/components/Feeds.js | 119 ++++++++++++++++++------------------------ 1 file changed, 51 insertions(+), 68 deletions(-) (limited to 'vnext') diff --git a/vnext/src/components/Feeds.js b/vnext/src/components/Feeds.js index 430ce9f1..d7ed1128 100644 --- a/vnext/src/components/Feeds.js +++ b/vnext/src/components/Feeds.js @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { useState, useEffect } from 'react'; import PropTypes from 'prop-types'; import ReactRouterPropTypes from 'react-router-prop-types'; import { Link } from 'react-router-dom'; @@ -70,94 +70,77 @@ export function Home(props) { return (); } -class Feed extends React.Component { - constructor(props) { - super(props); - this.state = { - msgs: [], - loading: false - }; - } - componentDidMount() { - this.loadMessages(this.props.visitor.hash, this.props.location.search.substring(1)); - } +function Feed(props) { + const [msgs, setMsgs] = useState([]); + const [loading, setLoading] = useState(true); + const [nextpage, setNextpage] = useState(null); + const [error, setError] = useState(false); - shouldComponentUpdate(nextProps, nextState) { - return this.props.visitor.uid !== nextProps.visitor.uid - || this.state !== nextState || this.props.location !== nextProps.location; - } + useEffect(() => { + loadMessages(props.visitor.hash, props.location.search.substring(1)); + }, [props.visitor, props.location]); - getSnapshotBeforeUpdate(prevProps) { - return (this.props.location.search != prevProps.location.search - || this.props.visitor != prevProps.visitor || this.props.query.search != prevProps.query.search); - } - componentDidUpdate(prevProps, prevState, shouldReload) { - if (shouldReload) { - this.loadMessages(this.props.visitor.hash, this.props.location.search.substring(1)); - } - } - loadMessages = (hash = '', filter = '') => { + let loadMessages = (hash = '', filter = '') => { document.body.scrollTop = 0; document.documentElement.scrollTop = 0; - this.setState({ msgs: [], loading: true }); + setMsgs([]); const filterParams = qs.parse(filter); - let params = Object.assign({}, filterParams || {}, this.props.query.search || {}); - let url = this.props.query.baseUrl; + let params = Object.assign({}, filterParams || {}, props.query.search || {}); + let url = props.query.baseUrl; if (hash) { params.hash = hash; } - if (!params.hash && this.props.authRequired) { - this.props.history.push('/'); + if (!params.hash && props.authRequired) { + props.history.push('/'); } getMessages(url, params) .then(response => { const { data } = response; - const { pageParam } = this.props.query; + const { pageParam } = props.query; const lastMessage = data.slice(-1)[0] || {}; - const nextpage = this.getPageParam(pageParam, lastMessage, filterParams); - this.setState({ msgs: data, loading: false, nextpage: nextpage }); + const nextpage = getPageParam(pageParam, lastMessage, filterParams); + setMsgs(data); + setLoading(false); + setNextpage(nextpage); }).catch(ex => { - this.setState({ error: true }); + setError(true); }); } - getPageParam = (pageParam, lastMessage, filterParams) => { + let getPageParam = (pageParam, lastMessage, filterParams) => { const pageValue = pageParam === 'before_mid' ? lastMessage.mid : pageParam === 'page' ? (Number(filterParams.page) || 0) + 1 : moment.utc(lastMessage.updated).valueOf(); - let newFilter = Object.assign({}, filterParams); + let newFilter = { ...filterParams }; newFilter[pageParam] = pageValue; return `?${qs.stringify(newFilter)}`; } - - render() { - const { tag } = qs.parse(this.props.location.search.substring(1) || {}); - const nodes = ( - <> - { - tag && ( -

- - ← All posts with tag {tag} - -

- ) - } - { - this.state.msgs.map(msg => - ) - } - { - this.state.msgs.length >= 20 && ( -

- Next → -

- ) - } - - ); - return this.state.msgs.length > 0 ? ( -
{nodes}
- ) : this.state.error ?
error
: this.state.loading ?
:
No more messages
; - } + const { tag } = qs.parse(location.search.substring(1) || {}); + const nodes = ( + <> + { + tag && ( +

+ + ← All posts with tag {tag} + +

+ ) + } + { + msgs.map(msg => + ) + } + { + msgs.length >= 20 && ( +

+ Next → +

+ ) + } + + ); + return msgs.length > 0 ? ( +
{nodes}
+ ) : error ?
error
: loading ?
:
No more messages
; } Discover.propTypes = { -- cgit v1.2.3