Switch from connected-react-router to redux-first-history (#1947)

examples/services/dashboard/package.json

@@ -30,7 +30,6 @@
     "@blueprintjs/timezone": "4.5.3",
     "@emotion/core": "10.3.1",
     "axios": "0.27.2",
-    "connected-react-router": "6.9.3",
     "enum-utils": "1.0.0",
     "history": "4.10.1",
     "http-method-enum": "1.0.0",
@@ -44,6 +43,7 @@
     "react-router-dom": "5.3.4",
     "react-transition-group": "4.4.5",
     "redux": "4.2.0",
+    "redux-first-history": "5.1.1",
     "redux-saga": "1.2.1",
     "reselect": "4.1.6",
     "re-reselect": "4.0.1",

examples/services/dashboard/src/ducks/index.ts

@@ -1,42 +1,34 @@
 import { SimpleReduxSaga } from "@misk/simpleredux"
-import {
-  connectRouter,
-  LocationChangeAction,
-  RouterState
-} from "connected-react-router"
-import { History } from "history"
-import { AnyAction, combineReducers, Reducer } from "redux"
+import { combineReducers, Reducer } from "redux"
 import { all, fork } from "redux-saga/effects"
 import {
   default as LoaderReducer,
   ILoaderState,
   watchLoaderSagas
 } from "./loader"
+import { RouterState } from "redux-first-history"
 export * from "./loader"
 
 /**
  * Redux Store State
  */
 export interface IState {
   loader: ILoaderState
-  router: Reducer<RouterState, LocationChangeAction>
+  router: Reducer<RouterState>
 }
 
 /**
  * Reducers
  */
 export const rootReducer = (
-  history: History
-): Reducer<
-  {
-    loader: any
-    router: RouterState
-  },
-  AnyAction
-> =>
+  routerReducer: Reducer<RouterState>
+): Reducer<{
+  loader: any
+  router: RouterState
+}> =>
   combineReducers({
     loader: LoaderReducer,
-    router: connectRouter(history)
+    router: routerReducer
   })
 
 /**

examples/tabs/palette-exemplar/package.json

@@ -30,7 +30,6 @@
     "@blueprintjs/timezone": "4.5.3",
     "@redux-saga/core": "1.2.1",
     "axios": "0.27.2",
-    "connected-react-router": "6.9.3",
     "enum-utils": "1.0.0",
     "history": "4.10.1",
     "http-method-enum": "1.0.0",
@@ -45,6 +44,7 @@
     "react-router-dom": "5.3.4",
     "react-transition-group": "4.4.5",
     "redux": "4.2.0",
+    "redux-first-history": "5.1.1",
     "redux-saga": "1.2.1",
     "reselect": "4.1.6",
     "re-reselect": "4.0.1",

examples/tabs/palette-exemplar/src/ducks/index.ts

@@ -9,13 +9,8 @@ import {
   SimpleReduxReducer,
   watchSimpleReduxSagas
 } from "@misk/simpleredux"
-import {
-  connectRouter,
-  LocationChangeAction,
-  RouterState
-} from "connected-react-router"
-import { History } from "history"
-import { AnyAction, combineReducers, Reducer } from "redux"
+import { combineReducers, Reducer } from "redux"
+import { RouterState } from "redux-first-history"
 import { all, fork } from "redux-saga/effects"
 import {
   dispatchPaletteExemplar,
@@ -32,7 +27,7 @@ export * from "./paletteExemplar"
  */
 export interface IState {
   paletteExemplar: IPaletteExemplarState
-  router: Reducer<RouterState, LocationChangeAction>
+  router: Reducer<RouterState>
   simpleRedux: ISimpleReduxState
 }
 
