external 'goto' and event_callback

Author: samuelcolvin

public/index.html

@@ -23,6 +23,7 @@
       <div id="socket1"></div>
       <div id="socket2"></div>
       <div id="socket3"></div>
+      <div style="background: red; height: 800px; width: 100px"></div>
     </main>
   </body>
   <script>

src/components/App.js

@@ -14,8 +14,7 @@ class App extends Component {
       error: props.error,
       enquiry_form_info: null,
     }
-    this.url_base = props.config.router_mode === 'history' ? props.config.url_root : '/'
-    this.url = this.url.bind(this)
+    this.url = props.url_generator
     this.get_text = this.get_text.bind(this)
 
     this.get_enquiry = this.get_enquiry.bind(this)
@@ -28,9 +27,6 @@ class App extends Component {
     }
   }
 
-  url (url_) {
-    return this.url_base + url_
-  }
 
   get_text (name, replacements) {
     let s = this.props.config.messages[name]
@@ -49,7 +45,9 @@ class App extends Component {
 
   async set_enquiry () {
     this.setState({enquiry_form_info: {}})
-    this.setState({enquiry_form_info: await this.requests.get('enquiry')})
+    const enquiry_form_info = await this.requests.get('enquiry')
+    this.props.config.event_callback('get_enquiry_data', enquiry_form_info)
+    this.setState({enquiry_form_info})
   }
 
   ga_event (category, action, label) {

src/components/contractors/Contractors.js

@@ -22,6 +22,7 @@ class Contractors extends Component {
   async componentDidMount () {
     if (this.state.subjects.length === 0) {
       const subjects = await this.props.root.requests.get('subjects')
+      this.props.config.event_callback('get_subjects', subjects)
       this.setState({subjects})
     }
 
@@ -48,8 +49,10 @@ class Contractors extends Component {
 
     this.setState({selected_subject})
     const sub_id = selected_subject && selected_subject.id
+    const contractors = await this.props.root.requests.get('contractors', {subject: sub_id || null})
+    this.props.config.event_callback('updated_contractors', contractors)
     this.setState({
-      contractors: await this.props.root.requests.get('contractors', {subject: sub_id || null}),
+      contractors,
       got_contractors: true
     })
   }
@@ -65,7 +68,9 @@ class Contractors extends Component {
 
   async set_contractor_details (url, state_ref) {
     this.setState({[state_ref]: null})
-    this.setState({[state_ref]: await this.props.root.requests.get(url)})
+    const con_details = await this.props.root.requests.get(url)
+    this.props.config.event_callback('get_contractor_details', con_details)
+    this.setState({[state_ref]: con_details})
   }
 
   render () {

src/components/shared/Modal.js

@@ -10,6 +10,7 @@ class Modal extends Component {
     }
     this.close = this.close.bind(this)
   }
+
   componentWillMount () {
     this.body_overflow_before = document.body.style.overflow
     document.body.style.overflow = 'hidden'

src/index.js

@@ -122,13 +122,28 @@ window.socket = function (public_key, config) {
 
   console.debug('using config:', config)
 
-  const Router = config.router_mode === 'history' ? BrowserRouter : HashRouter
-
-  const v = ReactDOM.render(<Router><App error={error} public_key={public_key} config={config}/></Router>, el)
-  // TODO provide a better object here?
+  const url_base = config.router_mode === 'history' ? config.url_root : '/'
+  const url_generator = (url_) => url_base + url_
 
   window._tcs_grecaptcha_loaded = () => (
     document.dispatchEvent(new Event('_tcs_grecaptcha_loaded'))
   )
-  return v
+
+  const Router = config.router_mode === 'history' ? BrowserRouter : HashRouter
+
+  const router = ReactDOM.render(<Router><App
+      error={error}
+      public_key={public_key}
+      url_generator={url_generator}
+      config={config}/></Router>, el)
+  // for external use and compatibility with old socket
+  return {
+    goto: path => {
+      if (path === 'enquiry-modal') {
+        router.history.push(url_generator('enquiry'))
+      } else {
+        router.history.push(url_generator(path))
+      }
+    }
+  }
 }