Updated code based on code review
This commit is contained in:
Richard Ramos
parent
3b13a2c80c
commit
c8effb7dcb
|
|
@ -8,10 +8,6 @@ class Blockchain extends React.Component {
|
|||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
this.setValue = this.setValue.bind(this);
|
||||
this.getValue = this.getValue.bind(this);
|
||||
this.handleChange = this.handleChange.bind(this);
|
||||
|
||||
this.state = {
|
||||
valueSet: 10,
|
||||
valueGet: "",
|
||||
|
|
@ -65,9 +61,9 @@ class Blockchain extends React.Component {
|
|||
<FormControl
|
||||
type="text"
|
||||
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>
|
||||
</FormGroup>
|
||||
</Form>
|
||||
|
|
@ -76,7 +72,7 @@ class Blockchain extends React.Component {
|
|||
<Form inline>
|
||||
<FormGroup>
|
||||
<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>
|
||||
</FormGroup>
|
||||
</Form>
|
||||
|
|
|
|||
|
|
@ -16,14 +16,9 @@ class Storage extends React.Component {
|
|||
fileHash: '',
|
||||
imageToDownload: '',
|
||||
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){
|
||||
|
|
@ -35,7 +30,7 @@ class Storage extends React.Component {
|
|||
this.setState({ fileToUpload: [e.target] });
|
||||
}
|
||||
|
||||
_addToLog(txt){
|
||||
addToLog(txt){
|
||||
this.state.logs.push(txt);
|
||||
this.setState({logs: this.state.logs});
|
||||
}
|
||||
|
|
@ -43,18 +38,18 @@ class Storage extends React.Component {
|
|||
setText(e){
|
||||
e.preventDefault();
|
||||
|
||||
let _this = this;
|
||||
|
||||
EmbarkJS.Storage.saveText(this.state.textToSave)
|
||||
.then(function(hash) {
|
||||
_this.setState({
|
||||
.then((hash) => {
|
||||
this.setState({
|
||||
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){
|
||||
this.setState({storageError: err.message});
|
||||
console.log("Storage saveText Error => " + err.message);
|
||||
}
|
||||
});
|
||||
|
|
@ -63,15 +58,14 @@ class Storage extends React.Component {
|
|||
loadHash(e){
|
||||
e.preventDefault();
|
||||
|
||||
let _this = this;
|
||||
|
||||
EmbarkJS.Storage.get(this.state.loadText)
|
||||
.then(function(content) {
|
||||
_this.setState({storedText: content});
|
||||
_this._addToLog("EmbarkJS.Storage.get('" + _this.state.loadText + "').then(function(content) { })");
|
||||
.then((content) => {
|
||||
this.setState({storedText: content, storageError: ''});
|
||||
this.addToLog("EmbarkJS.Storage.get('" + this.state.loadText + "').then(function(content) { })");
|
||||
})
|
||||
.catch(function(err) {
|
||||
.catch((err) => {
|
||||
if(err){
|
||||
this.setState({storageError: err.message})
|
||||
console.log("Storage get Error => " + err.message);
|
||||
}
|
||||
});
|
||||
|
|
@ -80,18 +74,18 @@ class Storage extends React.Component {
|
|||
uploadFile(e){
|
||||
e.preventDefault();
|
||||
|
||||
let _this = this;
|
||||
|
||||
EmbarkJS.Storage.uploadFile(this.state.fileToUpload)
|
||||
.then(function(hash) {
|
||||
_this.setState({
|
||||
.then((hash) => {
|
||||
this.setState({
|
||||
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){
|
||||
this.setState({storageError: err.message});
|
||||
console.log("Storage uploadFile Error => " + err.message);
|
||||
}
|
||||
});
|
||||
|
|
@ -100,7 +94,7 @@ class Storage extends React.Component {
|
|||
loadFile(e){
|
||||
let _url = EmbarkJS.Storage.getUrl(this.state.imageToDownload);
|
||||
this.setState({url: _url})
|
||||
this._addToLog("EmbarkJS.Storage.getUrl('" + this.state.imageToDownload + "')");
|
||||
this.addToLog("EmbarkJS.Storage.getUrl('" + this.state.imageToDownload + "')");
|
||||
}
|
||||
|
||||
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>
|
||||
</React.Fragment> : ''
|
||||
}
|
||||
|
||||
{
|
||||
this.state.storageError !== '' ?
|
||||
<Alert bsStyle="danger">{this.state.storageError}</Alert>
|
||||
: ''
|
||||
}
|
||||
<h3>Save text to storage</h3>
|
||||
<Form inline>
|
||||
<FormGroup>
|
||||
|
|
@ -119,7 +117,7 @@ class Storage extends React.Component {
|
|||
type="text"
|
||||
defaultValue={this.state.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>
|
||||
</FormGroup>
|
||||
</Form>
|
||||
|
|
@ -131,7 +129,7 @@ class Storage extends React.Component {
|
|||
type="text"
|
||||
value={this.state.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>
|
||||
</FormGroup>
|
||||
</Form>
|
||||
|
|
@ -141,8 +139,8 @@ class Storage extends React.Component {
|
|||
<FormGroup>
|
||||
<FormControl
|
||||
type="file"
|
||||
onChange={this.handleFileUpload} />
|
||||
<Button bsStyle="primary" onClick={this.uploadFile}>Upload</Button>
|
||||
onChange={(e) => this.handleFileUpload(e)} />
|
||||
<Button bsStyle="primary" onClick={(e) => this.uploadFile(e)}>Upload</Button>
|
||||
<HelpBlock>generated hash: <span className="fileHash">{this.state.fileHash}</span></HelpBlock>
|
||||
</FormGroup>
|
||||
</Form>
|
||||
|
|
@ -154,7 +152,7 @@ class Storage extends React.Component {
|
|||
type="text"
|
||||
value={this.state.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><img src={this.state.url} /></HelpBlock>
|
||||
</FormGroup>
|
||||
|
|
|
|||
|
|
@ -7,9 +7,6 @@ class Whisper extends React.Component {
|
|||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
this.sendMessage = this.sendMessage.bind(this);
|
||||
this.listenToChannel = this.listenToChannel.bind(this);
|
||||
|
||||
this.state = {
|
||||
listenTo: '',
|
||||
channel: '',
|
||||
|
|
@ -28,23 +25,21 @@ class Whisper extends React.Component {
|
|||
sendMessage(e){
|
||||
e.preventDefault();
|
||||
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){
|
||||
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]})
|
||||
.then(message => this.state.messageList.push(`channel: ${listenTo} message: ${message}`))
|
||||
|
||||
this._addToLog("EmbarkJS.Messages.listenTo({topic: ['" + this.state.channel + "']}).then(function(message) {})");
|
||||
this.addToLog("EmbarkJS.Messages.listenTo({topic: ['" + this.state.listenTo + "']}).then(function(message) {})");
|
||||
}
|
||||
|
||||
_addToLog(txt){
|
||||
addToLog(txt){
|
||||
this.state.logs.push(txt);
|
||||
this.setState({logs: this.state.logs});
|
||||
}
|
||||
|
|
@ -53,7 +48,7 @@ class Whisper extends React.Component {
|
|||
return (
|
||||
<React.Fragment>
|
||||
{
|
||||
!this.state.enabled ?
|
||||
!this.props.enabled ?
|
||||
<React.Fragment>
|
||||
<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>
|
||||
|
|
@ -67,8 +62,7 @@ class Whisper extends React.Component {
|
|||
defaultValue={this.state.listenTo}
|
||||
placeholder="channel"
|
||||
onChange={e => this.handleChange(e, 'listenTo')} />
|
||||
{' '}
|
||||
<Button bsStyle="primary" onClick={this.listenToChannel}>Start Listening</Button>
|
||||
<Button bsStyle="primary" onClick={(e) => this.listenToChannel(e)}>Start Listening</Button>
|
||||
<div id="subscribeList">
|
||||
{ this.state.subscribedChannels.map((item, i) => <p key={i}>{item}</p>) }
|
||||
</div>
|
||||
|
|
@ -87,14 +81,12 @@ class Whisper extends React.Component {
|
|||
defaultValue={this.state.channel}
|
||||
placeholder="channel"
|
||||
onChange={e => this.handleChange(e, 'channel')} />
|
||||
{' '}
|
||||
<FormControl
|
||||
type="text"
|
||||
defaultValue={this.state.message}
|
||||
placeholder="message"
|
||||
onChange={e => this.handleChange(e, 'message')} />
|
||||
{' '}
|
||||
<Button bsStyle="primary" onClick={this.sendMessage}>Send Message</Button>
|
||||
<Button bsStyle="primary" onClick={(e) => this.sendMessage(e)}>Send Message</Button>
|
||||
</FormGroup>
|
||||
</Form>
|
||||
|
||||
|
|
|
|||
|
|
@ -47,3 +47,7 @@ div {
|
|||
-webkit-border-radius: 10px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
input.form-control {
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
|
@ -64,7 +64,7 @@ class App extends React.Component {
|
|||
<Blockchain />
|
||||
</Tab>
|
||||
<Tab eventKey={2} title={this._renderStatus('Decentralized Storage', this.state.storageEnabled)}>
|
||||
<Storage />
|
||||
<Storage enabled={this.state.storageEnabled} />
|
||||
</Tab>
|
||||
<Tab eventKey={3} title={this._renderStatus('P2P communication (Whisper/Orbit)', this.state.whisperEnabled)}>
|
||||
<Whisper enabled={this.state.whisperEnabled} />
|
||||
|
|
|
|||
Loading…
Reference in New Issue