From bc155fa4007660f7ab9b7635d1c4b35967ee84a8 Mon Sep 17 00:00:00 2001
From: Michael Bender <michael.bender@woodgrain.com>
Date: Mon, 10 Nov 2025 10:50:33 -0500
Subject: [PATCH 01/10] change to react app fix npm error

---
 azure-pipelines.yml | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/azure-pipelines.yml b/azure-pipelines.yml
index 554a22d..74464fc 100644
--- a/azure-pipelines.yml
+++ b/azure-pipelines.yml
@@ -1,6 +1,6 @@
 
 # Node.js
-# Build a general Node.js project with npm.
+# Build React app
 # Add steps that analyze code, save build artifacts, deploy, and more:
 # https://docs.microsoft.com/azure/devops/pipelines/languages/javascript
 
@@ -8,16 +8,16 @@ trigger:
 - main
 
 pool:
-  vmImage: ubuntu-latest # examples of other options:'macOS-10.15','windows-latest'
-  
+  vmImage: ubuntu-latest
 
 steps:
 - task: NodeTool@0
   inputs:
-    versionSpec: '10.x'
+    versionSpec: '18.x'
   displayName: 'Install Node.js'
 
 - script: |
+    cd react-app
     npm install
     npm run build
-  displayName: 'npm install and build'
+  displayName: 'Build React app'

From 0fea4607f0412851425f87e7ac51177748b03468 Mon Sep 17 00:00:00 2001
From: Michael Bender <michael.bender@woodgrain.com>
Date: Mon, 10 Nov 2025 10:56:33 -0500
Subject: [PATCH 02/10] add some more debugging steps

---
 azure-pipelines.yml | 19 ++++++++++++++-----
 1 file changed, 14 insertions(+), 5 deletions(-)

diff --git a/azure-pipelines.yml b/azure-pipelines.yml
index 74464fc..1737e53 100644
--- a/azure-pipelines.yml
+++ b/azure-pipelines.yml
@@ -13,11 +13,20 @@ pool:
 steps:
 - task: NodeTool@0
   inputs:
-    versionSpec: '18.x'
+    versionSpec: '16.x'
   displayName: 'Install Node.js'
 
-- script: |
-    cd react-app
-    npm install
-    npm run build
+- task: Bash@3
+  inputs:
+    targetType: 'inline'
+    workingDirectory: '$(System.DefaultWorkingDirectory)/react-app'
+    script: |
+      echo "Node version:"
+      node -v
+      echo "NPM version:"
+      npm -v
+      echo "Installing dependencies..."
+      npm install
+      echo "Building React app..."
+      npm run build
   displayName: 'Build React app'

From f5349443cdaadaca343691bd5f211cddeccf01cd Mon Sep 17 00:00:00 2001
From: Michael Bender <michael.bender@woodgrain.com>
Date: Mon, 10 Nov 2025 11:00:07 -0500
Subject: [PATCH 03/10] Update Node.js version and dependencies in CI pipeline

---
 azure-pipelines.yml    | 8 +++++---
 react-app/package.json | 2 +-
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/azure-pipelines.yml b/azure-pipelines.yml
index 1737e53..d94fb91 100644
--- a/azure-pipelines.yml
+++ b/azure-pipelines.yml
@@ -13,7 +13,7 @@ pool:
 steps:
 - task: NodeTool@0
   inputs:
-    versionSpec: '16.x'
+    versionSpec: '18.x'
   displayName: 'Install Node.js'
 
 - task: Bash@3
@@ -25,8 +25,10 @@ steps:
       node -v
       echo "NPM version:"
       npm -v
+      echo "Cleaning npm cache..."
+      npm cache clean --force
       echo "Installing dependencies..."
-      npm install
+      npm ci
       echo "Building React app..."
-      npm run build
+      CI=true npm run build
   displayName: 'Build React app'
diff --git a/react-app/package.json b/react-app/package.json
index c5e394c..f7f9c3a 100644
--- a/react-app/package.json
+++ b/react-app/package.json
@@ -24,7 +24,7 @@
     "@fortawesome/fontawesome-free": "^5.15.2",
     "axios": "^0.21.1",
     "bulma": "^0.9.2",
-    "node-sass": "^5.0.0",
+    "sass": "^1.69.5",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-redux": "^7.2.4",

From 506ee812d6c3e290d13419fbd0a1db2180230b6b Mon Sep 17 00:00:00 2001
From: Michael Bender <michael.bender@woodgrain.com>
Date: Mon, 10 Nov 2025 11:03:34 -0500
Subject: [PATCH 04/10] Update dependency installation method and package
 versions in CI pipeline

---
 azure-pipelines.yml    |  5 +++--
 react-app/package.json | 22 +++++++++++-----------
 2 files changed, 14 insertions(+), 13 deletions(-)

