From d628e0ac5162bb1baeb16fcf21b688d37bbff758 Mon Sep 17 00:00:00 2001
From: Georgios Andreadis <g.andreadis@student.tudelft.nl>
Date: Fri, 22 Sep 2017 13:39:50 +0200
Subject: Implement dynamic web page document title change

---
 src/pages/Experiments.js | 35 +++++++++++++++++++++++++++--------
 1 file changed, 27 insertions(+), 8 deletions(-)

(limited to 'src/pages/Experiments.js')

diff --git a/src/pages/Experiments.js b/src/pages/Experiments.js
index 71b9cfc9..5985de45 100644
--- a/src/pages/Experiments.js
+++ b/src/pages/Experiments.js
@@ -1,5 +1,6 @@
 import PropTypes from "prop-types";
 import React from "react";
+import DocumentTitle from "react-document-title";
 import {connect} from "react-redux";
 import {fetchExperimentsOfSimulation} from "../actions/experiments";
 import {openSimulationSucceeded} from "../actions/simulations";
@@ -11,6 +12,7 @@ import NewExperimentModal from "../containers/modals/NewExperimentModal";
 class ExperimentsComponent extends React.Component {
     static propTypes = {
         simulationId: PropTypes.number.isRequired,
+        simulationName: PropTypes.string,
     };
 
     componentDidMount() {
@@ -20,18 +22,35 @@ class ExperimentsComponent extends React.Component {
 
     render() {
         return (
-            <div className="full-height">
-                <AppNavbar simulationId={this.props.simulationId} inSimulation={true}/>
-                <div className="container text-page-container full-height">
-                    <ExperimentListContainer/>
-                    <NewExperimentButtonContainer/>
+            <DocumentTitle
+                title={this.props.simulationName ?
+                    "Experiments - " + this.props.simulationName + " - OpenDC" :
+                    "Experiments - OpenDC"}
+            >
+                <div className="full-height">
+                    <AppNavbar simulationId={this.props.simulationId} inSimulation={true}/>
+                    <div className="container text-page-container full-height">
+                        <ExperimentListContainer/>
+                        <NewExperimentButtonContainer/>
+                    </div>
+                    <NewExperimentModal/>
                 </div>
-                <NewExperimentModal/>
-            </div>
+            </DocumentTitle>
         );
     }
 }
 
+const mapStateToProps = state => {
+    let simulationName = undefined;
+    if (state.currentSimulationId !== -1 && state.objects.simulation[state.currentSimulationId]) {
+        simulationName = state.objects.simulation[state.currentSimulationId].name;
+    }
+
+    return {
+        simulationName,
+    };
+};
+
 const mapDispatchToProps = dispatch => {
     return {
         storeSimulationId: id => dispatch(openSimulationSucceeded(id)),
@@ -40,7 +59,7 @@ const mapDispatchToProps = dispatch => {
 };
 
 const Experiments = connect(
-    undefined,
+    mapStateToProps,
     mapDispatchToProps
 )(ExperimentsComponent);
 
-- 
cgit v1.2.3