From 67a449abcf6862db31eb9c1eaaa760fdc8886776 Mon Sep 17 00:00:00 2001
From: Eric Rosenbaum <eric.rosenbaum@gmail.com>
Date: Mon, 18 Jun 2018 11:54:55 -0400
Subject: [PATCH] wip
---
.../connection-modal/connected-step.jsx | 2 +-
.../connection-modal/connecting-step.jsx | 2 +-
.../connection-modal/connection-modal.jsx | 13 ++++---------
.../connection-modal/error-step.jsx | 2 +-
.../connection-modal/scanning-step.jsx | 12 +++++++++---
src/containers/connection-modal.jsx | 13 +++++--------
src/containers/scanning-step.jsx | 19 ++++++++++++++-----
7 files changed, 35 insertions(+), 28 deletions(-)
diff --git a/src/components/connection-modal/connected-step.jsx b/src/components/connection-modal/connected-step.jsx
index 03a70235e..5b3bf09c0 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 b2b30cffb..6827be410 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 73699b937..c7f9c3390 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 451c7ab37..8fab3e1f7 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 c5fc4bbe6..10647b0da 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 0860b50b6..45fbec0aa 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 44d0c5781..24b6a7c42 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;
--
GitLab