1 files changed, 57 insertions, 54 deletions

diff --git a/vnext/src/ui/Feeds.js b/vnext/src/ui/Feeds.js
index e687f1e2..27a8376f 100644
--- a/vnext/src/ui/Feeds.js
+++ b/vnext/src/ui/Feeds.js
@@ -1,6 +1,6 @@
-import React, { useState, useEffect, useRef } from 'react';
+import React, { useState, useEffect } from 'react';
+import { Link, useLocation, useHistory, useParams } from 'react-router-dom';
 
-import { Link } from 'react-router-dom';
 import qs from 'qs';
 import moment from 'moment';
 
@@ -20,9 +20,6 @@ import { getMessages } from '../api';
 
 /**
  * @typedef {Object} PageProps
- * @property {import('history').History} history
- * @property {import('history').Location} location
- * @property {import('react-router').match} match
  * @property {string=} search
  * @property {import('../api').SecureUser} visitor
  * @property {import('../api').Message[]=} msgs
@@ -31,34 +28,38 @@ import { getMessages } from '../api';
 /**
  * @param {PageProps} props
  */
-export function Discover(props) {
-  let search = qs.parse(props.location.search.substring(1));
+export function Discover({ visitor }) {
+  const location = useLocation();
+  let search = qs.parse(location.search.substring(1));
   const query = {
     baseUrl: '/api/messages',
     search: search,
     pageParam: search.search ? 'page' : 'before_mid'
   };
-  return (<Feed authRequired={false} query={query} {...props} />);
+  return (<Feed authRequired={false} query={query} visitor={visitor} />);
 }
 
 /**
  * @param {PageProps} props
  */
-export function Discussions(props) {
+export function Discussions({ visitor }) {
   const query = {
     baseUrl: '/api/messages/discussions',
     pageParam: 'to'
   };
-  return (<Feed authRequired={false} query={query} {...props} />);
+  return (<Feed authRequired={false} query={query} visitor={visitor} />);
 }
 
 /**
  * @param {PageProps} props
  */
-export function Blog(props) {
-  const { user } = props.match.params;
-  let search = qs.parse(props.location.search.substring(1));
-  search.uname = user;
+export function Blog({ visitor }) {
+  const { user } = useParams();
+  const location = useLocation();
+  const search = {
+    ...qs.parse(location.search.substring(1)),
+    uname: user
+  };
   const query = {
     baseUrl: '/api/messages',
     search: search,
@@ -67,9 +68,9 @@ export function Blog(props) {
   return (
     <>
       <div className="msg-cont">
-        <UserInfo user={user} />
+        <UserInfo uname={user} />
       </div>
-      <Feed authRequired={false} query={query} {...props} />
+      <Feed authRequired={false} query={query} visitor={visitor} />
     </>
   );
 }
@@ -77,8 +78,9 @@ export function Blog(props) {
 /**
  * @param {PageProps} props
  */
-export function Tag(props) {
-  const { tag } = props.match.params;
+export function Tag({ visitor }) {
+  const params = useParams();
+  const { tag } = params;
   const query = {
     baseUrl: '/api/messages',
     search: {
@@ -86,50 +88,47 @@ export function Tag(props) {
     },
     pageParam: 'before_mid'
   };
-  return (<Feed authRequired={false} query={query} {...props} />);
+  return (<Feed authRequired={false} query={query} visitor={visitor} />);
 }
 
 /**
  * @param {PageProps} props
  */
-export function Home(props) {
+export function Home({ visitor }) {
   const query = {
     baseUrl: '/api/home',
     pageParam: 'before_mid'
   };
-  return (<Feed authRequired={true} query={query} {...props} />);
+  return (<Feed authRequired={true} query={query} visitor={visitor} />);
 }
 
 /**
  * @typedef {Object} FeedState
  * @property authRequired?: boolean
  * @property visitor: import('../api').SecureUser
- * @property history: import('history').History
- * @property location: import('history').Location
  * @property msgs: import('../api').Message[]
- * @property query: Query
+ * @property { Query} query
  */
 
 /**
  * @param {FeedState} props
  */
-function Feed(props) {
+function Feed({ visitor, query, authRequired }) {
+  const location = useLocation();
+  const history = useHistory();
   const [state, setState] = useState({
-    history: props.history,
-    authRequired: props.authRequired,
-    query: props.query,
-    hash: props.visitor.hash,
-    filter: props.location.search.substring(1),
+    authRequired: authRequired,
+    hash: visitor.hash,
     msgs: [],
-    loading: true,
     nextpage: null,
     error: false,
     tag: ''
   });
-
-  const stateRef = useRef(state);
+  const [loading, setLoading] = useState(false);
 
   useEffect(() => {
+    setLoading(true);
+    const filter = location.search.substring(1);
     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 = { ...filterParams };
@@ -138,35 +137,39 @@ function Feed(props) {
     };
     document.body.scrollTop = 0;
     document.documentElement.scrollTop = 0;
-    const filterParams = qs.parse(stateRef.current.filter);
-    let params = Object.assign({}, filterParams || {}, stateRef.current.query.search || {});
-    let url = stateRef.current.query.baseUrl;
-    if (stateRef.current.hash) {
-      params.hash = stateRef.current.hash;
+    const filterParams = qs.parse(filter);
+    let params = Object.assign({}, filterParams || {}, query.search || {});
+    let url = query.baseUrl;
+    if (state.hash) {
+      params.hash = state.hash;
     }
-    if (!params.hash && stateRef.current.authRequired) {
-      stateRef.current.history.push('/');
+    if (!params.hash && state.authRequired) {
+      history.push('/');
     }
     getMessages(url, params)
       .then(response => {
         const { data } = response;
-        const { pageParam } = stateRef.current.query;
+        const { pageParam } = query;
         const lastMessage = data.slice(-1)[0] || {};
         const nextpage = getPageParam(pageParam, lastMessage, filterParams);
-        setState({
-          ...stateRef.current,
-          msgs: data,
-          loading: false,
-          nextpage: nextpage,
-          tag: qs.parse(location.search.substring(1))['tag'] || ''
+        setState((prevState) => {
+          return {
+            ...prevState,
+            msgs: data,
+            nextpage: nextpage,
+            tag: qs.parse(location.search.substring(1))['tag'] || ''
+          };
         });
+        setLoading(false);
       }).catch(ex => {
-        setState({
-          ...stateRef.current,
-          error: true
+        setState((prevState) => {
+          return {
+            ...prevState,
+            error: true
+          };
         });
       });
-  }, []);
+  }, [location.search, state.hash, state.authRequired, history, query]);
   return (state.msgs.length > 0 ? (
     <div className="msgs">
       {
@@ -180,16 +183,16 @@ function Feed(props) {
       }
       {
         state.msgs.map(msg =>
-          <Message key={msg.mid} data={msg} visitor={props.visitor} />)
+          <Message key={msg.mid} data={msg} visitor={visitor} />)
       }
       {
         state.msgs.length >= 20 && (
           <p className="page">
-            <Link to={{ pathname: props.location.pathname, search: state.nextpage }} rel="prev">Next →</Link>
+            <Link to={{ pathname: location.pathname, search: state.nextpage }} rel="prev">Next →</Link>
           </p>
         )
       }
     </div>
-  ) : state.error ? <div>error</div> : state.loading ? <div className="msgs"><Spinner /><Spinner /><Spinner /><Spinner /></div> : <div>No more messages</div>
+  ) : state.error ? <div>error</div> : loading ? <div className="msgs"><Spinner /><Spinner /><Spinner /><Spinner /></div> : <div>No more messages</div>
   );
 }