Merge pull request #3 from jepser/handle-dynamic-component

fix: dynamic registering

Author: jepser

demo/demo.js

@@ -1,12 +1,32 @@
-import React from 'react'
+import React, { Component } from 'react'
 import ReactDOM from 'react-dom'
 import Cui from '../src/ReactCui'
 
-const App = ({}) => {
-  return <div>
-    <p>Let's add avatar and theme</p>
-    <Cui uid="Sb1WbK" theme="red" avatar="http://i.imgur.com/6jr3M0j.png" height="400" />
-  </div>
+class App extends Component {
+
+  constructor() {
+    super()
+    this.state = {
+      show: false
+    }
+
+    this.handleOnClick = this.handleOnClick.bind(this)
+  }
+
+  handleOnClick() {
+    this.setState(prevState => ({
+      show: !prevState.show
+    }))
+  }
+  render() {
+    return <div>
+      <p>Let's add avatar and theme</p>
+      <Cui uid="d6wXaD" theme="blue" avatar="https://i.imgur.com/6jr3M0j.png" height="400" />
+      {this.state.show &&
+        <Cui uid="Sb1WbK" theme="red" avatar="https://i.imgur.com/6jr3M0j.png" height="400" />}
+      <span onClick={this.handleOnClick}>Click to {this.state.show ? 'hide' : 'show'}</span>
+    </div>
+  }
 }
 
 

src/ReactCui.js

@@ -1,24 +1,23 @@
-import React, { Component, Fragment } from 'react'
+import React, { Component, Fragment, createRef } from 'react'
 import PropTypes from 'prop-types'
 
 export const EMBED_URL = 'https://labs-assets.typeform.com/cui/cui-embed.js'
 
 class Cui extends Component {
+  constructor () {
+    super()
+    this.ref = createRef()
+  }
   componentDidMount () {
     if (!scriptTagExists({ document })) {
       const embedJs = document.createElement('script')
       embedJs.type = 'text/javascript'
       embedJs.id = 'cui-embed-script'
       embedJs.src = EMBED_URL
       embedJs.async = true
-      document.getElementsByTagName('head')[0].appendChild(embedJs)
-    }
-  }
-
-  componentWillUnmount () {
-    if (scriptTagExists({ document })) {
-      const scripts = getScriptTags({ document })
-      scripts.forEach(script => script.remove())
+      document.head.appendChild(embedJs)
+    } else {
+      window.__CUI && window.__CUI.register(this.ref.current)
     }
   }
 
@@ -34,6 +33,7 @@ class Cui extends Component {
             data-cui-height={height}
             data-cui-avatar={avatar}
             data-cui-theme={theme}
+            ref={this.ref}
           />
         ) : null}
       </Fragment>

src/ReactCui.test.js

@@ -52,13 +52,4 @@ describe('<Cui />', () => {
 
     expect(scriptTags.length).toBe(1)
   })
-
-  test('Unmount the component will remove the script tag created', () => {
-    const Component = mount(<Cui uid={'123'} />)
-    Component.unmount()
-
-    const scriptTags = getEmbedScriptTag({ document })
-
-    expect(scriptTags.length).toBe(0)
-  })
 })