Migrate to RTK Query

.prettierignore

@@ -0,0 +1,2 @@
+**/__fixtures__/**
+**/fixture.js

cypress.config.js

@@ -1,4 +1,4 @@
-const { defineConfig } = require('cypress')
+const { defineConfig } = require('cypress');
 
 module.exports = defineConfig({
   viewportWidth: 1200,
@@ -8,13 +8,12 @@ module.exports = defineConfig({
   requestTimeout: 20000,
   screenshotOnRunFailure: false,
   video: false,
-  experimentalFetchPolyfill: true,
   e2e: {
     // We've imported your old cypress plugins here.
     // You may want to clean this up later by importing these.
     setupNodeEvents(on, config) {
-      return require('./cypress/plugins/index.js')(on, config)
+      return require('./cypress/plugins/index.js')(on, config);
     },
     baseUrl: 'http://localhost:3000/',
   },
-})
+});

cypress/e2e/common/filters.cy.js

@@ -87,16 +87,12 @@ describe('Filter Panel', () => {
     });
 
     it('can trigger a pre-selected date range', () => {
-      const request = '**/geo/states/**';
+      const request = '**/geo/states?**&size=0';
       const fixture = { fixture: 'common/get-geo.json' };
       cy.intercept(request, fixture).as('getGeo');
 
       cy.get('button.map').click();
       cy.wait('@getGeo');
-      // TODO: This seemed to break for no reason. We may be able to remove this
-      // after fully converting to functional and react 18
-      // eslint-disable-next-line cypress/no-unnecessary-waiting
-      cy.wait(750);
       const maxDate = dayjs(new Date()).format('YYYY-MM-DD');
       let minDate = dayjs(new Date()).subtract(3, 'years').format('YYYY-MM-DD');
       cy.get('.date-ranges .a-btn.range-3y').contains('3y').click();

cypress/e2e/document/document.cy.js

@@ -46,7 +46,7 @@ describe('Document View', () => {
       cy.intercept(request, fixture).as('getAggsResults');
 
       request =
-        '?**&field=all&frm=0&has_narrative=true&no_aggs=true&search_term=pizza&size=10&sort=relevance_desc';
+        '?**&field=all&frm=0&has_narrative=true&no_aggs=true**&search_term=pizza&size=10&sort=relevance_desc';
       fixture = { fixture: 'document/get-results.json' };
       cy.intercept(request, fixture).as('getResults');
 

src/App.spec.js

@@ -4,14 +4,37 @@ import 'regenerator-runtime/runtime';
 import { MemoryRouter, Route, Routes } from 'react-router-dom';
 import { render, screen } from '@testing-library/react';
 import * as useUpdateLocationHook from './hooks/useUpdateLocation';
-import store from './app/store';
 import { ComplaintDetail } from './components/ComplaintDetail/ComplaintDetail';
-import { waitFor } from './testUtils/test-utils';
+import { configureStoreUtil, waitFor } from './testUtils/test-utils';
+import fetchMock from 'jest-fetch-mock';
+import { aggResponse } from './components/List/ListPanel/fixture';
+import { trendsResponse } from './components/Trends/fixture';
 jest.mock('highcharts/modules/accessibility');
 jest.mock('highcharts/highmaps');
 
 describe('initial state', () => {
+  let store;
+  beforeEach(() => {
+    fetchMock.resetMocks();
+    store = configureStoreUtil({ routes: { queryString: '??Fdsfdssdf' } });
+  });
+
   it('renders search page', async () => {
+    fetchMock.mockResponse((req) => {
+      const url = new URL(req.url);
+      const params = url.searchParams;
+
+      if (params.get('size') === '0') {
+        // this is the list
+        return Promise.resolve({
+          body: JSON.stringify(aggResponse),
+        });
+      } else if (params.get('no_aggs')) {
+        return Promise.resolve({
+          body: JSON.stringify(trendsResponse),
+        });
+      }
+    });
     const updateLocationHookSpy = jest.spyOn(
       useUpdateLocationHook,
       'useUpdateLocation',
@@ -22,6 +45,7 @@ describe('initial state', () => {
       </Provider>,
     );
 
+    await screen.findByText(/Search within/);
     expect(updateLocationHookSpy).toBeCalledTimes(1);
     expect(screen.getByText(/Consumer Complaint Database/)).toBeInTheDocument();
     expect(screen.getByText(/Search within/)).toBeInTheDocument();

src/actions/__fixtures__/emptyStore.js

@@ -1,20 +1,12 @@
-import { aggsState as aggs } from '../../reducers/aggs/aggsSlice';
-import { detailState as detail } from '../../reducers/detail/detailSlice';
 import { filtersState as filters } from '../../reducers/filters/filtersSlice';
-import { mapState as map } from '../../reducers/map/mapSlice';
 import { queryState as query } from '../../reducers/query/querySlice';
-import { resultsState as results } from '../../reducers/results/resultsSlice';
 import { routesState as routes } from '../../reducers/routes/routesSlice';
 import { trendsState as trends } from '../../reducers/trends/trendsSlice';
 import { viewState as view } from '../../reducers/view/viewSlice';
 
 export default Object.freeze({
-  aggs,
-  detail,
   filters,
-  map,
   query,
-  results,
   routes,
   trends,
   view,

src/actions/__tests__/analytics.spec.js → src/actions/analytics.spec.js

@@ -1,4 +1,4 @@
-import Analytics from '../analytics';
+import Analytics from './analytics';
 
 describe('action:analytics', () => {
   describe('.init()', () => {