react-router-dom hooks

1 files changed, 8 insertions, 7 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} />