Make routing work with mobx; deploy scripts

package.json

@@ -2,6 +2,7 @@
   "name": "voting",
   "version": "0.1.0",
   "private": true,
+  "homepage": "https://oraclesorg.github.io/poa-dapps-voting",
   "dependencies": {
     "autoprefixer": "7.1.6",
     "babel-core": "6.26.0",
@@ -58,6 +59,8 @@
     "whatwg-fetch": "2.0.3"
   },
   "scripts": {
+    "predeploy": "npm run build",
+    "deploy": "gh-pages -d build -o origin",
     "build-css": "node-sass-chokidar src/assets/App.scss -o src/assets",
     "watch-css": "npm run build-css && node-sass-chokidar src/assets/App.scss -o src/assets/src/assets --watch",
     "start-js": "node scripts/start.js",

src/App.js

@@ -9,16 +9,29 @@ import { inject, observer } from 'mobx-react';
 @inject("commonStore")
 @observer
 class App extends Component {
+  onBallotsRender = () => {
+    return <Ballots/>;
+  }
+
+  onNewBallotRender = () => {
+    return <NewBallot/>;
+  }
+
+  onSettingsRender = () => {
+    return <Settings/>;
+  }
+
   render() {
+    this.rootPath = '/poa-dapps-voting'
     const { commonStore } = this.props;
     const loading = commonStore.loading ? <Loading /> : ''
     return (
       <div>
         {loading}
         <Header />
-        <Route exact path="/" component={Ballots}/>
-        <Route path="/new" component={NewBallot}/>
-        <Route path="/settings" component={Settings}/>
+        <Route exact path={`${this.rootPath}/`} render={this.onBallotsRender}/>
+        <Route path={`${this.rootPath}/new`} render={this.onNewBallotRender}/>
+        <Route path={`${this.rootPath}/settings`} render={this.onSettingsRender}/>
         <Footer />
         <DevTools />
       </div>

src/components/Header.jsx

@@ -4,9 +4,9 @@ import { Link } from 'react-router-dom';
 export const Header = () => (
   <header className="header">
     <div className="container">
-      <Link to="/" className="header-logo"></Link>
-      <Link to="/new" className="header-new-ballot">New ballot</Link>
-      <Link to="/settings" className="header-settings">Settings</Link>
+      <Link to="/poa-dapps-voting" className="header-logo"></Link>
+      <Link to="/poa-dapps-voting/new" className="header-new-ballot">New ballot</Link>
+      <Link to="/poa-dapps-voting/settings" className="header-settings">Settings</Link>
     </div>
   </header>
 );

src/index.js

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import ReactDOM from 'react-dom';
-import { BrowserRouter } from 'react-router-dom';
+import { Router, Route } from 'react-router-dom';
 import App from './App';
 import registerServiceWorker from './registerServiceWorker';
 import { Provider } from 'mobx-react';
@@ -11,7 +11,9 @@ import contractsStore from './stores/ContractsStore';
 import swal from 'sweetalert2';
 import getWeb3 from './getWeb3';
 import "babel-polyfill";
+import createBrowserHistory from 'history/createBrowserHistory'
 
+const history = createBrowserHistory()
 const stores = { commonStore, contractsStore, ballotStore, validatorStore };
 
 function generateElement(msg){
@@ -49,9 +51,9 @@ class AppMainRouter extends Component {
   render(){
     return (
       <Provider { ...stores }>
-        <BrowserRouter>
-          <App/>
-        </BrowserRouter>
+        <Router history={history}>
+          <Route component={App} />
+        </Router>
       </Provider>
     )
   }