react-router-dom hooks

1 files changed, 10 insertions, 6 deletions

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} />)
+                    }
                 </>
               )
           }