status-im
/
embark-area-51
mirror of https://github.com/status-im/embark-area-51.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Updated code based on code review

This commit is contained in:
Richard Ramos 2018-04-27 09:04:34 -04:00
parent 3b13a2c80c
commit c8effb7dcb
5 changed files with 51 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
templates/demo/app/components/blockchain.js
View File

@ -8,10 +8,6 @@ class Blockchain extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.setValue = this.setValue.bind(this);
this.getValue = this.getValue.bind(this);
this.handleChange = this.handleChange.bind(this);
this.state = { this.state = {
valueSet: 10, valueSet: 10,
valueGet: "", valueGet: "",
@ -65,9 +61,9 @@ class Blockchain extends React.Component {
<FormControl <FormControl
type="text" type="text"
defaultValue={this.state.valueSet} defaultValue={this.state.valueSet}
onChange={this.handleChange}/> onChange={(e) => this.handleChange(e)} />
{' '} {' '}
<Button bsStyle="primary" onClick={this.setValue}>Set Value</Button> <Button bsStyle="primary" onClick={(e) => this.setValue(e)}>Set Value</Button>
<HelpBlock>Once you set the value, the transaction will need to be mined and then the value will be updated on the blockchain.</HelpBlock> <HelpBlock>Once you set the value, the transaction will need to be mined and then the value will be updated on the blockchain.</HelpBlock>
</FormGroup> </FormGroup>
</Form> </Form>
@ -76,7 +72,7 @@ class Blockchain extends React.Component {
<Form inline> <Form inline>
<FormGroup> <FormGroup>
<HelpBlock>current value is <span className="value">{this.state.valueGet}</span></HelpBlock> <HelpBlock>current value is <span className="value">{this.state.valueGet}</span></HelpBlock>
<Button bsStyle="primary" onClick={this.getValue}>Get Value</Button> <Button bsStyle="primary" onClick={(e) => this.getValue(e)}>Get Value</Button>
<HelpBlock>Click the button to get the current value. The initial value is 100.</HelpBlock> <HelpBlock>Click the button to get the current value. The initial value is 100.</HelpBlock>
</FormGroup> </FormGroup>
</Form> </Form>

68
templates/demo/app/components/storage.js
View File

@ -16,14 +16,9 @@ class Storage extends React.Component {
fileHash: '', fileHash: '',
imageToDownload: '', imageToDownload: '',
url: '', url: '',
logs: [] logs: [],
storageError: ''
}; };
this.setText = this.setText.bind(this);
this.loadHash = this.loadHash.bind(this);
this.uploadFile = this.uploadFile.bind(this);
this.handleFileUpload = this.handleFileUpload.bind(this);
this.loadFile = this.loadFile.bind(this);
} }
handleChange(e, name){ handleChange(e, name){
@ -35,7 +30,7 @@ class Storage extends React.Component {
this.setState({ fileToUpload: [e.target] }); this.setState({ fileToUpload: [e.target] });
} }
_addToLog(txt){ addToLog(txt){
this.state.logs.push(txt); this.state.logs.push(txt);
this.setState({logs: this.state.logs}); this.setState({logs: this.state.logs});
} }
@ -43,18 +38,18 @@ class Storage extends React.Component {
setText(e){ setText(e){
e.preventDefault(); e.preventDefault();
let _this = this;
EmbarkJS.Storage.saveText(this.state.textToSave) EmbarkJS.Storage.saveText(this.state.textToSave)
.then(function(hash) { .then((hash) => {
_this.setState({ this.setState({
generatedHash: hash, generatedHash: hash,
loadText: hash loadText: hash,
storageError: ''
}); });
_this._addToLog("EmbarkJS.Storage.saveText('" + _this.state.textToSave + "').then(function(hash) { })"); this.addToLog("EmbarkJS.Storage.saveText('" + this.state.textToSave + "').then(function(hash) { })");
}) })
.catch(function(err) { .catch((err) => {
if(err){ if(err){
this.setState({storageError: err.message});
console.log("Storage saveText Error => " + err.message); console.log("Storage saveText Error => " + err.message);
} }
}); });
@ -63,15 +58,14 @@ class Storage extends React.Component {
loadHash(e){ loadHash(e){
e.preventDefault(); e.preventDefault();
let _this = this;
EmbarkJS.Storage.get(this.state.loadText) EmbarkJS.Storage.get(this.state.loadText)
.then(function(content) { .then((content) => {
_this.setState({storedText: content}); this.setState({storedText: content, storageError: ''});
_this._addToLog("EmbarkJS.Storage.get('" + _this.state.loadText + "').then(function(content) { })"); this.addToLog("EmbarkJS.Storage.get('" + this.state.loadText + "').then(function(content) { })");
}) })
.catch(function(err) { .catch((err) => {
if(err){ if(err){
this.setState({storageError: err.message})
console.log("Storage get Error => " + err.message); console.log("Storage get Error => " + err.message);
} }
}); });
@ -80,18 +74,18 @@ class Storage extends React.Component {
uploadFile(e){ uploadFile(e){
e.preventDefault(); e.preventDefault();
let _this = this;
EmbarkJS.Storage.uploadFile(this.state.fileToUpload) EmbarkJS.Storage.uploadFile(this.state.fileToUpload)
.then(function(hash) { .then((hash) => {
_this.setState({ this.setState({
fileHash: hash, fileHash: hash,
imageToDownload: hash imageToDownload: hash,
storageError: ''
}); });
_this._addToLog("EmbarkJS.Storage.uploadFile(this.state.fileToUpload).then(function(hash) { })"); this.addToLog("EmbarkJS.Storage.uploadFile(this.state.fileToUpload).then(function(hash) { })");
}) })
.catch(function(err) { .catch((err) => {
if(err){ if(err){
this.setState({storageError: err.message});
console.log("Storage uploadFile Error => " + err.message); console.log("Storage uploadFile Error => " + err.message);
} }
}); });
@ -100,7 +94,7 @@ class Storage extends React.Component {
loadFile(e){ loadFile(e){
let _url = EmbarkJS.Storage.getUrl(this.state.imageToDownload); let _url = EmbarkJS.Storage.getUrl(this.state.imageToDownload);
this.setState({url: _url}) this.setState({url: _url})
this._addToLog("EmbarkJS.Storage.getUrl('" + this.state.imageToDownload + "')"); this.addToLog("EmbarkJS.Storage.getUrl('" + this.state.imageToDownload + "')");
} }
render(){ render(){
@ -111,7 +105,11 @@ class Storage extends React.Component {
<Alert bsStyle="warning">The node you are using does not support IPFS. Please ensure <a href="https://github.com/ipfs/js-ipfs-api#cors" target="_blank">CORS</a> is setup for the IPFS node.</Alert> <Alert bsStyle="warning">The node you are using does not support IPFS. Please ensure <a href="https://github.com/ipfs/js-ipfs-api#cors" target="_blank">CORS</a> is setup for the IPFS node.</Alert>
</React.Fragment> : '' </React.Fragment> : ''
} }
{
this.state.storageError !== '' ?
<Alert bsStyle="danger">{this.state.storageError}</Alert>
: ''
}
<h3>Save text to storage</h3> <h3>Save text to storage</h3>
<Form inline> <Form inline>
<FormGroup> <FormGroup>
@ -119,7 +117,7 @@ class Storage extends React.Component {
type="text" type="text"
defaultValue={this.state.textToSave} defaultValue={this.state.textToSave}
onChange={e => this.handleChange(e, 'textToSave')} /> onChange={e => this.handleChange(e, 'textToSave')} />
<Button bsStyle="primary" onClick={this.setText}>Save Text</Button> <Button bsStyle="primary" onClick={(e) => this.setText(e)}>Save Text</Button>
<HelpBlock>generated Hash: <span className="textHash">{this.state.generatedHash}</span></HelpBlock> <HelpBlock>generated Hash: <span className="textHash">{this.state.generatedHash}</span></HelpBlock>
</FormGroup> </FormGroup>
</Form> </Form>
@ -131,7 +129,7 @@ class Storage extends React.Component {
type="text" type="text"
value={this.state.loadText} value={this.state.loadText}
onChange={e => this.handleChange(e, 'loadText')} /> onChange={e => this.handleChange(e, 'loadText')} />
<Button bsStyle="primary" onClick={this.loadHash}>Load</Button> <Button bsStyle="primary" onClick={(e) => this.loadHash(e)}>Load</Button>
<HelpBlock>result: <span className="textHash">{this.state.storedText}</span></HelpBlock> <HelpBlock>result: <span className="textHash">{this.state.storedText}</span></HelpBlock>
</FormGroup> </FormGroup>
</Form> </Form>
@ -141,8 +139,8 @@ class Storage extends React.Component {
<FormGroup> <FormGroup>
<FormControl <FormControl
type="file" type="file"
onChange={this.handleFileUpload} /> onChange={(e) => this.handleFileUpload(e)} />
<Button bsStyle="primary" onClick={this.uploadFile}>Upload</Button> <Button bsStyle="primary" onClick={(e) => this.uploadFile(e)}>Upload</Button>
<HelpBlock>generated hash: <span className="fileHash">{this.state.fileHash}</span></HelpBlock> <HelpBlock>generated hash: <span className="fileHash">{this.state.fileHash}</span></HelpBlock>
</FormGroup> </FormGroup>
</Form> </Form>
@ -154,7 +152,7 @@ class Storage extends React.Component {
type="text" type="text"
value={this.state.imageToDownload} value={this.state.imageToDownload}
onChange={e => this.handleChange(e, 'imageToDownload')} /> onChange={e => this.handleChange(e, 'imageToDownload')} />
<Button bsStyle="primary" onClick={this.loadFile}>Download</Button> <Button bsStyle="primary" onClick={(e) => this.loadFile(e)}>Download</Button>
<HelpBlock>file available at: <span><a href={this.state.url} target="_blank">{this.state.url}</a></span></HelpBlock> <HelpBlock>file available at: <span><a href={this.state.url} target="_blank">{this.state.url}</a></span></HelpBlock>
<HelpBlock><img src={this.state.url} /></HelpBlock> <HelpBlock><img src={this.state.url} /></HelpBlock>
</FormGroup> </FormGroup>

26
templates/demo/app/components/whisper.js
View File

@ -7,9 +7,6 @@ class Whisper extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.sendMessage = this.sendMessage.bind(this);
this.listenToChannel = this.listenToChannel.bind(this);
this.state = { this.state = {
listenTo: '', listenTo: '',
channel: '', channel: '',
@ -28,23 +25,21 @@ class Whisper extends React.Component {
sendMessage(e){ sendMessage(e){
e.preventDefault(); e.preventDefault();
EmbarkJS.Messages.sendMessage({topic: this.state.channel, data: this.state.message}); EmbarkJS.Messages.sendMessage({topic: this.state.channel, data: this.state.message});
this._addToLog("EmbarkJS.Messages.sendMessage({topic: '" + this.state.channel + "', data: '" + this.state.message + "'})"); this.addToLog("EmbarkJS.Messages.sendMessage({topic: '" + this.state.channel + "', data: '" + this.state.message + "'})");
} }
listenToChannel(e){ listenToChannel(e){
e.preventDefault(); e.preventDefault();
let listenTo = this.state.listenTo; this.state.subscribedChannels.push(`subscribed to ${this.state.listenTo} now try sending a message`);
this.state.subscribedChannels.push(`subscribed to ${listenTo} now try sending a message`); EmbarkJS.Messages.listenTo({topic: [this.state.listenTo]})
.then(message => this.state.messageList.push(`channel: ${this.state.listenTo} message: ${message}`))
EmbarkJS.Messages.listenTo({topic: [listenTo]}) this.addToLog("EmbarkJS.Messages.listenTo({topic: ['" + this.state.listenTo + "']}).then(function(message) {})");
.then(message => this.state.messageList.push(`channel: ${listenTo} message: ${message}`))
this._addToLog("EmbarkJS.Messages.listenTo({topic: ['" + this.state.channel + "']}).then(function(message) {})");
} }
_addToLog(txt){ addToLog(txt){
this.state.logs.push(txt); this.state.logs.push(txt);
this.setState({logs: this.state.logs}); this.setState({logs: this.state.logs});
} }
@ -53,7 +48,7 @@ class Whisper extends React.Component {
return ( return (
<React.Fragment> <React.Fragment>
{ {
!this.state.enabled ? !this.props.enabled ?
<React.Fragment> <React.Fragment>
<Alert bsStyle="warning">The node you are using does not support Whisper</Alert> <Alert bsStyle="warning">The node you are using does not support Whisper</Alert>
<Alert bsStyle="warning">The node uses an unsupported version of Whisper</Alert> <Alert bsStyle="warning">The node uses an unsupported version of Whisper</Alert>
@ -67,8 +62,7 @@ class Whisper extends React.Component {
defaultValue={this.state.listenTo} defaultValue={this.state.listenTo}
placeholder="channel" placeholder="channel"
onChange={e => this.handleChange(e, 'listenTo')} /> onChange={e => this.handleChange(e, 'listenTo')} />
{' '} <Button bsStyle="primary" onClick={(e) => this.listenToChannel(e)}>Start Listening</Button>
<Button bsStyle="primary" onClick={this.listenToChannel}>Start Listening</Button>
<div id="subscribeList"> <div id="subscribeList">
{ this.state.subscribedChannels.map((item, i) => <p key={i}>{item}</p>) } { this.state.subscribedChannels.map((item, i) => <p key={i}>{item}</p>) }
</div> </div>
@ -87,14 +81,12 @@ class Whisper extends React.Component {
defaultValue={this.state.channel} defaultValue={this.state.channel}
placeholder="channel" placeholder="channel"
onChange={e => this.handleChange(e, 'channel')} /> onChange={e => this.handleChange(e, 'channel')} />
{' '}
<FormControl <FormControl
type="text" type="text"
defaultValue={this.state.message} defaultValue={this.state.message}
placeholder="message" placeholder="message"
onChange={e => this.handleChange(e, 'message')} /> onChange={e => this.handleChange(e, 'message')} />
{' '} <Button bsStyle="primary" onClick={(e) => this.sendMessage(e)}>Send Message</Button>
<Button bsStyle="primary" onClick={this.sendMessage}>Send Message</Button>
</FormGroup> </FormGroup>
</Form> </Form>

4
templates/demo/app/dapp.css
View File

@ -47,3 +47,7 @@ div {
-webkit-border-radius: 10px; -webkit-border-radius: 10px;
border-radius: 10px; border-radius: 10px;
} }
input.form-control {
margin-right: 5px;
}

2
templates/demo/app/dapp.js
View File

@ -64,7 +64,7 @@ class App extends React.Component {
<Blockchain /> <Blockchain />
</Tab> </Tab>
<Tab eventKey={2} title={this._renderStatus('Decentralized Storage', this.state.storageEnabled)}> <Tab eventKey={2} title={this._renderStatus('Decentralized Storage', this.state.storageEnabled)}>
<Storage /> <Storage enabled={this.state.storageEnabled} />
</Tab> </Tab>
<Tab eventKey={3} title={this._renderStatus('P2P communication (Whisper/Orbit)', this.state.whisperEnabled)}> <Tab eventKey={3} title={this._renderStatus('P2P communication (Whisper/Orbit)', this.state.whisperEnabled)}>
<Whisper enabled={this.state.whisperEnabled} /> <Whisper enabled={this.state.whisperEnabled} />