Update Redux to use latest packages

https://issues.redhat.com/browse/HCS-256

package.json

@@ -56,6 +56,7 @@
     "@redhat-cloud-services/frontend-components-notifications": "^4.1.0",
     "@redhat-cloud-services/frontend-components-translations": "^3.2.7",
     "@redhat-cloud-services/frontend-components-utilities": "^4.0.2",
+    "@reduxjs/toolkit": "^2.0.1",
     "@unleash/proxy-client-react": "^4.1.1",
     "axios": "^1.6.5",
     "classnames": "^2.5.1",
@@ -64,12 +65,12 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-intl": "^6.5.5",
-    "react-redux": "^8.1.3",
+    "react-redux": "^9.0.4",
     "react-router-dom": "^6.21.1",
-    "redux": "^4.2.1",
+    "redux": "^5.0.1",
     "redux-logger": "^3.0.6",
     "redux-promise-middleware": "^6.2.0",
-    "redux-thunk": "^2.4.2",
+    "redux-thunk": "^3.1.0",
     "typesafe-actions": "^5.1.0",
     "victory-core": "^36.8.1"
   },
@@ -115,6 +116,8 @@
     "webpack-bundle-analyzer": "^4.10.1"
   },
   "overrides": {
+    "react-redux": "^9.0.4",
+    "redux": "^5.0.1"
   },
   "insights": {
     "appname": "hybrid-committed-spend"

src/App.tsx

@@ -7,7 +7,6 @@ import { notificationsReducer } from '@redhat-cloud-services/frontend-components
 import { getRegistry } from '@redhat-cloud-services/frontend-components-utilities/Registry';
 import React, { useEffect } from 'react';
 import { useSelector } from 'react-redux';
-import type { Reducer } from 'redux';
 
 import pkg from '../package.json';
 import { initApi } from './api';
@@ -34,7 +33,7 @@ const App = () => {
 
   useEffect(() => {
     const registry = getRegistry();
-    registry.register({ notifications: notificationsReducer as Reducer });
+    registry.register({ notifications: notificationsReducer as any });
 
     // You can use directly the name of your app
     updateDocumentTitle(pkg.insights.appname);

src/routes/overview/components/dashboard/Dashboard.tsx

@@ -1,9 +1,15 @@
 import { Grid, GridItem } from '@patternfly/react-core';
-import React from 'react';
+import React, { lazy } from 'react';
 import { useSelector } from 'react-redux';
 import type { RootState } from 'store';
 import type { DashboardWidget } from 'store/dashboard';
 import { dashboardSelectors, DashboardSize } from 'store/dashboard';
+import { DashboardComponent } from 'store/dashboard/dashboardCommon';
+
+const ActualSpend = lazy(() => import('routes/overview/components/actual-spend'));
+const ActualSpendBreakdown = lazy(() => import('routes/overview/components/actual-spend-breakdown'));
+const CommittedSpend = lazy(() => import('routes/overview/components/committed-spend'));
+const CommittedSpendTrend = lazy(() => import('routes/overview/components/committed-spend-trend'));
 
 interface DashboardOwnProps {
   // TBD...
@@ -23,13 +29,33 @@ const Dashboard: React.FC<DashboardProps> = () => {
     <Grid hasGutter>
       {currentWidgets.map(widgetId => {
         const widget: any = selectWidgets[widgetId];
+
+        let Component;
+        switch (widget.component) {
+          case DashboardComponent.ActualSpend:
+            Component = ActualSpend;
+            break;
+          case DashboardComponent.ActualSpendBreakdown:
+            Component = ActualSpendBreakdown;
+            break;
+          case DashboardComponent.CommittedSpend:
+            Component = CommittedSpend;
+            break;
+          case DashboardComponent.CommittedSpendTrend:
+            Component = CommittedSpendTrend;
+            break;
+        }
+
+        if (!Component) {
+          return null;
+        }
         return widget.size === DashboardSize.half ? (
           <GridItem lg={12} xl2={6} key={widgetId}>
-            <widget.component widgetId={widgetId} />
+            <Component widgetId={widgetId} />
           </GridItem>
         ) : (
           <GridItem sm={12} key={widgetId}>
-            <widget.component widgetId={widgetId} />
+            <Component widgetId={widgetId} />
           </GridItem>
         );
       })}

src/store/dashboard/dashboardCommon.ts

@@ -2,7 +2,6 @@ import type { MessageDescriptor } from '@formatjs/intl/src/types';
 import type { BillingFilters, BillingQuery } from 'api/queries';
 import { getBillingQuery } from 'api/queries';
 import type { ReportPathsType, ReportType } from 'api/reports/report';
-import type { LazyExoticComponent } from 'react';
 
 export const dashboardStateKey = 'dashboard';
 export const dashboardDefaultFilters: BillingFilters = {
@@ -17,8 +16,16 @@ export const enum DashboardSize {
   half = 'half',
 }
 
+// eslint-disable-next-line no-shadow
+export const enum DashboardComponent {
+  ActualSpend,
+  ActualSpendBreakdown,
+  CommittedSpend,
+  CommittedSpendTrend,
+}
+
 export interface DashboardWidget {
-  component: LazyExoticComponent<React.FC<any>>;
+  component: DashboardComponent;
   chartName: string;
   filter?: any;
   id: number;

src/store/dashboard/dashboardWidgets.ts

@@ -1,21 +1,15 @@
 import { ReportPathsType, ReportType } from 'api/reports/report';
 import messages from 'locales/messages';
-import { lazy } from 'react';
 import { routes } from 'Routes';
 
 import type { DashboardWidget } from './dashboardCommon';
-import { DashboardSize } from './dashboardCommon';
-
-const ActualSpend = lazy(() => import('routes/overview/components/actual-spend'));
-const ActualSpendBreakdown = lazy(() => import('routes/overview/components/actual-spend-breakdown'));
-const CommittedSpend = lazy(() => import('routes/overview/components/committed-spend'));
-const CommittedSpendTrend = lazy(() => import('routes/overview/components/committed-spend-trend'));
+import { DashboardComponent, DashboardSize } from './dashboardCommon';
 
 let currrentId = 0;
 const getId = () => currrentId++;
 
 export const actualSpendWidget: DashboardWidget = {
-  component: ActualSpend,
+  component: DashboardComponent.ActualSpend,
   chartName: 'actualSpend',
   id: getId(),
   title: messages.dashboardActualSpendTitle,
@@ -25,7 +19,7 @@ export const actualSpendWidget: DashboardWidget = {
 };
 
 export const actualSpendBreakdownWidget: DashboardWidget = {
-  component: ActualSpendBreakdown,
+  component: DashboardComponent.ActualSpendBreakdown,
   chartName: 'actualSpendBreakdown',
   id: getId(),
   title: messages.dashboardActualSpendBreakdownTitle,
@@ -35,7 +29,7 @@ export const actualSpendBreakdownWidget: DashboardWidget = {
 };
 
 export const committedSpendWidget: DashboardWidget = {
-  component: CommittedSpend,
+  component: DashboardComponent.CommittedSpend,
   chartName: 'committedSpend',
   id: getId(),
   title: messages.dashboardCommitmentSpendTitle,
@@ -45,7 +39,7 @@ export const committedSpendWidget: DashboardWidget = {
 };
 
 export const committedSpendTrendWidget: DashboardWidget = {
-  component: CommittedSpendTrend,
+  component: DashboardComponent.CommittedSpendTrend,
   chartName: 'committedSpendTrend',
   id: getId(),
   title: messages.dashboardCommitmentSpendTrendTitle,

src/store/mockStore.ts

@@ -1,15 +1,20 @@
-import type { DeepPartial, Reducer, ReducersMapObject, Store } from 'redux';
-import { applyMiddleware, combineReducers, createStore } from 'redux';
+import { configureStore as createStore } from '@reduxjs/toolkit';
+import type { Reducer, ReducersMapObject, Store } from 'redux';
+import { combineReducers } from 'redux';
 
 import type { RootState } from './rootReducer';
-import { middlewares } from './store';
+import { middleware } from './store';
 
 type MockReducer<S> = ReducersMapObject<S, any> | Reducer<S>;
 
 export function createMockStoreCreator<S>(reducer: MockReducer<S>) {
   const rootReducer = typeof reducer === 'object' ? combineReducers(reducer) : reducer;
 
-  return (initialState?: DeepPartial<S>): Store<RootState, any> => {
-    return createStore<RootState, any, any, any>(rootReducer as any, initialState, applyMiddleware(...middlewares));
+  return (initialState?: Partial<S>): Store<RootState, any> => {
+    return createStore<RootState, any, any, any>({
+      middleware,
+      preloadedState: initialState as any,
+      reducer: rootReducer as any,
+    });
   };
 }