chore: update deps

package.json

@@ -11,13 +11,13 @@
     "test": "tsc --noEmit && jest --coverage && CI=true react-scripts test --coverage"
   },
   "dependencies": {
-    "@sentry/browser": "^6.14.1",
+    "@sentry/browser": "^6.19.2",
-    "cross-fetch": "^3.1.4",
+    "cross-fetch": "^3.1.5",
     "easy-peasy": "^5.0.4",
     "fetch-suspense": "^1.2.2",
-    "framer-motion": "^4.1.17",
+    "framer-motion": "^6.2.8",
-    "i18next": ">=21.4.1",
+    "i18next": ">=21.6.14",
-    "i18next-browser-languagedetector": "^6.1.2",
+    "i18next-browser-languagedetector": "^6.1.4",
     "i18next-chained-backend": "^3.0.2",
     "i18next-localstorage-backend": "^3.1.3",
     "i18next-xhr-backend": "^3.2.2",
@@ -27,44 +27,44 @@
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-helmet": "^6.0.0",
-    "react-i18next": "11.13.0",
+    "react-i18next": "11.16.1",
     "react-icons": "^4.3.1",
-    "react-router": "^5.2.1",
+    "react-router": "^6.2.2",
-    "react-router-dom": "^5.3.0",
+    "react-router-dom": "^6.2.2",
-    "react-scripts": "4.0.3",
+    "react-scripts": "5.0.0",
     "react-spinners": "^0.11.0",
-    "react-toastify": "^8.1.0",
+    "react-toastify": "^8.2.0",
-    "styled-components": "^5.3.3",
+    "styled-components": "^5.3.5",
-    "swr": "^1.0.1",
+    "swr": "^1.2.2",
     "validator": "^13.7.0",
     "whois-json": "^2.0.4"
   },
   "devDependencies": {
-    "@sentry/cli": "^1.71.0",
+    "@sentry/cli": "^1.74.2",
-    "@testing-library/jest-dom": "^5.15.0",
+    "@testing-library/jest-dom": "^5.16.3",
-    "@testing-library/react": "^12.1.2",
+    "@testing-library/react": "^12.1.4",
     "@types/i18next-node-fs-backend": "^2.1.1",
-    "@types/jest": "^27.0.2",
+    "@types/jest": "^27.4.1",
     "@types/mersennetwister": "^0.2.0",
     "@types/node": "^16.11.7",
-    "@types/react-dom": "^17.0.11",
+    "@types/react-dom": "^17.0.14",
-    "@types/react-helmet": "^6.1.4",
+    "@types/react-helmet": "^6.1.5",
-    "@types/react-router-dom": "^5.3.2",
+    "@types/react-router-dom": "^5.3.3",
-    "@types/styled-components": "^5.1.15",
+    "@types/styled-components": "^5.1.24",
-    "@types/validator": "^13.6.6",
+    "@types/validator": "^13.7.1",
-    "@vercel/build-utils": "^2.12.2",
+    "@vercel/build-utils": "^2.15.0",
-    "@vercel/node": "^1.12.1",
+    "@vercel/node": "^1.14.0",
     "codacy-coverage": "^3.4.0",
     "husky": "^7.0.4",
     "i18next-node-fs-backend": "^2.1.3",
     "mdmod": "^2.0.0",
     "mdmod-plugin-github-sponsors": "^1.1.0",
     "mutationobserver-shim": "^0.3.5",
-    "nock": "^13.2.0",
+    "nock": "^13.2.4",
-    "prettier": "^2.4.1",
+    "prettier": "^2.6.1",
-    "pretty-quick": "^3.1.1",
+    "pretty-quick": "^3.1.3",
-    "ts-jest": "^26.4.2",
+    "ts-jest": "^27.1.4",
-    "typescript": "^4.4.4"
+    "typescript": "^4.6.3"
   },
   "license": "Apache-2.0",
   "browserslist": {

src/App.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Redirect, Route, Switch } from 'react-router-dom';
+import { Navigate, Route, Routes } from 'react-router-dom';
 import Footer from './components/Footer';
 import Home from './pages/Home';
 import Search from './pages/Search';
