feat(router5): couple things

- bring back react-router5
- use RouterProvider and its router context
- fix mapStateToProps in App
- add type def
- formatting
- fix module.hot

Author: paibamboo

config/types/react-router5.d.ts

@@ -0,0 +1,40 @@
+declare module "react-router5" {
+  import { Component, Props } from "react";
+  import { Router } from "router5";
+
+  interface IRouteOptions {
+    reload?: boolean;
+  }
+
+  interface ILinkProps extends Props<Link> {
+    router?: Router;
+    routeName: string;
+    routeParams?: {};
+    routeOptions?: IRouteOptions;
+    activeClassName?: string;
+    activeStrict?: boolean;
+    onClick?: () => any;
+  }
+
+  interface IRouterProviderProps {
+    router: Router;
+  }
+
+  class BaseLink extends Component<ILinkProps, {}> { }
+  // noinspection TsLint
+  class Link extends Component<ILinkProps, {}> { }
+  // noinspection TsLint
+  class RouterProvider extends Component<IRouterProviderProps, {}> { }
+
+  function routeNode(nodeName: string, register?: boolean): (hoc: any) => any;
+
+  function withRoute<C>(BaseComponent: C): C;
+
+  export {
+    BaseLink,
+    routeNode,
+    RouterProvider,
+    withRoute,
+    Link
+  };
+}

package-lock.json

@@ -50,8 +50,8 @@
     "@types/enzyme": "^2.8.1",
     "@types/isomorphic-fetch": "0.0.34",
     "@types/jest": "^19.2.3",
-    "@types/lodash": "^4.14.68",
     "@types/node": "^8.0.2",
+    "@types/prop-types": "^15.5.1",
     "@types/raven-js": "^3.10.0",
     "@types/react": "^15.0.31",
     "@types/react-addons-test-utils": "^0.14.19",
@@ -103,7 +103,7 @@
     "es6-promise": "^4.0.5",
     "express": "^4.14.0",
     "isomorphic-fetch": "^2.2.1",
-    "lodash": "^4.17.4",
+    "prop-types": "^15.5.10",
     "raven-for-redux": "^1.0.0",
     "raven-js": "^3.16.0",
     "react": "^15.5.4",
@@ -113,6 +113,7 @@
     "react-redux": "^5.0.2",
     "react-router": "^3.0.2",
     "react-router-redux": "^4.0.7",
+    "react-router5": "^5.0.2",
     "redux": "^3.6.0",
     "redux-form": "^6.8.0",
     "redux-logger": "^3.0.0",

package.json

@@ -1,33 +1,31 @@
-import {isEqual} from "lodash";
+import {object} from "prop-types";
 import * as React from "react";
 import {connect} from "react-redux";
 import {actions} from "redux-router5";
