react-router-dom hooks

9 files changed, 130 insertions, 114 deletions

diff --git a/vnext/src/ui/Chat.js b/vnext/src/ui/Chat.js
index 00e8eb3c..90c99c27 100644
--- a/vnext/src/ui/Chat.js
+++ b/vnext/src/ui/Chat.js
@@ -1,4 +1,5 @@
 import React, { useEffect, useState, useCallback } from 'react';
+import { useParams } from 'react-router-dom';
 import moment from 'moment';
 
 import PM from './PM';
@@ -13,7 +14,6 @@ import './Chat.css';
  * @typedef {Object} ChatProps
  * @property {import('../api').SecureUser} visitor
  * @property {EventSource} connection
- * @property {import('react-router').match} match
  */
 
 /**
@@ -22,6 +22,7 @@ import './Chat.css';
  */
 export default function Chat(props) {
     const [chats, setChats] = useState([]);
+    const params = useParams();
 
     let loadChat = useCallback((uname) => {
         const { hash } = props.visitor;
@@ -36,32 +37,32 @@ export default function Chat(props) {
 
     let onMessage = useCallback((json) => {
         const msg = JSON.parse(json.data);
-        if (msg.user.uname === props.match.params.user) {
+        if (msg.user.uname === params.user) {
             setChats((oldChat) => {
                 return [msg, ...oldChat];
             });
         }
-    }, [props.match.params.user]);
+    }, [params.user]);
 
     let onSend = (template) => {
         pm(template.to.uname, template.body)
             .then(res => {
-                loadChat(props.match.params.user);
+                loadChat(params.user);
             }).catch(console.log);
     };
     useEffect(() => {
         if (props.connection.addEventListener) {
             props.connection.addEventListener('msg', onMessage);
         }
-        loadChat(props.match.params.user);
+        loadChat(params.user);
         console.log(props.connection);
         return () => {
             if (props.connection.removeEventListener) {
                 props.connection.removeEventListener('msg', onMessage);
             }
         };
-    }, [props.connection, onMessage, loadChat, props.match.params.user]);
-    const uname = props.match.params.user;
+    }, [props.connection, onMessage, loadChat, params.user]);
+    const uname = params.user;
     return (
         <div className="msg-cont">
             <UserInfo user={uname} />
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>
   );
 }
diff --git a/vnext/src/ui/Header.js b/vnext/src/ui/Header.js
index a7663dd3..d8fe23e0 100644
--- a/vnext/src/ui/Header.js
+++ b/vnext/src/ui/Header.js
@@ -1,11 +1,21 @@
-import React, { memo } from 'react';
-import { Link, withRouter } from 'react-router-dom';
+import React, { memo, useCallback } from 'react';
+import { Link, useHistory } from 'react-router-dom';
 
 import Icon from './Icon';
 import { UserLink } from './UserInfo';
 import SearchBox from './SearchBox';
 
