fixed routes.js logic so it fires correctly on page load

src/App.js

@@ -1,40 +1,11 @@
 import './css/App.less';
+import React from 'react';
 import { Route, BrowserRouter as Router, Routes } from 'react-router-dom';
 import { IntlProvider } from 'react-intl';
 import { Provider } from 'react-redux';
-import queryManager from './middleware/queryManager/queryManager';
 import { ComplaintDetail } from './components/ComplaintDetail/ComplaintDetail';
-import React from 'react';
 import { SearchComponents } from './components/Search/SearchComponents';
-import synchUrl from './middleware/synchUrl/synchUrl';
-import { configureStore } from '@reduxjs/toolkit';
-import aggReducer from './reducers/aggs/aggs';
-import detailReducer from './reducers/detail/detail';
-import filtersReducer from './reducers/filters/filtersSlice';
-import mapReducer from './reducers/map/map';
-import queryReducer from './reducers/query/query';
-import resultsReducer from './reducers/results/results';
-import routesReducer from './reducers/routes/routesSlice';
-import trendsReducer from './reducers/trends/trends';
-import viewReducer from './reducers/view/view';
-
-// required format for redux-devtools-extension
-const store = configureStore({
-  devTools: true,
-  reducer: {
-    aggs: aggReducer,
-    detail: detailReducer,
-    filters: filtersReducer,
-    map: mapReducer,
-    query: queryReducer,
-    results: resultsReducer,
-    routes: routesReducer,
-    trends: trendsReducer,
-    view: viewReducer,
-  },
-  middleware: (getDefaultMiddleware) =>
-    getDefaultMiddleware().concat([queryManager, synchUrl]),
-});
+import store from './app/store';
 
 /* eslint-disable camelcase */
 export const DetailComponents = () => {
@@ -46,9 +17,7 @@ export const DetailComponents = () => {
     </IntlProvider>
   );
 };
-/* eslint-enable camelcase */
 
-// eslint-disable-next-line react/no-multi-comp
 /**
  * Main App Component
  *

src/actions/complaints.js

@@ -30,6 +30,7 @@ import {
   complaintsApiFailed,
   complaintsReceived,
 } from '../reducers/results/results';
+import { buildUri } from '../api/url/url';
 
 // ----------------------------------------------------------------------------
 // Routing action
@@ -119,7 +120,7 @@ export function getAggregations() {
 export function getComplaints() {
   return (dispatch, getState) => {
     const store = getState();
-    const qs = store.query.queryString;
+    const qs = buildUri(store);
     const uri = API_PLACEHOLDER + qs;
     // This call is already in process
     if (uri === store.results.activeCall) {
@@ -161,7 +162,7 @@ export function getComplaintDetail(id) {
 export function getStates() {
   return (dispatch, getState) => {
     const store = getState();
-    const qs = 'geo/states/' + store.query.queryString;
+    const qs = 'geo/states/' + buildUri(store);
     const uri = API_PLACEHOLDER + qs + '&no_aggs=true';
 
     // This call is already in process
@@ -185,8 +186,9 @@ export function getStates() {
 export function getTrends() {
   return (dispatch, getState) => {
     const store = getState();
-    const qs = 'trends/' + store.query.queryString;
+    const qs = 'trends/' + buildUri(store);
     const uri = API_PLACEHOLDER + qs + '&no_aggs=true';
+    //const uri = API_PLACEHOLDER + 'trends' + buildUri(store) + '&no_aggs=true';
     // This call is already in process
     if (uri === store.trends.activeCall) {
       return null;

src/actions/routes.js

@@ -1,4 +1,5 @@
 import { routeChanged } from '../reducers/routes/routesSlice';
+import queryString from 'query-string';
 const isEqual = require('react-fast-compare');
 
 // ----------------------------------------------------------------------------
@@ -45,14 +46,28 @@ export function changeRoute(path, params) {
   // eslint-disable-next-line complexity
   return function (dispatch, getState) {
     const store = getState();
-    console.log('CR', path, params);
     const normalized = normalizeRouteParams(params);
     const { routes } = store;
     const sameRoute =
       routes.path === path && isEqual(routes.params, normalized);
-
     if (sameRoute === false) {
       dispatch(routeChanged(path, normalized));
     }
   };
 }
+
+/**
+ * Converts a Location object into structures needed by the reducers
+ *
+ * @param {Location} location - information about the host, path and query string
+ * @returns {object} the pathname and a dictionary of the query string params
+ */
+export function processLocation(location) {
+  const qs = location.search;
+  const params = queryString.parse(qs);
+
+  return {
+    pathname: location.pathname,
+    params,
+  };
+}

src/api/params/params.js

@@ -81,58 +81,6 @@ export function extractReducerAttributes(reducer, attributes) {
 
 // ----------------------------------------------------------------------------
 // parameter objects <--> reducer
-/**
- * Selects specific variables from the geo reducer to be used in a query string
- *
- * @param {object} state - the current state of geo in the Redux store
- * @returns {object} a dictionary of strings
- */
-export function extractGeoParams(state) {
-  const {
-    boundingBox,
-    center,
-    centroidsEnabled,
-    geographicLevel,
-    geoShading,
-    mapType,
-    zoom,
-  } = state.geo;
-
-  const { almanacId, almanacLevel } = state.almanac;
-
-  const almanacParams = almanacId
-    ? {
-        almanacId,
-        almanacLevel,
-      }
-    : {};
-
-  const boundingBoxParams = boundingBox
-    ? {
-        north: boundingBox.north.toString(10),
-        south: boundingBox.south.toString(10),
-        west: boundingBox.west.toString(10),
-        east: boundingBox.east.toString(10),
-      }
-    : {};
-
-  return mapType === 'leaflet'
-    ? {
-        ...almanacParams,
-        ...boundingBoxParams,
-        centroidsEnabled,
-        // censusYear is not specific to geo
-        geographicLevel,
-        geoShading,
-        lat: center.lat.toString(10),
-        lng: center.lng.toString(10),
-        zoom: zoom.toString(10),
-      }
-    : {
-        ...almanacParams,
-        geographicLevel,
-      };
-}
 
 export const buildSort = (sort) => {
   const sortMap = {
@@ -196,29 +144,6 @@ export function extractQueryParams(queryState) {
   return params;
 }
 
-/**
- * Selects specific values from the query reducer to be used in a query string for saved list complaints return
- *
- * @param {object} state - the current state in the Redux store
- * @returns {object} a dictionary of strings
- */
-export function extractSavedListQueryParams(state) {
-  const { query } = state;
-  const params = {
-    frm: query.from,
-    index_name: query._index,
-    no_aggs: true,
-    size: query.size,
-    sort: buildSort(query.sort),
-  };
-
-  if (query.searchAfter) {
-    params.search_after = query.searchAfter;
-  }
-
-  return params;
-}
-
 /**
  * helper function to parse out age to use in query string
  *
@@ -311,13 +236,12 @@ export function extractAgeParams(ageRange = {}) {
  * @returns {object} a dictionary of strings
  */
 export function extractTrendsParams(state) {
-  const { focus, lens, subLens, trend_depth } = state.trends;
-  const { interval } = state.viewModel;
+  const { dateInterval, focus, lens, subLens, trend_depth } = state.trends;
 
   const params = {
     lens: lens.replace(' ', '_').toLowerCase(),
     trend_depth,
-    trend_interval: interval.toLowerCase(),
+    trend_interval: dateInterval.toLowerCase(),
   };
 
   if (subLens) {