Use keymirror instead of strings for phase management

src/components/connection-modal/connection-modal.jsx

 import PropTypes from 'prop-types';
 import React from 'react';
+import keyMirror from 'keymirror';
 
 import Box from '../box/box.jsx';
 import Modal from '../modal/modal.jsx';
@@ -11,6 +12,13 @@ import ErrorStep from './error-step.jsx';
 
 import styles from './connection-modal.css';
 
+const PHASES = keyMirror({
+    scanning: null,
+    connecting: null,
+    connected: null,
+    error: null
+});
+
 const ConnectionModalComponent = props => (
     <Modal
         className={styles.modalContent}
@@ -19,18 +27,21 @@ const ConnectionModalComponent = props => (
         onRequestClose={props.onCancel}
     >
         <Box className={styles.body}>
-            {props.phase === 'scanning' && <ScanningStep {...props} />}
-            {props.phase === 'connecting' && <ConnectingStep {...props} />}
-            {props.phase === 'connected' && <ConnectedStep {...props} />}
-            {props.phase === 'error' && <ErrorStep {...props} />}
+            {props.phase === PHASES.scanning && <ScanningStep {...props} />}
+            {props.phase === PHASES.connecting && <ConnectingStep {...props} />}
+            {props.phase === PHASES.connected && <ConnectedStep {...props} />}
+            {props.phase === PHASES.error && <ErrorStep {...props} />}
         </Box>
     </Modal>
 );
 
 ConnectionModalComponent.propTypes = {
     onCancel: PropTypes.func.isRequired,
-    phase: PropTypes.string.isRequired,
+    phase: PropTypes.oneOf(Object.keys(PHASES)).isRequired,
     title: PropTypes.string.isRequired
 };
 
-export default ConnectionModalComponent;
+export {
+    ConnectionModalComponent as default,
+    PHASES
+};

src/containers/connection-modal.jsx

 import PropTypes from 'prop-types';
 import React from 'react';
 import bindAll from 'lodash.bindall';
-import ConnectionModalComponent from '../components/connection-modal/connection-modal.jsx';
+import ConnectionModalComponent, {PHASES} from '../components/connection-modal/connection-modal.jsx';
 import VM from 'scratch-vm';
 
 class ConnectionModal extends React.Component {
@@ -15,7 +15,7 @@ class ConnectionModal extends React.Component {
             'handleError'
         ]);
         this.state = {
-            phase: 'scanning'
+            phase: PHASES.scanning
         };
     }
     componentDidMount () {
@@ -34,13 +34,13 @@ class ConnectionModal extends React.Component {
     }
     handleScanning () {
         this.setState({
-            phase: 'scanning'
+            phase: PHASES.scanning
         });
     }
     handleConnecting (peripheralId) {
         this.props.vm.connectToPeripheral(this.props.extensionId, peripheralId);
         this.setState({
-            phase: 'connecting'
+            phase: PHASES.connecting
         });
     }
     handleDisconnect () {
@@ -58,13 +58,13 @@ class ConnectionModal extends React.Component {
     handleError () {
         this.props.onStatusButtonUpdate(this.props.extensionId, 'not ready');
         this.setState({
-            phase: 'error'
+            phase: PHASES.error
         });
     }
     handleConnected () {
         this.props.onStatusButtonUpdate(this.props.extensionId, 'ready');
         this.setState({
-            phase: 'connected'
+            phase: PHASES.connected
         });
     }
     handleHelp () {