chore: update deps

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>
-        <Route exact path="/">
-          <Home />
-        </Route>
-
-        <Route path="/s/:query">
-          <Search />
-        </Route>
-
-        <Route path="*">
-          <Redirect to="/" />
-        </Route>
-      </Switch>
+      <Routes>
+        <Route path="/" element={<Home />} />
+        <Route path="/s/:query" element={<Search />} />
+        <Route path="*" element={<Navigate to="/" />} />
+      </Routes>
 
       {!isStandalone() && <Footer />}
     </>

src/components/Form.tsx

@@ -1,17 +1,19 @@
-import React, { useState, useRef, useEffect } from 'react';
-import styled from 'styled-components';
+import React, { useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Link, useHistory } from 'react-router-dom';
-import { sanitize } from '../util/text';
+import { Link, useNavigate } from 'react-router-dom';
+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;