DATAP-1208 Convert reducers to RTK slices

package.json

@@ -56,7 +56,7 @@
     "@cfpb/cfpb-tables": "0.43.1",
     "@cfpb/cfpb-typography": "0.43.0",
     "@craco/craco": "^7.1.0",
-    "@reduxjs/toolkit": "^2.1.0",
+    "@reduxjs/toolkit": "^2.2.1",
     "@testing-library/cypress": "^10.0.1",
     "@testing-library/jest-dom": "^6.4.2",
     "@testing-library/react": "15.0.2",
@@ -69,8 +69,6 @@
     "d3": "^7.9.0",
     "d3-selection": "^3.0.0",
     "dayjs": "^1.11.10",
-    "enzyme": "^3.11.0",
-    "enzyme-adapter-react-16": "^1.15.7",
     "eslint": "^8.57.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-config-react-app": "^7.0.1",
@@ -79,6 +77,7 @@
     "eslint-plugin-react-redux": "^4.1.0",
     "highcharts": "9.2.2",
     "history": "^5.3.0",
+    "http-proxy-middleware": "^2.0.6",
     "husky": "^9.0.11",
     "identity-obj-proxy": "3.0.0",
     "intro.js": "^7.2.0",
@@ -102,17 +101,12 @@
     "react-bootstrap": "^2.6.0",
     "react-bootstrap-typeahead": "^6.3.2",
     "react-dom": "^18.2.0",
-    "react-intl": "^6.6.2",
+    "react-fast-compare": "^3.2.2",
     "react-modal": "^3.16.1",
-    "react-redux": "^7.2.0",
+    "react-redux": "^9.1.0",
     "react-router-dom": "^6.22.0",
     "react-scripts": "^5.0.1",
-    "react-test-renderer": "^18.2.0",
-    "redux": "^4.0.5",
-    "redux-devtools-extension": "^2.13.2",
-    "redux-mock-store": "^1.5.4",
-    "redux-thunk": "^2.2.0",
-    "release-it": "^17.2.0",
+    "release-it": "^17.0.3",
     "string-replace-loader": "^3.1.0",
     "stylelint": "^16.3.1",
     "stylelint-config-standard": "^36.0.0",
@@ -164,6 +158,5 @@
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
-  "proxy": "https://www.consumerfinance.gov",
-  "dependencies": {}
+  "proxy": "https://www.consumerfinance.gov"
 }

src/App.js

@@ -1,76 +1,37 @@
 import './css/App.less';
-import { applyMiddleware, createStore } from 'redux';
 import { Route, BrowserRouter as Router, Routes } from 'react-router-dom';
-import { composeWithDevTools } from 'redux-devtools-extension';
-import { IntlProvider } from 'react-intl';
-import { Provider } from 'react-redux';
-import queryManager from './middleware/queryManager';
 import { ComplaintDetail } from './components/ComplaintDetail/ComplaintDetail';
-import React from 'react';
-import reducers from './reducers';
 import { SearchComponents } from './components/Search/SearchComponents';
-import thunkMiddleware from 'redux-thunk';
-import synchUrl from './middleware/synchUrl/synchUrl';
 
-const middleware = [thunkMiddleware, queryManager, synchUrl];
-
-const composeEnhancers = composeWithDevTools({
-  // required for redux-devtools-extension
-  // Specify name here, actionsBlacklist, actionsCreators and other options
-  // if needed
-});
-
-// required format for redux-devtools-extension
-const store = createStore(
-  reducers,
-  composeEnhancers(
-    applyMiddleware(...middleware),
-    // other store enhancers if any
-  ),
-);
-
-/* eslint-disable camelcase */
-export const DetailComponents = () => {
-  return (
-    <IntlProvider locale="en">
-      <main role="main">
-        <ComplaintDetail />
-      </main>
-    </IntlProvider>
-  );
-};
-/* eslint-enable camelcase */
-
-// eslint-disable-next-line react/no-multi-comp
 /**
  * Main App Component
  *
  * @returns {JSX.Element} Main app
  */
