Skip to content

Commit abf3611

Browse files
matteosuppomatteosuppo
committed
Install tool on separate package
1 parent 9bd32a2 commit abf3611

File tree

4 files changed

+155
-38
lines changed

4 files changed

+155
-38
lines changed

‎demo/app.jsx

Lines changed: 23 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -174,21 +174,22 @@ class App extends React.Component {
174174
{device.Name} - IsOpen: <span className={device.IsOpen ? 'open' : 'closed'}>
175175
{device.IsOpen ? 'true' : 'false'}
176176
</span> - <a href="#" onClick={(e) => this.handleOpen(e, device.Name)}>
177-
open
177+
open
178178
</a> - <a href="#" onClick={(e) => this.handleClose(e, device.Name)}>
179-
close
179+
close
180180
</a> - <a href="#" onClick={(e) => handleBootloaderMode(e, device.Name)}>
181-
bootloader mode
181+
bootloader mode
182182
</a>
183183
</li>);
184184

185185
const listNetworkDevices = this.state.networkDevices.map((device, i) => <li key={i}>
186186
{device.Name}
187187
</li>);
188188

189-
const supportedBoards = this.state.supportedBoards.map((board, i) => <li key={i}>
190-
{ board }
191-
</li>);
189+
const supportedBoards = this.state.supportedBoards.map((board, i) =>
190+
<li key={i}>
191+
{board}
192+
</li>);
192193

