diff --git a/src/containers/connection-modal.jsx b/src/containers/connection-modal.jsx index 50862fbd2b31e6e830f756484fcd47e0fcbac0e8..8edf15e439381e6e49ddd0a3b6fe20c1ce3263d6 100644 --- a/src/containers/connection-modal.jsx +++ b/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 (