Feed using hooks

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 = {