wip

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

@@ -14,7 +14,7 @@ const ConnectedStep = props => (
                 onClick={props.onSearch}
             >
                 <FormattedMessage
-                    defaultMessage="connected"
+                    defaultMessage="🔥connected🔥"
                     description="Button in prompt for starting a search"
                     id="gui.connection.search"
                 />

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

@@ -14,7 +14,7 @@ const ConnectingStep = props => (
                 onClick={props.onSearch}
             >
                 <FormattedMessage
-                    defaultMessage="connecting"
+                    defaultMessage="🔌connecting🔌"
                     description="Button in prompt for starting a search"
                     id="gui.connection.search"
                 />

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

@@ -11,13 +11,6 @@ import ErrorStep from './error-step.jsx';
 
 import styles from './connection-modal.css';
 
-const phases = {
-    scanning: ScanningStep,
-    connecting: ConnectingStep,
-    connected: ConnectedStep,
-    error: ErrorStep
-};
-
 const ConnectionModalComponent = props => (
     <Modal
         className={styles.modalContent}
@@ -26,14 +19,16 @@ const ConnectionModalComponent = props => (
         onRequestClose={props.onCancel}
     >
         <Box className={styles.body}>
-            {React.createElement(phases[props.phase], props)}
+            {props.phase === 'scanning' && <ScanningStep {...props} />}
+            {props.phase === 'connecting' && <ConnectingStep {...props} />}
+            {props.phase === 'connected' && <ConnectedStep {...props} />}
+            {props.phase === 'error' && <ErrorStep {...props} />}
         </Box>
     </Modal>
 );
 
 ConnectionModalComponent.propTypes = {
     onCancel: PropTypes.func.isRequired,
-    onSearch: PropTypes.func.isRequired,
     phase: PropTypes.string.isRequired,
     title: PropTypes.string.isRequired
 };

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

@@ -14,7 +14,7 @@ const ErrorStep = props => (
                 onClick={props.onSearch}
             >
                 <FormattedMessage
-                    defaultMessage="error"
+                    defaultMessage="🤕error🤕"
                     description="Button in prompt for starting a search"
                     id="gui.connection.search"
                 />

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

@@ -11,14 +11,20 @@ const ScanningStep = props => (
         <Box className={styles.activityArea}>
             {props.searching ? (
                 props.devices.length === 0 ? (
-                    <div>search icon here</div>
+                    <div>{'👀Scanning👀'}</div>
                 ) : (
                     props.devices.map(device => (
                         <div>{device.name}</div>
                     ))
                 )
             ) : (
-                <div>No devices found, click on this hyperlink right now</div>
+                <Box className={styles.instructions}>
+                    <FormattedMessage
+                        defaultMessage="Select your device in the list above."
+                        description=""
+                        id="gui.connection.scanning.instructions"
+                    />
+                </Box>
             )}
         </Box>
         <Box className={styles.instructions}>
@@ -34,7 +40,7 @@ const ScanningStep = props => (
                 onClick={props.onSearch}
             >
                 <FormattedMessage
-                    defaultMessage="scanning"
+                    defaultMessage="refresh"
                     description="Button in prompt for starting a search"
                     id="gui.connection.search"
                 />

src/containers/connection-modal.jsx

@@ -2,13 +2,13 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import bindAll from 'lodash.bindall';
 import ConnectionModalComponent from '../components/connection-modal/connection-modal.jsx';
+import VM from 'scratch-vm';
 
 class ConnectionModal extends React.Component {
     constructor (props) {
         super(props);
         bindAll(this, [
-            'handleCancel',
-            'handleSearch'
+            'handleCancel'
         ]);
         this.state = {
             phase: 'scanning'
@@ -17,16 +17,13 @@ class ConnectionModal extends React.Component {
     handleCancel () {
         this.props.onCancel();
     }
-    handleSearch () {
-        this.props.onSearch();
-    }
     render () {
         return (
             <ConnectionModalComponent
+                phase={this.state.phase}
                 title={this.props.id}
+                vm={this.props.vm}
                 onCancel={this.handleCancel}
-                onSearch={this.handleSearch}
-                phase={this.state.phase}
             />
         );
     }
@@ -35,7 +32,7 @@ class ConnectionModal extends React.Component {
 ConnectionModal.propTypes = {
     id: PropTypes.string.isRequired,
     onCancel: PropTypes.func.isRequired,
-    onSearch: PropTypes.func.isRequired
+    vm: PropTypes.instanceOf(VM).isRequired
 };
 
 export default ConnectionModal;

src/containers/scanning-step.jsx

@@ -2,19 +2,28 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import bindAll from 'lodash.bindall';
 import ScanningStepComponent from '../components/connection-modal/scanning-step.jsx';
+import VM from 'scratch-vm';
 
 class ScanningStep extends React.Component {
     constructor (props) {
         super(props);
         bindAll(this, [
-            'handleCancel',
-            'handleSearch'
+            'handleCancel'
         ]);
         this.state = {
             searching: true,
             devices: []
         };
     }
+    componentDidMount () {
+        this.props.vm.on('peripheral_added', id => {
+            // console.log('gui says peripheral added', id);
+            this.setState({devices:this.state.devices.concat(id)})
+        });
+    }
+    componentWillUnmount () {
+        // remove the listener
+    }
     handleCancel () {
         this.props.onCancel();
     }
@@ -24,10 +33,9 @@ class ScanningStep extends React.Component {
     render () {
         return (
             <ScanningStepComponent
+                phase={this.state.phase}
                 title={this.props.id}
                 onCancel={this.handleCancel}
-                onSearch={this.handleSearch}
-                phase={this.state.phase}
             />
         );
     }
@@ -36,7 +44,8 @@ class ScanningStep extends React.Component {
 ScanningStep.propTypes = {
     id: PropTypes.string.isRequired,
     onCancel: PropTypes.func.isRequired,
-    onSearch: PropTypes.func.isRequired
+    onSearch: PropTypes.func.isRequired,
+    vm: PropTypes.instanceOf(VM).isRequired
 };
 
 export default ScanningStep;