update redux and redux toolkit (#3976)

This updates redux and redux toolkit and makes a few small changes required for that update.

web/package.json

@@ -21,7 +21,7 @@
     "@mui/x-data-grid-pro": "^6.0.0",
     "@mui/x-date-pickers": "^7.0.0",
     "@psu/cffdrs_ts": "git+https://github.com/cffdrs/cffdrs_ts#b9afdabc89dd4bdf04ccf1e406a4a5d8d552ff51",
-    "@reduxjs/toolkit": "^1.8.0",
+    "@reduxjs/toolkit": "^2.2.7",
     "@sentry/react": "^8.2.1",
     "@sentry/vite-plugin": "^2.22.4",
     "@types/esri-leaflet": "^3.0.0",
@@ -56,7 +56,7 @@
     "prettier": "^3.3.3",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-redux": "^8.0.0",
+    "react-redux": "^9.1.2",
     "react-router-dom": "^6.22.3",
     "recharts": "^2.1.8",
     "typescript": "^5.2.2",

web/src/app/store.ts

@@ -1,5 +1,5 @@
 import { configureStore, AnyAction, ThunkAction } from '@reduxjs/toolkit'
-import thunk, { ThunkMiddleware } from 'redux-thunk'
+import { thunk, ThunkMiddleware } from 'redux-thunk'
 import rootReducer, { RootState } from 'app/rootReducer'
 
 const thunkMiddleware: ThunkMiddleware<RootState, AnyAction> = thunk

web/src/features/auth/slices/authenticationSlice.test.ts

@@ -53,7 +53,7 @@ describe('authenticationSlice', () => {
     it('should be initialized with correct state', () => {
       expect(
         authReducer(undefined, {
-          type: undefined
+          type: ''
         })
       ).toEqual(initialState)
     })

web/src/features/hfiCalculator/slices/hfiCalculatorSlice.test.ts

@@ -11,7 +11,7 @@ describe('hfiCalculatorSlice', () => {
   describe('reducer', () => {
     const dummyError = 'an error'
     it('should be initialized with correct state flags', () => {
-      expect(hfiCalculatorDailiesReducer(undefined, { type: undefined })).toEqual(initialState)
+      expect(hfiCalculatorDailiesReducer(undefined, { type: '' })).toEqual(initialState)
     })
     it('should set fuelTypesLoading = true when fetchFuelTypesStart is called', () => {
       expect(hfiCalculatorDailiesReducer(initialState, fetchFuelTypesStart())).toEqual({

web/src/features/hfiCalculator/slices/hfiReadySlice.test.ts

@@ -12,7 +12,7 @@ describe('hfiReadySlice', () => {
   describe('reducer', () => {
     const dummyError = 'an error'
     it('should be initialized with correct state', () => {
-      expect(hfiReadyReducer(undefined, { type: undefined })).toEqual(initialState)
+      expect(hfiReadyReducer(undefined, { type: '' })).toEqual(initialState)
     })
     it('should set loading = true when fetchFuelTypesStart is called', () => {
       expect(hfiReadyReducer(initialState, setHFIReadyStart())).toEqual({

web/src/features/moreCast2/components/editInputCell.test.tsx

@@ -1,4 +1,4 @@
-import { render, fireEvent, within } from '@testing-library/react'
+import { render, fireEvent, within, act } from '@testing-library/react'
 import { useDispatch } from 'react-redux'
 import { GridApiContext, GridCellMode, GridTreeNodeWithRender } from '@mui/x-data-grid-pro'
 import { EditInputCell } from '@/features/moreCast2/components/EditInputCell'
@@ -44,8 +44,8 @@ vi.mock('@/features/moreCast2/slices/validInputSlice', () => ({
 const mockDispatch = vi.fn()
 
 beforeEach(() => {
-  vi.clearAllMocks()
-  ;(useDispatch as jest.Mock).mockReturnValue(mockDispatch)
+  vi.clearAllMocks();
+  (useDispatch as unknown as jest.Mock).mockReturnValue(mockDispatch)
 })
 
 describe('EditInputCell', () => {
@@ -77,45 +77,50 @@ describe('EditInputCell', () => {
     expect(mockSetEditCellValue).toHaveBeenCalledWith({ id: 1, field: 'test', value: '20' })
   })
 
-  test('should call stopCellEditMode on blur', () => {
+  test('should call stopCellEditMode on blur', async () => {
     const { getByTestId } = render(
       <GridApiContext.Provider value={apiMock}>
         <EditInputCell {...defaultProps} id={1} value="10" field="test" hasFocus={false} error="" />
       </GridApiContext.Provider>
     )
 
     const input = within(getByTestId('forecast-edit-cell')).getByRole('spinbutton') as HTMLInputElement
-    input.focus()
-    fireEvent.blur(input)
-
+    await act(async () => {
+      input.focus()
+      fireEvent.blur(input)
+    })
     expect(mockStopCellEditMode).toHaveBeenCalledWith({ id: 1, field: 'test' })
   })
 
-  test('should handle Escape key press', () => {
+  test('should handle Escape key press', async () => {
     const { getByTestId } = render(
       <GridApiContext.Provider value={apiMock}>
         <EditInputCell {...defaultProps} id={1} value="10" field="test" hasFocus={false} error="" />
       </GridApiContext.Provider>
     )
 
     const input = within(getByTestId('forecast-edit-cell')).getByRole('spinbutton') as HTMLInputElement
-    input.focus()
-    fireEvent.keyDown(input, { key: 'Escape', code: 'Escape', charCode: 27 })
+    await act(async () => {
+      input.focus()
+      fireEvent.keyDown(input, { key: 'Escape', code: 'Escape', charCode: 27 })
+    })
 
     expect(mockStopCellEditMode).toHaveBeenCalledWith({ id: 1, field: 'test' })
   })
 
-  test('should not call stopCellEditMode when Escape key is pressed and there is an error', () => {
+  test('should not call stopCellEditMode when Escape key is pressed and there is an error', async () => {
     const { getByTestId } = render(
       <GridApiContext.Provider value={{ current: apiMock }}>
         <EditInputCell {...defaultProps} error="Test error" />
       </GridApiContext.Provider>
     )
 
     const input = within(getByTestId('forecast-edit-cell')).getByRole('spinbutton') as HTMLInputElement
-    input.focus()
-    // Simulate Escape key press
-    fireEvent.keyDown(input, { key: 'Escape', code: 'Escape', charCode: 27 })
+    await act(async () => {
+      input.focus()
+      // Simulate Escape key press
+      fireEvent.keyDown(input, { key: 'Escape', code: 'Escape', charCode: 27 })
+    })
 
     // Verify that stopCellEditMode was not called
     expect(mockStopCellEditMode).not.toHaveBeenCalled()

web/src/features/moreCast2/slices/dataSlice.test.ts

@@ -89,7 +89,7 @@ describe('dataSlice', () => {
   describe('reducer', () => {
     const dummyError = 'an error'
     it('should be initialized with correct state flags', () => {
-      expect(dataSliceReducer(undefined, { type: undefined })).toEqual(initialState)
+      expect(dataSliceReducer(undefined, { type: '' })).toEqual(initialState)
     })
     it('should set loading = true when getWeatherIndeterminatesStart is called', () => {
       expect(dataSliceReducer(initialState, getWeatherIndeterminatesStart())).toEqual({

web/tsconfig.app.json

@@ -14,20 +14,13 @@
     "jsx": "react-jsx",
     /* Linting */
     "strict": true,
-    "types": [
-      "vite/client",
-      "node"
-    ],
+    "types": ["vite/client", "node", "vitest/globals", "@testing-library/jest-dom"],
     "noUnusedLocals": false,
     // "noUnusedParameters": ,
     "noFallthroughCasesInSwitch": true,
     //from old
     "target": "es2015",
-    "lib": [
-      "dom",
-      "dom.iterable",
-      "esnext"
-    ],
+    "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,
     "skipLibCheck": true,
     "esModuleInterop": true,
@@ -36,36 +29,16 @@
     "module": "esnext",
     "baseUrl": ".",
     "paths": {
-      "@/*": [
-        "./src/*"
-      ],
-      "#root/*": [
-        "./*"
-      ],
-      "app/*": [
-        "./src/app/*"
-      ],
-      "utils/*": [
-        "./src/utils/*"
-      ],
-      "api/*": [
-        "./src/api/*"
-      ],
-      "features/*": [
-        "./src/features/*"
-      ],
-      "components/*": [
-        "src/components/*"
-      ],
-      "components": [
-        "./src/components/index"
-      ],
-      "commonSlices/*": [
-        "./src/commonSlices/*"
-      ],
-    },
+      "@/*": ["./src/*"],
+      "#root/*": ["./*"],
+      "app/*": ["./src/app/*"],
+      "utils/*": ["./src/utils/*"],
+      "api/*": ["./src/api/*"],
+      "features/*": ["./src/features/*"],
+      "components/*": ["src/components/*"],
+      "components": ["./src/components/index"],
+      "commonSlices/*": ["./src/commonSlices/*"]
+    }
   },
-  "include": [
-    "src"
-  ]
-}
+  "include": ["src"]
+}