-function Header({ visitor, search, className }) {
+function Header({ visitor, className }) {
+    const history = useHistory();
+    /**
+     * @param {string} searchString
+     */
+    let searchAll = useCallback((searchString) => {
+        let location = {};
+        location.pathname = '/discover';
+        location.search = `?search=${searchString}`;
+        history.push(location);
+    }, [history]);
     return (
         <div id="header" className={className}>
             <div id="header_wrapper">
@@ -27,7 +37,7 @@ function Header({ visitor, search, className }) {
                     visitor.uid >= 0 &&
                     <>
                         <div id="search" className="desktop">
-                            <SearchBox pathname="/discover" onSearch={search} />
+                            <SearchBox onSearch={searchAll} />
                         </div>
                         <nav id="global">
                             {visitor.uid > 0 ?
@@ -68,4 +78,4 @@ function Header({ visitor, search, className }) {
     );
 }
 
-export default memo(withRouter(Header));
+export default memo(Header);
diff --git a/vnext/src/ui/Login.js b/vnext/src/ui/Login.js
index 883a4eab..0c6f5d0c 100644
--- a/vnext/src/ui/Login.js
+++ b/vnext/src/ui/Login.js
@@ -1,6 +1,5 @@
 import React, { useEffect } from 'react';
-
-import { withRouter } from 'react-router-dom';
+import { useLocation, useHistory } from 'react-router-dom';
 
 import Icon from './Icon';
 import Button from './Button';
@@ -14,8 +13,6 @@ import './Login.css';
 /**
  * @typedef {Object} LoginProps
  * @property {import('../api').SecureUser} visitor
- * @property {import('history').History} history
- * @property {import('history').Location} location
  * @property {any} onAuth
  */
 
@@ -23,7 +20,10 @@ import './Login.css';
  * Login page
  * @param {LoginProps} props
  */
-function Login({ visitor, history, location, onAuth }) {
+function Login({ visitor, onAuth }) {
+
+    const location = useLocation();
+    const history = useHistory();
 
     useEffect(() => {
         if (visitor.hash) {
@@ -76,7 +76,7 @@ function Login({ visitor, history, location, onAuth }) {
     );
 }
 
-export default withRouter(Login);
+export default Login;
 
 const socialButtonsStyle = {
     display: 'flex',
diff --git a/vnext/src/ui/Post.js b/vnext/src/ui/Post.js
index 35704f11..407f3b62 100644
--- a/vnext/src/ui/Post.js
+++ b/vnext/src/ui/Post.js
@@ -1,4 +1,5 @@
 import React, { useState } from 'react';
+import { useLocation, useHistory } from 'react-router-dom';
 
 import qs from 'qs';
 
@@ -8,9 +9,11 @@ import MessageInput from './MessageInput';
 import { post, update } from '../api';
 
 /**
- * @param {{location: import('history').Location, visitor: import('../api').User, history: import('history').History}} props
+ * @param {{visitor: import('../api').User}} props
  */
-export default function Post({ location, visitor, history }) {
+export default function Post({ visitor }) {
+  const location = useLocation();
+  const history = useHistory();
   let draftMessage = (location.state || {}).draft || {};
   let [draft, setDraft] = useState(draftMessage.body);
   let params = qs.parse(window.location.search.substring(1));
diff --git a/vnext/src/ui/SearchBox.js b/vnext/src/ui/SearchBox.js
index aab49757..dda97989 100644
--- a/vnext/src/ui/SearchBox.js
+++ b/vnext/src/ui/SearchBox.js
@@ -1,27 +1,25 @@
 import React from 'react';
-import { withRouter } from 'react-router-dom';
 import { useFormState } from 'react-use-form-state';
 
 /**
  * @typedef {Object} SearchBoxPropsFields
- * @property {string} pathname
  * @property {function} onSearch
  */
 
  /**
- * @typedef {import('react-router-dom').RouteComponentProps & SearchBoxPropsFields} SearchBoxProps
+ * @typedef {SearchBoxPropsFields} SearchBoxProps
  */
 
 /**
  * @param {SearchBoxProps} props
  */
-function SearchBox({ onSearch, history, pathname }) {
+function SearchBox({ onSearch }) {
     /**
      * @type {(React.FormEvent<HTMLFormElement>)}
      */
     let onSubmit = (event) => {
         event.preventDefault();
-        onSearch(history, pathname, formState.values.search);
+        onSearch(formState.values.search);
     };
     const [formState, { text }] = useFormState();
     return (
@@ -32,4 +30,4 @@ function SearchBox({ onSearch, history, pathname }) {
     );
 }
 
-export default withRouter(SearchBox);
+export default SearchBox;
diff --git a/vnext/src/ui/Thread.js b/vnext/src/ui/Thread.js
index 63bb2dd6..4f53c4af 100644
--- a/vnext/src/ui/Thread.js
+++ b/vnext/src/ui/Thread.js
@@ -1,4 +1,5 @@
 import React, { useEffect, useState, useRef, useCallback } from 'react';
+import { useLocation, useParams } from 'react-router-dom';
 
 import Message from './Message';
 import MessageInput from './MessageInput';
@@ -11,7 +12,7 @@ import { format, embedUrls } from '../utils/embed';
 
 import { getMessages, comment, update, markReadTracker, fetchUserUri, updateAvatar } from '../api';
 
-import { bubbleStyle, chatItemStyle } from './helpers/BubbleStyle';
+import { chatItemStyle } from './helpers/BubbleStyle';
 
 import './Thread.css';
 
@@ -118,21 +119,21 @@ function Comment({ msg, draft, visitor, active, setActive, onStartEditing, postC
 
 /**
  * @param {{
-     match: import('react-router').match,
-     location: import('history').Location,
      visitor: import('../api').SecureUser
      connection: EventSource
   }} props
  */
 export default function Thread(props) {
-  const [message, setMessage] = useState((props.location.state || {}).msg || {});
+  const location = useLocation();
+  const params = useParams();
+  const [message, setMessage] = useState((location.state || {}).msg || {});
   const [replies, setReplies] = useState([]);
   const [loading, setLoading] = useState(false);
   const [active, setActive] = useState(0);
 
   const [editing, setEditing] = useState(emptyMessage);
   const [hash, setHash] = useState(props.visitor.hash);
-  const { mid } = props.match.params;
+  const { mid } = params;
 
   let loadReplies = useCallback(() => {
     document.body.scrollTop = 0;
@@ -217,7 +218,10 @@ export default function Thread(props) {
               </li>
             )) : (
                 <>
-                  {Array(loaders).fill().map((it, i) => <Spinner key={i} />)}
+                  {
+                    // @ts-ignore
+                    Array(loaders).fill().map((it, i) => <Spinner key={i} />)
+                    }
                 </>
               )
           }
diff --git a/vnext/src/ui/UserInfo.js b/vnext/src/ui/UserInfo.js
index fe9cee19..00465252 100644
--- a/vnext/src/ui/UserInfo.js
+++ b/vnext/src/ui/UserInfo.js
@@ -1,7 +1,7 @@
 import React, { useState, useEffect, useRef } from 'react';
 import { Link } from 'react-router-dom';
 
-import { info, fetchUserUri } from '../api';
+import { info, fetchUserUri, update } from '../api';
 
 import Avatar from './Avatar';
 import Icon from './Icon';
@@ -13,29 +13,25 @@ let isMounted;
 
 /**
  * User info component
- * @param {{user: string, onUpdate?: function, children?: Element}} props
+ * @param {{uname: string, onUpdate?: function, children?: React.ReactHTMLElement}} props
  */
-export default function UserInfo(props) {
+export default function UserInfo({ uname, onUpdate, children }) {
     const [user, setUser] = useState({
-        uname: props.user,
+        uname: uname,
         uid: 0
     });
-    const { onUpdate } = props;
-    const userRef = useRef(user);
     useEffect(() => {
         isMounted = true;
-        if (!userRef.current.avatar) {
-            info(userRef.current.uname).then(response => {
-                if (isMounted) {
-                    onUpdate && onUpdate(response.data);
-                    setUser(response.data);
-                }
-            });
-        }
+        info(uname).then(response => {
+            if (isMounted) {
+                onUpdate && onUpdate(response.data);
+                setUser(response.data);
+            }
+        });
         return () => {
             isMounted = false;
         };
-    }, [onUpdate, props.user]);
+    }, [onUpdate, uname]);
     return (
         <>
             <div className="userinfo">
@@ -63,7 +59,7 @@ export default function UserInfo(props) {
                     </>
                 }
             </div>
-            {props.children}
+            {children}
         </>
     );
 }
diff --git a/vnext/src/ui/Users.js b/vnext/src/ui/Users.js
index 4c09318f..4dd929fb 100644
--- a/vnext/src/ui/Users.js
+++ b/vnext/src/ui/Users.js
@@ -1,36 +1,37 @@
 import React, { useState } from 'react';
+import { useParams } from 'react-router-dom';
 
 import UserInfo from './UserInfo';
 import Avatar from './Avatar';
 
 /**
  * Friends feed
- * @param {{match: import('react-router').match }} match
  */
-export function Friends({ match }) {
-    return <Users user={match.params.user} prop='read' />;
+export function Friends() {
+    const params = useParams();
+    return <Users uname={params.user} prop='read' />;
 }
 
 /**
  * Readers feed
- * @param {{match: import('react-router').match }} match
  */
-export function Readers({ match }) {
-    return <Users user={match.params.user} prop='readers' />;
+export function Readers() {
+    const params = useParams();
+    return <Users uname={params.user} prop='readers' />;
 }
 
 /**
  * UserInfo list component
- * @param {{user: import('../api').User, prop: string}} props
+ * @param {{uname: string, prop: string}} props
  */
-function Users(props) {
-    const [user, setUser] = useState({ uid: 0, uname: props.user });
+function Users({ uname, prop }) {
+    const [user, setUser] = useState({ uid: 0, uname: uname });
     return (
-        <UserInfo user={user.uname} onUpdate={setUser}>
+        <UserInfo uname={uname} onUpdate={setUser}>
             <div style={{ display: 'flex', flexWrap: 'wrap', flexDirection: 'row' }}>
                 {
-                    user[props.prop] &&
-                    user[props.prop].map(user =>
+                    user[prop] &&
+                    user[prop].map(user =>
                         <Avatar key={user.uid} user={user} />
                     )
                 }