From e4226c66b0f813c1e44e90717b4caac082d3895d Mon Sep 17 00:00:00 2001 From: Devmax Date: Wed, 22 Nov 2023 09:10:39 -0800 Subject: [PATCH 1/7] Setup redux-first-history --- .../browser-extension/package.json | 1 - portable-devices/desktop/package.json | 1 - portable-devices/mobile/package.json | 1 - servers/backend-server/package.json | 1 - servers/backend-server/src/modules/module.ts | 4 +- servers/frontend-server/package.json | 9 ++- servers/frontend-server/src/app/Main.tsx | 0 .../src/app/MainReactRouter.tsx | 64 ++++++++++++++++++ .../src/config/base-redux-config.ts | 6 +- .../src/config/redux-config.ts | 33 +++++----- servers/frontend-server/src/index.tsx | 6 +- .../frontend-server/src/modules/module.tsx | 4 +- yarn.lock | 65 +++++++++++-------- 13 files changed, 136 insertions(+), 59 deletions(-) mode change 100755 => 100644 servers/frontend-server/src/app/Main.tsx create mode 100644 servers/frontend-server/src/app/MainReactRouter.tsx diff --git a/portable-devices/browser-extension/package.json b/portable-devices/browser-extension/package.json index 32bf946d9..5c8ddeb6a 100644 --- a/portable-devices/browser-extension/package.json +++ b/portable-devices/browser-extension/package.json @@ -54,7 +54,6 @@ "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", diff --git a/portable-devices/desktop/package.json b/portable-devices/desktop/package.json index b74d76e29..8146cc5b6 100644 --- 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", diff --git a/portable-devices/mobile/package.json b/portable-devices/mobile/package.json index 6626432a2..c33826370 100644 --- 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", diff --git a/servers/backend-server/package.json b/servers/backend-server/package.json index 217649e75..2f51a5a98 100755 --- a/servers/backend-server/package.json +++ b/servers/backend-server/package.json @@ -74,7 +74,6 @@ "@graphql-tools/utils": "^8.0.0", "@graphql-tools/wrap": "^8.4.20", "@sample-stack/core": "link:../../packages/sample-core", - "@sample-stack/counter-module-server": "link:../../packages-modules/counter/server", "@sample-stack/platform-server": "link:../../packages/sample-platform/server", "@sample-stack/store": "link:../../packages/sample-store", "apollo-datasource": "^3.3.1", diff --git a/servers/backend-server/src/modules/module.ts b/servers/backend-server/src/modules/module.ts index a2795a1c7..4e45a487f 100755 --- a/servers/backend-server/src/modules/module.ts +++ b/servers/backend-server/src/modules/module.ts @@ -1,6 +1,6 @@ import { ContainerModule, interfaces } from 'inversify'; import { Feature } from '@common-stack/server-core'; -import CounterModule from '@sample-stack/counter-module-server'; +// import CounterModule from '@sample-stack/counter-module-server'; import { TaggedType } from '@common-stack/core'; import { config } from '../config'; @@ -25,4 +25,4 @@ const DefaultFeature = new Feature({ export const ExternalModules = new Feature({}); -export default new Feature(DefaultFeature, ExternalModules, CounterModule); +export default new Feature(DefaultFeature, ExternalModules); diff --git a/servers/frontend-server/package.json b/servers/frontend-server/package.json index 874d71354..8548810ba 100755 --- 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": "^5.0.1", "isomorphic-fetch": "^2.2.1", @@ -94,11 +93,11 @@ "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", "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", diff --git a/servers/frontend-server/src/app/Main.tsx b/servers/frontend-server/src/app/Main.tsx old mode 100755 new mode 100644 diff --git a/servers/frontend-server/src/app/MainReactRouter.tsx b/servers/frontend-server/src/app/MainReactRouter.tsx new file mode 100644 index 000000000..4cb3c29d3 --- /dev/null +++ b/servers/frontend-server/src/app/MainReactRouter.tsx @@ -0,0 +1,64 @@ +/// +import * as React from 'react'; +import { ApolloProvider } from '@apollo/client'; +import { Provider as ReduxProvider } from 'react-redux'; +import { PersistGate } from 'redux-persist/integration/react'; +import { persistStore } from 'redux-persist'; +import { HelmetProvider } from 'react-helmet-async'; +import { CacheProvider } from '@emotion/react'; +import { HistoryRouter } from "redux-first-history/rr6"; +import createEmotionCache from '../common/createEmotionCache'; +import { createReduxStore } from '../config/redux-config'; +import { createClientContainer } from '../config/client.service'; +import modules, { MainRoute } from '../modules'; + +const { apolloClient: client } = createClientContainer(); + +const { store, history } = createReduxStore(); +const cache = createEmotionCache(); + +export class Main extends React.Component<{}, {}> { + public render() { + if (__SSR__) { + let persistor = persistStore(store); + return ( + + + + + {() => ( + + {modules.getWrappedRoot( + + + , + )} + + )} + + + + + ); + } else { + let persistor = persistStore(store); + return ( + + + + + + + {modules.getWrappedRoot()} + + + + + + + ); + } + } +} + +export default Main; diff --git a/servers/frontend-server/src/config/base-redux-config.ts b/servers/frontend-server/src/config/base-redux-config.ts index 164bfa3fa..5e050ed2f 100644 --- a/servers/frontend-server/src/config/base-redux-config.ts +++ b/servers/frontend-server/src/config/base-redux-config.ts @@ -10,13 +10,13 @@ import { applyMiddleware, StoreEnhancer, Middleware, - compose, Action, ReducersMapObject, PreloadedState, } from 'redux'; import { EpicMiddleware, Epic } from 'redux-observable'; import { persistReducer, PersistConfig } from 'redux-persist'; +import { composeWithDevTools } from "redux-devtools-extension"; interface IReduxStore { scope: 'browser' | 'server' | 'native' | 'ElectronMain'; @@ -81,11 +81,11 @@ export const createReduxStore = ({ if (postMiddleware) { middlewares.push(...postMiddleware); } - + const enhancers: () => StoreEnhancer[] = () => [applyMiddleware(...middlewares)]; const composeEnhancers: any = - ((isDev || isDebug) && isBrowser && window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__) || compose; + ((isDev || isDebug) && isBrowser && window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__) || composeWithDevTools; const rootReducer = combineReducers(reducers); const persistedReducer = persistConfig ? persistReducer(persistConfig, rootReducer) : rootReducer; diff --git a/servers/frontend-server/src/config/redux-config.ts b/servers/frontend-server/src/config/redux-config.ts index 05de62650..05ff14600 100644 --- a/servers/frontend-server/src/config/redux-config.ts +++ b/servers/frontend-server/src/config/redux-config.ts @@ -6,10 +6,11 @@ import storage from 'redux-persist/lib/storage'; import { combineReducers } from 'redux'; import autoMergeLevel2 from 'redux-persist/lib/stateReconciler/autoMergeLevel2'; import { createEpicMiddleware } from 'redux-observable'; -import { connectRouter, routerMiddleware } from 'connected-react-router'; import { persistReducer } from 'redux-persist'; import thunkMiddleware from 'redux-thunk'; import { REDUX_PERSIST_KEY } from '@common-stack/client-core'; +import { createReduxHistoryContext } from "redux-first-history"; +import { createBrowserHistory } from 'history'; import { createReduxStore as createBaseReduxStore } from './base-redux-config'; import modules, { logger } from '../modules'; import { createClientContainer } from './client.service'; @@ -34,20 +35,20 @@ export const persistConfig = { transforms: modules.reduxPersistStateTransformers, }; -export const getStoreReducer = (history: any, reducers: any) => - combineReducers({ - router: connectRouter(history), - ...reducers, - }); - /** * Add any reducers required for this app dirctly in to * `combineReducers` */ -export const createReduxStore = (history) => { - // only in server side, url will be passed. - // middleware - const router = connectRouter(history); +export const createReduxStore = () => { + const { createReduxHistory, routerMiddleware, routerReducer } = createReduxHistoryContext({ + history: createBrowserHistory(), + //other options if needed + }); + + const reducers = { + router: routerReducer, + ...modules.reducers, + }; let store; if ((module as any).hot && (module as any).hot.data && (module as any).hot.data.store) { @@ -58,7 +59,7 @@ export const createReduxStore = (history) => { store.replaceReducer( persistReducer( persistConfig, - getStoreReducer((module as any).hot.data.history || history, modules.reducers), + combineReducers(reducers), ), ); // store.replaceReducer(storeReducer((module as any).hot.data.history || history)); @@ -77,12 +78,14 @@ export const createReduxStore = (history) => { isDev: process.env.NODE_ENV === 'development', initialState, persistConfig, - middleware: [thunkMiddleware, routerMiddleware(history)], + middleware: [thunkMiddleware], epicMiddleware, rootEpic: rootEpic as any, - reducers: { router, ...modules.reducers }, + reducers, }); } + const history = createReduxHistory(store); + if ((module as any).hot) { (module as any).hot.dispose((data) => { // console.log("Saving Redux store:", JSON.stringify(store.getState())); @@ -100,5 +103,5 @@ export const createReduxStore = (history) => { }); } container.bind('ReduxStore').toConstantValue(store); - return { store }; + return { store, history }; }; diff --git a/servers/frontend-server/src/index.tsx b/servers/frontend-server/src/index.tsx index b59f36b71..d9827c3ee 100755 --- a/servers/frontend-server/src/index.tsx +++ b/servers/frontend-server/src/index.tsx @@ -10,7 +10,7 @@ import './config/public-config'; // add any css files -import Main from './app/MainChakra'; +import Main from './app/MainReactRouter'; // Virtual (module as any), generated in-memory by zenjs, contains count of backend rebuilds // tslint:disable-next-line @@ -30,6 +30,7 @@ if (__SSR__) { let frontendReloadCount = 0; const renderApp = ({ key }: { key: number }) => createRoot(rootEl!).render(
); renderApp({ key: frontendReloadCount }); + if (__DEV__) { if ((module as any).hot) { (module as any).hot.accept(); @@ -45,7 +46,7 @@ if (__SSR__) { } }); // but if RHL not working we can uncomment below code to make normal HMR to refresh the page - (module as any).hot.accept('./app/Main', () => { + (module as any).hot.accept('./app/MainReactRouter', () => { try { console.log('Updating front-end'); frontendReloadCount = (frontendReloadCount || 0) + 1; @@ -57,4 +58,5 @@ if (__SSR__) { }); } } + } diff --git a/servers/frontend-server/src/modules/module.tsx b/servers/frontend-server/src/modules/module.tsx index 9637d4536..17be673bf 100755 --- a/servers/frontend-server/src/modules/module.tsx +++ b/servers/frontend-server/src/modules/module.tsx @@ -1,12 +1,12 @@ import * as React from 'react'; import { Layout, ConfigProvider } from 'antd'; -import counterModules from '@sample-stack/counter-module-browser'; +// import counterModules from '@sample-stack/counter-module-browser'; import { Feature, FeatureWithRouterFactory } from '@common-stack/client-react'; import { SiderMenu } from './layout'; import '@sample-stack/assets'; import { ErrorBoundary } from '../app/ErrorBoundary'; -const features = new Feature(FeatureWithRouterFactory, counterModules); +const features = new Feature(FeatureWithRouterFactory); // console.log(features.getMenus()); diff --git a/yarn.lock b/yarn.lock index 094740ed1..3f8461641 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2039,6 +2039,13 @@ dependencies: regenerator-runtime "^0.14.0" +"@babel/runtime@^7.7.6": + version "7.23.4" + resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.23.4.tgz#36fa1d2b36db873d25ec631dcc4923fdc1cf2e2e" + integrity sha512-2Yv65nlWnWlSpe3fXEyX5i7fx5kIKo4Qbcj+hMO0odwaneFjfXw5fdum+4yL20O0QiaHpia0cYQ9xpNMqrBwHg== + dependencies: + regenerator-runtime "^0.14.0" + "@babel/template@^7.0.0", "@babel/template@^7.22.15", "@babel/template@^7.22.5", "@babel/template@^7.3.3": version "7.22.15" resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.22.15.tgz#09576efc3830f0430f4548ef971dde1350ef2f38" @@ -6257,6 +6264,11 @@ react-json-tree "^0.18.0" redux-devtools-themes "^1.0.0" +"@remix-run/router@1.12.0": + version "1.12.0" + resolved "https://registry.yarnpkg.com/@remix-run/router/-/router-1.12.0.tgz#e89b64b6fa97a8a5b740a4c38c2904b80f1f229a" + integrity sha512-2hXv036Bux90e1GXTWSMfNzfDDK8LA8JYEWfyHxzvwdp6GyoWEovKc9cotb3KCKmkdwsIBuFGX7ScTWyiHv7Eg== + "@repeaterjs/repeater@^3.0.4": version "3.0.4" resolved "https://registry.yarnpkg.com/@repeaterjs/repeater/-/repeater-3.0.4.tgz#a04d63f4d1bf5540a41b01a921c9a7fddc3bd1ca" @@ -12161,17 +12173,6 @@ connect@^3.6.5, connect@^3.7.0: parseurl "~1.3.3" utils-merge "1.0.1" -connected-react-router@^6.9.1: - version "6.9.3" - resolved "https://registry.yarnpkg.com/connected-react-router/-/connected-react-router-6.9.3.tgz#72300aca9f9d6f38e1f4a2901572faa02adec972" - integrity sha512-4ThxysOiv/R2Dc4Cke1eJwjKwH1Y51VDwlOrOfs1LjpdYOVvCNjNkZDayo7+sx42EeGJPQUNchWkjAIJdXGIOQ== - dependencies: - lodash.isequalwith "^4.4.0" - prop-types "^15.7.2" - optionalDependencies: - immutable "^3.8.1 || ^4.0.0" - seamless-immutable "^7.1.3" - connection-parse@0.0.x: version "0.0.7" resolved "https://registry.yarnpkg.com/connection-parse/-/connection-parse-0.0.7.tgz#18e7318aab06a699267372b10c5226d25a1c9a69" @@ -17529,6 +17530,13 @@ history@^4.10.1, history@^4.9.0: tiny-warning "^1.0.0" value-equal "^1.0.1" +history@^5.0.0: + version "5.3.0" + resolved "https://registry.yarnpkg.com/history/-/history-5.3.0.tgz#1548abaa245ba47992f063a0783db91ef201c73b" + integrity sha512-ZqaKwjjrAYUYfLG+htGaIIZ4nioX2L70ZUMIFysS3xvBsSG4x/n1V6TXV3N8ZYNuFGlDirFg32T7B6WOUPDYcQ== + dependencies: + "@babel/runtime" "^7.7.6" + hoist-non-react-statics@^2.3.1: version "2.5.5" resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-2.5.5.tgz#c5903cf409c0dfd908f388e619d86b9c1174cb47" @@ -18033,11 +18041,6 @@ immutable@^3.7.4: resolved "https://registry.yarnpkg.com/immutable/-/immutable-3.8.2.tgz#c2439951455bb39913daf281376f1530e104adf3" integrity sha512-15gZoQ38eYjEjxkorfbcgBKBL6R7T459OuK+CpcWt7O3KF4uPCx2tD0uFETlUDIyo+1789crbMhTvQBSR5yBMg== -"immutable@^3.8.1 || ^4.0.0": - version "4.3.4" - resolved "https://registry.yarnpkg.com/immutable/-/immutable-4.3.4.tgz#2e07b33837b4bb7662f288c244d1ced1ef65a78f" - integrity sha512-fsXeu4J4i6WNWSikpI88v/PcVflZz+6kMhUfIwc5SY+poQRPnaf5V7qds6SUyUN3cVxEzuCab7QIoLOQ+DQ1wA== - immutable@~3.7.4, immutable@~3.7.6: version "3.7.6" resolved "https://registry.yarnpkg.com/immutable/-/immutable-3.7.6.tgz#13b4d3cb12befa15482a26fe1b2ebae640071e4b" @@ -21272,11 +21275,6 @@ lodash.isequal@^4.0.0, lodash.isequal@^4.5.0: resolved "https://registry.yarnpkg.com/lodash.isequal/-/lodash.isequal-4.5.0.tgz#415c4478f2bcc30120c22ce10ed3226f7d3e18e0" integrity sha512-pDo3lu8Jhfjqls6GkMgpahsF9kCyayhgykjyLMNFTKWrpVdAQtYyB4muAMWozBB4ig/dtWAmsMxLEI8wuz+DYQ== -lodash.isequalwith@^4.4.0: - version "4.4.0" - resolved "https://registry.yarnpkg.com/lodash.isequalwith/-/lodash.isequalwith-4.4.0.tgz#266726ddd528f854f21f4ea98a065606e0fbc6b0" - integrity sha512-dcZON0IalGBpRmJBmMkaoV7d3I80R2O+FrzsZyHdNSFrANq/cgDqKQNmAHE8UEj4+QYWwwhkQOVdLHiAopzlsQ== - lodash.isinteger@^4.0.4: version "4.0.4" resolved "https://registry.yarnpkg.com/lodash.isinteger/-/lodash.isinteger-4.0.4.tgz#619c0af3d03f8b04c31f5882840b77b11cd68343" @@ -27029,6 +27027,14 @@ react-router-dom@^5.1.2, react-router-dom@^5.3.3: tiny-invariant "^1.0.2" tiny-warning "^1.0.0" +react-router-dom@^6.4.0: + version "6.19.0" + resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-6.19.0.tgz#ee807e36ae7dd954db7a3f770e38b7cc026c66a8" + integrity sha512-N6dWlcgL2w0U5HZUUqU2wlmOrSb3ighJmtQ438SWbhB1yuLTXQ8yyTBMK3BSvVjp7gBtKurT554nCtMOgxCZmQ== + dependencies: + "@remix-run/router" "1.12.0" + react-router "6.19.0" + react-router-native@^5.3.3: version "5.3.4" resolved "https://registry.yarnpkg.com/react-router-native/-/react-router-native-5.3.4.tgz#17e78c94776e49ada961118e21838964ab8e26b4" @@ -27052,6 +27058,13 @@ react-router@5.3.4, react-router@^5.3.3: tiny-invariant "^1.0.2" tiny-warning "^1.0.0" +react-router@6.19.0, react-router@^6.4.0: + version "6.19.0" + resolved "https://registry.yarnpkg.com/react-router/-/react-router-6.19.0.tgz#6d5062fa33495859daca98d86292ab03b037a9ca" + integrity sha512-0W63PKCZ7+OuQd7Tm+RbkI8kCLmn4GPjDbX61tWljPxWgqTKlEpeQUwPkT1DRjYhF8KSihK0hQpmhU4uxVMcdw== + dependencies: + "@remix-run/router" "1.12.0" + react-shallow-renderer@^16.13.1, react-shallow-renderer@^16.15.0: version "16.15.0" resolved "https://registry.yarnpkg.com/react-shallow-renderer/-/react-shallow-renderer-16.15.0.tgz#48fb2cf9b23d23cde96708fe5273a7d3446f4457" @@ -27442,6 +27455,11 @@ redux-devtools-themes@^1.0.0: dependencies: base16 "^1.0.0" +redux-first-history@^5.1.1: + version "5.1.1" + resolved "https://registry.yarnpkg.com/redux-first-history/-/redux-first-history-5.1.1.tgz#6aec4a3eaa52dbaaf2683776324d9219b182fab4" + integrity sha512-ujVHv+y9wC2rqavS5tLiSu6zkw+VYrEea+/ggwVTRuutadEtwxSRlaK19ry/PTLSQtFuUF1Xu+plL5erD4roVw== + redux-logger@^3.0.6: version "3.0.6" resolved "https://registry.yarnpkg.com/redux-logger/-/redux-logger-3.0.6.tgz#f7555966f3098f3c88604c449cf0baf5778274bf" @@ -28379,11 +28397,6 @@ scuid@^1.1.0: resolved "https://registry.yarnpkg.com/scuid/-/scuid-1.1.0.tgz#d3f9f920956e737a60f72d0e4ad280bf324d5dab" integrity sha512-MuCAyrGZcTLfQoH2XoBlQ8C6bzwN88XT/0slOGz0pn8+gIP85BOAfYa44ZXQUTOwRwPU0QvgU+V+OSajl/59Xg== -seamless-immutable@^7.1.3: - version "7.1.4" - resolved "https://registry.yarnpkg.com/seamless-immutable/-/seamless-immutable-7.1.4.tgz#6e9536def083ddc4dea0207d722e0e80d0f372f8" - integrity sha512-XiUO1QP4ki4E2PHegiGAlu6r82o5A+6tRh7IkGGTVg/h+UoeX4nFBeCGPOhb4CYjvkqsfm/TUtvOMYC1xmV30A== - selderee@^0.6.0: version "0.6.0" resolved "https://registry.yarnpkg.com/selderee/-/selderee-0.6.0.tgz#f3bee66cfebcb6f33df98e4a1df77388b42a96f7" From 93e2cb398c23ebf62fed299e932cfd8cc43a2644 Mon Sep 17 00:00:00 2001 From: Devmax Date: Thu, 23 Nov 2023 09:44:28 -0800 Subject: [PATCH 2/7] Update counter-module --- .../components/HelloChild.tsx | 6 ++--- .../src/connected-react-router/compute.tsx | 2 +- .../interfaces/state.ts | 4 ++-- packages-modules/counter/browser/src/index.ts | 8 +++---- servers/backend-server/package.json | 1 + servers/backend-server/src/modules/module.ts | 4 ++-- .../src/config/redux-config.ts | 7 +++--- .../frontend-server/src/modules/module.tsx | 24 ++++++++++++------- 8 files changed, 33 insertions(+), 23 deletions(-) diff --git a/packages-modules/counter/browser/src/connected-react-router/components/HelloChild.tsx b/packages-modules/counter/browser/src/connected-react-router/components/HelloChild.tsx index c1aac8cfa..aa2d671ee 100755 --- a/packages-modules/counter/browser/src/connected-react-router/components/HelloChild.tsx +++ b/packages-modules/counter/browser/src/connected-react-router/components/HelloChild.tsx @@ -31,9 +31,9 @@ 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, }); export const HelloChild = connect(mapStateToProps)(HelloChildComponent); diff --git a/packages-modules/counter/browser/src/connected-react-router/compute.tsx b/packages-modules/counter/browser/src/connected-react-router/compute.tsx index 4a03969a8..24118145b 100755 --- a/packages-modules/counter/browser/src/connected-react-router/compute.tsx +++ b/packages-modules/counter/browser/src/connected-react-router/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/connected-react-router/interfaces/state.ts b/packages-modules/counter/browser/src/connected-react-router/interfaces/state.ts index f5de723d6..0eb7947a0 100755 --- a/packages-modules/counter/browser/src/connected-react-router/interfaces/state.ts +++ b/packages-modules/counter/browser/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/packages-modules/counter/browser/src/index.ts b/packages-modules/counter/browser/src/index.ts index 8a83c5ff2..f1529b68f 100755 --- 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 './connected-react-router'; import emotion from './emotion'; -import { ElectronTrayModule } from './connected-react-router/index.electron'; +// import { ElectronTrayModule } from './connected-react-router/index.electron'; -export default new Feature(Common, ConnectedReactRouter, ApolloCounter, emotion); -export { ElectronTrayModule }; +export default new Feature(Common, ApolloCounter, emotion); +// export { ElectronTrayModule }; diff --git a/servers/backend-server/package.json b/servers/backend-server/package.json index 2f51a5a98..217649e75 100755 --- a/servers/backend-server/package.json +++ b/servers/backend-server/package.json @@ -74,6 +74,7 @@ "@graphql-tools/utils": "^8.0.0", "@graphql-tools/wrap": "^8.4.20", "@sample-stack/core": "link:../../packages/sample-core", + "@sample-stack/counter-module-server": "link:../../packages-modules/counter/server", "@sample-stack/platform-server": "link:../../packages/sample-platform/server", "@sample-stack/store": "link:../../packages/sample-store", "apollo-datasource": "^3.3.1", diff --git a/servers/backend-server/src/modules/module.ts b/servers/backend-server/src/modules/module.ts index 4e45a487f..a2795a1c7 100755 --- a/servers/backend-server/src/modules/module.ts +++ b/servers/backend-server/src/modules/module.ts @@ -1,6 +1,6 @@ import { ContainerModule, interfaces } from 'inversify'; import { Feature } from '@common-stack/server-core'; -// import CounterModule from '@sample-stack/counter-module-server'; +import CounterModule from '@sample-stack/counter-module-server'; import { TaggedType } from '@common-stack/core'; import { config } from '../config'; @@ -25,4 +25,4 @@ const DefaultFeature = new Feature({ export const ExternalModules = new Feature({}); -export default new Feature(DefaultFeature, ExternalModules); +export default new Feature(DefaultFeature, ExternalModules, CounterModule); diff --git a/servers/frontend-server/src/config/redux-config.ts b/servers/frontend-server/src/config/redux-config.ts index 05ff14600..63ca2e768 100644 --- a/servers/frontend-server/src/config/redux-config.ts +++ b/servers/frontend-server/src/config/redux-config.ts @@ -40,11 +40,11 @@ export const persistConfig = { * `combineReducers` */ export const createReduxStore = () => { - const { createReduxHistory, routerMiddleware, routerReducer } = createReduxHistoryContext({ + const { createReduxHistory, routerMiddleware, routerReducer } = createReduxHistoryContext({ history: createBrowserHistory(), //other options if needed }); - + const reducers = { router: routerReducer, ...modules.reducers, @@ -78,12 +78,13 @@ export const createReduxStore = () => { isDev: process.env.NODE_ENV === 'development', initialState, persistConfig, - middleware: [thunkMiddleware], + middleware: [thunkMiddleware, routerMiddleware], epicMiddleware, rootEpic: rootEpic as any, reducers, }); } + const history = createReduxHistory(store); if ((module as any).hot) { diff --git a/servers/frontend-server/src/modules/module.tsx b/servers/frontend-server/src/modules/module.tsx index 17be673bf..cf0dfab21 100755 --- a/servers/frontend-server/src/modules/module.tsx +++ b/servers/frontend-server/src/modules/module.tsx @@ -1,17 +1,25 @@ import * as React from 'react'; import { Layout, ConfigProvider } from 'antd'; -// import counterModules from '@sample-stack/counter-module-browser'; -import { Feature, FeatureWithRouterFactory } from '@common-stack/client-react'; +import counterModules from '@sample-stack/counter-module-browser'; +import { Feature, FeatureWithRouterFactory, sortKeys } from '@common-stack/client-react'; +import { useRoutes } from "react-router-dom"; import { SiderMenu } from './layout'; import '@sample-stack/assets'; import { ErrorBoundary } from '../app/ErrorBoundary'; -const features = new Feature(FeatureWithRouterFactory); +const features = new Feature(FeatureWithRouterFactory, counterModules); -// console.log(features.getMenus()); +// console.log(features.getRoutes()); +// features.getRoutes() shouyld be updated as following, this code will be replaced after that. +let routeConfig = sortKeys(features.routeConfig) + .map((route) => Object.values(route)[0]) + .map((route) => ({ ...route, Component: route.component })); +console.log(routeConfig); -export const MainRoute = (props) => ( - +export const MainRoute = (props) => { + const routes = useRoutes(routeConfig); + + return (
- {features.getRoutes()} + {routes}
-); +} export default features; From 8772fc164fb7ad43e3876c50e5c6520e8eb0859a Mon Sep 17 00:00:00 2001 From: Devmax Date: Thu, 23 Nov 2023 10:38:04 -0800 Subject: [PATCH 3/7] Add couter-module --- packages-modules/counter/browser/package.json | 6 ++++-- .../src/connected-react-router/components/Counter.tsx | 2 +- .../connected-react-router/components/HelloChild.tsx | 7 ++++--- .../browser/src/connected-react-router/compute.tsx | 10 ++++++---- packages-modules/counter/browser/src/index.ts | 8 ++++---- 5 files changed, 19 insertions(+), 14 deletions(-) diff --git a/packages-modules/counter/browser/package.json b/packages-modules/counter/browser/package.json index 660cc2805..114b3518f 100755 --- 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" } -} +} \ No newline at end of file diff --git a/packages-modules/counter/browser/src/connected-react-router/components/Counter.tsx b/packages-modules/counter/browser/src/connected-react-router/components/Counter.tsx index 16f1a4519..465397345 100755 --- a/packages-modules/counter/browser/src/connected-react-router/components/Counter.tsx +++ b/packages-modules/counter/browser/src/connected-react-router/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/packages-modules/counter/browser/src/connected-react-router/components/HelloChild.tsx b/packages-modules/counter/browser/src/connected-react-router/components/HelloChild.tsx index aa2d671ee..5d401249f 100755 --- a/packages-modules/counter/browser/src/connected-react-router/components/HelloChild.tsx +++ b/packages-modules/counter/browser/src/connected-react-router/components/HelloChild.tsx @@ -14,9 +14,10 @@ interface HelloChildProps { const HelloChildComponent = ({ pathname, search, hash }: HelloChildProps) => (
Hello-Child 23423 -
    -
  • with query string
    • -
  • with hash
    • +
      + {/* has problem to load. we may not able to use react-router components outside of forntend-server */} +
    • with query string
      • +
    • with hash
    pathname: {pathname} diff --git a/packages-modules/counter/browser/src/connected-react-router/compute.tsx b/packages-modules/counter/browser/src/connected-react-router/compute.tsx index 24118145b..fb6e9209d 100755 --- a/packages-modules/counter/browser/src/connected-react-router/compute.tsx +++ b/packages-modules/counter/browser/src/connected-react-router/compute.tsx @@ -7,11 +7,13 @@ import loadable from '@loadable/component' import { getFilteredMenus, getFilteredRoutes } from '../utils'; import { CONNECTED_REACT_ROUTER_ROUTES_TYPES } from './constants'; +import Dashboard from '../common/components/Dashboard'; +import Counter from './components/Counter'; +import Hello from './components/Hello'; - -const Dashboard = loadable(() => import('../common/components/Dashboard')); -const Counter = loadable(() => import('./components/Counter')); -const Hello = loadable(() => import('./components/Hello')); +// const Dashboard = loadable(() => import('../common/components/Dashboard')); +// const Counter = loadable(() => import('./components/Counter')); +// const Hello = loadable(() => import('./components/Hello')); export const counterPageStore: IRoute[] = [ { diff --git a/packages-modules/counter/browser/src/index.ts b/packages-modules/counter/browser/src/index.ts index f1529b68f..8a83c5ff2 100755 --- 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 './connected-react-router'; import emotion from './emotion'; -// import { ElectronTrayModule } from './connected-react-router/index.electron'; +import { ElectronTrayModule } from './connected-react-router/index.electron'; -export default new Feature(Common, ApolloCounter, emotion); -// export { ElectronTrayModule }; +export default new Feature(Common, ConnectedReactRouter, ApolloCounter, emotion); +export { ElectronTrayModule }; From c8ba09595e4af93dc146bb738ce1bb8a0e8d26ed Mon Sep 17 00:00:00 2001 From: Devmax Date: Thu, 23 Nov 2023 10:49:13 -0800 Subject: [PATCH 4/7] updates --- .../browser/src/connected-react-router/compute.tsx | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/packages-modules/counter/browser/src/connected-react-router/compute.tsx b/packages-modules/counter/browser/src/connected-react-router/compute.tsx index fb6e9209d..24118145b 100755 --- a/packages-modules/counter/browser/src/connected-react-router/compute.tsx +++ b/packages-modules/counter/browser/src/connected-react-router/compute.tsx @@ -7,13 +7,11 @@ import loadable from '@loadable/component' import { getFilteredMenus, getFilteredRoutes } from '../utils'; import { CONNECTED_REACT_ROUTER_ROUTES_TYPES } from './constants'; -import Dashboard from '../common/components/Dashboard'; -import Counter from './components/Counter'; -import Hello from './components/Hello'; -// const Dashboard = loadable(() => import('../common/components/Dashboard')); -// const Counter = loadable(() => import('./components/Counter')); -// const Hello = loadable(() => import('./components/Hello')); + +const Dashboard = loadable(() => import('../common/components/Dashboard')); +const Counter = loadable(() => import('./components/Counter')); +const Hello = loadable(() => import('./components/Hello')); export const counterPageStore: IRoute[] = [ { From 07462e1c6d417a031dcb15fe0939db523311cf9b Mon Sep 17 00:00:00 2001 From: veera Date: Sun, 10 Dec 2023 17:51:13 -0500 Subject: [PATCH 5/7] update name --- ...connected-react-router-module.test.ts.snap | 39 ------------------- .../constants/action-types.ts | 4 -- .../constants/routes-types.ts | 6 --- packages-modules/counter/browser/src/index.ts | 4 +- .../README.md | 2 +- .../redux-first-history-module.test.ts} | 0 .../components/Counter.tsx | 0 .../components/Hello.tsx | 0 .../components/HelloChild.tsx | 1 + .../components/Home.tsx | 0 .../components/NavBar.tsx | 0 .../components/NoMatch.tsx | 0 .../compute.tsx | 0 .../constants/action-types.ts | 4 ++ .../constants/index.ts | 0 .../constants/routes-types.ts | 6 +++ .../electron-module.tsx | 0 .../index.electron.ts | 0 .../index.ts | 0 .../interfaces/index.ts | 0 .../interfaces/state.ts | 2 +- .../module.tsx | 0 .../redux/actions/counter.ts | 0 .../redux/actions/index.ts | 0 .../redux/index.ts | 0 .../redux/reducers/counter.ts | 0 .../redux/reducers/index.ts | 0 27 files changed, 15 insertions(+), 53 deletions(-) delete mode 100755 packages-modules/counter/browser/src/connected-react-router/__tests__/__snapshots__/connected-react-router-module.test.ts.snap delete mode 100755 packages-modules/counter/browser/src/connected-react-router/constants/action-types.ts delete mode 100755 packages-modules/counter/browser/src/connected-react-router/constants/routes-types.ts rename packages-modules/counter/browser/src/{connected-react-router => redux-first-history}/README.md (79%) rename packages-modules/counter/browser/src/{connected-react-router/__tests__/connected-react-router-module.test.ts => redux-first-history/__tests__/redux-first-history-module.test.ts} (100%) rename packages-modules/counter/browser/src/{connected-react-router => redux-first-history}/components/Counter.tsx (100%) rename packages-modules/counter/browser/src/{connected-react-router => redux-first-history}/components/Hello.tsx (100%) rename packages-modules/counter/browser/src/{connected-react-router => redux-first-history}/components/HelloChild.tsx (97%) rename packages-modules/counter/browser/src/{connected-react-router => redux-first-history}/components/Home.tsx (100%) rename packages-modules/counter/browser/src/{connected-react-router => redux-first-history}/components/NavBar.tsx (100%) rename packages-modules/counter/browser/src/{connected-react-router => redux-first-history}/components/NoMatch.tsx (100%) rename packages-modules/counter/browser/src/{connected-react-router => redux-first-history}/compute.tsx (100%) create mode 100755 packages-modules/counter/browser/src/redux-first-history/constants/action-types.ts rename packages-modules/counter/browser/src/{connected-react-router => redux-first-history}/constants/index.ts (100%) create mode 100755 packages-modules/counter/browser/src/redux-first-history/constants/routes-types.ts rename packages-modules/counter/browser/src/{connected-react-router => redux-first-history}/electron-module.tsx (100%) rename packages-modules/counter/browser/src/{connected-react-router => redux-first-history}/index.electron.ts (100%) rename packages-modules/counter/browser/src/{connected-react-router => redux-first-history}/index.ts (100%) rename packages-modules/counter/browser/src/{connected-react-router => redux-first-history}/interfaces/index.ts (100%) rename packages-modules/counter/browser/src/{connected-react-router => redux-first-history}/interfaces/state.ts (60%) rename packages-modules/counter/browser/src/{connected-react-router => redux-first-history}/module.tsx (100%) rename packages-modules/counter/browser/src/{connected-react-router => redux-first-history}/redux/actions/counter.ts (100%) rename packages-modules/counter/browser/src/{connected-react-router => redux-first-history}/redux/actions/index.ts (100%) rename packages-modules/counter/browser/src/{connected-react-router => redux-first-history}/redux/index.ts (100%) rename packages-modules/counter/browser/src/{connected-react-router => redux-first-history}/redux/reducers/counter.ts (100%) rename packages-modules/counter/browser/src/{connected-react-router => redux-first-history}/redux/reducers/index.ts (100%) diff --git a/packages-modules/counter/browser/src/connected-react-router/__tests__/__snapshots__/connected-react-router-module.test.ts.snap b/packages-modules/counter/browser/src/connected-react-router/__tests__/__snapshots__/connected-react-router-module.test.ts.snap deleted file mode 100755 index 7197ce014..000000000 --- a/packages-modules/counter/browser/src/connected-react-router/__tests__/__snapshots__/connected-react-router-module.test.ts.snap +++ /dev/null @@ -1,39 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`connector modules module configuredRoutes 1`] = ` -Array [ - Object { - "component": [Function], - "exact": true, - "path": "/connected-react-router", - "routes": Array [ - Object { - "component": [Function], - "exact": true, - "path": "/connected-react-router/hello", - }, - Object { - "component": Object { - "$$typeof": Symbol(react.memo), - "WrappedComponent": [Function], - "compare": null, - "displayName": "Connect(Counter)", - "type": [Function], - }, - "exact": true, - "path": "/connected-react-router/counter", - }, - ], - }, -] -`; - -exports[`connector modules module routes 1`] = ` - - - -`; 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 deleted file mode 100755 index f73efec22..000000000 --- a/packages-modules/counter/browser/src/connected-react-router/constants/action-types.ts +++ /dev/null @@ -1,4 +0,0 @@ -export const enum CONNECTED_REACT_ROUTER_ACTION_TYPES { - INCREMENT = '@connected-react-router/INCREMENT', - DECREMENT = '@connected-react-router/DECREMENT', -} 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 deleted file mode 100755 index b4694d0de..000000000 --- a/packages-modules/counter/browser/src/connected-react-router/constants/routes-types.ts +++ /dev/null @@ -1,6 +0,0 @@ -export enum CONNECTED_REACT_ROUTER_ROUTES_TYPES { - ROOT = '/', - HOME = '/connected-react-router', - HELLO = '/connected-react-router/hello', - COUNTER = '/connected-react-router/counter', -} diff --git a/packages-modules/counter/browser/src/index.ts b/packages-modules/counter/browser/src/index.ts index 8a83c5ff2..01aed16b8 100755 --- 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/packages-modules/counter/browser/src/connected-react-router/README.md b/packages-modules/counter/browser/src/redux-first-history/README.md similarity index 79% rename from packages-modules/counter/browser/src/connected-react-router/README.md rename to packages-modules/counter/browser/src/redux-first-history/README.md index c3e235afe..b43f6b1a7 100755 --- a/packages-modules/counter/browser/src/connected-react-router/README.md +++ b/packages-modules/counter/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 \ No newline at end of file +https://github.com/supasate/redux-first-history/tree/master/examples/typescript \ No newline at end of file diff --git a/packages-modules/counter/browser/src/connected-react-router/__tests__/connected-react-router-module.test.ts b/packages-modules/counter/browser/src/redux-first-history/__tests__/redux-first-history-module.test.ts similarity index 100% rename from packages-modules/counter/browser/src/connected-react-router/__tests__/connected-react-router-module.test.ts rename to packages-modules/counter/browser/src/redux-first-history/__tests__/redux-first-history-module.test.ts diff --git a/packages-modules/counter/browser/src/connected-react-router/components/Counter.tsx b/packages-modules/counter/browser/src/redux-first-history/components/Counter.tsx similarity index 100% rename from packages-modules/counter/browser/src/connected-react-router/components/Counter.tsx rename to packages-modules/counter/browser/src/redux-first-history/components/Counter.tsx diff --git a/packages-modules/counter/browser/src/connected-react-router/components/Hello.tsx b/packages-modules/counter/browser/src/redux-first-history/components/Hello.tsx similarity index 100% rename from packages-modules/counter/browser/src/connected-react-router/components/Hello.tsx rename to packages-modules/counter/browser/src/redux-first-history/components/Hello.tsx diff --git a/packages-modules/counter/browser/src/connected-react-router/components/HelloChild.tsx b/packages-modules/counter/browser/src/redux-first-history/components/HelloChild.tsx similarity index 97% rename from packages-modules/counter/browser/src/connected-react-router/components/HelloChild.tsx rename to packages-modules/counter/browser/src/redux-first-history/components/HelloChild.tsx index 5d401249f..6bdbe3a72 100755 --- a/packages-modules/counter/browser/src/connected-react-router/components/HelloChild.tsx +++ b/packages-modules/counter/browser/src/redux-first-history/components/HelloChild.tsx @@ -36,5 +36,6 @@ const mapStateToProps = (state: State) => ({ 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/packages-modules/counter/browser/src/connected-react-router/components/Home.tsx b/packages-modules/counter/browser/src/redux-first-history/components/Home.tsx similarity index 100% rename from packages-modules/counter/browser/src/connected-react-router/components/Home.tsx rename to packages-modules/counter/browser/src/redux-first-history/components/Home.tsx diff --git a/packages-modules/counter/browser/src/connected-react-router/components/NavBar.tsx b/packages-modules/counter/browser/src/redux-first-history/components/NavBar.tsx similarity index 100% rename from packages-modules/counter/browser/src/connected-react-router/components/NavBar.tsx rename to packages-modules/counter/browser/src/redux-first-history/components/NavBar.tsx diff --git a/packages-modules/counter/browser/src/connected-react-router/components/NoMatch.tsx b/packages-modules/counter/browser/src/redux-first-history/components/NoMatch.tsx similarity index 100% rename from packages-modules/counter/browser/src/connected-react-router/components/NoMatch.tsx rename to packages-modules/counter/browser/src/redux-first-history/components/NoMatch.tsx diff --git a/packages-modules/counter/browser/src/connected-react-router/compute.tsx b/packages-modules/counter/browser/src/redux-first-history/compute.tsx similarity index 100% rename from packages-modules/counter/browser/src/connected-react-router/compute.tsx rename to packages-modules/counter/browser/src/redux-first-history/compute.tsx 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 new file mode 100755 index 000000000..c76427a70 --- /dev/null +++ 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/packages-modules/counter/browser/src/connected-react-router/constants/index.ts b/packages-modules/counter/browser/src/redux-first-history/constants/index.ts similarity index 100% rename from packages-modules/counter/browser/src/connected-react-router/constants/index.ts rename to packages-modules/counter/browser/src/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 new file mode 100755 index 000000000..89ec17f63 --- /dev/null +++ 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/packages-modules/counter/browser/src/connected-react-router/electron-module.tsx b/packages-modules/counter/browser/src/redux-first-history/electron-module.tsx similarity index 100% rename from packages-modules/counter/browser/src/connected-react-router/electron-module.tsx rename to packages-modules/counter/browser/src/redux-first-history/electron-module.tsx diff --git a/packages-modules/counter/browser/src/connected-react-router/index.electron.ts b/packages-modules/counter/browser/src/redux-first-history/index.electron.ts similarity index 100% rename from packages-modules/counter/browser/src/connected-react-router/index.electron.ts rename to packages-modules/counter/browser/src/redux-first-history/index.electron.ts diff --git a/packages-modules/counter/browser/src/connected-react-router/index.ts b/packages-modules/counter/browser/src/redux-first-history/index.ts similarity index 100% rename from packages-modules/counter/browser/src/connected-react-router/index.ts rename to packages-modules/counter/browser/src/redux-first-history/index.ts diff --git a/packages-modules/counter/browser/src/connected-react-router/interfaces/index.ts b/packages-modules/counter/browser/src/redux-first-history/interfaces/index.ts similarity index 100% rename from packages-modules/counter/browser/src/connected-react-router/interfaces/index.ts rename to packages-modules/counter/browser/src/redux-first-history/interfaces/index.ts diff --git a/packages-modules/counter/browser/src/connected-react-router/interfaces/state.ts b/packages-modules/counter/browser/src/redux-first-history/interfaces/state.ts similarity index 60% rename from packages-modules/counter/browser/src/connected-react-router/interfaces/state.ts rename to packages-modules/counter/browser/src/redux-first-history/interfaces/state.ts index 0eb7947a0..28d4f804d 100755 --- a/packages-modules/counter/browser/src/connected-react-router/interfaces/state.ts +++ b/packages-modules/counter/browser/src/redux-first-history/interfaces/state.ts @@ -1,4 +1,4 @@ -// import { RouterState } from 'connected-react-router'; +// import { RouterState } from 'redux-first-history'; export interface State { connectedReactRouterCounter: number; diff --git a/packages-modules/counter/browser/src/connected-react-router/module.tsx b/packages-modules/counter/browser/src/redux-first-history/module.tsx similarity index 100% rename from packages-modules/counter/browser/src/connected-react-router/module.tsx rename to packages-modules/counter/browser/src/redux-first-history/module.tsx diff --git a/packages-modules/counter/browser/src/connected-react-router/redux/actions/counter.ts b/packages-modules/counter/browser/src/redux-first-history/redux/actions/counter.ts similarity index 100% rename from packages-modules/counter/browser/src/connected-react-router/redux/actions/counter.ts rename to packages-modules/counter/browser/src/redux-first-history/redux/actions/counter.ts diff --git a/packages-modules/counter/browser/src/connected-react-router/redux/actions/index.ts b/packages-modules/counter/browser/src/redux-first-history/redux/actions/index.ts similarity index 100% rename from packages-modules/counter/browser/src/connected-react-router/redux/actions/index.ts rename to packages-modules/counter/browser/src/redux-first-history/redux/actions/index.ts diff --git a/packages-modules/counter/browser/src/connected-react-router/redux/index.ts b/packages-modules/counter/browser/src/redux-first-history/redux/index.ts similarity index 100% rename from packages-modules/counter/browser/src/connected-react-router/redux/index.ts rename to packages-modules/counter/browser/src/redux-first-history/redux/index.ts diff --git a/packages-modules/counter/browser/src/connected-react-router/redux/reducers/counter.ts b/packages-modules/counter/browser/src/redux-first-history/redux/reducers/counter.ts similarity index 100% rename from packages-modules/counter/browser/src/connected-react-router/redux/reducers/counter.ts rename to packages-modules/counter/browser/src/redux-first-history/redux/reducers/counter.ts diff --git a/packages-modules/counter/browser/src/connected-react-router/redux/reducers/index.ts b/packages-modules/counter/browser/src/redux-first-history/redux/reducers/index.ts similarity index 100% rename from packages-modules/counter/browser/src/connected-react-router/redux/reducers/index.ts rename to packages-modules/counter/browser/src/redux-first-history/redux/reducers/index.ts From 8072087ac5f95b42018412b15fb2a0206d8ab8d2 Mon Sep 17 00:00:00 2001 From: veera Date: Sun, 10 Dec 2023 18:04:15 -0500 Subject: [PATCH 6/7] update changes --- .../electron/src/epics/count-tray-updater.ts | 2 +- packages-modules/counter/electron/src/index.ts | 2 +- .../constants/action-types.ts | 4 ++-- .../connected-react-router/interfaces/state.ts | 4 ++-- portable-devices/desktop/package.json | 4 ++++ .../desktop/src/renderer/app/Tray.tsx | 6 +++--- portable-devices/mobile/src/App.tsx | 3 --- servers/frontend-server/src/app/Main.tsx | 10 +++++----- .../frontend-server/src/app/MainReactRouter.tsx | 2 +- .../src/backend/website-antui.tsx | 2 +- .../src/backend/website-chakra-antui.tsx | 4 ++-- .../src/backend/website-chakra.tsx | 2 +- .../frontend-server/src/config/redux-config.ts | 16 ++++++---------- 13 files changed, 29 insertions(+), 32 deletions(-) diff --git a/packages-modules/counter/electron/src/epics/count-tray-updater.ts b/packages-modules/counter/electron/src/epics/count-tray-updater.ts index 2910586a4..d7b2fa0d4 100644 --- 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, diff --git a/packages-modules/counter/electron/src/index.ts b/packages-modules/counter/electron/src/index.ts index f16f0a440..ce777a8db 100755 --- 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 index f73efec22..4c3cec118 100755 --- 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 index f5de723d6..c2a3d5341 100755 --- 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/desktop/package.json b/portable-devices/desktop/package.json index 8146cc5b6..b3d95dad2 100644 --- a/portable-devices/desktop/package.json +++ b/portable-devices/desktop/package.json @@ -90,6 +90,7 @@ "react-router-dom": "^5.3.3", "react-transition-group": "^4.3.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", @@ -118,6 +119,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 index cbc4eb566..480658abc 100644 --- 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<{}, {}> { - + - , + , diff --git a/portable-devices/mobile/src/App.tsx b/portable-devices/mobile/src/App.tsx index ecaeb9bdb..a350971af 100644 --- 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() { - - diff --git a/servers/frontend-server/src/app/Main.tsx b/servers/frontend-server/src/app/Main.tsx index f78438684..ef08f7356 100644 --- a/servers/frontend-server/src/app/Main.tsx +++ b/servers/frontend-server/src/app/Main.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import { ApolloProvider } from '@apollo/client'; import { Provider as ReduxProvider } from 'react-redux'; -import { ConnectedRouter } from 'connected-react-router'; +import { HistoryRouter } from 'redux-first-history/rr6'; import { PersistGate } from 'redux-persist/integration/react'; import { persistStore } from 'redux-persist'; import { createBrowserHistory } from 'history'; @@ -28,9 +28,9 @@ export class Main extends React.Component<{}, {}> { {() => ( {modules.getWrappedRoot( - + - , + , )} )} @@ -45,9 +45,9 @@ export class Main extends React.Component<{}, {}> { - + {modules.getWrappedRoot()} - + diff --git a/servers/frontend-server/src/app/MainReactRouter.tsx b/servers/frontend-server/src/app/MainReactRouter.tsx index 4cb3c29d3..6c43ad0c0 100644 --- a/servers/frontend-server/src/app/MainReactRouter.tsx +++ b/servers/frontend-server/src/app/MainReactRouter.tsx @@ -6,7 +6,7 @@ import { PersistGate } from 'redux-persist/integration/react'; import { persistStore } from 'redux-persist'; import { HelmetProvider } from 'react-helmet-async'; import { CacheProvider } from '@emotion/react'; -import { HistoryRouter } from "redux-first-history/rr6"; +import { HistoryRouter } from 'redux-first-history/rr6'; import createEmotionCache from '../common/createEmotionCache'; import { createReduxStore } from '../config/redux-config'; import { createClientContainer } from '../config/client.service'; diff --git a/servers/frontend-server/src/backend/website-antui.tsx b/servers/frontend-server/src/backend/website-antui.tsx index 57cbb4d73..435a4565e 100755 --- a/servers/frontend-server/src/backend/website-antui.tsx +++ b/servers/frontend-server/src/backend/website-antui.tsx @@ -5,7 +5,7 @@ import { getDataFromTree } from '@apollo/client/react/ssr/ssr.cjs'; import path from 'path'; import fs from 'fs'; import { Provider as ReduxProvider } from 'react-redux'; -import { StaticRouter } from 'react-router'; +import { StaticRouter } from 'react-router-dom/server'; import { logger } from '@cdm-logger/server'; import { ChunkExtractor, ChunkExtractorManager } from '@loadable/server'; import { createMemoryHistory } from 'history'; diff --git a/servers/frontend-server/src/backend/website-chakra-antui.tsx b/servers/frontend-server/src/backend/website-chakra-antui.tsx index 776b1f0b0..4557ee22f 100644 --- a/servers/frontend-server/src/backend/website-chakra-antui.tsx +++ b/servers/frontend-server/src/backend/website-chakra-antui.tsx @@ -7,7 +7,7 @@ import createEmotionServer from '@emotion/server/create-instance'; import path from 'path'; import fs from 'fs'; import { Provider as ReduxProvider } from 'react-redux'; -import { StaticRouter } from 'react-router'; +import { StaticRouter } from 'react-router-dom/server'; import { logger } from '@cdm-logger/server'; import { ChunkExtractor, ChunkExtractorManager } from '@loadable/server'; import { createMemoryHistory } from 'history'; @@ -31,7 +31,7 @@ async function renderServerSide(req, res) { const { apolloClient: client } = createClientContainer(); let context: { pageNotFound?: boolean; url?: string } = { pageNotFound: false }; - const history = createMemoryHistory({ initialEntries: [req.url] }); + const history = createMemoryHistory({ initialEntries: [req.url] }); // match initial route to express path const { store } = createReduxStore(history); const extractor = new ChunkExtractor({ diff --git a/servers/frontend-server/src/backend/website-chakra.tsx b/servers/frontend-server/src/backend/website-chakra.tsx index 880a28f32..ecde809cc 100644 --- a/servers/frontend-server/src/backend/website-chakra.tsx +++ b/servers/frontend-server/src/backend/website-chakra.tsx @@ -7,7 +7,7 @@ import createEmotionServer from '@emotion/server/create-instance'; import path from 'path'; import fs from 'fs'; import { Provider as ReduxProvider } from 'react-redux'; -import { StaticRouter } from 'react-router'; +import { StaticRouter } from 'react-router-dom/server'; import { logger } from '@cdm-logger/server'; import { ChunkExtractor, ChunkExtractorManager } from '@loadable/server'; import { createMemoryHistory } from 'history'; diff --git a/servers/frontend-server/src/config/redux-config.ts b/servers/frontend-server/src/config/redux-config.ts index 63ca2e768..41bf56cb5 100644 --- a/servers/frontend-server/src/config/redux-config.ts +++ b/servers/frontend-server/src/config/redux-config.ts @@ -9,7 +9,7 @@ import { createEpicMiddleware } from 'redux-observable'; import { persistReducer } from 'redux-persist'; import thunkMiddleware from 'redux-thunk'; import { REDUX_PERSIST_KEY } from '@common-stack/client-core'; -import { createReduxHistoryContext } from "redux-first-history"; +import { createReduxHistoryContext } from 'redux-first-history'; import { createBrowserHistory } from 'history'; import { createReduxStore as createBaseReduxStore } from './base-redux-config'; import modules, { logger } from '../modules'; @@ -39,10 +39,10 @@ export const persistConfig = { * Add any reducers required for this app dirctly in to * `combineReducers` */ -export const createReduxStore = () => { +export const createReduxStore = (hist?: any) => { const { createReduxHistory, routerMiddleware, routerReducer } = createReduxHistoryContext({ - history: createBrowserHistory(), - //other options if needed + history: hist ?? createBrowserHistory(), + // other options if needed }); const reducers = { @@ -56,12 +56,7 @@ export const createReduxStore = () => { store = (module as any).hot.data.store; // replace the reducers always as we don't have ablity to find // new reducer added through our `modules` - store.replaceReducer( - persistReducer( - persistConfig, - combineReducers(reducers), - ), - ); + store.replaceReducer(persistReducer(persistConfig, combineReducers(reducers))); // store.replaceReducer(storeReducer((module as any).hot.data.history || history)); } else { // If we have preloaded state, save it. @@ -72,6 +67,7 @@ export const createReduxStore = () => { if (__CLIENT__) { delete window.__PRELOADED_STATE__; } + store = createBaseReduxStore({ scope: __CLIENT__ ? 'browser' : 'server', isDebug: true, From 5d5381ebab1b894a1b78d9c1f5f7951dae6fb717 Mon Sep 17 00:00:00 2001 From: Devmax Date: Sun, 14 Jan 2024 13:09:30 -0800 Subject: [PATCH 7/7] Fix for cache --- servers/frontend-server/src/backend/website-antui.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/servers/frontend-server/src/backend/website-antui.tsx b/servers/frontend-server/src/backend/website-antui.tsx index 093ed0e2a..8d9d15e34 100755 --- a/servers/frontend-server/src/backend/website-antui.tsx +++ b/servers/frontend-server/src/backend/website-antui.tsx @@ -105,9 +105,9 @@ async function renderServerSide(req, res) { ); let pageContent = ReactDOMServer.renderToStaticMarkup(page); pageContent = pageContent.replace(/__STYLESHEET__/, styleSheet); - res.status(200); + // res.status(200); res.send(`\n${pageContent}`); - res.end(); + // res.end(); } } catch (err) { logger.error(err,'SERVER SIDE RENDER failed due to (%j) ', err.message);