diff --git a/src/components/connection-modal/connected-step.jsx b/src/components/connection-modal/connected-step.jsx
index 03a70235e4b68223456c72a066dec3ee004153f3..5b3bf09c0e92ccba845a6d29c3eaaa79fdc0949e 100644
--- a/src/components/connection-modal/connected-step.jsx
+++ b/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"
/>
diff --git a/src/components/connection-modal/connecting-step.jsx b/src/components/connection-modal/connecting-step.jsx
index b2b30cffbbcc65e8e4e269954cf05ad16a2ce667..6827be41015e2b718a69f5654342430101815913 100644
--- a/src/components/connection-modal/connecting-step.jsx
+++ b/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"
/>
diff --git a/src/components/connection-modal/connection-modal.jsx b/src/components/connection-modal/connection-modal.jsx
index 73699b937c319339573a1acb47577bd3a53e0d20..c7f9c3390984437d8288d4b4dc2366c089e2173c 100644
--- a/src/components/connection-modal/connection-modal.jsx
+++ b/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
};
diff --git a/src/components/connection-modal/error-step.jsx b/src/components/connection-modal/error-step.jsx
index 451c7ab37f117caa8c28433479bb21fb215265c7..8fab3e1f7899dac3fbafb1548f74b8ddb3f2caf8 100644
--- a/src/components/connection-modal/error-step.jsx
+++ b/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"
/>
diff --git a/src/components/connection-modal/scanning-step.jsx b/src/components/connection-modal/scanning-step.jsx
index c5fc4bbe654f6ba6e8d9fa7a4c8590d87cf068e9..10647b0daf4b0ee551bef5ec133525c446a27001 100644
--- a/src/components/connection-modal/scanning-step.jsx
+++ b/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"
/>
diff --git a/src/containers/connection-modal.jsx b/src/containers/connection-modal.jsx
index 0860b50b68ac2cd531d186d73b2f58f5bc6b4d63..45fbec0aaab9656304223c9fc42ce3a4636cc17b 100644
--- a/src/containers/connection-modal.jsx
+++ b/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;
diff --git a/src/containers/scanning-step.jsx b/src/containers/scanning-step.jsx
index 44d0c578189fd21fdf8f15a24192765e20361ad3..24b6a7c426c9aaaef40b8e377764efd1e54fd8f5 100644
--- a/src/containers/scanning-step.jsx
+++ b/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;