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