-export const App = () => {
+const App = () => {
   return (
-    <Provider store={store}>
-      <Router>
-        <Routes>
-          {/*
+    <Router>
+      <Routes>
+        {/*
               we need these duplicate routes to match relative path
               /data-research/consumer-complaints/search
               from CF.gov
               local
               which is just the root at localhost:3000/
           */}
-          <Route index element={<SearchComponents />} />
-          <Route
-            path="/data-research/consumer-complaints/search"
-            element={<SearchComponents />}
-          />
-          <Route
-            path="/data-research/consumer-complaints/search/detail/:id"
-            element={<DetailComponents />}
-          />
-          <Route path="/detail/:id" element={<DetailComponents />} />
-        </Routes>
-      </Router>
-    </Provider>
+        <Route index element={<SearchComponents />} />
+        <Route
+          path="/data-research/consumer-complaints/search"
+          element={<SearchComponents />}
+        />
+        <Route
+          path="/data-research/consumer-complaints/search/detail/:id"
+          element={<ComplaintDetail />}
+        />
+        <Route path="/detail/:id" element={<ComplaintDetail />} />
+      </Routes>
+    </Router>
   );
 };
+
+export default App;

src/__tests__/App.spec.js → src/App.spec.js

@@ -1,14 +1,11 @@
-import { App, DetailComponents } from '../App';
-import configureMockStore from 'redux-mock-store';
+import App from './App';
 import { Provider } from 'react-redux';
-import React from 'react';
-import thunk from 'redux-thunk';
 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 { defaultQuery } from '../reducers/query/query';
-
+import * as useUpdateLocationHook from './hooks/useUpdateLocation';
+import store from './app/store';
+import { ComplaintDetail } from './components/ComplaintDetail/ComplaintDetail';
 jest.mock('highcharts/modules/accessibility');
 jest.mock('highcharts/highmaps');
 
@@ -17,11 +14,6 @@ describe('initial state', () => {
     const updateLocationHookSpy = jest
       .spyOn(useUpdateLocationHook, 'useUpdateLocation')
       .mockImplementation(() => jest.fn());
-    const middlewares = [thunk];
-    const mockStore = configureMockStore(middlewares);
-    const store = mockStore({
-      query: defaultQuery,
-    });
 
     render(
       <Provider store={store}>
@@ -30,7 +22,6 @@ describe('initial state', () => {
     );
 
     expect(updateLocationHookSpy).toBeCalledTimes(1);
-
     expect(screen.getByText(/Consumer Complaint Database/)).toBeDefined();
     expect(screen.getByText(/Search within/)).toBeDefined();
     expect(
@@ -41,21 +32,12 @@ describe('initial state', () => {
     ).toBeInTheDocument();
   });
 
-  it('renders the detail route', () => {
-    const middlewares = [thunk];
-    const mockStore = configureMockStore(middlewares);
-    const store = mockStore({
-      detail: { data: {}, error: '' },
-      query: {
-        search: '?something',
-      },
-    });
-
+  test('renders the detail route', () => {
     render(
       <MemoryRouter initialEntries={['/detail/6026335']}>
         <Provider store={store}>
           <Routes>
-            <Route path="/detail/:id" element={<DetailComponents />} />
+            <Route path="/detail/:id" element={<ComplaintDetail />} />
           </Routes>
         </Provider>
       </MemoryRouter>,
@@ -66,7 +48,7 @@ describe('initial state', () => {
     ).toBeInTheDocument();
     expect(
       screen.getByRole('link', { name: /Back to search results/ }),
-    ).toHaveAttribute('href', '/?something');
+    ).toHaveAttribute('href', '/');
 
     expect(screen.getByText('This page is loading')).toBeInTheDocument();
   });

src/__tests__/utils.spec.js

@@ -181,66 +181,66 @@ describe('module::utils', () => {
 
   describe('enablePer1000', () => {
     it('handles no filters', () => {
-      const query = {
+      const filters = {
         date: {},
         bogus: {},
         product: [],
       };
 
-      expect(enablePer1000(query)).toBeTruthy();
+      expect(enablePer1000(filters)).toBeTruthy();
     });
 
     it('handles some filters', () => {
-      const query = {
+      const filters = {
         date: {},
         bogus: {},
         product: [{ name: 'foo', value: 123 }],
       };
 
-      expect(enablePer1000(query)).toBeFalsy();
+      expect(enablePer1000(filters)).toBeFalsy();
     });
 
     it('handles flag filters', () => {
-      const query = {
+      const filters = {
         date: {},
         bogus: {},
         has_narrative: true,
       };
 
-      expect(enablePer1000(query)).toBeFalsy();
+      expect(enablePer1000(filters)).toBeFalsy();
     });
 
     it('handles company_received filters', () => {
-      const query = {
+      const filters = {
         date: {},
         bogus: {},
         product: [],
         company_received_max: 'foo',
       };
 
-      expect(enablePer1000(query)).toBeFalsy();
+      expect(enablePer1000(filters)).toBeFalsy();
     });
 
     it('allows state filter', () => {
-      const query = {
+      const filters = {
         date: {},
         bogus: {},
         product: [],
         state: ['FL', 'OR'],
       };
 
-      expect(enablePer1000(query)).toBeTruthy();
+      expect(enablePer1000(filters)).toBeTruthy();
     });
 
     it('disallows state filter when others valid', () => {
-      const query = {
+      const filters = {
         date: {},
         bogus: {},
         product: ['BA'],
         state: ['FL', 'OR'],
       };
 
-      expect(enablePer1000(query)).toBeFalsy();
+      expect(enablePer1000(filters)).toBeFalsy();
     });
   });
 
@@ -274,22 +274,14 @@ describe('module::utils', () => {
       };
 
       const actual = startOfToday();
-      expect(actual.getFullYear()).toEqual(2020);
-      expect(actual.getMonth()).toEqual(4);
-      expect(actual.getDate()).toEqual(9);
-      expect(actual.getHours()).toEqual(0);
-      expect(actual.getMinutes()).toEqual(0);
+      expect(dayjs(actual).toISOString()).toEqual('2020-05-09T04:00:00.000Z');
     });
 
     it('defaults MAX_DATE if the metadata is missing', () => {
       MockDate.set(dayjs('5/1/2020').utc());
 
       const actual = startOfToday();
-      expect(actual.getFullYear()).toEqual(2020);
-      expect(actual.getMonth()).toEqual(4);
-      expect(actual.getDate()).toEqual(1);
-      expect(actual.getHours()).toEqual(0);
-      expect(actual.getMinutes()).toEqual(0);
+      expect(dayjs(actual).toISOString()).toEqual('2020-05-01T04:00:00.000Z');
     });
   });
 
@@ -298,12 +290,10 @@ describe('module::utils', () => {
       const actual = processErrorMessage({
         name: 'foo',
         message: 'bar',
-        stack: 'some stack trace thing',
       });
       expect(actual).toEqual({
         name: 'foo',
         message: 'bar',
-        stack: 'some stack trace thing',
       });
     });
   });