-import {State as IRouterState} from "router5";
+import {Router, State as IRouterState} from "router5";
 
 class Link extends React.Component<IStateToProps & IDispatchToProps & IOwnProps, null> {
+  public static contextTypes: React.ValidationMap<any> = {
+    router: object.isRequired
+  };
+
+  public context: {
+    router: Router;
+  };
+
   public render(): JSX.Element {
-    const {children, name, params, options, route} = this.props;
+    const {children, name, params, options} = this.props;
+    const {navigateTo} = actions;
 
-    const href = this.buildUrl(name, params);
+    const href = this.context.router.buildPath(name, params);
     const onClick = (evt) => {
       evt.preventDefault();
-      this.props.dispatch(actions.navigateTo(name, params, options));
+      this.props.dispatch(navigateTo(name, params, options));
     };
-    const className = (route.name === name && (!params || isEqual(route.params, params))) ? "active" : "";
+    const className = this.context.router.isActive(name, params) ? "active" : "";
 
     return <a {...{className, href, onClick}}>{children}</a>;
   }
-
-  // todo: now only assume query params, will implement other types of params
-  private buildUrl(name: string, params: {[key: string]: string}): string {
-    let url: string = name;
-    if (params) {
-      Object.keys(params).forEach((key) => {
-        url += `?${key}=${params[key]}`;
-      });
-    }
-    return url;
-  }
 }
 
 interface IStateToProps {

src/app/components/Link.tsx

@@ -42,7 +42,7 @@ const Styles = {
 };
 
 class App extends React.Component<IStateToProps, null> {
-  private components: any = {
+  private components: {[key: string]: React.ComponentClass} = {
     about: AboutPage,
     counter: CounterPage,
     home: HomePage,
@@ -62,7 +62,7 @@ class App extends React.Component<IStateToProps, null> {
       <IntlProvider locale={language.payload.locale} messages={language.payload.languageData}>
         <section className={Styles.container}>
           <Helmet {...appConfig.app.head}/>
-          <Header />
+          <Header/>
           {segment && this.components[segment] ? React.createElement(this.components[segment]) : <div>Not found</div>}
         </section>
       </IntlProvider>
@@ -76,7 +76,7 @@ interface IStateToProps {
 }
 
 const mapStateToProps = (state: Partial<IStore>) => ({
-  languages: state.language,
+  language: state.language,
   ...routeNodeSelector("")(state)
 });
 

src/app/containers/App.tsx

@@ -4,7 +4,9 @@ import "isomorphic-fetch";
 import * as React from "react";
 import * as ReactDOM from "react-dom";
 import {Provider} from "react-redux";
+import {RouterProvider} from "react-router5";
 import {setStylesTarget} from "typestyle";
+
 import {App} from "./app/containers";
 import {configureStore} from "./app/redux/configureStore";
 import {configureRouter} from "./app/routes/configureRouter";
@@ -24,7 +26,9 @@ store.runSaga(rootSaga);
 ReactDOM.render(
   <ReactHotLoader>
     <Provider store={store} key="provider">
-      <App/>
+      <RouterProvider router={router}>
+        <App/>
+      </RouterProvider>
     </Provider>
   </ReactHotLoader>,
   document.getElementById("app")
@@ -33,14 +37,17 @@ ReactDOM.render(
 setStylesTarget(document.getElementById("styles-target"));
 
 if ((module as any).hot) {
-  (module as any).hot.accept("./app/routes/routes", () => {
+  (module as any).hot.accept("./app/containers", () => {
     const {App} = require("./app/containers");
     ReactDOM.render(
       <ReactHotLoader>
         <Provider store={store}>
-          <App/>
+          <RouterProvider router={router}>
+            <App/>
+          </RouterProvider>
         </Provider>
       </ReactHotLoader>,
-      document.getElementById("app"));
+      document.getElementById("app")
+    );
   });
 }

src/client.tsx

@@ -1,28 +1,25 @@
-import {LanguageHelper} from "./app/helpers/LanguageHelper";
-
-const appConfig = require("../config/main");
-
 import * as e6p from "es6-promise";
+(e6p as any).polyfill();
 import "isomorphic-fetch";
-
 import * as React from "react";
-import { renderToString } from "react-dom/server";
-
+import {renderToString} from "react-dom/server";
 import {Provider} from "react-redux";
-import {configureStore} from "./app/redux/configureStore";
-import {configureRouter} from "./app/routes/configureRouter";
-import rootSaga from "./app/sagas/rootSaga";
+import {RouterProvider} from "react-router5";
 
 import {App, Html} from "./app/containers";
+import {LanguageHelper} from "./app/helpers/LanguageHelper";
+import {configureStore} from "./app/redux/configureStore";
 import {ILanguage} from "./app/redux/modules/languageModule";
-(e6p as any).polyfill();
-const manifest = require("../build/manifest.json");
+import {configureRouter} from "./app/routes/configureRouter";
+import rootSaga from "./app/sagas/rootSaga";
 
 const express = require("express");
 const path = require("path");
 const Chalk = require("chalk");
 const favicon = require("serve-favicon");
 
+const appConfig = require("../config/main");
+const manifest = require("../build/manifest.json");
 const app = express();
 const translationHandler = (req, res) => {
   const languageHelper = new LanguageHelper(req.params.lang);
@@ -99,7 +96,9 @@ app.get("*", (req, res) => {
       // render again from the initial data
       const markup = renderToString(
         <Provider store={store} key="provider">
-          <App />
+          <RouterProvider router={router}>
+            <App/>
+          </RouterProvider>
         </Provider>
       );
 
@@ -119,7 +118,9 @@ app.get("*", (req, res) => {
     // first render to activate componentWillMount to dispatch actions for loading initial data
     renderToString(
       <Provider store={store} key="provider">
-        <App />
+        <RouterProvider router={router}>
+          <App/>
+        </RouterProvider>
       </Provider>
     );