Update customer management and self-service frontends to latest library versions

customer-management-frontend/package.json

@@ -4,26 +4,25 @@
   "private": true,
   "devDependencies": {
     "@beam-australia/react-env": "^3.1.1",
-    "flow-bin": "^0.196.3",
+    "@rtk-query/codegen-openapi": "^1.2.0",
+    "eslint": "^8.57.0",
+    "flow-bin": "^0.244.0",
     "react-scripts": "5.0.1",
-    "redux-devtools": "^3.7.0"
+    "typescript": "^4.9.5"
   },
   "dependencies": {
-    "@brigad/redux-rest-easy": "^4.0.1",
-    "documentation": "^14.0.1",
-    "moment": "^2.29.4",
-    "normalizr": "^3.6.2",
-    "react": "^16.14.0",
-    "react-dom": "^16.14.0",
-    "react-redux": "^7.2.9",
-    "react-router": "^4.3.1",
-    "react-router-dom": "^4.3.1",
+    "@reduxjs/toolkit": "^2.2.7",
+    "documentation": "^14.0.3",
+    "moment": "^2.30.1",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-redux": "^9.1.2",
+    "react-router": "^6.26.1",
+    "react-router-dom": "^6.26.1",
     "react-stomp": "^5.1.0",
-    "redux": "^4.2.0",
-    "redux-thunk": "^2.4.2",
+    "redux": "^5.0.1",
     "semantic-ui-css": "^2.5.0",
-    "semantic-ui-react": "^2.1.4",
-    "whatwg-fetch": "^3.6.2"
+    "semantic-ui-react": "^2.1.5"
   },
   "scripts": {
     "prestart": "react-env",
@@ -32,6 +31,7 @@
     "test": "react-scripts test --env=jsdom",
     "eject": "react-scripts eject",
     "doc": "documentation build src/** -f html -o docs",
+    "generate-api-endpoints": "npx @rtk-query/codegen-openapi ./src/store/customer-management/openapi-config.json &&  npx @rtk-query/codegen-openapi ./src/store/customer-self-service/openapi-config.json && npx tsc src/store/**/*.ts --target ES2016 --module ESNext --moduleResolution Node --skipLibCheck",
     "flow": "flow"
   },
   "prettier": {

customer-management-frontend/src/App.js

@@ -1,71 +1,50 @@
 // @flow
 
 import React from "react"
-import { BrowserRouter, Route, Switch } from "react-router-dom"
-import { Container, Message } from "semantic-ui-react"
-
-import Home from "./pages/Home"
-import NewCustomer from "./pages/NewCustomer"
-import CustomerDetail from "./pages/CustomerDetail"
-import EditCustomer from "./pages/EditCustomer"
+import {BrowserRouter, Route, Routes} from "react-router-dom"
+import {Container, Message} from "semantic-ui-react"
 import SiteHeader from "./components/SiteHeader"
 import MenuBar from "./components/MenuBar"
 
-import { Provider } from "react-redux"
-import configureStore from "./redux/configureStore"
-import {
-  customerSelfServiceBackend,
-  customerManagementBackend,
-  policyManagementFrontend,
-} from "./config"
-
-const store = configureStore()
+import {Provider} from "react-redux"
+import {store} from "./store/store"
+import {customerManagementBackend, customerSelfServiceBackend, policyManagementFrontend,} from "./config"
+import Home from "./pages/Home";
+import NewCustomer from "./pages/NewCustomer";
+import CustomerDetail from "./pages/CustomerDetail";
+import EditCustomer from "./pages/EditCustomer";
 
-export default class App extends React.Component<{}> {
-  render() {
+function App(): React$Element {
     return (
-      <Provider store={store}>
-        <BrowserRouter>
-          <Container text>
-            <SiteHeader />
-
-            <MenuBar />
-
-            <Switch>
-              <Route exact path="/" render={(props) => <Home {...props} />} />
-              <Route
-                exact
-                path="/customers/new"
-                render={(props) => <NewCustomer {...props} />}
-              />
-              <Route
-                exact
-                path="/customers/:customerId"
-                render={(props) => <CustomerDetail {...props} />}
-              />
-              <Route
-                exact
-                path="/customers/:customerId/edit_profile"
-                render={(props) => <EditCustomer {...props} />}
-              />
-            </Switch>
-            <Message style={{ color: "#BBB" }} size="mini">
-              <Message.Header>
-                Environment Variable Debug Information
-              </Message.Header>
-              <p>
-                REACT_APP_CUSTOMER_SELF_SERVICE_BACKEND:{" "}
-                {customerSelfServiceBackend}
-                <br />
-                REACT_APP_CUSTOMER_MANAGEMENT_BACKEND:{" "}
-                {customerManagementBackend}
-                <br />
-                REACT_APP_POLICY_MANAGEMENT_FRONTEND: {policyManagementFrontend}
-              </p>
-            </Message>
-          </Container>
-        </BrowserRouter>
-      </Provider>
+        <Provider store={store}>
+            <BrowserRouter>
+                <Container text>
+                    <SiteHeader/>
+                    <MenuBar/>
+                    <Routes>
+                        <Route exact path="/" element={<Home/>}/>
+                        <Route exact path="/customers/new" element={<NewCustomer/>}/>
+                        <Route exact path="/customers/:customerId" element={<CustomerDetail/>}/>
+                        <Route exact path="/customers/:customerId/edit_profile" element={<EditCustomer/>}/>
+                    </Routes>
+                    <Message style={{color: "#BBB"}} size="mini">
+                        <Message.Header>
+                            Environment Variable Debug Information
+                        </Message.Header>
+                        <p>
+                            REACT_APP_CUSTOMER_SELF_SERVICE_BACKEND:{" "}
+                            {customerSelfServiceBackend}
+                            <br/>
+                            REACT_APP_CUSTOMER_MANAGEMENT_BACKEND:{" "}
+                            {customerManagementBackend}
+                            <br/>
+                            REACT_APP_POLICY_MANAGEMENT_FRONTEND: {policyManagementFrontend}
+                        </p>
+                    </Message>
+                </Container>
+            </BrowserRouter>
+        </Provider>
     )
-  }
 }
+
+export default App

customer-management-frontend/src/components/MenuBar.js

@@ -1,29 +1,27 @@
 // @flow
 
 import React from "react"
-import { Menu, Segment } from "semantic-ui-react"
-import { Link, withRouter, type Location } from "react-router-dom"
+import {Menu, Segment} from "semantic-ui-react"
+import {Link} from "react-router-dom"
+import {useLocation} from "react-router";
 
-export type Props = {
-  location: Location,
+function MenuBar(): React$Element {
+    const location = useLocation();
+    return (
+        <Segment.Group style={{marginTop: "1em"}}>
+            <Segment>
+                <Menu pointing secondary color="blue">
+                    <Menu.Item
+                        name="Home"
+                        icon="dashboard"
+                        active={location.pathname === "/"}
+                        as={Link}
+                        to="/"
+                    />
+                </Menu>
+            </Segment>
+        </Segment.Group>
+    )
 }
 
-const MenuBar = (props: Props) => {
-  return (
-    <Segment.Group style={{ marginTop: "1em" }}>
-      <Segment>
-        <Menu pointing secondary color="blue">
-          <Menu.Item
-            name="Home"
-            icon="dashboard"
-            active={props.location.pathname === "/"}
-            as={Link}
-            to="/"
-          />
-        </Menu>
-      </Segment>
-    </Segment.Group>
-  )
-}
-
-export default withRouter(MenuBar)
+export default MenuBar

customer-management-frontend/src/index.js

@@ -1,7 +1,9 @@
 import React from "react"
-import { render } from "react-dom"
+import { createRoot } from "react-dom/client"
 import App from "./App"
 import "./index.css"
 import "semantic-ui-css/semantic.min.css"
 
-render(<App />, document.getElementById("root"))
+const container = document.getElementById("root")
+const root = createRoot(container)
+root.render(<App />)