CDEBase · devmax214 · Nov 22, 2023 · Nov 23, 2023 · Nov 23, 2023 · Nov 23, 2023
diff --git a/packages-modules/counter/browser/package.json b/packages-modules/counter/browser/package.json
@@ -20,7 +20,9 @@
   },
   "dependencies": {
     "@sample-stack/platform-browser": "link:../../../packages/sample-platform/browser",
-    "antd": "~5.1.7"
+    "antd": "~5.1.7",
+    "react-router": "^6.4.0",
+    "react-router-dom": "^6.4.0"
   },
   "peerDependencies": {
     "@common-stack/client-react": "*",
@@ -43,4 +45,4 @@
   "typescript": {
     "definition": "lib/index.d.ts"
   }
-}
+}
diff --git a/packages-modules/counter/browser/src/common/components/Dashboard.tsx b/packages-modules/counter/browser/src/common/components/Dashboard.tsx
@@ -1,4 +1,4 @@
 import * as React from 'react';
-import { renderRoutes } from 'react-router-config';
+// import { renderRoutes } from 'react-router-config';
 
-export default (props) =>  <>{renderRoutes(props.route.routes, { matchPath: props.route.path })}</>;
+// export default (props) =>  <>{renderRoutes(props.route.routes, { matchPath: props.route.path })}</>;
diff --git a/...connected-react-router/__tests__/__snapshots__/connected-react-router-module.test.ts.snap b/...connected-react-router/__tests__/__snapshots__/connected-react-router-module.test.ts.snap
diff --git a/packages-modules/counter/browser/src/connected-react-router/constants/action-types.ts b/packages-modules/counter/browser/src/connected-react-router/constants/action-types.ts
diff --git a/packages-modules/counter/browser/src/connected-react-router/constants/routes-types.ts b/packages-modules/counter/browser/src/connected-react-router/constants/routes-types.ts
diff --git a/packages-modules/counter/browser/src/connected-react-router/interfaces/state.ts b/packages-modules/counter/browser/src/connected-react-router/interfaces/state.ts
diff --git a/packages-modules/counter/browser/src/index.ts b/packages-modules/counter/browser/src/index.ts
@@ -2,9 +2,9 @@ import { Feature } from '@common-stack/client-react';
 
 import Common from './common';
 import ApolloCounter from './apollo-server-n-client';
-import ConnectedReactRouter from './connected-react-router';
+import ConnectedReactRouter from './redux-first-history';
 import emotion from './emotion';
-import { ElectronTrayModule } from './connected-react-router/index.electron';
+import { ElectronTrayModule } from './redux-first-history/index.electron';
 
 export default new Feature(Common, ConnectedReactRouter, ApolloCounter, emotion);
 export { ElectronTrayModule };
diff --git a/...wser/src/connected-react-router/README.md → ...browser/src/redux-first-history/README.md b/...wser/src/connected-react-router/README.md → ...browser/src/redux-first-history/README.md
@@ -7,4 +7,4 @@ In Hello link, you will see that the HelloChild component can access router stat
 
 Reference:
 
-https://github.com/supasate/connected-react-router/tree/master/examples/typescript
+https://github.com/supasate/redux-first-history/tree/master/examples/typescript
diff --git a/...s__/connected-react-router-module.test.ts → ...ests__/redux-first-history-module.test.ts b/...s__/connected-react-router-module.test.ts → ...ests__/redux-first-history-module.test.ts
diff --git a/...ected-react-router/components/Counter.tsx → ...edux-first-history/components/Counter.tsx b/...ected-react-router/components/Counter.tsx → ...edux-first-history/components/Counter.tsx
@@ -2,7 +2,7 @@
 import * as React from 'react';
 import { Dispatch } from 'redux';
 import { connect } from 'react-redux';
-import { RouteComponentProps } from 'react-router';
+// import { RouteComponentProps } from 'react-router';
 import { increment, decrement } from '../redux';
 import { State } from '../interfaces';
 