diff --git a/azure-pipelines.yml b/azure-pipelines.yml
index d94fb91..8a24331 100644
--- a/azure-pipelines.yml
+++ b/azure-pipelines.yml
@@ -27,8 +27,9 @@ steps:
       npm -v
       echo "Cleaning npm cache..."
       npm cache clean --force
-      echo "Installing dependencies..."
-      npm ci
+      echo "Installing dependencies with package lock update..."
+      rm -f package-lock.json
+      npm install --legacy-peer-deps
       echo "Building React app..."
       CI=true npm run build
   displayName: 'Build React app'
diff --git a/react-app/package.json b/react-app/package.json
index f7f9c3a..2b82814 100644
--- a/react-app/package.json
+++ b/react-app/package.json
@@ -21,18 +21,18 @@
   ],
   "proxy": "http://localhost:7071/",
   "dependencies": {
-    "@fortawesome/fontawesome-free": "^5.15.2",
-    "axios": "^0.21.1",
-    "bulma": "^0.9.2",
+    "@fortawesome/fontawesome-free": "^5.15.4",
+    "axios": "^1.6.2",
+    "bulma": "^0.9.4",
     "sass": "^1.69.5",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "react-redux": "^7.2.4",
-    "react-router-dom": "^5.2.0",
-    "react-scripts": "^4.0.3",
-    "redux": "^4.1.0",
-    "redux-saga": "^1.1.3",
-    "redux-thunk": "^2.3.0"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-redux": "^8.1.3",
+    "react-router-dom": "^6.20.0",
+    "react-scripts": "5.0.1",
+    "redux": "^4.2.1",
+    "redux-saga": "^1.2.3",
+    "redux-thunk": "^2.4.2"
   },
   "devDependencies": {
     "eslint-config-airbnb": "^18.2.1",

From b97b94918e03ad23a6c6199506285d1ec6ec11c5 Mon Sep 17 00:00:00 2001
From: Michael Bender <michael.bender@woodgrain.com>
Date: Mon, 10 Nov 2025 11:20:35 -0500
Subject: [PATCH 05/10] Refactor CI pipeline to clean installation and enforce
 specific ajv versions

---
 azure-pipelines.yml    | 12 +++++++-----
 react-app/package.json |  4 +++-
 2 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/azure-pipelines.yml b/azure-pipelines.yml
index 8a24331..96fd3f2 100644
--- a/azure-pipelines.yml
+++ b/azure-pipelines.yml
@@ -25,11 +25,13 @@ steps:
       node -v
       echo "NPM version:"
       npm -v
-      echo "Cleaning npm cache..."
+      echo "Cleaning installation..."
+      rm -rf node_modules package-lock.json
       npm cache clean --force
-      echo "Installing dependencies with package lock update..."
-      rm -f package-lock.json
-      npm install --legacy-peer-deps
+      echo "Installing dependencies..."
+      npm install --legacy-peer-deps --force
+      echo "Installing specific ajv version..."
+      npm install ajv@8.12.0 ajv-keywords@5.1.0 --legacy-peer-deps --force
       echo "Building React app..."
-      CI=true npm run build
+      CI=true GENERATE_SOURCEMAP=false npm run build
   displayName: 'Build React app'
diff --git a/react-app/package.json b/react-app/package.json
index 2b82814..01ea89e 100644
--- a/react-app/package.json
+++ b/react-app/package.json
@@ -32,7 +32,9 @@
     "react-scripts": "5.0.1",
     "redux": "^4.2.1",
     "redux-saga": "^1.2.3",
-    "redux-thunk": "^2.4.2"
+    "redux-thunk": "^2.4.2",
+    "ajv": "^8.12.0",
+    "ajv-keywords": "^5.1.0"
   },
   "devDependencies": {
     "eslint-config-airbnb": "^18.2.1",

From dd56d0be9e95756d1820e2097f5d917623184865 Mon Sep 17 00:00:00 2001
From: Michael Bender <michael.bender@woodgrain.com>
Date: Mon, 10 Nov 2025 11:47:35 -0500
Subject: [PATCH 06/10] Refactor App and ProductList components to use
 functional components and updated routing methods

---
 react-app/src/App.js                  | 47 ++++++++++++---------------
 react-app/src/products/ProductList.js |  8 +++--
 2 files changed, 26 insertions(+), 29 deletions(-)

diff --git a/react-app/src/App.js b/react-app/src/App.js
index f997da4..57730ab 100644
--- a/react-app/src/App.js
+++ b/react-app/src/App.js
@@ -1,36 +1,31 @@
-import React, { Component, lazy, Suspense } from 'react';
+import React, { lazy, Suspense } from 'react';
 import 'bulma/css/bulma.css';
 import './styles.scss';
-import { Redirect, Route, Switch } from 'react-router-dom';
-import { withRouter } from 'react-router';
+import { Navigate, Route, Routes } from 'react-router-dom';
 import { HeaderBar, NavBar, NotFound } from './components';
 import About from './About';
 
-const Products = withRouter(
-  lazy(() => import(/* webpackChunkName: "products" */ './products/Products'))
-);
+const Products = lazy(() => import(/* webpackChunkName: "products" */ './products/Products'));
 
-class App extends Component {
-  render() {
-    return (
-      <div>
-        <HeaderBar />
-        <div className="section columns">
-          <NavBar />
-          <main className="column">
-            <Suspense fallback={<div>Loading...</div>}>
-              <Switch>
-                <Redirect from="/" exact to="/products" />
-                <Route path="/products" component={Products} />
-                <Route path="/about" component={About} />
-                <Route exact path="**" component={NotFound} />
-              </Switch>
-            </Suspense>
-          </main>
-        </div>
+function App() {
+  return (
+    <div>
+      <HeaderBar />
+      <div className="section columns">
+        <NavBar />
+        <main className="column">
+          <Suspense fallback={<div>Loading...</div>}>
+            <Routes>
+              <Route path="/" element={<Navigate to="/products" replace />} />
+              <Route path="/products" element={<Products />} />
+              <Route path="/about" element={<About />} />
+              <Route path="*" element={<NotFound />} />
+            </Routes>
+          </Suspense>
+        </main>
       </div>
-    );
-  }
+    </div>
+  );
 }
 
 export default App;
diff --git a/react-app/src/products/ProductList.js b/react-app/src/products/ProductList.js
index c22ac7e..c4e6715 100644
--- a/react-app/src/products/ProductList.js
+++ b/react-app/src/products/ProductList.js
@@ -1,9 +1,11 @@
 import React from 'react';
-import { withRouter } from 'react-router';
-
+import { useNavigate, useLocation } from 'react-router-dom';
 import { CardContent } from '../components';
 
 function ProductList({products}) {
+  const navigate = useNavigate();
+  const location = useLocation();
+
   return (
     <div>
       {products.length === 0 && <div>Loading data ...</div>}
@@ -23,4 +25,4 @@ function ProductList({products}) {
   );
 }
 
-export default withRouter(ProductList);
+export default ProductList;

From fbd3542a8a4d68ebe4f2e21e9a50b78439c7765f Mon Sep 17 00:00:00 2001
From: Michael Bender <michael.bender@woodgrain.com>
Date: Mon, 10 Nov 2025 11:54:51 -0500
Subject: [PATCH 07/10] Refactor NavBar and Products components to use updated
 routing methods with className for active links

---
 react-app/src/components/NavBar.js |  4 ++--
 react-app/src/products/Products.js | 11 +++++------
 2 files changed, 7 insertions(+), 8 deletions(-)

diff --git a/react-app/src/components/NavBar.js b/react-app/src/components/NavBar.js
index fe22104..16ec19d 100644
--- a/react-app/src/components/NavBar.js
+++ b/react-app/src/components/NavBar.js
@@ -5,10 +5,10 @@ const NavBar = (props) => (
   <nav className="column is-2 menu">
     <p className="menu-label">Menu</p>
     <ul className="menu-list">
-      <NavLink to="/products" activeClassName="active-link">
+      <NavLink to="/products" className={({ isActive }) => isActive ? "active-link" : ""}>
         Products
       </NavLink>
-      <NavLink to="/about" activeClassName="active-link">
+      <NavLink to="/about" className={({ isActive }) => isActive ? "active-link" : ""}>
         About
       </NavLink>
     </ul>
diff --git a/react-app/src/products/Products.js b/react-app/src/products/Products.js
index bca5638..bdccad0 100644
--- a/react-app/src/products/Products.js
+++ b/react-app/src/products/Products.js
@@ -1,5 +1,5 @@
 import React, { useEffect } from 'react';
-import { Route, Switch } from 'react-router-dom';
+import { Routes, Route } from 'react-router-dom';
 
 import { ListHeader } from '../components';
 import ProductList from './ProductList';
@@ -25,13 +25,12 @@ function Products() {
       />
       <div className="columns is-multiline is-variable">
         <div className="column is-8">
-          <Switch>
+          <Routes>
             <Route
-              exact
-              path="/products"
-              component={() => <ProductList products={products} />}
+              path=""
+              element={<ProductList products={products} />}
             />
-          </Switch>
+          </Routes>
         </div>
       </div>
     </div>

From 1785c19e4f877e06595ceea1fa9ca9ff7642d18c Mon Sep 17 00:00:00 2001
From: Michael Bender <michael.bender@woodgrain.com>
Date: Mon, 10 Nov 2025 11:59:48 -0500
Subject: [PATCH 08/10] Update ESLint parser and configuration for improved
 compatibility

---
 react-app/.eslintrc.json | 6 +++++-
 react-app/package.json   | 2 ++
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/react-app/.eslintrc.json b/react-app/.eslintrc.json
index 44a91c8..40e3d0f 100644
--- a/react-app/.eslintrc.json
+++ b/react-app/.eslintrc.json
@@ -22,10 +22,14 @@
     ]
   },
   "plugins": ["react", "import", "jsx-a11y"],
-  "parser": "babel-eslint",
+  "parser": "@babel/eslint-parser",
   "parserOptions": {
     "ecmaVersion": 2018,
     "sourceType": "module",
+    "requireConfigFile": false,
+    "babelOptions": {
+      "presets": ["@babel/preset-react"]
+    },
     "ecmaFeatures": {
       "jsx": true
     }
diff --git a/react-app/package.json b/react-app/package.json
index 01ea89e..f8ed069 100644
--- a/react-app/package.json
+++ b/react-app/package.json
@@ -37,6 +37,8 @@
     "ajv-keywords": "^5.1.0"
   },
   "devDependencies": {
+    "@babel/core": "^7.23.3",
+    "@babel/eslint-parser": "^7.23.3",
     "eslint-config-airbnb": "^18.2.1",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-import": "^2.23.4",

From 05b177dddeccf0f63d634f57d01e0c45dc3c1076 Mon Sep 17 00:00:00 2001
From: Michael Bender <michael.bender@woodgrain.com>
Date: Mon, 10 Nov 2025 13:28:59 -0500
Subject: [PATCH 09/10] Refactor NavBar and ProductList components for improved
 readability and updated rendering methods

---
 react-app/src/components/NavBar.js    |  4 ++--
 react-app/src/index.js                | 10 +++++-----
 react-app/src/products/ProductList.js |  4 +---
 3 files changed, 8 insertions(+), 10 deletions(-)

diff --git a/react-app/src/components/NavBar.js b/react-app/src/components/NavBar.js
index 16ec19d..adfacdd 100644
--- a/react-app/src/components/NavBar.js
+++ b/react-app/src/components/NavBar.js
@@ -5,10 +5,10 @@ const NavBar = (props) => (
   <nav className="column is-2 menu">
     <p className="menu-label">Menu</p>
     <ul className="menu-list">
-      <NavLink to="/products" className={({ isActive }) => isActive ? "active-link" : ""}>
+      <NavLink to="/products" className={({ isActive }) => (isActive ? 'active-link' : '')}>
         Products
       </NavLink>
-      <NavLink to="/about" className={({ isActive }) => isActive ? "active-link" : ""}>
+      <NavLink to="/about" className={({ isActive }) => (isActive ? 'active-link' : '')}>
         About
       </NavLink>
     </ul>
diff --git a/react-app/src/index.js b/react-app/src/index.js
index e5d612a..bcc5406 100644
--- a/react-app/src/index.js
+++ b/react-app/src/index.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import { Provider } from 'react-redux';
 import { BrowserRouter } from 'react-router-dom';
 import { applyMiddleware, compose, createStore } from 'redux';
@@ -20,14 +20,14 @@ const store = createStore(
 
 sagaMiddleware.run(productSaga);
 
-ReactDOM.render(
+const rootElement = document.getElementById('root');
+const root = createRoot(rootElement);
+root.render(
   <Provider store={store}>
     <BrowserRouter>
       <App />
     </BrowserRouter>
-  </Provider>,
-
-  document.getElementById('root')
+  </Provider>
 );
 
 // If you want your app to work offline and load faster, you can change
diff --git a/react-app/src/products/ProductList.js b/react-app/src/products/ProductList.js
index c4e6715..1a5ae1e 100644
--- a/react-app/src/products/ProductList.js
+++ b/react-app/src/products/ProductList.js
@@ -1,10 +1,8 @@
 import React from 'react';
-import { useNavigate, useLocation } from 'react-router-dom';
 import { CardContent } from '../components';
 
 function ProductList({products}) {
-  const navigate = useNavigate();
-  const location = useLocation();
+  // ...existing code...
 
   return (
     <div>

From 71b5b903358dd6485554c3b39a434dacc67b08de Mon Sep 17 00:00:00 2001
From: Michael Bender <michael.bender@woodgrain.com>
Date: Tue, 18 Nov 2025 13:33:20 -0500
Subject: [PATCH 10/10] test build push

---
 react-app/src/index.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/react-app/src/index.css b/react-app/src/index.css
index e2bd8f3..7d1e4ae 100644
--- a/react-app/src/index.css
+++ b/react-app/src/index.css
@@ -9,6 +9,6 @@ body {
 }
 
 code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Arial',
     monospace;
 }