qs -> URLSearchParams

2 files changed, 14 insertions, 20 deletions

diff --git a/vnext/src/ui/Feeds.js b/vnext/src/ui/Feeds.js
index 2019dffd..bd69155f 100644
--- a/vnext/src/ui/Feeds.js
+++ b/vnext/src/ui/Feeds.js
@@ -1,7 +1,6 @@
 import { useState, useEffect } from 'react';
-import { Link, useLocation, useParams, Navigate } from 'react-router-dom';
+import { Link, useLocation, useParams, Navigate, useSearchParams } from 'react-router-dom';
 
-import qs from 'qs';
 import dayjs from 'dayjs';
 import utc from 'dayjs/plugin/utc';
 dayjs.extend(utc);
@@ -46,8 +45,7 @@ function RequireAuth({ children }) {
  *
  */
 export function Discover() {
-  const location = useLocation();
-  let search = qs.parse(location.search.substring(1));
+  const search = useSearchParams();
   const query = {
     baseUrl: '/api/messages',
     search: search,
@@ -86,9 +84,9 @@ export function Discussions() {
  */
 export function Blog() {
   const { user } = useParams();
-  const location = useLocation();
+  const params = useSearchParams();
   const search = {
-    ...qs.parse(location.search.substring(1)),
+    ...params,
     uname: user
   };
   const query = {
@@ -169,24 +167,22 @@ function Feed({ query }) {
     tag: ''
   });
   const [loading, setLoading] = useState(true);
+  const filter = useSearchParams();
   useEffect(() => {
     setLoading(true);
-    const filter = location.search.substring(1);
-    let getPageParam = (pageParam, lastMessage, filterParams) => {
+    let getPageParam = (pageParam, lastMessage, /** @type { URLSearchParams } */ filterParams) => {
       const pageValue = pageParam === 'before_mid' ? lastMessage.mid : pageParam === 'page' ? (Number(filterParams.page) || 0) + 1 : dayjs.utc(lastMessage.updated).valueOf();
-      let newFilter = { ...filterParams };
-      newFilter[pageParam] = pageValue;
-      return `?${qs.stringify(newFilter)}`;
+      filterParams[pageParam] = pageValue;
+      return `?${filterParams.toString()}`;
     };
-    const filterParams = qs.parse(filter);
-    let params = Object.assign({}, filterParams || {}, query.search || {});
+    let params = { ...Object.fromEntries(filter), ...query.search };
     let url = query.baseUrl;
     getMessages(url, params)
       .then(response => {
         const { data } = response;
         const { pageParam } = query;
         const lastMessage = data.slice(-1)[0] || {};
-        const nextpage = getPageParam(pageParam, lastMessage, filterParams);
+        const nextpage = getPageParam(pageParam, lastMessage, new URLSearchParams(params));
         document.body.scrollTop = 0;
         document.documentElement.scrollTop = 0;
         setState((prevState) => {
@@ -194,7 +190,7 @@ function Feed({ query }) {
             ...prevState,
             msgs: data,
             nextpage: nextpage,
-            tag: qs.parse(location.search.substring(1))['tag'] || ''
+            tag: filter['tag'] || ''
           };
         });
         setLoading(false);
@@ -206,7 +202,7 @@ function Feed({ query }) {
           };
         });
       });
-  }, [location.search, query]);
+  }, [location.search, query, filter]);
   return (state.msgs.length > 0 ? (
     <div className="msgs">
       {
diff --git a/vnext/src/ui/Post.js b/vnext/src/ui/Post.js
index fbd55675..74b74ffc 100644
--- a/vnext/src/ui/Post.js
+++ b/vnext/src/ui/Post.js
@@ -1,7 +1,5 @@
 import { useState } from 'react';
-import { useLocation, useNavigate } from 'react-router-dom';
-
-import qs from 'qs';
+import { useLocation, useNavigate, useSearchParams } from 'react-router-dom';
 
 import Button from './Button';
 import MessageInput from './MessageInput';
@@ -19,7 +17,7 @@ export default function Post() {
   const [visitor] = useVisitor();
   let draftMessage = (location.state || {}).data || {};
   let [draft, setDraft] = useState(draftMessage.body);
-  let params = qs.parse(window.location.search.substring(1));
+  let params = useSearchParams();
   let postMessage = (template) => {
     const { attach, body } = template;
     const postAction = draftMessage.mid ? update(draftMessage.mid, 0, body) : post(body, attach);