Upgrade to `react-router` v6

1 files changed, 28 insertions, 21 deletions

diff --git a/vnext/src/ui/Feeds.js b/vnext/src/ui/Feeds.js
index d6813130..c9199fa6 100644
--- a/vnext/src/ui/Feeds.js
+++ b/vnext/src/ui/Feeds.js
@@ -1,5 +1,5 @@
-import { useState, useEffect } from 'react';
-import { Link, useLocation, useHistory, useParams } from 'react-router-dom';
+import { useState, useEffect, useLayoutEffect } from 'react';
+import { Link, useLocation, useParams, Navigate } from 'react-router-dom';
 
 import qs from 'qs';
 import moment from 'moment';
@@ -25,6 +25,19 @@ import { getMessages } from '../api';
  * @property {import('../api').Message[]=} msgs
  */
 
+function RequireAuth({ visitor, children }) {
+  let location = useLocation();
+  if (!visitor.hash) {
+    // Redirect them to the /login page, but save the current location they were
+    // trying to go to when they were redirected. This allows us to send them
+    // along to that page after they login, which is a nicer user experience
+    // than dropping them off on the home page.
+    return <Navigate to="/login" state={{ from: location }} />;
+  }
+
+  return children;
+}
+
 /**
  * @param {PageProps} props
  */
@@ -36,7 +49,7 @@ export function Discover({ visitor }) {
     search: search,
     pageParam: search.search ? 'page' : 'before_mid'
   };
-  return (<Feed authRequired={false} query={query} visitor={visitor} />);
+  return (<Feed query={query} visitor={visitor} />);
 }
 
 /**
@@ -47,7 +60,7 @@ export function Discussions({ visitor }) {
     baseUrl: '/api/messages/discussions',
     pageParam: 'to'
   };
-  return (<Feed authRequired={false} query={query} visitor={visitor} />);
+  return (<Feed query={query} visitor={visitor} />);
 }
 
 /**
@@ -70,7 +83,7 @@ export function Blog({ visitor }) {
       <div className="msg-cont">
         <UserInfo uname={user} />
       </div>
-      <Feed authRequired={false} query={query} visitor={visitor} />
+      <Feed query={query} visitor={visitor} />
     </>
   );
 }
@@ -88,7 +101,7 @@ export function Tag({ visitor }) {
     },
     pageParam: 'before_mid'
   };
-  return (<Feed authRequired={false} query={query} visitor={visitor} />);
+  return (<Feed query={query} visitor={visitor} />);
 }
 
 /**
@@ -99,12 +112,15 @@ export function Home({ visitor }) {
     baseUrl: '/api/home',
     pageParam: 'before_mid'
   };
-  return (<Feed authRequired={true} query={query} visitor={visitor} />);
+  return (
+    <RequireAuth visitor={visitor}>
+      <Feed query={query} visitor={visitor} />
+    </RequireAuth>
+  );
 }
 
 /**
  * @typedef {Object} FeedState
- * @property { boolean } authRequired
  * @property { import('../api').SecureUser } visitor
  * @property { import('../api').Message[]= } msgs
  * @property { Query} query
@@ -113,11 +129,9 @@ export function Home({ visitor }) {
 /**
  * @param {FeedState} props
  */
-function Feed({ visitor, query, authRequired }) {
+function Feed({ visitor, query }) {
   const location = useLocation();
-  const history = useHistory();
   const [state, setState] = useState({
-    authRequired: authRequired,
     hash: visitor.hash,
     msgs: [],
     nextpage: null,
@@ -125,7 +139,6 @@ function Feed({ visitor, query, authRequired }) {
     tag: ''
   });
   const [loading, setLoading] = useState(true);
-
   useEffect(() => {
     setLoading(true);
     const filter = location.search.substring(1);
@@ -135,23 +148,17 @@ function Feed({ visitor, query, authRequired }) {
       newFilter[pageParam] = pageValue;
       return `?${qs.stringify(newFilter)}`;
     };
-    document.body.scrollTop = 0;
-    document.documentElement.scrollTop = 0;
     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 && state.authRequired) {
-      history.push('/');
-    }
     getMessages(url, params)
       .then(response => {
         const { data } = response;
         const { pageParam } = query;
         const lastMessage = data.slice(-1)[0] || {};
         const nextpage = getPageParam(pageParam, lastMessage, filterParams);
+        document.body.scrollTop = 0;
+        document.documentElement.scrollTop = 0;
         setState((prevState) => {
           return {
             ...prevState,
@@ -169,7 +176,7 @@ function Feed({ visitor, query, authRequired }) {
           };
         });
       });
-  }, [location.search, state.hash, state.authRequired, history, query]);
+  }, [location.search, query]);
   return (state.msgs.length > 0 ? (
     <div className="msgs">
       {