Replace deprecated react-router-redux (#675)

vmware-tanzu · Sep 25, 2018 · d9cce5f · d9cce5f
1 parent 24b840f
commit d9cce5f
Show file tree

Hide file tree

Showing 23 changed files with 87 additions and 47 deletions.
diff --git a/dashboard/package.json b/dashboard/package.json
@@ -12,6 +12,7 @@
     "@types/react-select": "^1.2.6",
     "@types/ws": "^6.0.0",
     "axios": "^0.17.1",
+    "connected-react-router": "^4.5.0",
     "enzyme-adapter-react-16": "^1.1.1",
     "js-yaml": "^3.10.0",
     "moniker-native": "^0.1.6",
@@ -29,7 +30,6 @@
     "react-modal": "^3.1.11",
     "react-redux": "^5.0.6",
     "react-router-dom": "^4.2.2",
-    "react-router-redux": "^5.0.0-alpha.9",
     "react-scripts-ts": "^2.17.0",
     "react-select": "^1.2.1",
     "react-test-renderer": "^16.2.0",
@@ -84,7 +84,6 @@
     "@types/react-redux": "^6.0.3",
     "@types/react-router": "^4.0.20",
     "@types/react-router-dom": "^4.2.3",
-    "@types/react-router-redux": "^5.0.11",
     "@types/react-test-renderer": "^16.0.0",
     "@types/redux-mock-store": "^1.0.0",
     "enzyme": "^3.6.0",

diff --git a/dashboard/src/actions/index.ts b/dashboard/src/actions/index.ts
@@ -1,4 +1,4 @@
-import { push } from "react-router-redux";
+import { push } from "connected-react-router";
 
 import * as apps from "./apps";
 import * as auth from "./auth";

diff --git a/dashboard/src/components/AppUpgrade/AppUpgrade.tsx b/dashboard/src/components/AppUpgrade/AppUpgrade.tsx
@@ -1,6 +1,6 @@
 import * as React from "react";
 
-import { RouterAction } from "react-router-redux";
+import { RouterAction } from "connected-react-router";
 import { hapi } from "../../shared/hapi/release";
 import { IServiceBindingWithSecret } from "../../shared/ServiceBinding";
 import { IAppRepository, IChartState, IChartVersion } from "../../shared/types";

diff --git a/dashboard/src/components/ChartList/ChartList.tsx b/dashboard/src/components/ChartList/ChartList.tsx
@@ -1,6 +1,6 @@
+import { RouterAction } from "connected-react-router";
 import * as React from "react";
 import { Link } from "react-router-dom";
-import { RouterAction } from "react-router-redux";
 
 import { IChart, IChartState } from "../../shared/types";
 import { escapeRegExp } from "../../shared/utils";

diff --git a/dashboard/src/components/ClassView/index.tsx b/dashboard/src/components/ClassView/index.tsx
@@ -1,6 +1,5 @@
+import { RouterAction } from "connected-react-router";
 import * as React from "react";
-import { RouterAction } from "react-router-redux";
-
 import { IClusterServiceClass } from "../../shared/ClusterServiceClass";
 import { definedNamespaces } from "../../shared/Namespace";
 import { IServicePlan } from "../../shared/ServiceCatalog";

diff --git a/dashboard/src/components/DeploymentForm/DeploymentForm.tsx b/dashboard/src/components/DeploymentForm/DeploymentForm.tsx
@@ -1,6 +1,6 @@
+import { RouterAction } from "connected-react-router";
 import * as React from "react";
 import AceEditor from "react-ace";
-import { RouterAction } from "react-router-redux";
 
 import { IServiceBindingWithSecret } from "../../shared/ServiceBinding";
 import { IChartState, IChartVersion, NotFoundError } from "../../shared/types";

diff --git a/dashboard/src/components/ProvisionButton/index.tsx b/dashboard/src/components/ProvisionButton/index.tsx
@@ -1,6 +1,6 @@
+import { RouterAction } from "connected-react-router";
 import * as React from "react";
 import * as Modal from "react-modal";
-import { RouterAction } from "react-router-redux";
 
 import { IClusterServiceClass } from "../../shared/ClusterServiceClass";
 import { IServicePlan } from "../../shared/ServiceCatalog";

diff --git a/dashboard/src/components/UpgradeForm/UpgradeForm.tsx b/dashboard/src/components/UpgradeForm/UpgradeForm.tsx
@@ -1,6 +1,6 @@
+import { RouterAction } from "connected-react-router";
 import * as React from "react";
 import AceEditor from "react-ace";
-import { RouterAction } from "react-router-redux";
 
 import { IServiceBindingWithSecret } from "../../shared/ServiceBinding";
 import { IChartState, IChartVersion } from "../../shared/types";

diff --git a/dashboard/src/containers/AppNewContainer/AppNewContainer.tsx b/dashboard/src/containers/AppNewContainer/AppNewContainer.tsx
@@ -1,5 +1,5 @@
+import { push } from "connected-react-router";
 import { connect } from "react-redux";
-import { push } from "react-router-redux";
 import { Action } from "redux";
 import { ThunkDispatch } from "redux-thunk";
 

diff --git a/dashboard/src/containers/AppUpgradeContainer/AppUpgradeContainer.tsx b/dashboard/src/containers/AppUpgradeContainer/AppUpgradeContainer.tsx
@@ -1,5 +1,5 @@
+import { push } from "connected-react-router";
 import { connect } from "react-redux";
-import { push } from "react-router-redux";
 import { Action } from "redux";
 import { ThunkDispatch } from "redux-thunk";
 

diff --git a/dashboard/src/containers/ClassView.ts b/dashboard/src/containers/ClassView.ts
@@ -1,5 +1,5 @@
+import { push } from "connected-react-router";
 import { connect } from "react-redux";
-import { push } from "react-router-redux";
 import { Action } from "redux";
 import { ThunkDispatch } from "redux-thunk";
 

diff --git a/dashboard/src/containers/FunctionListContainer/FunctionListContainer.tsx b/dashboard/src/containers/FunctionListContainer/FunctionListContainer.tsx
@@ -1,7 +1,7 @@
+import { push } from "connected-react-router";
 import * as qs from "qs";
 import { connect } from "react-redux";
 import { RouteComponentProps } from "react-router";
-import { push } from "react-router-redux";
 import { Action } from "redux";
 import { ThunkDispatch } from "redux-thunk";
 

diff --git a/dashboard/src/containers/HeaderContainer/HeaderContainer.ts b/dashboard/src/containers/HeaderContainer/HeaderContainer.ts
@@ -1,6 +1,6 @@
+import { push } from "connected-react-router";
 import { connect } from "react-redux";
 import { RouteComponentProps } from "react-router";
-import { push } from "react-router-redux";
 import { Action } from "redux";
 import { ThunkDispatch } from "redux-thunk";
 

diff --git a/dashboard/src/containers/Root.tsx b/dashboard/src/containers/Root.tsx
@@ -1,6 +1,6 @@
+import { ConnectedRouter } from "connected-react-router";
 import * as React from "react";
 import { Provider } from "react-redux";
-import { ConnectedRouter } from "react-router-redux";
 
 import Layout from "../components/Layout";
 import store, { history } from "../store";

diff --git a/dashboard/src/reducers/apps.ts b/dashboard/src/reducers/apps.ts
@@ -1,4 +1,4 @@
-import { LOCATION_CHANGE, LocationChangeAction } from "react-router-redux";
+import { LOCATION_CHANGE, LocationChangeAction } from "connected-react-router";
 
 import { getType } from "typesafe-actions";
 import actions from "../actions";

diff --git a/dashboard/src/reducers/catalog.ts b/dashboard/src/reducers/catalog.ts
@@ -1,4 +1,4 @@
-import { LOCATION_CHANGE, LocationChangeAction } from "react-router-redux";
+import { LOCATION_CHANGE, LocationChangeAction } from "connected-react-router";
 import { getType } from "typesafe-actions";
 
 import actions from "../actions";

diff --git a/dashboard/src/reducers/functions.ts b/dashboard/src/reducers/functions.ts
@@ -1,4 +1,4 @@
-import { LOCATION_CHANGE, LocationChangeAction } from "react-router-redux";
+import { LOCATION_CHANGE, LocationChangeAction } from "connected-react-router";
 import { getType } from "typesafe-actions";
 
 import actions from "../actions";

diff --git a/dashboard/src/reducers/index.ts b/dashboard/src/reducers/index.ts
@@ -1,4 +1,3 @@
-import { routerReducer } from "react-router-redux";
 import { combineReducers } from "redux";
 
 import { IStoreState } from "../shared/types";
@@ -11,7 +10,7 @@ import functionsReducer from "./functions";
 import namespaceReducer from "./namespace";
 import reposReducer from "./repos";
 
-const rootReducer = combineReducers<Partial<IStoreState> & { router: any }>({
+const rootReducer = combineReducers<Partial<IStoreState>>({
   apps: appsReducer,
   auth: authReducer,
   catalog: catalogReducer,
@@ -20,7 +19,6 @@ const rootReducer = combineReducers<Partial<IStoreState> & { router: any }>({
   functions: functionsReducer,
   namespace: namespaceReducer,
   repos: reposReducer,
-  router: routerReducer,
 });
 
 export default rootReducer;
diff --git a/dashboard/src/reducers/namespace.test.ts b/dashboard/src/reducers/namespace.test.ts
@@ -0,0 +1,33 @@
+import { LOCATION_CHANGE, RouterActionType } from "connected-react-router";
+import context from "jest-plugin-context";
+import namespaceReducer from "./namespace";
+
+describe("namespaceReducer", () => {
+  const location = {
+    hash: "",
+    search: "",
+    state: "",
+  };
+  const initialState = namespaceReducer(undefined, {} as any);
+
+  context("when LOCATION CHANGE", () => {
+    it("changes the current stored namespace if it is in the URL", () => {
+      const testCases = [
+        { path: "/ns/cyberdyne/apps", current: "cyberdyne" },
+        { path: "/cyberdyne/apps", current: "default" },
+        { path: "/ns/T-600/charts", current: "T-600" },
+      ];
+      testCases.forEach(tc => {
+        expect(
+          namespaceReducer(undefined, {
+            type: LOCATION_CHANGE,
+            payload: {
+              location: { ...location, pathname: tc.path },
+              action: "PUSH" as RouterActionType,
+            },
+          }),
+        ).toEqual({ ...initialState, current: tc.current });
+      });
+    });
+  });
+});
diff --git a/dashboard/src/reducers/namespace.ts b/dashboard/src/reducers/namespace.ts
@@ -1,4 +1,4 @@
-import { LOCATION_CHANGE, LocationChangeAction } from "react-router-redux";
+import { LOCATION_CHANGE, LocationChangeAction } from "connected-react-router";
 import { getType } from "typesafe-actions";
 
 import actions from "../actions";
@@ -24,7 +24,7 @@ const namespaceReducer = (
     case getType(actions.namespace.setNamespace):
       return { ...state, current: action.namespace };
     case LOCATION_CHANGE:
-      const pathname = action.payload.pathname;
+      const pathname = action.payload.location.pathname;
       // looks for /ns/:namespace in URL
       const matches = pathname.match(/\/ns\/([^/]*)/);
       if (matches) {

diff --git a/dashboard/src/reducers/repos.ts b/dashboard/src/reducers/repos.ts
@@ -1,4 +1,4 @@
-import { LOCATION_CHANGE, LocationChangeAction } from "react-router-redux";
+import { LOCATION_CHANGE, LocationChangeAction } from "connected-react-router";
 import { getType } from "typesafe-actions";
 
 import actions from "../actions";

diff --git a/dashboard/src/store/index.ts b/dashboard/src/store/index.ts
@@ -1,5 +1,5 @@
+import { connectRouter, routerMiddleware } from "connected-react-router";
 import createHistory from "history/createBrowserHistory";
-import { routerMiddleware } from "react-router-redux";
 import { applyMiddleware, createStore } from "redux";
 import { composeWithDevTools } from "redux-devtools-extension";
 import thunkMiddleware from "redux-thunk";
@@ -8,6 +8,11 @@ import rootReducer from "../reducers";
 
 export const history = createHistory();
 export default createStore(
-  rootReducer,
-  composeWithDevTools(applyMiddleware(thunkMiddleware, routerMiddleware(history))),
+  connectRouter(history)(rootReducer), // add router state to reducer
+  composeWithDevTools(
+    applyMiddleware(
+      thunkMiddleware,
+      routerMiddleware(history), // // for dispatching history actions
+    ),
+  ),
 );
diff --git a/dashboard/yarn.lock b/dashboard/yarn.lock
@@ -269,15 +269,6 @@
     "@types/react" "*"
     "@types/react-router" "*"
 
-"@types/react-router-redux@^5.0.11":
-  version "5.0.16"
-  resolved "https://registry.yarnpkg.com/@types/react-router-redux/-/react-router-redux-5.0.16.tgz#3db2a8f0410fe9d821e6ace87b774c8bdecb39ca"
-  dependencies:
-    "@types/history" "*"
-    "@types/react" "*"
-    "@types/react-router" "*"
-    redux ">= 3.7.2"
-
 "@types/react-router@*", "@types/react-router@^4.0.20":
   version "4.0.31"
   resolved "https://registry.yarnpkg.com/@types/react-router/-/react-router-4.0.31.tgz#416bac49d746800810886c7b8582a622ed9604fc"
@@ -2094,6 +2085,14 @@ connect-history-api-fallback@^1.3.0:
   version "1.5.0"
   resolved "https://registry.yarnpkg.com/connect-history-api-fallback/-/connect-history-api-fallback-1.5.0.tgz#b06873934bc5e344fef611a196a6faae0aee015a"
 
+connected-react-router@^4.5.0:
+  version "4.5.0"
+  resolved "https://registry.yarnpkg.com/connected-react-router/-/connected-react-router-4.5.0.tgz#b6f021cc284a244fbee70e16e5ff0f2a4613e3d3"
+  dependencies:
+    immutable "^3.8.1"
+    redux-seamless-immutable "^0.4.0"
+    seamless-immutable "^7.1.3"
+
 console-browserify@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/console-browserify/-/console-browserify-1.1.0.tgz#f0241c45730a9fc6323b206dbf38edc741d0bb10"
@@ -4134,7 +4133,7 @@ ignore@^4.0.0:
   version "4.0.6"
   resolved "https://registry.yarnpkg.com/ignore/-/ignore-4.0.6.tgz#750e3db5862087b4737ebac8207ffd1ef27b25fc"
 
-immutable@^3.8.2:
+immutable@^3.8.1, immutable@^3.8.2:
   version "3.8.2"
   resolved "https://registry.yarnpkg.com/immutable/-/immutable-3.8.2.tgz#c2439951455bb39913daf281376f1530e104adf3"
 
@@ -7466,15 +7465,11 @@ react-router-dom@^4.2.2:
     react-router "^4.3.1"
     warning "^4.0.1"
 
-react-router-redux@^5.0.0-alpha.9:
-  version "5.0.0-alpha.9"
-  resolved "https://registry.yarnpkg.com/react-router-redux/-/react-router-redux-5.0.0-alpha.9.tgz#825431516e0e6f1fd93b8807f6bd595e23ec3d10"
-  dependencies:
-    history "^4.7.2"
-    prop-types "^15.6.0"
-    react-router "^4.2.0"
+react-router-redux@^4.0.0:
+  version "4.0.8"
+  resolved "https://registry.yarnpkg.com/react-router-redux/-/react-router-redux-4.0.8.tgz#227403596b5151e182377dab835b5d45f0f8054e"
 
-react-router@^4.2.0, react-router@^4.3.1:
+react-router@^4.3.1:
   version "4.3.1"
   resolved "https://registry.yarnpkg.com/react-router/-/react-router-4.3.1.tgz#aada4aef14c809cb2e686b05cee4742234506c4e"
   dependencies:
@@ -7731,11 +7726,18 @@ redux-mock-store@^1.5.3:
   dependencies:
     lodash.isplainobject "^4.0.6"
 
+redux-seamless-immutable@^0.4.0:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/redux-seamless-immutable/-/redux-seamless-immutable-0.4.0.tgz#b50f8680ecc5ef04021551267f78fa1ffd3cf985"
+  dependencies:
+    react-router-redux "^4.0.0"
+    seamless-immutable "^7.1.2"
+
 redux-thunk@^2.2.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/redux-thunk/-/redux-thunk-2.3.0.tgz#51c2c19a185ed5187aaa9a2d08b666d0d6467622"
 
-"redux@>= 3.7.2", redux@^4.0.0:
+redux@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/redux/-/redux-4.0.0.tgz#aa698a92b729315d22b34a0553d7e6533555cc03"
   dependencies:
@@ -8170,6 +8172,10 @@ scss-tokenizer@^0.2.3:
     js-base64 "^2.1.8"
     source-map "^0.4.2"
 
+seamless-immutable@^7.1.2, seamless-immutable@^7.1.3:
+  version "7.1.4"
+  resolved "https://registry.yarnpkg.com/seamless-immutable/-/seamless-immutable-7.1.4.tgz#6e9536def083ddc4dea0207d722e0e80d0f372f8"
+
 select-hose@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/select-hose/-/select-hose-2.0.0.tgz#625d8658f865af43ec962bfc376a37359a4994ca"