Upgrade poc-subapp and poc-subapp-redux to react18 with rr6

samples/poc-subapp-redux/package.json

@@ -34,29 +34,25 @@
     "test": "clap check",
     "build": "clap build"
   },
-  "dependencies": {
-    "@babel/runtime": "^7.12.5",
+  "dependencies": {    
+    "@babel/runtime": "^7.17.9",
     "@module-federation/concat-runtime": "^0.0.1",
-    "@xarc/app": "^8.1.6",
-    "@xarc/fastify-server": "^2.0.0",
-    "electrode-confippet": "^1.5.0",
-    "history": "^4.10.1",
-    "html-webpack-plugin": "^5.3.1",
+    "@xarc/fastify-server": "^3.3.0",    
+    "electrode-confippet": "^1.7.1",
+    "history": "^5.3.0",
+    "html-webpack-plugin": "^5.5.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-redux": "^7.2.0",
-    "react-router": "^5.2.0",
-    "react-router-dom": "^5.2.0",
-    "redux": "^4.0.5",
-    "redux-logger": "^3.0.6",
-    "subapp-react": "^0.0.21",
-    "subapp-redux": "^1.0.30",
-    "subapp-server": "^1.2.4",
-    "subapp-web": "^1.0.47"
+    "react-redux": "^8.0.4",
+    "react-router": "^6.4.3",
+    "react-router-dom": "^6.4.3",
+    "redux": "^4.2.0",
+    "redux-logger": "^3.0.6"
   },
   "devDependencies": {
-    "@xarc/app-dev": "^8.1.6",
-    "@xarc/opt-eslint": "^1.0.0"
+    "@xarc/app-dev": "^10.1.1",
+    "@xarc/opt-eslint": "^2.0.1",
+    "@xarc/run": "^1.1.1"
   },
   "fyn": {
     "dependencies": {
@@ -72,8 +68,6 @@
     }
   },
   "prettier": {
-    "printWidth": 100,
-    "trailingComma": "none",
-    "arrowParens": "avoid"
+    "printWidth": 100
   }
 }

samples/poc-subapp-redux/src/02.main-body/main-body.jsx

@@ -1,17 +1,15 @@
-import {reduxLoadSubApp} from "subapp-redux";
-import {getBrowserHistory, React} from "subapp-react";
-import {connect} from "react-redux";
-import {withRouter} from "react-router";
-import {Route, Router, Switch} from "react-router-dom";
-import logger from 'redux-logger';
-import {applyMiddleware} from 'redux';
+import { reduxLoadSubApp } from "subapp-redux";
+import { React } from "subapp-react";
+import { connect } from "react-redux";
+import { Route, Routes, BrowserRouter } from "react-router-dom";
+import logger from "redux-logger";
+import { applyMiddleware } from "redux";
+import { Products } from "../components/Products";
+import { Deals } from "../components/deals";
+import { Navigation } from "../components/Navigation";
+import reduxReducers, { decNumber, incNumber } from "./reducers";
 
