Add ability to add collection of Beacon IDs

helpscout · Dec 19, 2018 · 47ee532 · 47ee532
1 parent c52f1f1
commit 47ee532
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 14 deletions.
diff --git a/src/actions/index.js b/src/actions/index.js
@@ -1,16 +1,14 @@
 import {saveState} from '../utils'
 
 export const updateBeaconId = (state, event) => {
-  if (event.key === 'Enter') {
-    const beaconId = event.target.value
-    console.log('Beacon DevTools: Initializing', beaconId)
-    window.Beacon('destroy')
-    window.Beacon('init', beaconId)
-
-    return {
-      beaconId,
-      open: false,
-    }
+  const beaconId = event.target.value
+  console.log('Beacon DevTools: Initializing', beaconId)
+  window.Beacon('destroy')
+  window.Beacon('init', beaconId)
+
+  return {
+    beaconId,
+    open: false,
   }
 }
 

diff --git a/src/components/DevTools/DevTools.js b/src/components/DevTools/DevTools.js
@@ -35,6 +35,7 @@ import {DevToolsUI, FormBlock, HeaderUI, FooterUI} from './DevTools.css'
 export class DevTools extends React.PureComponent {
   static defaultProps = {
     beaconId: '',
+    beaconIds: [],
     isAutoOpen: false,
     toggleDocs: () => undefined,
     toggleMessaging: () => undefined,
@@ -62,6 +63,37 @@ export class DevTools extends React.PureComponent {
     window.Beacon('off', 'close', this.props.closeBeacon)
   }
 
+  handleOnInputUpdateBeaconId = event => {
+    if (event.key === 'Enter') {
+      this.props.updateBeaconId(event)
+    }
+  }
+
+  handleOnSelectUpdateBeaconId = event => {
+    this.props.updateBeaconId(event)
+  }
+
+  renderBeaconIds() {
+    const {beaconIds} = this.props
+    if (!beaconIds.length) return null
+
+    return (
+      <Label>
+        Beacon ID List
+        <Select onChange={this.handleOnSelectUpdateBeaconId}>
+          <option disabled selected>
+            Select...
+          </option>
+          {beaconIds.map(({id, label}) => (
+            <option value={id} key={id}>
+              {label}
+            </option>
+          ))}
+        </Select>
+      </Label>
+    )
+  }
+
   render() {
     const {
       chatEnabled,
@@ -79,7 +111,6 @@ export class DevTools extends React.PureComponent {
       toggleOpen,
       toggleShowGetInTouch,
       toggleTranslation,
-      updateBeaconId,
       updateColor,
       updateDisplayText,
       updateIconImage,
@@ -95,7 +126,11 @@ export class DevTools extends React.PureComponent {
           <MainModal>
             <HeaderUI>
               Beacon DevTools
-              <Input onKeyUp={updateBeaconId} placeholder="Beacon ID" />
+              <Input
+                onKeyUp={this.handleOnInputUpdateBeaconId}
+                placeholder="Beacon ID"
+              />
+              {this.renderBeaconIds()}
             </HeaderUI>
             <DevToolsUI>
               <div>

diff --git a/src/components/Label/Label.js b/src/components/Label/Label.js
@@ -2,11 +2,14 @@ import styled from '@helpscout/hsds-react/components/styled'
 
 const LabelUI = styled('label')`
   color: #ccc;
+  display: block;
   font-family: inherit;
   font-size: 12px;
-  display: block;
-  margin-top: 6px;
+  font-weight: normal;
+  letter-spacing: 0;
   margin-bottom: 10px;
+  margin-top: 6px;
+  text-transform: initial;
 `
 
 export default LabelUI