aboutsummaryrefslogtreecommitdiff
path: root/vnext/src/components/Feeds.js
diff options
context:
space:
mode:
authorGravatar Vitaly Takmazov2019-02-25 19:29:08 +0300
committerGravatar Vitaly Takmazov2023-01-13 10:37:54 +0300
commit1194a4070369896c60bfc94b8635bd5a312065c1 (patch)
tree550a27220867f21664fe44bae10559eb42c57eb4 /vnext/src/components/Feeds.js
parent2785bb3948277cf5338ea452b0ed7d15a6b702a9 (diff)
Feed using hooks
Diffstat (limited to 'vnext/src/components/Feeds.js')
-rw-r--r--vnext/src/components/Feeds.js119
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&nbsp;</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&nbsp;</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 = {