diff --git a/...nnected-react-router/components/Hello.tsx → .../redux-first-history/components/Hello.tsx b/...nnected-react-router/components/Hello.tsx → .../redux-first-history/components/Hello.tsx
diff --git a/...ed-react-router/components/HelloChild.tsx → ...x-first-history/components/HelloChild.tsx b/...ed-react-router/components/HelloChild.tsx → ...x-first-history/components/HelloChild.tsx
@@ -14,9 +14,10 @@ interface HelloChildProps {
 const HelloChildComponent = ({ pathname, search, hash }: HelloChildProps) => (
     <div>
         Hello-Child 23423
-    <ul>
-            <li><Link to={`${CONNECTED_REACT_ROUTER_ROUTES_TYPES.HELLO}?color=Blue&size=40`}>with query string</Link></li>
-            <li><Link to={`${CONNECTED_REACT_ROUTER_ROUTES_TYPES.HELLO}#lovelove`}>with hash</Link></li>
+        <ul>
+            {/* <Link>has problem to load. we may not able to use react-router components outside of forntend-server</Link> */}
+            <li><a href={`${CONNECTED_REACT_ROUTER_ROUTES_TYPES.HELLO}?color=Blue&size=40`}>with query string</a></li>
+            <li><a href={`${CONNECTED_REACT_ROUTER_ROUTES_TYPES.HELLO}#lovelove`}>with hash</a></li>
         </ul>
         <div>
             pathname: {pathname}
@@ -31,9 +32,10 @@ const HelloChildComponent = ({ pathname, search, hash }: HelloChildProps) => (
 );
 
 const mapStateToProps = (state: State) => ({
-    pathname: state.router.location.pathname,
-    search: state.router.location.search,
-    hash: state.router.location.hash,
+    pathname: state.router?.location.pathname,
+    search: state.router?.location.search,
+    hash: state.router?.location.hash,
 });
+console.log('---MAP STATE TO PROPS')
 
 export const HelloChild = connect(mapStateToProps)(HelloChildComponent);
diff --git a/...onnected-react-router/components/Home.tsx → ...c/redux-first-history/components/Home.tsx b/...onnected-react-router/components/Home.tsx → ...c/redux-first-history/components/Home.tsx
diff --git a/...nected-react-router/components/NavBar.tsx → ...redux-first-history/components/NavBar.tsx b/...nected-react-router/components/NavBar.tsx → ...redux-first-history/components/NavBar.tsx
diff --git a/...ected-react-router/components/NoMatch.tsx → ...edux-first-history/components/NoMatch.tsx b/...ected-react-router/components/NoMatch.tsx → ...edux-first-history/components/NoMatch.tsx
diff --git a/...er/src/connected-react-router/compute.tsx → ...owser/src/redux-first-history/compute.tsx b/...er/src/connected-react-router/compute.tsx → ...owser/src/redux-first-history/compute.tsx
@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/no-unsafe-assignment */
 import * as React from 'react';
 import { IMenuPosition, IRoute } from '@common-stack/client-react';
-import loadable  from '@loadable/component'
+import loadable from '@loadable/component'
 
 
 import { getFilteredMenus, getFilteredRoutes } from '../utils';

diff --git a/packages-modules/counter/browser/src/redux-first-history/constants/action-types.ts b/packages-modules/counter/browser/src/redux-first-history/constants/action-types.ts
@@ -0,0 +1,4 @@
+export const enum CONNECTED_REACT_ROUTER_ACTION_TYPES {
+    INCREMENT = '@redux-first-history/INCREMENT',
+    DECREMENT = '@redux-first-history/DECREMENT',
+}
diff --git a/...connected-react-router/constants/index.ts → ...rc/redux-first-history/constants/index.ts b/...connected-react-router/constants/index.ts → ...rc/redux-first-history/constants/index.ts
diff --git a/packages-modules/counter/browser/src/redux-first-history/constants/routes-types.ts b/packages-modules/counter/browser/src/redux-first-history/constants/routes-types.ts
@@ -0,0 +1,6 @@
+export enum CONNECTED_REACT_ROUTER_ROUTES_TYPES {
+    ROOT = '/',
+    HOME = '/redux-first-history',
+    HELLO = '/redux-first-history/hello',
+    COUNTER = '/redux-first-history/counter',
+}
diff --git a/...onnected-react-router/electron-module.tsx → ...c/redux-first-history/electron-module.tsx b/...onnected-react-router/electron-module.tsx → ...c/redux-first-history/electron-module.tsx
diff --git a/.../connected-react-router/index.electron.ts → ...src/redux-first-history/index.electron.ts b/.../connected-react-router/index.electron.ts → ...src/redux-first-history/index.electron.ts
diff --git a/...owser/src/connected-react-router/index.ts → .../browser/src/redux-first-history/index.ts b/...owser/src/connected-react-router/index.ts → .../browser/src/redux-first-history/index.ts
diff --git a/...onnected-react-router/interfaces/index.ts → ...c/redux-first-history/interfaces/index.ts b/...onnected-react-router/interfaces/index.ts → ...c/redux-first-history/interfaces/index.ts
diff --git a/packages-modules/counter/browser/src/redux-first-history/interfaces/state.ts b/packages-modules/counter/browser/src/redux-first-history/interfaces/state.ts
@@ -0,0 +1,6 @@
+// import { RouterState } from 'redux-first-history';
+
+export interface State {
+    connectedReactRouterCounter: number;
+    router?: any;
+}
diff --git a/...ser/src/connected-react-router/module.tsx → ...rowser/src/redux-first-history/module.tsx b/...ser/src/connected-react-router/module.tsx → ...rowser/src/redux-first-history/module.tsx
diff --git a/...ted-react-router/redux/actions/counter.ts → ...ux-first-history/redux/actions/counter.ts b/...ted-react-router/redux/actions/counter.ts → ...ux-first-history/redux/actions/counter.ts
diff --git a/...ected-react-router/redux/actions/index.ts → ...edux-first-history/redux/actions/index.ts b/...ected-react-router/redux/actions/index.ts → ...edux-first-history/redux/actions/index.ts
diff --git a/...src/connected-react-router/redux/index.ts → ...er/src/redux-first-history/redux/index.ts b/...src/connected-react-router/redux/index.ts → ...er/src/redux-first-history/redux/index.ts
diff --git a/...ed-react-router/redux/reducers/counter.ts → ...x-first-history/redux/reducers/counter.ts b/...ed-react-router/redux/reducers/counter.ts → ...x-first-history/redux/reducers/counter.ts
diff --git a/...cted-react-router/redux/reducers/index.ts → ...dux-first-history/redux/reducers/index.ts b/...cted-react-router/redux/reducers/index.ts → ...dux-first-history/redux/reducers/index.ts
diff --git a/packages-modules/counter/electron/src/epics/count-tray-updater.ts b/packages-modules/counter/electron/src/epics/count-tray-updater.ts
@@ -3,7 +3,7 @@ import { ofType } from 'redux-observable';
 import { Observable, of } from 'rxjs';
 import { distinctUntilChanged, map, tap, exhaustMap, pluck, catchError, filter } from 'rxjs/operators';
 import { ElectronTypes } from '@common-stack/client-core';
-import { CONNECTED_REACT_ROUTER_ACTION_TYPES } from '@sample-stack/counter-module-browser/lib/connected-react-router/constants/action-types';
+import { CONNECTED_REACT_ROUTER_ACTION_TYPES } from '@sample-stack/counter-module-browser/lib/redux-first-history/constants/action-types';
 
 export const onCountChangedEpic = (
     action$: Observable<any>,

diff --git a/packages-modules/counter/electron/src/index.ts b/packages-modules/counter/electron/src/index.ts
@@ -1,5 +1,5 @@
 import { Feature } from '@common-stack/client-react';
-import { connectedReactRouterCounter } from '@sample-stack/counter-module-browser/lib/connected-react-router/redux/reducers/counter';
+import { connectedReactRouterCounter } from '@sample-stack/counter-module-browser/lib/redux-first-history/redux/reducers/counter';
 import { onCountChangedEpic } from './epics';
 
 const ElectronMainModule = new Feature({

diff --git a/packages-modules/counter/mobile/src/connected-react-router/constants/action-types.ts b/packages-modules/counter/mobile/src/connected-react-router/constants/action-types.ts
@@ -1,4 +1,4 @@
 export const enum CONNECTED_REACT_ROUTER_ACTION_TYPES {
-    INCREMENT = '@connected-react-router/INCREMENT',
-    DECREMENT = '@connected-react-router/DECREMENT',
+    INCREMENT = '@redux-first-server/INCREMENT',
+    DECREMENT = '@redux-first-server/DECREMENT',
 }
diff --git a/packages-modules/counter/mobile/src/connected-react-router/interfaces/state.ts b/packages-modules/counter/mobile/src/connected-react-router/interfaces/state.ts
@@ -1,6 +1,6 @@
-import { RouterState } from 'connected-react-router';
+// import { RouterState } from 'connected-react-router';
 
 export interface State {
     connectedReactRouterCounter: number;
-    router: RouterState;
+    router: any;
 }
diff --git a/portable-devices/browser-extension/package.json b/portable-devices/browser-extension/package.json
@@ -54,15 +54,13 @@
         "body-parser": "^1.18.2",
         "browser-bunyan": "^1.6.3",
         "classnames": "^2.2.6",
-        "connected-react-router": "^6.9.1",
         "cors": "^2.8.5",
         "dotenv": "^8.2.0",
         "envalid": "~7.2.2",
         "esm": "^3.2.25",
         "flat": "^4.0.0",
         "graphql-tag": "^2.11.0",
         "graphql-ws": "^5.11.2",
-        "history": "^4.10.1",
         "immutability-helper": "^3.0.1",
         "inversify": "^6.0.2",
         "isomorphic-fetch": "^2.2.1",
@@ -78,9 +76,6 @@
         "react-loadable": "^5.5.0",
         "react-redux": "^7.1.3",
         "react-resizable": "^1.10.1",
-        "react-router": "^5.3.3",
-        "react-router-config": "^5.1.1",
-        "react-router-dom": "^5.1.2",
         "react-transition-group": "^4.3.0",
         "redux": "^4.0.5",
         "redux-logger": "^3.0.6",

diff --git a/portable-devices/desktop/package.json b/portable-devices/desktop/package.json
@@ -58,7 +58,6 @@
         "apollo-server-errors": "^3.3.1",
         "check-internet-connected": "^2.0.5",
         "classnames": "^2.2.6",
-        "connected-react-router": "^6.9.1",
         "cors": "^2.8.5",
         "cross-env": "^7.0.3",
         "dotenv": "^8.2.0",
@@ -71,7 +70,6 @@
         "graphql": "^15.0.0",
         "graphql-tag": "^2.11.0",
         "graphql-ws": "^5.11.2",
-        "history": "^4.10.1",
         "immutability-helper": "^3.0.1",
         "inversify": "^6.0.2",
         "inversify-binding-decorators": "^4.0.0",
@@ -86,9 +84,6 @@
         "react-helmet": "^6.1.0",
         "react-loadable": "^5.5.0",
         "react-redux": "^7.1.3",
-        "react-router": "^5.3.3",
-        "react-router-config": "^5.1.1",
-        "react-router-dom": "^5.3.3",
         "react-transition-group": "^4.3.0",
         "redux": "^4.0.5",
         "redux-logger": "^3.0.6",
@@ -119,6 +114,9 @@
         "rimraf": "^3.0.2",
         "workspaces-utils": "^1.2.1"
     },
+    "peerDependencies": {
+        "connected-react-router": "^6.9.3"
+    },
     "buildAbout": {
         "appName": "Fullstack-Pro",
         "apiApp": "https://time-tracker-api.herokuapp.com/"

diff --git a/portable-devices/desktop/src/renderer/app/Tray.tsx b/portable-devices/desktop/src/renderer/app/Tray.tsx
@@ -3,7 +3,7 @@ import { ApolloProvider } from '@apollo/client';
 import { Provider } from 'react-redux';
 import { createClientContainer } from '../config/main/client.service';
 import { epic$ } from '../config/tray/epic-config';
-import { ConnectedRouter } from 'connected-react-router';
+import { HistoryRouter } from 'redux-first-history/rr6';
 import { createReduxStore, history } from '../config/tray/redux-config';
 import { MainRoute } from '../modules/tray';
 import { ErrorBoundary } from './ErrorBoundary';
@@ -44,9 +44,9 @@ export class Main extends React.Component<{}, {}> {
             <ErrorBoundary>
                 <Provider store={store}>
                     <ApolloProvider client={client}>
-                        <ConnectedRouter history={history}>
+                        <HistoryRouter history={history}>
                             <MainRoute />
-                        </ConnectedRouter>,
+                        </HistoryRouter>,
                     </ApolloProvider>
                 </Provider>
             </ErrorBoundary>

diff --git a/portable-devices/mobile/package.json b/portable-devices/mobile/package.json
@@ -83,7 +83,6 @@
         "apollo-link-logger": "^2.0.0",
         "apollo-server-errors": "^3.3.1",
         "big-integer": "^1.6.51",
-        "connected-react-router": "^6.9.1",
         "expo": "~48.0.20",
         "expo-asset": "~8.9.1",
         "expo-build-properties": "~0.6.0",
@@ -102,7 +101,6 @@
         "expo-updates": "~0.16.4",
         "expo-web-browser": "~12.1.1",
         "graphql-ws": "^5.11.2",
-        "history": "^4.10.1",
         "immutability-helper": "^3.0.1",
         "inversify": "^6.0.2",
         "isomorphic-fetch": "^2.2.1",
@@ -131,10 +129,6 @@
         "react-native-web": "~0.18.10",
         "react-native-web-maps": "~0.3.0",
         "react-redux": "^7.1.3",
-        "react-router": "^5.3.3",
-        "react-router-config": "^5.1.1",
-        "react-router-dom": "^5.3.3",
-        "react-router-native": "^5.3.3",
         "redux": "^4.0.5",
         "redux-logger": "^3.0.6",
         "redux-observable": "^1.2.0",

diff --git a/portable-devices/mobile/src/App.tsx b/portable-devices/mobile/src/App.tsx
@@ -7,7 +7,6 @@ import { Provider } from 'react-redux';
 import { MainRoute } from './modules/modules';
 import { persistStore } from 'redux-persist';
 import { PersistGate } from 'redux-persist/integration/react';
-import { ConnectedRouter } from 'connected-react-router';
 import {
   createReduxStore,
   history,
@@ -29,9 +28,7 @@ export default function App() {
           <ApolloProvider client={client}>
             <PersistGate persistor={persistor}>
               <NativeRouter>
-                <ConnectedRouter history={history}>
                   <MainRoute />
-                </ConnectedRouter>
               </NativeRouter>
             </PersistGate>
           </ApolloProvider>

diff --git a/servers/frontend-server/package.json b/servers/frontend-server/package.json
@@ -71,7 +71,6 @@
         "apollo-server-errors": "^3.3.1",
         "classnames": "^2.2.6",
         "compression": "^1.7.4",
-        "connected-react-router": "^6.9.1",
         "cors": "^2.8.5",
         "dotenv": "^8.2.0",
         "envalid": "~7.2.2",
@@ -81,7 +80,7 @@
         "graphql": "^15.0.0",
         "graphql-tag": "^2.11.0",
         "graphql-ws": "^5.11.2",
-        "history": "^4.10.1",
+        "history": "^5.0.0",
         "immutability-helper": "^3.0.1",
         "inversify": "^6.0.2",
         "ioredis": "^4.14.0",
@@ -96,12 +95,12 @@
         "react-helmet-async": "^1.3.0",
         "react-loadable": "^5.5.0",
         "react-redux": "^7.1.3",
-        "react-router": "^5.3.3",
-        "react-router-config": "^5.1.1",
-        "react-router-dom": "^5.3.3",
+        "react-router": "^6.4.0",
+        "react-router-dom": "^6.4.0",
         "react-transition-group": "^4.3.0",
         "redis": "^2.8.0",
         "redux": "^4.0.5",
+        "redux-first-history": "^5.1.1",
         "redux-logger": "^3.0.6",
         "redux-observable": "^1.2.0",
         "redux-persist": "^6.0.0",