Browser history and link for bot constructor

lhc_web/design/defaulttheme/js/react/src/App.js

@@ -1,24 +1,59 @@
-import React, { Component } from 'react';
+import React, {Component} from 'react';
 import NodeGroups from './components/NodeGroups';
 import NodeTriggerBuilder from './components/NodeTriggerBuilder';
 import NodeTriggerBuilderPreview from './components/NodeTriggerBuilderPreview';
+import {fetchNodeGroupTriggerAction} from "./actions/nodeGroupTriggerActions"
+import {connect} from "react-redux";
+
+@connect((store) => {
+    return {
+        currenttrigger: store.currenttrigger,
+        nodegroups: store.nodegroups
+    };
+})
 
 class App extends Component {
-  render() {
-    return (
-      <div className="row">
-        <div className="col-4">
-              <NodeGroups botId={this.props.botId} />
-        </div>
-        <div className="col-5">
-              <NodeTriggerBuilder botId={this.props.botId} />
-        </div>
-        <div className="col-3">
-              <NodeTriggerBuilderPreview />
-        </div>
-      </div>
-    );
-  }
+
+    constructor(props) {
+        super(props);
+        this.hashChanged = this.hashChanged.bind(this);
+    }
+
+    componentDidMount() {
+        window.addEventListener("hashchange", this.hashChanged, false);
+    }
+
+    componentWillUnmount() {
+        window.removeEventListener("hashchange", this.hashChanged, false);
+    }
+
+    hashChanged() {
+        var hash = window.location.hash;
+        if (hash != '') {
+            var matchData = hash.match(/\d+$/);
+            if (matchData !== null && matchData[0]) {
+                if (parseInt(this.props.currenttrigger.getIn(['currenttrigger','id'])) != parseInt(matchData[0])) {
+                    this.props.dispatch(fetchNodeGroupTriggerAction(parseInt(matchData[0])))
+                }
+            }
+        }
+    }
+
+    render() {
+        return (
+            <div className="row">
+                <div className="col-4">
+                    <NodeGroups triggerId={this.props.triggerId} botId={this.props.botId}/>
+                </div>
+                <div className="col-5">
+                    <NodeTriggerBuilder botId={this.props.botId}/>
+                </div>
+                <div className="col-3">
+                    <NodeTriggerBuilderPreview/>
+                </div>
+            </div>
+        );
+    }
 }
 
 export default App;

lhc_web/design/defaulttheme/js/react/src/actions/nodeGroupTriggerActions.js

@@ -51,6 +51,7 @@ export function fetchNodeGroupTriggerAction(triggerId) {
         axios.get(WWW_DIR_JAVASCRIPT + "genericbot/nodetriggeractions/" + triggerId)
         .then((response) => {
                 dispatch({type: "FETCH_TRIGGER_RESPONSE_FULFILLED", payload: response.data})
+                document.location.hash = '#!#%2Ftrigger-'+triggerId;
         })
         .catch((err) => {
                 dispatch({type: "FETCH_TRIGGER_RESPONSE_REJECTED", payload: err})

lhc_web/design/defaulttheme/js/react/src/components/NodeGroup.js

@@ -70,7 +70,7 @@ class NodeGroup extends Component {
     render() {
 
         if (this.props.nodegrouptriggers.get('nodegrouptriggers').has(this.props.group.get('id'))) {
-            var mappedNodeGroupTriggers = this.props.nodegrouptriggers.get('nodegrouptriggers').get(this.props.group.get('id')).map(nodegrouptrigger =><NodeGroupTrigger key={nodegrouptrigger.get('id')} trigger={nodegrouptrigger}  />);
+            var mappedNodeGroupTriggers = this.props.nodegrouptriggers.get('nodegrouptriggers').get(this.props.group.get('id')).map(nodegrouptrigger =><NodeGroupTrigger triggerId={this.props.triggerId} key={nodegrouptrigger.get('id')} trigger={nodegrouptrigger}  />);
         } else {
             var mappedNodeGroupTriggers = "";
         }

lhc_web/design/defaulttheme/js/react/src/components/NodeGroupTrigger.js

@@ -24,6 +24,10 @@ class NodeGroupTrigger extends Component {
         this.setAsArgumentTrigger = this.setAsArgumentTrigger.bind(this);
         this.changeGroup = this.changeGroup.bind(this);
         this.makeCopy = this.makeCopy.bind(this);
+
+        if (this.props.triggerId == this.props.trigger.get('id')) {
+            this.props.dispatch(fetchNodeGroupTriggerAction(this.props.trigger.get('id')))
+        }
     }
 
     loadTriggerActions() {

lhc_web/design/defaulttheme/js/react/src/components/NodeGroups.js

@@ -30,7 +30,7 @@ class NodeGroups extends Component {
 
     render() {
 
-        const mappedNodeGroups = this.props.nodegroups.get('nodegroups').sortBy(group => group.get('pos')).map(nodegroup =><NodeGroup botId={this.props.botId} changeTitle={this.changeTitle.bind(this)} key={nodegroup.get('id')} group={nodegroup} />);
+        const mappedNodeGroups = this.props.nodegroups.get('nodegroups').sortBy(group => group.get('pos')).map(nodegroup =><NodeGroup triggerId={this.props.triggerId} botId={this.props.botId} changeTitle={this.changeTitle.bind(this)} key={nodegroup.get('id')} group={nodegroup} />);
 
         return (
             <div>

lhc_web/design/defaulttheme/js/react/src/index.jsx

@@ -6,9 +6,20 @@ import store from "./store/index";
 
 var root = document.getElementById('root');
 
+var dataSet = root.dataset;
+
+dataSet['triggerId'] = 0;
+var hash = window.location.hash;
+if (hash != '') {
+    var matchData = hash.match(/\d+$/);
+    if (matchData !== null && matchData[0]) {
+        dataSet['triggerId'] = parseInt(matchData[0]);
+    }
+}
+
 ReactDOM.render(
     <Provider store={store}>
-        <App {...(root.dataset)} />
+        <App {...(dataSet)} />
     </Provider>,
     root
  );

lhc_web/design/defaulttheme/tpl/lhgenericbot/bot.tpl.php

@@ -1 +1 @@
-<div  id="root" data-bot-id="<?php echo $bot->id?>"></div>
+<div id="root" data-bot-id="<?php echo $bot->id?>"></div>