Merge pull request #93 from Azzoo/#5-hashes-routing

Hash router integration

Author: am-MongoDB

src/components/login/login.component.js

@@ -12,6 +12,10 @@ import { RESTORE_PASSWORD_PAGE } from "../../root/root.constants.js";
 
 import "./login.css";
 
+import {
+  HOME_PAGE
+} from "../../root/root.constants";
+
 const authService = AuthService.getInstance();
 
 class Login extends Component {
@@ -30,7 +34,7 @@ class Login extends Component {
         this.setState({
           loading: false,
         });
-        history.replace("/home");
+        history.replace(HOME_PAGE);
       })
       .catch((error) => {
         this.setState({

src/components/partials/custom-select/custom-select.js

@@ -1,6 +1,6 @@
 import React, { Component } from "react";
 import { withTranslation } from "react-i18next";
-
+import { withRouter } from "react-router";
 import history from "../../../root/root.history";
 
 import { resetSearch } from "./../../../helpers/get-data";
@@ -24,21 +24,21 @@ class CustomSelect extends Component {
   };
 
   setSelected = (option) => {
-    const currentPath = history.location.pathname;
+    const {currentPath} = this.props;
     const newPath = option === "All" ? "home" : option.toLowerCase();
 
     if (`/${newPath}` !== currentPath) {
-      history.replace(`/${newPath}`);
+      history.push(`#/${newPath}`);
     }
     resetSearch();
 
     this.setState({ selected: option });
   };
 
-  componentDidMount() {
-    const currentLocation = history.location.pathname.match(/[a-zA-Z]+/g)[0];
+  componentDidMount(){
+    const {currentPath} = this.props;
     this.setState({
-      selected: currentLocation === "home" ? "All" : currentLocation,
+      selected: currentPath === "home" ? "All" : currentPath,
     });
   }
 
@@ -73,4 +73,4 @@ class CustomSelect extends Component {
   }
 }
 
-export default withTranslation("translation")(CustomSelect);
+export default withTranslation("translation")(withRouter(CustomSelect));

src/components/partials/search-panel/search-panel.component.js

@@ -71,7 +71,7 @@ class SearchPanel extends Component {
             onChange={this.setSearch}
             onFocus={() => this.setState({ isFocused: true })}
           ></input>
-          <CustomSelect />
+          <CustomSelect currentPath="home" />
         </div>
         {isAutofill && !!value && (
           <Autofill

src/index.js

@@ -1,11 +1,11 @@
 import React from "react";
 import ReactDOM from "react-dom";
-import { Router } from "react-router-dom";
+import { Router, HashRouter } from "react-router-dom";
 import { renderRoutes } from "react-router-config";
 import { I18nextProvider } from "react-i18next";
 import i18next from "./helpers/i18n/index";
 
-import history from "./root/root.history";
+import hashHistory  from "./root/root.history";
 import routes from "./root/root.routes";
 
 import * as serviceWorker from "./serviceWorker";
@@ -15,7 +15,7 @@ import "./styles/shared.css";
 
 ReactDOM.render(
   <I18nextProvider i18n={i18next}>
-    <Router history={history}>{renderRoutes(routes)}</Router>
+    <HashRouter basename="/" history={hashHistory}>{renderRoutes(routes)}</HashRouter>
   </I18nextProvider>,
   document.getElementById("root")
 );

src/root/root.history.js

@@ -1,4 +1,4 @@
-import { createBrowserHistory } from 'history';
+import { createHashHistory  } from 'history';
 
-const history = createBrowserHistory();
-export default history;
+const history = createHashHistory();
+export default history;

src/root/root.routes.js

@@ -97,7 +97,7 @@ const routes = [
         path: EDIT_BOARDING_PAGE,
         component: BoardingEditPage,
         exact: true,
-      }, 
+      },
       {
         path: NEW_BOARDING_PAGE,
         component: BoardingEditPage,