@@ -15,19 +15,11 @@ export default function App() {
       <GlobalStyle />
       <OpenSearch />
 
-      <Switch>
+      <Routes>
-        <Route exact path="/">
+        <Route path="/" element={<Home />} />
-          <Home />
+        <Route path="/s/:query" element={<Search />} />
-        </Route>
+        <Route path="*" element={<Navigate to="/" />} />
-
+      </Routes>
-        <Route path="/s/:query">
-          <Search />
-        </Route>
-
-        <Route path="*">
-          <Redirect to="/" />
-        </Route>
-      </Switch>
 
       {!isStandalone() && <Footer />}
     </>

src/components/Form.tsx

@@ -1,17 +1,19 @@
-import React, { useState, useRef, useEffect } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
-import styled from 'styled-components';
 import { useTranslation } from 'react-i18next';
-import { Link, useHistory } from 'react-router-dom';
+import { Link, useNavigate } from 'react-router-dom';
-import { sanitize } from '../util/text';
+import styled from 'styled-components';
+import { useStoreActions } from '../store';
 import { sendQueryEvent } from '../util/analytics';
 import { mobile } from '../util/css';
-import Suggestion from './Suggestion';
 import { useDeferredState } from '../util/hooks';
+import { sanitize } from '../util/text';
+import Suggestion from './Suggestion';
 
 const Form: React.FC<{
   initialValue?: string;
 }> = ({ initialValue = '' }) => {
-  const history = useHistory();
+  const reset = useStoreActions((actions) => actions.stats.reset);
+  const navigate = useNavigate();
   const [inputValue, setInputValue] = useState(initialValue);
   const [suggestionQuery, setSuggestionQuery] = useDeferredState(800, '');
   const [suggested, setSuggested] = useState(false);
@@ -19,8 +21,9 @@ const Form: React.FC<{
   const { t } = useTranslation();
 
   function search(query: string) {
+    reset();
     sendQueryEvent(sanitize(query));
-    history.push(`/s/${query}`);
+    navigate(`/s/${query}`);
   }
 
   // set input value
@@ -41,6 +44,7 @@ const Form: React.FC<{
     if (!inputValue || inputValue === '') {
       return;
     }
+
     search(inputValue);
   }
 

src/index.tsx

@@ -1,16 +1,14 @@
 import { StoreProvider } from 'easy-peasy';
-import { createBrowserHistory } from 'history';
 import 'rc-tooltip/assets/bootstrap.css';
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { Router } from 'react-router-dom';
+import { BrowserRouter } from 'react-router-dom';
 import { toast, ToastContainer } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
 import App from './App';
 import * as serviceWorker from './serviceWorker';
-import { store, wrapHistoryWithStoreHandler } from './store';
+import { store } from './store';
 import { initSentry } from './util/analytics';
-import { compose } from './util/array';
 import { initCrisp } from './util/crisp';
 import './util/i18n';
 import { FullScreenSuspense } from './util/suspense';
@@ -18,14 +16,12 @@ import { FullScreenSuspense } from './util/suspense';
 initSentry();
 initCrisp();
 
-const history = compose(createBrowserHistory(), wrapHistoryWithStoreHandler);
-
 ReactDOM.render(
   <StoreProvider store={store}>
     <FullScreenSuspense>
-      <Router history={history}>
+      <BrowserRouter>
         <App />
-      </Router>
+      </BrowserRouter>
     </FullScreenSuspense>
     <ToastContainer />
   </StoreProvider>,

src/pages/Search.tsx

@@ -21,7 +21,7 @@ import { sanitize } from '../util/text';
 
 export default function Search() {
   const { query } = useParams<{ query: string }>();
-  const currentQuery = sanitize(query);
+  const currentQuery = sanitize(query ?? '');
   const { t } = useTranslation();
 
   return (

src/store.tsx

@@ -1,5 +1,4 @@
 import { action, Action, createStore, createTypedHooks } from 'easy-peasy';
-import { History } from 'history';
 
 interface StatsModel {
   availableCount: number;
@@ -33,14 +32,6 @@ const storeModel: StoreModel = {
 
 export const store = createStore(storeModel);
 
-export function wrapHistoryWithStoreHandler(history: History) {
-  history.listen(() => {
-    // reset stats counter
-    store.getActions().stats.reset();
-  });
-  return history;
-}
-
 const typedHooks = createTypedHooks<StoreModel>();
 export const useStoreActions = typedHooks.useStoreActions;
 export const useStoreDispatch = typedHooks.useStoreDispatch;