Merge pull request #2777 from paulkaplan/instrument-device-connections

Instrument device connection events

src/containers/connection-modal.jsx

@@ -3,6 +3,7 @@ import React from 'react';
 import bindAll from 'lodash.bindall';
 import ConnectionModalComponent, {PHASES} from '../components/connection-modal/connection-modal.jsx';
 import VM from 'scratch-vm';
+import analytics from '../lib/analytics';
 
 class ConnectionModal extends React.Component {
     constructor (props) {
@@ -16,18 +17,13 @@ class ConnectionModal extends React.Component {
             'handleHelp'
         ]);
         this.state = {
-            phase: PHASES.scanning
+            phase: props.vm.getPeripheralIsConnected(props.extensionId) ?
+                PHASES.connected : PHASES.scanning
         };
     }
     componentDidMount () {
         this.props.vm.on('PERIPHERAL_CONNECTED', this.handleConnected);
         this.props.vm.on('PERIPHERAL_ERROR', this.handleError);
-
-        // Check if we're already connected
-        if (this.props.vm.getPeripheralIsConnected(this.props.extensionId)) {
-            this.handleConnected();
-        }
-
     }
     componentWillUnmount () {
         this.props.vm.removeListener('PERIPHERAL_CONNECTED', this.handleConnected);
@@ -43,6 +39,11 @@ class ConnectionModal extends React.Component {
         this.setState({
             phase: PHASES.connecting
         });
+        analytics.event({
+            category: 'extensions',
+            action: 'connecting',
+            label: this.props.extensionId
+        });
     }
     handleDisconnect () {
         this.props.onStatusButtonUpdate(this.props.extensionId, 'not ready');
@@ -68,6 +69,11 @@ class ConnectionModal extends React.Component {
             this.setState({
                 phase: PHASES.error
             });
+            analytics.event({
+                category: 'extensions',
+                action: 'connecting error',
+                label: this.props.extensionId
+            });
         }
     }
     handleConnected () {
@@ -75,9 +81,19 @@ class ConnectionModal extends React.Component {
         this.setState({
             phase: PHASES.connected
         });
+        analytics.event({
+            category: 'extensions',
+            action: 'connected',
+            label: this.props.extensionId
+        });
     }
     handleHelp () {
         window.open(this.props.helpLink, '_blank');
+        analytics.event({
+            category: 'extensions',
+            action: 'help',
+            label: this.props.extensionId
+        });
     }
     render () {
         return (