add routing based react-router and react-router-dom

web/.eslintrc

@@ -9,5 +9,5 @@
         "config": "./webpack.config.base.js"
       }
     }
-  },
+  }
 }

web/package.json

@@ -11,10 +11,13 @@
     "@babel/runtime": "7.3.1",
     "antd": "3.13.2",
     "core": "1.0.0",
+    "history": "^4.7.2",
     "react": "16.8.1",
     "react-dom": "16.8.1",
     "react-hot-loader": "4.6.5",
     "react-redux": "6.0.0",
+    "react-router": "^4.3.1",
+    "react-router-dom": "^4.3.1",
     "redux-logger": "3.0.6",
     "styled-components": "4.1.3"
   },

web/src/components/ErrorComponent/ErrorComponent.jsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import {
+  ErrorPageContainer, ErrorText,
+} from './styled';
+
+
+const ErrorComponent = () => (
+  <ErrorPageContainer>
+    <ErrorText>
+      404 page not found
+    </ErrorText>
+  </ErrorPageContainer>
+);
+
+export default ErrorComponent;

web/src/components/ErrorComponent/index.js

@@ -0,0 +1,3 @@
+import ErrorComponent from './ErrorComponent';
+
+export default ErrorComponent;

web/src/components/ErrorComponent/styled/index.js

@@ -0,0 +1,16 @@
+import styled from 'styled-components';
+
+export const ErrorPageContainer = styled.div`
+  position: absolute;
+  display: flex;
+  justify-content:center;
+  align-items: center;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  left: 0;
+`;
+
+export const ErrorText = styled.span`
+  font-size: 30px; 
+`;

web/src/components/ExampleComponent/ExampleComponent.jsx

@@ -4,6 +4,7 @@ import React from 'react';
 import type {
   Node,
 } from 'react';
+
 import type {
   Action,
 } from 'core/types';
@@ -18,10 +19,7 @@ type Props = {
   generateRandomString: () => Action | void,
 };
 
-const ExampleComponent = ({
-  randomString,
-  generateRandomString,
-}: Props): Node => (
+const ExampleComponent = ({ randomString, generateRandomString }: Props): Node => (
   <div>
     <span>
       {randomString}

web/src/components/HomeComponent/HomeComponent.jsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import {
+  Link,
+} from 'react-router-dom';
+import
+{
+  NavigationContainer, LinksElement, ListLinks,
+} from './styled';
+
+
+const HomeComponent = () => (
+  <NavigationContainer>
+    <ListLinks>
+
+      <LinksElement>
+        <Link to="/products">Products</Link>
+      </LinksElement>
+
+      <LinksElement>
+        <Link to="/generator">Generator</Link>
+      </LinksElement>
+
+    </ListLinks>
+  </NavigationContainer>
+);
+
+export default HomeComponent;

web/src/components/HomeComponent/index.js

@@ -0,0 +1,3 @@
+import HomeComponent from './HomeComponent';
+
+export default HomeComponent;

web/src/components/HomeComponent/styled/index.js

@@ -0,0 +1,36 @@
+import styled from 'styled-components';
+
+
+export const NavigationContainer = styled.div`
+  background: linear-gradient(45deg, rgba(255,255,255,1) 0%, rgba(0,255,255,1) 100%);
+  position: absolute;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  top: 0;
+  bottom:0;
+  right: 0;
+  left: 0; 
+`;
+
+
+export const ListLinks = styled.ul`
+  list-style-type: none;
+  margin: 0 auto;
+  padding:0;
+`;
+
+
+export const LinksElement = styled.li`
+  display: inline;
+  margin: 20px;
+  font-size: 25px;
+  border-bottom: none;
+  transition: border-bottom 220ms ease-out;
+  
+  &:hover {
+      border-bottom: 2px solid white;
+    transition: border-bottom 220ms ease-out, color 220ms ease-out;
+  }
+  
+`;

web/src/containers/Base/Base.jsx

@@ -1,20 +1,47 @@
 // @flow
 import React, {
-  type Node,
-  type StatelessFunctionalComponent,
+  type Node, type StatelessFunctionalComponent,
 } from 'react';
+
 import {
   hot,
 } from 'react-hot-loader';
 
 import ExampleContainer from 'web-containers/ExampleContainer';
 import ProductsTableContainer from 'web-containers/ProductsTableContainer';
 
+import {
+  Route, Router, Switch,
+} from 'react-router';
+
+import createHistory from 'history/createBrowserHistory';
+import HomeComponent from 'web-components/HomeComponent';
+import ErrorComponent from 'web-components/ErrorComponent';
+
+
+const browserHistory = createHistory();
+
 
 const Base: StatelessFunctionalComponent<*> = (): Node => (
   <div>
-    <ExampleContainer />
-    <ProductsTableContainer />
+    <Router history={browserHistory}>
+      <Switch>
+        <Route
+          path="/"
+          component={HomeComponent}
+          exact
+        />
+        <Route
+          path="/products"
+          render={() => <ProductsTableContainer browserHistory={browserHistory} />}
+        />
+        <Route
+          path="/generator"
+          render={() => <ExampleContainer browserHistory={browserHistory} />}
+        />
+        <Route component={ErrorComponent} />
+      </Switch>
+    </Router>
   </div>
 );
 

web/src/containers/ExampleContainer/ExampleContainer.jsx

@@ -3,39 +3,41 @@ import React from 'react';
 import {
   connect,
 } from 'react-redux';
-
 import type {
-  State,
-  Dispatch,
+  State, Dispatch,
 } from 'core/types';
-
 import {
   uiActions,
 } from 'core/actions';
 import {
   getUiState,
 } from 'core/selectors';
-
 import ExampleComponent from 'web-components/ExampleComponent';
 
 
 type Props = {
   randomString: string,
   dispatch: Dispatch,
+  browserHistory: Object
 };
 
-const ExampleContainer = ({
-  randomString,
-  dispatch,
-}: Props) => (
-  <ExampleComponent
-    randomString={randomString}
-    generateRandomString={
+const ExampleContainer = ({ randomString, dispatch, browserHistory }: Props) => (
+  <div>
+    <ExampleComponent
+      randomString={randomString}
+      generateRandomString={
       () => (
         dispatch(uiActions.generateRandomString())
       )
     }
-  />
+    />
+    <button
+      type="button"
+      onClick={() => browserHistory.goBack()}
+    >
+      Go back
+    </button>
+  </div>
 );
 
 const mapStateToProps = (state: State) => ({