-import {Products} from "../components/products";
-import {Navigation} from "../components/navigation";
-import {Deals} from "../components/deals";
-import reduxReducers, {decNumber, incNumber} from "./reducers";
-
-const mapStateToProps = state => state;
+const mapStateToProps = (state) => state;
 
 const HomeComp = (props) => {
   return (
@@ -38,40 +36,37 @@ const HomeComp = (props) => {
 const Stores = () => `Stores`;
 const Contact = () => `Contact`;
 
-const MainBody = props => {
+const MainBody = (props) => {
   return (
     <div>
       <Navigation />
-      <Switch>
-        <Route path="/" exact component={Home} {...props} />
-        <Route path="/products" component={Products} {...props} />
-        <Route path="/deals" component={Deals} {...props} />
-        <Route path="/stores" component={Stores} {...props} />
-        <Route path="/contact" component={Contact} {...props} />
-      </Switch>
+      <Routes>
+        <Route path="/" element={<Home />} />
+        <Route path="/products" element={<Products />} />
+        <Route path="/deals" element={<Deals />} {...props} />
+        <Route path="/stores" element={<Stores />} {...props} />
+        <Route path="/contact" element={<Contact />} {...props} />
+      </Routes>
     </div>
   );
 };
 
-
-const Home = connect(mapStateToProps, dispatch => ({ dispatch }))(HomeComp)
-const Component = withRouter(connect(mapStateToProps, dispatch => ({ dispatch }))(MainBody));
+const Home = connect(mapStateToProps, (dispatch) => ({ dispatch }))(HomeComp);
+const Component = connect(mapStateToProps, (dispatch) => ({ dispatch }))(MainBody);
 
 export default reduxLoadSubApp({
   name: "MainBody",
   Component,
   useReactRouter: true,
   reduxEnhancer: () => applyMiddleware(logger),
-  StartComponent: props => {
+  StartComponent: (props) => {
     return (
-      <Router history={getBrowserHistory()}>
+      <BrowserRouter>
         <Component {...props} />
-      </Router>
+      </BrowserRouter>
     );
   },
-
   prepare: async () => {},
-
   reduxShareStore: true,
-  reduxReducers
+  reduxReducers,
 });

samples/poc-subapp-redux/src/02.main-body/server.jsx

@@ -1,7 +1,7 @@
 import React from "react";
 import subApp from "./main-body";
 import Promise from "bluebird";
-import { StaticRouter } from "react-router-dom";
+import { StaticRouter } from "react-router-dom/server";
 
 module.exports = {
   prepare: async ({ request, context }) => {

samples/poc-subapp-redux/src/components/navigation.jsx

@@ -1,29 +1,18 @@
 import React from "react";
-import { Route, Link } from "react-router-dom";
-import { withRouter } from "react-router";
+import { Link } from "react-router-dom";
 
 const NavItem = props => {
-  const { to, exact, strict, children } = props;
+  const { to, children } = props;
   return (
-    <Route
-      path={to}
-      exact={exact}
-      strict={strict}
-      children={({ location, match }) => {
-        const cn = match ? "active" : null;
-        return (
-          <li className={cn}>
-            <Link to={to}>
-              <div>{children}</div>
-            </Link>
-          </li>
-        );
-      }}
-    />
+    <li>
+      <Link to={to}>
+        <div>{children}</div>
+      </Link>
+    </li>
   );
 };
 
-const Navigation = () => {
+export const Navigation = () => {
   return (
     <nav className="navbar navbar-inverse">
       <div className="container-fluid">
@@ -64,8 +53,4 @@ const Navigation = () => {
       </div>
     </nav>
   );
-};
-
-const RouterNavigation = withRouter(Navigation);
-
-export { RouterNavigation as Navigation };
+};

samples/poc-subapp-redux/src/subapps/03.bottom/bottom.jsx

@@ -1,13 +1,10 @@
-import { React, getBrowserHistory } from "subapp-react";
+import { React } from "subapp-react";
 import { reduxLoadSubApp } from "subapp-redux";
-import { withRouter } from "react-router";
-import { Router, Route, Switch } from "react-router-dom";
+import { Route, BrowserRouter, Routes } from "react-router-dom";
 import { createStore } from "redux";
 import { connect } from "react-redux";
 import PropTypes from "prop-types";
-import Large from "../../components/large";
 
-// import AdvGridList from "../components/adv-grid";
 
 const MoreProducts = props => {
   return (
@@ -41,29 +38,27 @@ const MoreDeals = () => {
 
 const Bottom = props => {
   return (
-    <Switch>
-      <Route path="/products" component={() => <MoreProducts {...props} imagesData={[]} />} />
-      <Route path="/deals" component={MoreDeals} />
-    </Switch>
+    <Routes>
+      <Route path="/products" element={<MoreProducts {...props} imagesData={[]} />} />
+      <Route path="/deals" element={<MoreDeals />} />
+    </Routes>
   );
 };
 
-const Component = withRouter(
-  connect(
-    state => state,
-    dispatch => ({ dispatch })
-  )(Bottom)
-);
+const Component = connect(
+  state => state,
+  dispatch => ({ dispatch })
+)(Bottom);
 
 export default reduxLoadSubApp({
   name: "Bottom",
   useReactRouter: true,
   Component,
   StartComponent: props => {
     return (
-      <Router history={getBrowserHistory()}>
+      <BrowserRouter>
         <Component {...props} />
-      </Router>
+      </BrowserRouter>
     );
   },
   reduxCreateStore: initialState => {

samples/poc-subapp-redux/src/subapps/03.bottom/server.jsx

@@ -1,8 +1,8 @@
 import React from "react";
 import subApp from "./bottom";
-import { StaticRouter } from "react-router-dom";
 import Promise from "bluebird";
 import Fs from "fs";
+import { StaticRouter } from "react-router-dom/server";
 
 let filterImages;