Refactor the header (#71)

xchem · Sep 18, 2018 · cbbf042 · cbbf042
1 parent aa8eda5
commit cbbf042
Show file tree

Hide file tree

Showing 7 changed files with 28 additions and 17 deletions.
diff --git a/js/components/header.js b/js/components/header.js
@@ -3,15 +3,15 @@
  */
 
 import React from "react";
-import {Navbar} from "react-bootstrap";
+import {Navbar, Nav, NavItem} from "react-bootstrap";
 import {Typeahead} from "react-typeahead";
 import * as apiActions from "../actions/apiActions";
 import * as nglActions from "../actions/nglLoadActions";
 import {connect} from "react-redux";
 import * as nglObjectTypes from "../components/nglObjectTypes";
-import {withRouter} from "react-router-dom";
+import {withRouter, Link} from "react-router-dom";
 import TargetList from "./targetList";
-
+import UpdateOrientation from "./updateOrientation";
 
 class Header extends React.Component {
 
@@ -56,13 +56,37 @@ class Header extends React.Component {
     }
 
   render() {
+      var landing = "/viewer/react/landing";
+      var login = "/accounts/login"
+      var logout = "/accounts/logout"
+      var new_ele;
+      var username = DJANGO_CONTEXT["username"];
+      if (username=="NOT_LOGGED_IN"){
+          new_ele = <a href={login}>Login</a>
+      }
+      else{
+          new_ele = <a>
+              <b>Hello {username}!</b>
+              <a href={logout}>Logout</a>
+          </a>
+      }
+
     return <Navbar>
+        <Navbar.Header>
+            <Navbar.Brand>
+                <Link to={landing}>Home</Link>
+            </Navbar.Brand>
+        </Navbar.Header>
+        {new_ele}
         <Typeahead
             labelKey="name"
             onOptionSelected={this.selectTarget}
             options={this.getTargetList()}
             placeholder="Choose a target..."
         />
+        <Nav pullRight>
+            <UpdateOrientation />
+        </Nav>
         <TargetList key="TARGLIST" render={false}/>
       </Navbar>
   }

diff --git a/js/components/nglComponents.js b/js/components/nglComponents.js
@@ -10,7 +10,6 @@ import * as nglLoadActions from "../actions/nglLoadActions";
 import * as nglRenderActions from "../actions/nglRenderActions";
 import * as nglObjectTypes from "../components/nglObjectTypes";
 import * as listTypes from "./listTypes";
-import {showLoading, hideLoading} from "react-redux-loading-bar";
 import * as selectionActions from "../actions/selectionActions";
 
 export class NGLView extends React.Component {
@@ -418,7 +417,6 @@ export class NGLView extends React.Component {
             if (this.div_id==nglObject.display_div) {
                 this.function_dict[nglObject.OBJECT_TYPE](this.stage,nglObject,nglKey)
                 this.props.objectLoading(nglObject);
-                this.props.showLoading();
             }
         }
         for(var nglKey in this.props.objectsToDelete){
@@ -476,7 +474,6 @@ export class NGLView extends React.Component {
                 if (this.stage.getComponentsByName(nglKey).list.length > 0) {
                     var nglObject = this.props.objectsLoading[nglKey];
                     this.props.loadObjectSuccess(nglObject);
-                    this.props.hideLoading()
                 }
             }
         }
@@ -511,11 +508,9 @@ const mapDispatchToProps = {
     setMolGroupOn: apiActions.setMolGroupOn,
     selectVector: selectionActions.selectVector,
     setDuckYankData: apiActions.setDuckYankData,
-    hideLoading: hideLoading,
     setNGLOrientation: nglLoadActions.setNGLOrientation,
     setPanddaSiteOn: apiActions.setPanddaSiteOn,
     setOrientation: nglLoadActions.setOrientation,
-    showLoading: showLoading,
     objectLoading: nglLoadActions.objectLoading,
     loadObjectSuccess: nglLoadActions.loadObjectSuccess,
     loadObjectFailure: nglLoadActions.loadObjectFailure,

diff --git a/js/components/nglViewerControls.js b/js/components/nglViewerControls.js
@@ -5,7 +5,6 @@
 import React from "react";
 import {connect} from "react-redux";
 import * as nglLoadActions from "../actions/nglLoadActions";
-import UpdateOrientation from "./updateOrientation";
 import {Button} from "react-bootstrap";
 
 class NglViewerControls extends React.Component {
@@ -36,8 +35,6 @@ class NglViewerControls extends React.Component {
         return <div>
             <h3>Viewer controls</h3>
             <Button bsSize="large" bsStyle="success" onClick={this.handleStageColor}>Change background colour</Button>
-            {/*<Button bsSize="large" bsStyle="success" onClick={this.handleNglProtStyle}>Change protein representation</Button>*/}
-            <UpdateOrientation />
         </div>
     }
 }

diff --git a/js/components/updateOrientation.js b/js/components/updateOrientation.js
@@ -121,7 +121,7 @@ export class UpdateOrientation extends React.Component {
 
     render() {
         return <div>
-            <Button bsSize="large" bsStyle="success" onClick={this.postToServer}>Save NGL Orientation</Button>
+            <Button bsSize="large" bsStyle="success" onClick={this.postToServer}>Save Page</Button>
            </div>
     }
 }

diff --git a/js/containers/app.js b/js/containers/app.js
@@ -1,7 +1,6 @@
 import React from "react";
 import {Grid} from "react-bootstrap";
 import Header from "../components/header";
-import LoadingBar from "react-redux-loading-bar";
 import Tindspect from "./tindspectHolder";
 import Preview from "./previewHolder";
 import FraggleBox from "./fraggleBoxHolder";
@@ -10,7 +9,6 @@ import {Route, Switch} from "react-router-dom";
 
 const routes = (
       <div id="outer-container">
-          <LoadingBar />
           <Grid fluid id="page-wrap">
               <Header></Header>
                   <Switch>

diff --git a/js/reducers/reducers.js b/js/reducers/reducers.js
@@ -6,13 +6,11 @@ import apiRed from "./apiReducers";
 import nglRed from "./nglReducers";
 import selectionRed from "./selectionReducers";
 import renderReducers from "./renderReducers";
-import {loadingBarReducer} from "react-redux-loading-bar";
 import undoable from "redux-undo";
 
 const rootReducer = combineReducers({
     renderReducers,
     apiReducers: undoable(apiRed, {limit: 10}),
-    loadingBar: loadingBarReducer,
     nglReducers: undoable(nglRed, {limit: 10}),
     selectionReducers: undoable(selectionRed, {limit: 10})
 })

diff --git a/package.json b/package.json
@@ -47,7 +47,6 @@
     "react-modal": "^3.4.5",
     "react-redux": "^5.0.7",
     "react-bootstrap-toggle": "^2.3.1",
-    "react-redux-loading-bar": "^3.1.2",
     "react-router-dom": "^4.3.1",
     "react-router-redux": "^4.0.8",
     "react-svg-inline": "^2.1.0",