chore: compose history middleware

web/src/components/Suggestion.tsx

@@ -218,6 +218,7 @@ const Suggestion: React.FC<{
     return () => {
       isEffective = false;
     };
+    // eslint-disable-next-line
   }, [query]);
 
   return (

web/src/components/cards/core.tsx

@@ -117,6 +117,7 @@ export const DedicatedAvailability: React.FC<{
 
   useEffect(() => {
     increaseCounter(response.availability);
+    // eslint-disable-next-line
   }, []);
 
   return (
@@ -164,6 +165,7 @@ export const ExistentialAvailability: React.FC<{
 
   useEffect(() => {
     increaseCounter(availability);
+    // eslint-disable-next-line
   }, []);
 
   return (

web/src/index.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import {Router} from 'react-router-dom';
-import {StoreProvider, createStore} from 'easy-peasy';
+import {StoreProvider} from 'easy-peasy';
 import {createBrowserHistory} from 'history';
 
 import App from './App';
@@ -9,18 +9,18 @@ import * as serviceWorker from './serviceWorker';
 import {FullScreenSuspense} from './util/suspense';
 import {wrapHistoryWithGA, initSentry} from './util/analytics';
 import {initCrisp} from './util/crip';
-import {storeModel} from './store';
+import {compose} from './util/array';
+import {store, wrapHistoryWithStoreHandler} from './store';
 import './util/i18n';
 
 initSentry();
 initCrisp();
 
-const store = createStore(storeModel);
+const history = compose(
-const history = wrapHistoryWithGA(createBrowserHistory());
+  createBrowserHistory(),
-history.listen(() => {
+  wrapHistoryWithStoreHandler,
-  // reset stats counter
+  wrapHistoryWithGA,
-  store.getActions().stats.reset();
+);
-});
 
 ReactDOM.render(
   <StoreProvider store={store}>

web/src/store.tsx

@@ -1,4 +1,5 @@
-import {action, createTypedHooks, Action} from 'easy-peasy';
+import {History} from 'history';
+import {action, createTypedHooks, Action, createStore} from 'easy-peasy';
 
 interface StatsModel {
   availableCount: number;
@@ -26,10 +27,20 @@ const statsModel: StatsModel = {
   }),
 };
 
-export const storeModel: StoreModel = {
+const storeModel: StoreModel = {
   stats: statsModel,
 };
 
+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;

web/src/util/array.ts

@@ -19,3 +19,7 @@ export function fillArray<T>(array: T[], filler: string, maximum: number): T[] {
   }
   return array;
 }
+
+export function compose<T>(arg: T, ...fn: ((arg: T) => T)[]): T {
+  return fn.reduce((arg, f) => f(arg), arg);
+}