diff options
author | 2019-02-25 19:29:08 +0300 | |
---|---|---|
committer | 2023-01-13 10:37:54 +0300 | |
commit | 1194a4070369896c60bfc94b8635bd5a312065c1 (patch) | |
tree | 550a27220867f21664fe44bae10559eb42c57eb4 /vnext/src | |
parent | 2785bb3948277cf5338ea452b0ed7d15a6b702a9 (diff) |
Feed using hooks
Diffstat (limited to 'vnext/src')
-rw-r--r-- | vnext/src/components/Feeds.js | 119 |
1 files changed, 51 insertions, 68 deletions
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 (<Feed authRequired={true} query={query} {...props} />); } -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 && ( - <p className="page"> - <Link to={{ pathname: `/tag/${tag}` }}> - <span>← All posts with tag </span><b>{tag}</b> - </Link> - </p> - ) - } - { - 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> - ) - } - </> - ); - return this.state.msgs.length > 0 ? ( - <div className="msgs">{nodes}</div> - ) : this.state.error ? <div>error</div> : this.state.loading ? <div className="msgs"><Spinner /><Spinner /><Spinner /><Spinner /></div> : <div>No more messages</div>; - } + const { tag } = qs.parse(location.search.substring(1) || {}); + const nodes = ( + <> + { + tag && ( + <p className="page"> + <Link to={{ pathname: `/tag/${tag}` }}> + <span>← All posts with tag </span><b>{tag}</b> + </Link> + </p> + ) + } + { + msgs.map(msg => + <Message key={msg.mid} data={msg} visitor={props.visitor} />) + } + { + msgs.length >= 20 && ( + <p className="page"> + <Link to={{ pathname: props.location.pathname, search: nextpage }} rel="prev">Next →</Link> + </p> + ) + } + </> + ); + return msgs.length > 0 ? ( + <div className="msgs">{nodes}</div> + ) : error ? <div>error</div> : loading ? <div className="msgs"><Spinner /><Spinner /><Spinner /><Spinner /></div> : <div>No more messages</div>; } Discover.propTypes = { |