Skip to content

Commit ea682df

Browse files
author
Alberto Iannaccone
committed
add react
1 parent a11fea9 commit ea682df

File tree

6 files changed

+110
-46
lines changed

6 files changed

+110
-46
lines changed

‎package.json

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,12 +27,15 @@
2727
"babel-loader": "^7.1.4",
2828
"babel-preset-env": "^1.7.0",
2929
"babel-preset-es2015": "^6.24.1",
30+
"babel-preset-react": "^6.24.1",
3031
"clean-webpack-plugin": "^0.1.19",
3132
"cross-env": "^5.1.6",
3233
"eslint": "^4.19.1",
3334
"eslint-config-airbnb-base": "^12.1.0",
3435
"eslint-plugin-import": "^2.12.0",
3536
"html-webpack-plugin": "^3.2.0",
37+
"react": "^16.2.0",
38+
"react-dom": "^16.2.0",
3639
"rimraf": "^2.6.2",
3740
"rollup": "^0.59.4",
3841
"rollup-plugin-babel": "^3.0.4",

‎test/.babelrc

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"presets": ["env", "react"]
3+
}

‎test/app.jsx

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
import React from 'react';
2+
import Daemon from '../src';
3+
import { WS_STATUS_CONNECTED, AGENT_STATUS_FOUND } from '../src/socket-daemon';
4+
5+
class App extends React.Component {
6+
constructor() {
7+
super();
8+
this.state = {
9+
error: '',
10+
agentStatus: '-',
11+
wsStatus: '-',
12+
serialDevices: [],
13+
networkDevices: [],
14+
agentInfo: ''
15+
};
16+
this.connect = this.connect.bind(this);
17+
}
18+
19+
componentDidMount() {
20+
Daemon.agentDiscoveryStatus.subscribe(status => {
21+
this.setState({
22+
agentStatus: status,
23+
agentInfo: JSON.stringify(Daemon.agentInfo, null, 2)
24+
});
25+
});
26+
27+
Daemon.wsConnectionStatus.subscribe(status => {
28+
this.setState({ wsStatus: status });
29+
});
30+
31+
Daemon.wsError.subscribe(this.showError);
32+
33+
Daemon.readerWriter.messageSubject.subscribe(() => {
34+
this.setState({
35+
serialDevices: Daemon.readerWriter.devicesList.serial,
36+
networkDevices: Daemon.readerWriter.devicesList.network
37+
});
38+
});
39+
}
40+
41+
showError(err) {
42+
this.setState({ error: err });
43+
}
44+
45+
clearError() {
46+
this.setState({ error: '' });
47+
}
48+
49+
connect() {
50+
this.clearError();
51+
Daemon.findAgent()
52+
.catch(this.showError);
53+
}
54+
55+
render() {
56+
const listSerialDevices = this.state.serialDevices.map(device => <li>{device.Name}</li>);
57+
const listNetworkDevices = this.state.networkDevices.map(device => <li>{device.Name}</li>);
58+
59+
return (
60+
<div>
61+
<h1>Test Daemon</h1>
62+
<p>Agent status: <span id="agent-status" className={ this.state.agentStatus === AGENT_STATUS_FOUND ? 'found' : 'not-found' }>
63+
{ this.state.agentStatus }
64+
</span></p>
65+
<pre id="agent-info">
66+
{ this.state.agentInfo }
67+
</pre>
68+
<p>Web socket status: <span id="ws-status" className={ this.state.wsStatus === WS_STATUS_CONNECTED ? 'found' : 'not-found' }>
69+
{ this.state.wsStatus }
70+
</span></p>
71+
<div>
72+
<h2>Devices</h2>
73+
<strong>serial:</strong>
74+
<ul id="serial-list">
75+
{ listSerialDevices }
76+
</ul>
77+
<strong>network:</strong>
78+
<ul id="network-list">
79+
{ listNetworkDevices }
80+
</ul>
81+
<p id="error"></p>
82+
</div>
83+
<button id="connect" onClick={ this.connect }>Connect</button>
84+
</div>
85+
);
86+
}
87+
}
88+
89+
export default App;

‎test/index.html

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -9,20 +9,20 @@
99
color: red
1010
}
1111

12+
.found {
13+
color: green;
14+
}
15+
16+
.not-found {
17+
color: red;
18+
}
19+
1220
pre {
1321
background: #f9f9f9;
1422
}
1523
</style>
1624
</head>
1725
<body>
18-
<h1>Test Daemon</h1>
19-
<p>Agent status: <span id="agent-status">-</span></p>
20-
<pre id="agent-info"></pre>
21-
<p>Web socket status: <span id="ws-status">-</span></p>
22-
<p>Boards:</p>
23-
<ul id="boards-list"></ul>
24-
<p id="error"></p>
25-
26-
<button id="connect">Connect</button>
26+
<div id="root"></div>
2727
</body>
2828
</html>

‎test/index.js

Lines changed: 5 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,7 @@
1-
import Daemon from '../src';
2-
import { WS_STATUS_CONNECTED, AGENT_STATUS_FOUND } from '../src/socket-daemon';
1+
import React from 'react';
2+
import ReactDOM from 'react-dom';
33

4-
function showError(error) {
5-
document.getElementById('error').innerText = error.message;
6-
}
4+
import App from './app.jsx';
75

8-
function clearError() {
9-
document.getElementById('error').innerText = '';
10-
}
11-
12-
Daemon.agentDiscoveryStatus.subscribe(status => {
13-
document.getElementById('agent-status').style.color = status === AGENT_STATUS_FOUND ? 'green' : 'red';
14-
document.getElementById('agent-status').innerText = status;
15-
document.getElementById('agent-info').innerHTML = JSON.stringify(Daemon.agentInfo, null, 2);
16-
});
17-
18-
Daemon.wsConnectionStatus.subscribe(status => {
19-
document.getElementById('ws-status').style.color = status === WS_STATUS_CONNECTED ? 'green' : 'red';
20-
document.getElementById('ws-status').innerText = status;
21-
});
22-
23-
Daemon.wsError.subscribe(showError);
24-
25-
document.getElementById('connect').addEventListener('click', () => {
26-
// document.getElementById('agent-status').innerText = '-';
27-
// document.getElementById('agent-status').style.color = null;
28-
// document.getElementById('agent-info').innerHTML = '';
29-
// document.getElementById('ws-status').innerText = '-';
30-
// document.getElementById('ws-status').style.color = null;
31-
clearError();
32-
Daemon.findAgent()
33-
.catch(showError);
34-
});
35-
36-
Daemon.readerWriter.messageSubject.subscribe(devicesInfo => {
37-
document.getElementById('boards-list').innerHTML = JSON.stringify(devicesInfo, null, 2);
38-
});
6+
// Mounts the App component into the <div id="root" /> element in the index.html
7+
ReactDOM.render(React.createElement(App, null, null), document.getElementById('root'));

‎webpack.config.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ module.exports = {
2828
module: {
2929
rules: [
3030
{
31-
test: /\.js$/,
31+
test: /\.(js|jsx)$/,
3232
exclude: /(node_modules)/,
3333
use: {
3434
loader: 'babel-loader'

0 commit comments

Comments
 (0)