Merge pull request #32 from KPMP/KPMP-659

Kpmp 659
KPMP · Apr 3, 2019 · 219aa3a · 219aa3a
2 parents 773d826 + 4604a73
commit 219aa3a
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 32 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/App.js b/src/App.js
@@ -1,7 +1,7 @@
 import 'babel-polyfill';
 import React, { Component } from 'react';
 import { Container } from 'reactstrap';
-import { HashRouter, Switch, Route } from 'react-router-dom';
+import { Router, Switch, Route } from 'react-router-dom';
 import { createStore, applyMiddleware } from 'redux';
 import thunk from 'redux-thunk';
 import { Provider } from 'react-redux';
@@ -12,6 +12,7 @@ import DataVizViewerContainer from './components/dataviz/DataVizViewerContainer'
 import initialState from './initialState';
 import rootReducer from './reducers';
 import DemoNavBar from "./components/nav/DemoNavBar";
+import createHistory from 'history/createBrowserHistory';
 
 /* INITIALIZE REDUX **************************************************************/
 const cacheStore = window.sessionStorage.getItem('atlas');
@@ -28,6 +29,8 @@ const saveState = () => {
     window.sessionStorage.setItem('atlas', JSON.stringify(store.getState()));
 };
 
+const history = createHistory();
+
 store.subscribe(saveState);
 
 const GA_TRACKING_ID = 'UA-124331187-6';
@@ -38,15 +41,15 @@ class App extends Component {
   render() {
     return (
         <Provider store={store}>
-            <HashRouter basename={`${process.env.PUBLIC_URL}`}>
+            <Router basename="/atlas" history={history}>
                 <Container fluid>
                     <DemoNavBar />
                     <Switch>
-                      <Route exact path="/" component={SchematicViewerContainer} />
-                      <Route path="/data/:cellName" component={DataVizViewerContainer} />
+                      <Route exact path={process.env.PUBLIC_URL} component={SchematicViewerContainer} />
+                      <Route path={process.env.PUBLIC_URL + "/data/:cellName"} component={DataVizViewerContainer} />
                     </Switch>
                 </Container>
-            </HashRouter>
+            </Router>
         </Provider>
     );
   }

diff --git a/src/components/dataviz/Instruction.js b/src/components/dataviz/Instruction.js
@@ -68,7 +68,7 @@ class Instruction extends Component {
 }
 
 Instruction.propTypes = {
-    id: PropTypes.String.isRequired,
+    id: PropTypes.string.isRequired,
     title: PropTypes.string.isRequired,
     children: PropTypes.oneOfType([
         PropTypes.arrayOf(PropTypes.node),

diff --git a/src/components/nav/DemoNavBar.js b/src/components/nav/DemoNavBar.js
@@ -6,16 +6,16 @@ class DemoNavBar extends Component {
     render() {
         return (
             <Navbar expand="md" className="nav-container container-fluid row">
-                <NavbarBrand href={process.env.PUBLIC_URL + "/"}>
-                    <img src="img/logo.png" alt="Kidney Tissue Atlas Concept" className="logo"/>
+                <NavbarBrand href={process.env.PUBLIC_URL}>
+                    <img src="/img/logo.png" alt="Kidney Tissue Atlas Concept" className="logo"/>
                 </NavbarBrand>
                 <div id="demo-text">
                     Atlas Concept
                 </div>
                 <Nav navbar className="ml-auto">
                     <NavItem>
                         <NavLink>
-                            <Link to="/">Cell Types</Link></NavLink>
+                            <Link to={process.env.PUBLIC_URL}>Cell Types</Link></NavLink>
                     </NavItem>
                     <NavItem>
                         <NavLink disabled>Molecular</NavLink>

diff --git a/src/components/schematic/SchematicViewer.js b/src/components/schematic/SchematicViewer.js
@@ -75,7 +75,7 @@ class SchematicViewer extends Component {
                                     <span className="cell-structure-name">{structure.structureName}</span>
                                     ) : (
                                     <Link className="cell-structure-name"
-                                          to={`/data/${encodeURIComponent(structure.cellName)}`}
+                                          to={process.env.PUBLIC_URL + `/data/${encodeURIComponent(structure.cellName)}`}
                                           onClick={() => { this.onCellClick(structure.cellName)}}
                                           onMouseEnter={() => this.setState({ activeImages: structure.images })}
                                         >{structure.structureName}
@@ -84,7 +84,7 @@ class SchematicViewer extends Component {
                                     <ul className="cell-type-list">
                                         {structure.cells.map((cell) => {
                                             return <li>
-                                                    <Link to={`/data/${encodeURIComponent(cell.cellName)}`}
+                                                    <Link to={process.env.PUBLIC_URL + `/data/${encodeURIComponent(cell.cellName)}`}
                                                           onClick={() => { this.onCellClick(cell.cellName)}}
                                                           onMouseEnter={() => this.setState( { activeImages: cell.images })}
                                                         >{cell.cellName}