Feature - don't reload the page on redirect (#41)

xchem · Jun 25, 2018 · 09b98a7 · 09b98a7
1 parent c6441e5
commit 09b98a7
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 30 deletions.
diff --git a/js/components/header.js b/js/components/header.js
@@ -8,6 +8,8 @@ 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 { Link } from 'react-router-dom'
 
 
 class Header extends React.Component {
@@ -16,7 +18,6 @@ class Header extends React.Component {
         super(props)
         this.getTargetList = this.getTargetList.bind(this);
         this.selectTarget = this.selectTarget.bind(this);
-        this.clicker = this.clicker.bind(this);
         this.generateTargetObject = this.generateTargetObject.bind(this);
     }
 
@@ -51,17 +52,9 @@ class Header extends React.Component {
 
 
     selectTarget(option) {
-        for(var key in this.props.target_id_list){
-            if(this.props.target_id_list[key].title==option){
-                this.props.setTargetOn(this.props.target_id_list[key].id);
-                break;
-            }
-        }
+        this.props.history.push("/viewer/react/preview/target/" + option)
     }
 
-    clicker() {
-        this.props.setAppOn("TINDSPECT");
-    }
   render() {
     return <Navbar>
         <Typeahead
@@ -88,4 +81,4 @@ const mapDispatchToProps = {
     loadObject: nglActions.loadObject,
     setTargetOn: apiActions.setTargetOn,
 }
-export default connect(mapStateToProps, mapDispatchToProps)(Header)
+export default withRouter(connect(mapStateToProps, mapDispatchToProps)(Header))
diff --git a/js/components/targetList.js b/js/components/targetList.js
@@ -9,6 +9,8 @@ import * as apiActions from '../actions/apiActions';
 import * as listType from './listTypes';
 import * as nglLoadActions from '../actions/nglLoadActions';
 import * as nglObjectTypes from '../components/nglObjectTypes';
+import { withRouter } from 'react-router-dom'
+import { Link } from 'react-router-dom'
 
 class TargetList extends GenericList {
     constructor(props) {
@@ -19,14 +21,11 @@ class TargetList extends GenericList {
         this.checkForTargetChange = this.checkForTargetChange.bind(this);
         this.origTarget = -1;
     }
+
     render_method(data) {
-        var preview = "/viewer/react/preview/target/" + data.title
+        var preview = "/viewer/react/preview/target/" + data.title;
         return <ListGroupItem key={data.id} >
-            <label>
-                <a href={preview}>
-                {data.title}
-                </a>
-            </label>
+            <Link to={preview}>{data.title}</Link>
         </ListGroupItem>
     }
 
@@ -106,4 +105,4 @@ const mapDispatchToProps = {
     setMoleculeList: apiActions.setMoleculeList,
     setObjectList: apiActions.setTargetIdList
 }
-export default connect(mapStateToProps, mapDispatchToProps)(TargetList);
+export default withRouter(connect(mapStateToProps, mapDispatchToProps)(TargetList));
diff --git a/js/containers/previewHolder.js b/js/containers/previewHolder.js
@@ -11,22 +11,32 @@ import MolGroupSlider from '../components/molGroupSlider'
 import SummaryView from '../components/summaryView';
 import * as apiActions from '../actions/apiActions';
 import fetch from 'cross-fetch';
+import { withRouter } from 'react-router-dom'
+
 
 class Preview extends Component {
 
     constructor(props) {
         super(props)
-  }
-
-
-    componentDidMount(){
-           var target = this.props.match.params.target;
-           // Get from the REST API
-           fetch(window.location.protocol + "//" + window.location.host+"/api/targets/?title="+target)
-               .then(response => response.json())
-               // Set the target id from the json
-               .then(json => this.props.setTargetOn(json["results"][0].id));
-       }
+        this.updateTarget = this.updateTarget.bind(this);
+    }
+
+    updateTarget(){
+        var target = this.props.match.params.target;
+        // Get from the REST API
+        fetch(window.location.protocol + "//" + window.location.host+"/api/targets/?title="+target)
+            .then(response => response.json())
+            // Set the target id from the josn
+            .then(json => this.props.setTargetOn(json["results"][0].id));
+    }
+    componentDidMount() {
+        this.updateTarget()
+    }
+
+    componentDidUpdate(){
+        this.updateTarget()
+    }
+
   render() {
       return (
           <Row >
@@ -58,4 +68,4 @@ const mapDispatchToProps = {
 }
 
 
-export default connect(mapStateToProps, mapDispatchToProps)(Preview)
+export default withRouter(connect(mapStateToProps, mapDispatchToProps)(Preview))