qs -> URLSearchParams

1 files changed, 16 insertions, 15 deletions

diff --git a/vnext/src/App.js b/vnext/src/App.js
index 813fd263..bcd2b169 100644
--- a/vnext/src/App.js
+++ b/vnext/src/App.js
@@ -1,6 +1,5 @@
-import { useState, useEffect, useRef, Fragment } from 'react';
-import { Route, Link, Routes } from 'react-router-dom';
-import qs from 'qs';
+import { useState, useEffect, useRef, Fragment, useCallback } from 'react';
+import { Route, Link, Routes, useSearchParams } from 'react-router-dom';
 
 import svg4everybody from 'svg4everybody';
 
@@ -36,22 +35,23 @@ export default function App({ footer }) {
 
   const [visitor, setVisitor] = useVisitor();
 
+  const params = useSearchParams();
+
   useEffect(() => {
     svg4everybody();
-    let params = qs.parse(window.location.search.substring(1));
-    if (params.hash) {
-      setCookie('hash', params.hash, { path: '/' });
-      let retpath = params.retpath || `${window.location.protocol}//${window.location.host}${window.location.pathname}`;
+    if (params['hash']) {
+      setCookie('hash', params['hash'], { path: '/' });
+      let retpath = params['retpath'] || `${window.location.protocol}//${window.location.host}${window.location.pathname}`;
       window.history.replaceState({}, document.title, retpath);
     }
-  }, [setCookie, footer]);
+  }, [setCookie, footer, params]);
 
-  let updateStatus = () => {
+  let updateStatus = useCallback(() => {
     // refresh server visitor state (unread counters)
     me().then(visitor => {
       setVisitor(visitor);
     }).catch(console.error);
-  };
+  }, [setVisitor]);
 
   const [hash, setHash] = useState(cookie.hash);
 
@@ -66,8 +66,9 @@ export default function App({ footer }) {
       me().then(visitor => auth(visitor))
         .catch(() => setVisitor(anonymousUser));
       if ('EventSource' in window) {
-        const eventParams = { hash: hash };
-        let url = new URL(`https://juick.com/api/events?${qs.stringify(eventParams)}`);
+        const eventParams = new URLSearchParams({ hash: hash });
+        let url = new URL(`https://juick.com/api/events?${eventParams.toString()}`);
+        console.log(url.toString());
         es = new EventSource(url.toString());
         es.onopen = () => {
           console.log('online');
@@ -89,7 +90,7 @@ export default function App({ footer }) {
         es.removeEventListener('msg', updateStatus);
       }
     });
-  }, [hash]);
+  }, [hash, setVisitor, updateStatus]);
 
   useEffect(() => {
     const getTrends = async () => {
@@ -101,14 +102,14 @@ export default function App({ footer }) {
   /**
    * @param {import("./api").SecureUser} visitor
    */
-  let auth = (visitor) => {
+  let auth = useCallback((visitor) => {
     setVisitor(prevState => {
       if (visitor.hash != prevState.hash) {
         setHash(visitor.hash);
       }
       return visitor;
     });
-  };
+  }, [setVisitor]);
   return (
     <>
       <Header />