193194
let uploadClass;
194195
if (this.state.uploadStatus === daemon.UPLOAD_DONE) {
@@ -222,18 +223,18 @@ class App extends React.Component {
222223
<h2>Plugin info</h2>
223224

224225
<p>
225-
Agent status: <span className={ this.state.agentStatus ? 'found' : 'not-found' }>
226-
{ this.state.agentStatus ? 'Found' : 'Not found' }
226+
Agent status: <span className={this.state.agentStatus ? 'found' : 'not-found'}>
227+
{this.state.agentStatus ? 'Found' : 'Not found'}
227228
</span>
228229
</p>
229230
<p>
230-
Channel status: <span className={ this.state.channelStatus ? 'found' : 'not-found' }>
231-
{ this.state.channelStatus ? 'Connected' : 'Not connected' }
231+
Channel status: <span className={this.state.channelStatus ? 'found' : 'not-found'}>
232+
{this.state.channelStatus ? 'Connected' : 'Not connected'}
232233
</span>
233234
</p>
234235

235236
<pre>
236-
{ this.state.agentInfo }
237+
{this.state.agentInfo}
237238
</pre>
238239
</div>
239240

@@ -242,12 +243,12 @@ class App extends React.Component {
242243

243244
<strong>serial:</strong>
244245
<ul>
245-
{ listSerialDevices }
246+
{listSerialDevices}
246247
</ul>
247248

248249
<strong>network:</strong>
249250
<ul>
250-
{ listNetworkDevices }
251+
{listNetworkDevices}
251252
</ul>
252253

253254
<p id="error"></p>
@@ -269,20 +270,20 @@ class App extends React.Component {
269270
<h2>Serial Monitor</h2>
270271

271272
<form onSubmit={this.handleSend}>
272-
<input id="serial-input" value={this.state.serialInput} onChange={this.handleChangeSerial}/>
273+
<input id="serial-input" value={this.state.serialInput} onChange={this.handleChangeSerial} />
273274
<input type="submit" value="Send" />
274275
</form>
275276

276-
<textarea id="serial-textarea" value={ this.state.serialMonitorContent } readOnly/>
277+
<textarea id="serial-textarea" value={this.state.serialMonitorContent} readOnly />
277278
</div>
278279

279280
<div className="section">
280281
<h2>Upload a sample sketch on a MKR1000 at /dev/ttyACM0</h2>
281-
<button onClick={ handleUpload } disabled={ this.state.uploadStatus === daemon.UPLOAD_IN_PROGRESS }>Upload Sketch</button><br/>
282-
<div>Upload status: <span className={ uploadClass }> { this.state.uploadStatus }</span> <span>{ this.state.uploadError }</span></div>
282+
<button onClick={handleUpload} disabled={this.state.uploadStatus === daemon.UPLOAD_IN_PROGRESS}>Upload Sketch</button><br />
283+
<div>Upload status: <span className={uploadClass}> {this.state.uploadStatus}</span> <span>{this.state.uploadError}</span></div>
283284
</div>
284285

285-
{ daemon.downloading ? <div className="section">
286+
{daemon.downloading ? <div className="section">
286287
<h2>Download tool (not supported on Chrome OS)</h2>
287288

288289
<div>
@@ -303,19 +304,19 @@ class App extends React.Component {
303304
</div>
304305

305306
<form onSubmit={handleDownloadTool}>
306-
<div><input id="toolname" placeholder="Tool Name"/></div>
307+
<div><input id="toolname" placeholder="Tool Name" /></div>
307308
<div><input id="toolversion" placeholder="Tool Version" /></div>
308309
<div><input id="package" placeholder="Package" /></div>
309-
<div><input id="replacement" placeholder="Replacement strategy"/></div>
310+
<div><input id="replacement" placeholder="Replacement strategy" /></div>
310311

311312
<input type="submit" value="Download" />
312-
<div>Download status: <span className={ downloadClass }> { this.state.downloadStatus }</span></div>
313+
<div>Download status: <span className={downloadClass}> {this.state.downloadStatus}</span></div>
313314
</form>
314315
</div> : null}
315316

316317
<div className="section">
317318
<h2>Errors</h2>
318-
<div className="error">{ this.state.error }</div>
319+
<div className="error">{this.state.error}</div>
319320
</div>
320321
</div>
321322
);

‎demo/v2/install_tool.jsx

Lines changed: 97 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,97 @@
1+
import React from 'react';
2+
import { flatMap } from 'rxjs/operators';
3+
4+
export class V2InstallTool extends React.Component {
5+
constructor() {
6+
super();
7+
this.state = {
8+
name: "",
9+
version: "",
10+
packager: "",
11+
url: "",
12+
checksum: "",
13+
signature: "",
14+
res: ""
15+
};
16+
17+
this.handleChange = this.handleChange.bind(this);
18+
this.handleSubmit = this.handleSubmit.bind(this);
19+
}
20+
21+
componentDidMount() {
22+
this.daemon = this.props.daemon;
23+
24+
this.daemon.agentV2Found.subscribe(daemonV2 => {
25+
if (!daemonV2) {
26+
return;
27+
}
28+
this.daemonV2 = daemonV2;
29+
})
30+
}
31+
32+
handleChange(event) {
33+
this.setState({ [event.target.name]: event.target.value });
34+
}
35+
36+
handleSubmit(event) {
37+
event.preventDefault();
38+
39+
console.debug(this.state)
40+
41+
this.daemonV2.installTool({
42+
name: this.state.name,
43+
version: this.state.version,
44+
packager: this.state.packager,
45+
checksum: this.state.checksum,
46+
signature: this.state.signature,
47+
url: this.state.url,
48+
49+
})
50+
.then(res => {
51+
this.setState({
52+
res: JSON.stringify(res, null, 2)
53+
});
54+
})
55+
.catch(err => {
56+
this.setState({
57+
res: JSON.stringify(err, null, 2)
58+
});
59+
});
60+
}
61+
62+
render() {
63+
return (
64+
<section>
65+
<h2>Install a new tool</h2>
66+
<form onSubmit={this.handleSubmit}>
67+
<label>
68+
Name:
69+
<input type="text" name="name" value={this.state.name} onChange={this.handleChange} />
70+
</label><br />
71+
<label>
72+
Version:
73+
<input type="text" name="version" value={this.state.version} onChange={this.handleChange} />
74+
</label> <br />
75+
<label>
76+
Packager:
77+
<input type="text" name="packager" value={this.state.packager} onChange={this.handleChange} />
78+
</label> <br />
79+
<label>
80+
Url:
81+
<input type="text" name="url" value={this.state.url} onChange={this.handleChange} />
82+
</label> <br />
83+
<label>
84+
Checksum:
85+
<input type="text" name="checksum" value={this.state.checksum} onChange={this.handleChange} />
86+
</label> <br />
87+
<label>
88+
Signature:
89+
<input type="text" name="signature" value={this.state.signature} onChange={this.handleChange} />
90+
</label> <br />
91+
<input type="submit" value="Submit" />
92+
</form>
93+
<textarea cols="100" rows="10" value={this.state.res} readOnly></textarea>
94+
</section>
95+
)
96+
}
97+
}

‎demo/v2/v2.jsx

Lines changed: 16 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
import React from 'react';
2+
import { V2InstallTool } from './install_tool.jsx';
23

34
class V2 extends React.Component {
45
constructor() {
56
super();
67
this.state = {
78
tools: []
89
};
9-
1010
}
1111

1212
componentDidMount() {
@@ -24,10 +24,9 @@ class V2 extends React.Component {
2424
});
2525
})
2626
}
27-
2827
render() {
2928
const tools = this.state.tools.map((tool, i) =>
30-
<tr>
29+
<tr key={i}>
3130
<td>{tool.packager}</td>
3231
<td>{tool.name}</td>
3332
<td>{tool.version}</td>
@@ -38,14 +37,20 @@ class V2 extends React.Component {
3837
<h2>V2</h2>
3938
<section>
4039
<h3>Installed tools</h3>
41-
<table>
42-
<tr>
43-
<th>Packager</th>
44-
<th>Name</th>
45-
<th>Version</th>
46-
</tr>
47-
{tools}
48-
</table>
40+
<form onSubmit={this.handleInstallTool}>
41+
<table>
42+
<thead>
43+
<tr>
44+
<th>Packager</th>
45+
<th>Name</th>
46+
<th>Version</th>
47+
</tr>
48+
</thead>
49+
<tbody>{tools}</tbody>
50+
</table>
51+
</form>
52+
53+
<V2InstallTool daemon={this.props.daemon}></V2InstallTool>
4954
</section>
5055
</section >
5156
)

‎src/v2.js

Lines changed: 19 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
export default class SocketDaemonV2 {
22
constructor(daemonURL) {
3-
this.daemonURL = daemonURL + '/v2/';
3+
this.daemonURL = daemonURL + '/v2';
44
}
55

66
// installedTools uses the new v2 apis to ask the daemon a list of the tools already present in the system
@@ -23,12 +23,26 @@ export default class SocketDaemonV2 {
2323
// "checksum": "SHA256:90384nhfoso8..." // proof that the package wasn't tampered with
2424
// }
2525
installTool(payload) {
26-
fetch(`${this.daemonURL}/pkgs/tools/installed`, {
27-
method: 'POST',
26+
return fetch(`${this.daemonURL}/pkgs/tools/installed`, {
27+
method: 'PUT',
2828
body: JSON.stringify(payload)
2929
})
30-
.catch(error => {
31-
console.error(error);
30+
.then(this.handleResponse);
31+
}
32+
33+
handleResponse(response) {
34+
return response.json()
35+
.then((json) => {
36+
if (!response.ok) {
37+
const error = Object.assign({}, json, {
38+
status: response.status,
39+
statusText: response.statusText,
40+
});
41+
42+
return Promise.reject(error);
43+
}
44+
return json;
3245
});
3346
}
47+
3448
}

0 commit comments

Comments
 (0)