@@ -67,10 +62,10 @@ export const rootSelectors = (state: IState) => ({
 /**
  * Reducers
  */
-export const rootReducer = (history: History): Reducer<any, AnyAction> =>
+export const rootReducer = (routerReducer: Reducer<RouterState>): Reducer =>
   combineReducers({
     paletteExemplar: PaletteExemplarReducer,
-    router: connectRouter(history),
+    router: routerReducer,
     simpleRedux: SimpleReduxReducer
   })
 

examples/tabs/palette-exemplar/tests/upstreamableTestUtilities.tsx

@@ -4,6 +4,11 @@ import { Provider } from "react-redux"
 import { render } from "@testing-library/react"
 import { createStore } from "redux"
 import { rootReducer } from "src/ducks"
+import { createReduxHistoryContext } from "redux-first-history"
+
+const { routerReducer } = createReduxHistoryContext({
+  history: createBrowserHistory()
+})
 
 // this is a handy function that I normally make available for all my tests
 // that deal with connected components.
@@ -25,7 +30,7 @@ export const renderWithRedux: (
   ui,
   {
     initialState,
-    store = createStore(rootReducer(createBrowserHistory()), initialState)
+    store = createStore(rootReducer(routerReducer), initialState)
   }: any = {}
 ) => {
   return {

examples/tabs/palette-lts/package.json

@@ -30,7 +30,6 @@
     "@blueprintjs/timezone": "4.5.3",
     "@redux-saga/core": "1.2.1",
     "axios": "0.27.2",
-    "connected-react-router": "6.9.3",
     "enum-utils": "1.0.0",
     "history": "4.10.1",
     "http-method-enum": "1.0.0",
@@ -45,6 +44,7 @@
     "react-router-dom": "5.3.4",
     "react-transition-group": "4.4.5",
     "redux": "4.2.0",
+    "redux-first-history": "5.1.1",
     "redux-saga": "1.2.1",
     "reselect": "4.1.6",
     "re-reselect": "4.0.1",

examples/tabs/palette-lts/src/ducks/index.ts

@@ -15,14 +15,9 @@ import {
   watchSimpleFormSagas,
   watchSimpleNetworkSagas
 } from "@misk/simpleredux"
-import {
-  connectRouter,
-  LocationChangeAction,
-  RouterState
-} from "connected-react-router"
-import { History } from "history"
-import { AnyAction, combineReducers, Reducer } from "redux"
+import { combineReducers, Reducer } from "redux"
 import { all, fork } from "redux-saga/effects"
+import { RouterState } from "redux-first-history"
 import {
   dispatchPalette,
   IDispatchPalette,
@@ -38,7 +33,7 @@ export * from "./palette"
  */
 export interface IState {
   palette: IPaletteState
-  router: Reducer<RouterState, LocationChangeAction>
+  router: Reducer<RouterState>
   simpleForm: ISimpleFormState
   simpleNetwork: ISimpleNetworkState
 }
@@ -77,10 +72,10 @@ export const rootSelectors = (state: IState) => ({
 /**
  * Reducers
  */
-export const rootReducer = (history: History): Reducer<any, AnyAction> =>
+export const rootReducer = (routerReducer: Reducer<RouterState>): Reducer =>
   combineReducers({
     palette: PaletteReducer,
-    router: connectRouter(history),
+    router: routerReducer,
     simpleForm: SimpleFormReducer,
     simpleNetwork: SimpleNetworkReducer
   })

examples/tabs/palette-lts/tests/upstreamableTestUtilities.tsx

@@ -4,6 +4,11 @@ import { Provider } from "react-redux"
 import { render } from "@testing-library/react"
 import { createStore } from "redux"
 import { rootReducer } from "src/ducks"
+import { createReduxHistoryContext } from "redux-first-history"
+
+const { routerReducer } = createReduxHistoryContext({
+  history: createBrowserHistory()
+})
 
 // this is a handy function that I normally make available for all my tests
 // that deal with connected components.
@@ -25,7 +30,7 @@ export const renderWithRedux: (
   ui,
   {
     initialState,
-    store = createStore(rootReducer(createBrowserHistory()), initialState)
+    store = createStore(rootReducer(routerReducer), initialState)
   }: any = {}
 ) => {
   return {

examples/tabs/starter-basic/package.json

@@ -31,7 +31,6 @@
     "@blueprintjs/timezone": "4.5.3",
     "@redux-saga/core": "1.2.1",
     "axios": "0.27.2",
-    "connected-react-router": "6.9.3",
     "enum-utils": "1.0.0",
     "history": "4.10.1",
     "http-method-enum": "1.0.0",
@@ -46,6 +45,7 @@
     "react-router-dom": "5.3.4",
     "react-transition-group": "4.4.5",
     "redux": "4.2.0",
+    "redux-first-history": "5.1.1",
     "redux-saga": "1.2.1",
     "reselect": "4.1.6",
     "re-reselect": "4.0.1",

examples/tabs/starter-basic/src/ducks/index.ts

@@ -9,20 +9,15 @@ import {
   SimpleReduxReducer,
   watchSimpleReduxSagas
 } from "@misk/simpleredux"
-import {
-  connectRouter,
-  LocationChangeAction,
-  RouterState
-} from "connected-react-router"
-import { History } from "history"
-import { AnyAction, combineReducers, Reducer } from "redux"
+import { combineReducers, Reducer } from "redux"
 import { all, fork } from "redux-saga/effects"
+import { RouterState } from "redux-first-history"
 
 /**
  * Redux Store State
  */
 export interface IState {
-  router: Reducer<RouterState, LocationChangeAction>
+  router: Reducer<RouterState>
   simpleRedux: ISimpleReduxState
 }
 
@@ -51,9 +46,9 @@ export const rootSelectors = (state: IState) => ({
 /**
  * Reducers
  */
-export const rootReducer = (history: History): Reducer<any, AnyAction> =>
+export const rootReducer = (routerReducer: Reducer<RouterState>): Reducer =>
   combineReducers({
-    router: connectRouter(history),
+    router: routerReducer,
     simpleRedux: SimpleReduxReducer
   })
 

examples/tabs/starter-basic/tests/upstreamableTestUtilities.tsx

@@ -4,6 +4,11 @@ import { Provider } from "react-redux"
 import { render } from "@testing-library/react"
 import { createStore } from "redux"
 import { rootReducer } from "src/ducks"
+import { createReduxHistoryContext } from "redux-first-history"
+
+const { routerReducer } = createReduxHistoryContext({
+  history: createBrowserHistory()
+})
 
 // this is a handy function that I normally make available for all my tests
 // that deal with connected components.
@@ -25,7 +30,7 @@ export const renderWithRedux: (
   ui,
   {
     initialState,
-    store = createStore(rootReducer(createBrowserHistory()), initialState)
+    store = createStore(rootReducer(routerReducer), initialState)
   }: any = {}
 ) => {
   return {

packages/@misk/cli/plop-templates/basic/package.json

@@ -32,7 +32,6 @@
     "@blueprintjs/timezone": "4.5.3",
     "@redux-saga/core": "1.2.1",
     "axios": "0.27.2",
-    "connected-react-router": "6.9.3",
     "enum-utils": "1.0.0",
     "history": "4.10.1",
     "http-method-enum": "1.0.0",
@@ -47,6 +46,7 @@
     "react-router-dom": "5.3.4",
     "react-transition-group": "4.4.5",
     "redux": "4.2.0",
+    "redux-first-history": "5.1.1",
     "redux-saga": "1.2.1",
     "reselect": "4.1.6",
     "re-reselect": "4.0.1",

packages/@misk/cli/plop-templates/basic/src/ducks/index.ts

@@ -9,20 +9,15 @@ import {
   SimpleReduxReducer,
   watchSimpleReduxSagas
 } from "@misk/simpleredux"
-import {
-  connectRouter,
-  LocationChangeAction,
-  RouterState
-} from "connected-react-router"
-import { History } from "history"
-import { AnyAction, combineReducers, Reducer } from "redux"
+import { RouterState } from "redux-first-history"
+import { combineReducers, Reducer } from "redux"
 import { all, fork } from "redux-saga/effects"
 
 /**
  * Redux Store State
  */
 export interface IState {
-  router: Reducer<RouterState, LocationChangeAction>
+  router: Reducer<RouterState>
   simpleRedux: ISimpleReduxState
 }
 
@@ -51,9 +46,9 @@ export const rootSelectors = (state: IState) => ({
 /**
  * Reducers
  */
-export const rootReducer = (history: History): Reducer<any, AnyAction> =>
+export const rootReducer = (routerReducer: Reducer<RouterState>): Reducer =>
   combineReducers({
-    router: connectRouter(history),
+    router: routerReducer,
     simpleRedux: SimpleReduxReducer
   })
 

packages/@misk/cli/plop-templates/basic/tests/upstreamableTestUtilities.tsx

@@ -4,6 +4,11 @@ import { Provider } from "react-redux"
 import { render } from "@testing-library/react"
 import { createStore } from "redux"
 import { rootReducer } from "src/ducks"
+import { createReduxHistoryContext } from "redux-first-history"
+
+const { routerReducer } = createReduxHistoryContext({
+  history: createBrowserHistory()
+})
 
 // this is a handy function that I normally make available for all my tests
 // that deal with connected components.
@@ -25,7 +30,7 @@ export const renderWithRedux: (
   ui,
   {
     initialState,
-    store = createStore(rootReducer(createBrowserHistory()), initialState)
+    store = createStore(rootReducer(routerReducer), initialState)
   }: any = {}
 ) => {
   return {

packages/@misk/common/package.json

@@ -39,7 +39,6 @@
     "@blueprintjs/icons": "4.7.0",
     "@blueprintjs/select": "4.8.3",
     "axios": "0.27.2",
-    "connected-react-router": "6.9.3",
     "history": "4.10.1",
     "immutable": "4.1.0",
     "re-reselect": "4.0.1",
@@ -51,6 +50,7 @@
     "react-router": "5.3.4",
     "react-router-dom": "5.3.4",
     "redux": "4.2.0",
+    "redux-first-history": "5.1.1",
     "redux-saga": "1.2.1",
     "reselect": "4.1.6"
   },

packages/@misk/common/src/vendors.js

@@ -4,7 +4,6 @@ window.Blueprint.Datetime = require("@blueprintjs/datetime")
 window.Blueprint.Icons = require("@blueprintjs/icons")
 window.Blueprint.Select = require("@blueprintjs/select")
 window.Axios = require("axios")
-window.ConnectedReactRouter = require("connected-react-router")
 window.HistoryNPM = require("history")
 window.React = require("react")
 window.ReactDom = require("react-dom")