aboutsummaryrefslogtreecommitdiff
path: root/vnext
diff options
context:
space:
mode:
Diffstat (limited to 'vnext')
-rw-r--r--vnext/package-lock.json1
-rw-r--r--vnext/package.json1
-rw-r--r--vnext/src/App.js31
-rw-r--r--vnext/src/ui/Feeds.js28
-rw-r--r--vnext/src/ui/Post.js6
5 files changed, 30 insertions, 37 deletions
diff --git a/vnext/package-lock.json b/vnext/package-lock.json
index 8257642c..a22ec1d5 100644
--- a/vnext/package-lock.json
+++ b/vnext/package-lock.json
@@ -22,7 +22,6 @@
"ignore-styles": "^5.0.1",
"mailparser": "^3.5.0",
"node-pushnotifications": "^2.0.3",
- "qs": "^6.11.0",
"react": "18.2.0",
"react-content-loader": "^6.2.0",
"react-cookie": "^4.1.1",
diff --git a/vnext/package.json b/vnext/package.json
index 2582edf2..6b94ae87 100644
--- a/vnext/package.json
+++ b/vnext/package.json
@@ -62,7 +62,6 @@
"ignore-styles": "^5.0.1",
"mailparser": "^3.5.0",
"node-pushnotifications": "^2.0.3",
- "qs": "^6.11.0",
"react": "18.2.0",
"react-content-loader": "^6.2.0",
"react-cookie": "^4.1.1",
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 />
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);