Updating embark demo to use react instead of jquery

templates/demo/app/components/blockchain.js

@@ -0,0 +1,91 @@
+import EmbarkJS from 'Embark/EmbarkJS';
+import SimpleStorage from 'Embark/contracts/SimpleStorage';
+import React from 'react';
+import { Form, FormGroup, FormControl, HelpBlock, Button } from 'react-bootstrap';
+
+class Blockchain extends React.Component {
+
+    constructor(props) {
+      super(props);
+
+      this.state = {
+        valueSet: 10,
+        valueGet: "",
+        logs: []
+      }
+    }
+
+    handleChange(e){
+      this.setState({valueSet: e.target.value});
+    }
+
+    setValue(e){
+      e.preventDefault();
+
+      var value = parseInt(this.state.valueSet, 10);
+
+      // If web3.js 1.0 is being used
+      if (EmbarkJS.isNewWeb3()) {
+        SimpleStorage.methods.set(value).send({from: web3.eth.defaultAccount});
+        this._addToLog("SimpleStorage.methods.set(value).send({from: web3.eth.defaultAccount})");
+      } else {
+        SimpleStorage.set(value);
+        this._addToLog("#blockchain", "SimpleStorage.set(" + value + ")");
+      }
+    }
+
+    getValue(e){
+      e.preventDefault();
+
+      if (EmbarkJS.isNewWeb3()) {
+        SimpleStorage.methods.get().call()
+          .then(_value => this.setState({valueGet: _value}))
+        this._addToLog("SimpleStorage.methods.get(console.log)");
+      } else {
+        SimpleStorage.get()
+          .then(_value => this.setState({valueGet: _value}));
+        this._addToLog("SimpleStorage.get()");
+      }
+    }
+
+    _addToLog(txt){
+      this.state.logs.push(txt);
+      this.setState({logs: this.state.logs});
+    }
+
+    render(){
+      return (<React.Fragment>
+          <h3> 1. Set the value in the blockchain</h3>
+          <Form inline>
+            <FormGroup>
+              <FormControl
+                type="text"
+                defaultValue={this.state.valueSet}
+                onChange={(e) => this.handleChange(e)} />
+              <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>
+
+          <h3> 2. Get the current value</h3>
+          <Form inline>
+            <FormGroup>
+              <HelpBlock>current value is <span className="value">{this.state.valueGet}</span></HelpBlock>
+              <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>
+
+          <h3> 3. Contract Calls </h3>
+          <p>Javascript calls being made: </p>
+          <div className="logs">
+          {
+            this.state.logs.map((item, i) => <p key={i}>{item}</p>)
+          }
+          </div>
+      </React.Fragment>
+      );
+    }
+  }
+
+  export default Blockchain;

templates/demo/app/components/storage.js

@@ -0,0 +1,172 @@
+import EmbarkJS from 'Embark/EmbarkJS';
+import React from 'react';
+import { Alert, Form, FormGroup, FormControl, HelpBlock, Button } from 'react-bootstrap';
+
+class Storage extends React.Component {
+
+    constructor(props) {
+      super(props);
+
+      this.state = {
+          textToSave: 'hello world!',
+          generatedHash: '',
+          loadText: '',
+          storedText: '',
+          fileToUpload: null,
+          fileHash: '',
+          imageToDownload: '',
+          url: '',
+          logs: [],
+          storageError: ''
+      };
+    }
+
+    handleChange(e, name){
+        this.state[name] = e.target.value;
+        this.setState(this.state);
+    }
+
+    handleFileUpload(e){
+        this.setState({ fileToUpload: [e.target] });
+    }
+
+    addToLog(txt){
+        this.state.logs.push(txt);
+        this.setState({logs: this.state.logs});
+    }
+
+    setText(e){
+        e.preventDefault();
+
+        EmbarkJS.Storage.saveText(this.state.textToSave)
+            .then((hash) => {
+                this.setState({
+                    generatedHash: hash,
+                    loadText: hash,
+                    storageError: ''
+                });
+                this.addToLog("EmbarkJS.Storage.saveText('" + this.state.textToSave + "').then(function(hash) { })");
+                })
+            .catch((err) => {
+                if(err){
+                    this.setState({storageError: err.message});
+                    console.log("Storage saveText Error => " + err.message);
+                }
+            });
+    }
+
+    loadHash(e){
+        e.preventDefault();
+
+        EmbarkJS.Storage.get(this.state.loadText)
+            .then((content) => {
+                this.setState({storedText: content, storageError: ''});
+                this.addToLog("EmbarkJS.Storage.get('" + this.state.loadText + "').then(function(content) { })");
+            })
+            .catch((err) => {
+                if(err){
+                    this.setState({storageError: err.message})
+                    console.log("Storage get Error => " + err.message);
+                }
+            });
+    }
+
+    uploadFile(e){
+        e.preventDefault();
+
+        EmbarkJS.Storage.uploadFile(this.state.fileToUpload)
+            .then((hash) => {
+                this.setState({
+                    fileHash: hash,
+                    imageToDownload: hash,
+                    storageError: ''
+                });
+                this.addToLog("EmbarkJS.Storage.uploadFile(this.state.fileToUpload).then(function(hash) { })");
+                })
+            .catch((err) => {
+                if(err){
+                    this.setState({storageError: err.message});
+                    console.log("Storage uploadFile Error => " + err.message);
+                }
+            });
+    }
+
+    loadFile(e){
+        let _url = EmbarkJS.Storage.getUrl(this.state.imageToDownload);
+        this.setState({url: _url})
+        this.addToLog("EmbarkJS.Storage.getUrl('" + this.state.imageToDownload + "')");
+    }
+
+    render(){
+        return <React.Fragment>
+            {
+                !this.props.enabled ?
+                <React.Fragment>
+                <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>
+                    <FormControl
+                        type="text"
+                        defaultValue={this.state.textToSave}
+                        onChange={e => this.handleChange(e, 'textToSave')} />
+                    <Button bsStyle="primary" onClick={(e) => this.setText(e)}>Save Text</Button>
+                    <HelpBlock>generated Hash: <span className="textHash">{this.state.generatedHash}</span></HelpBlock>
+                </FormGroup>
+            </Form> 
+
+            <h3>Load text from storage given an hash</h3>
+            <Form inline>
+                <FormGroup>
+                    <FormControl
+                        type="text"
+                        value={this.state.loadText}
+                        onChange={e => this.handleChange(e, 'loadText')} />
+                    <Button bsStyle="primary" onClick={(e) => this.loadHash(e)}>Load</Button>
+                    <HelpBlock>result: <span className="textHash">{this.state.storedText}</span></HelpBlock>
+                </FormGroup>
+            </Form>
+
+            <h3>Upload file to storage</h3>
+            <Form inline>
+                <FormGroup>
+                    <FormControl
+                        type="file"
+                        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>
+
+            <h3>Get file or image from storage</h3>
+            <Form inline>
+                <FormGroup>
+                    <FormControl
+                        type="text"
+                        value={this.state.imageToDownload}
+                        onChange={e => this.handleChange(e, 'imageToDownload')} />
+                    <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>
+            </Form>
+
+            <p>Javascript calls being made: </p>
+            <div className="logs">
+            <p>EmbarkJS.Storage.setProvider('ipfs',{'{'}server: 'localhost', port: '5001'{'}'})</p>
+            {
+                this.state.logs.map((item, i) => <p key={i}>{item}</p>)
+            }
+            </div>
+        </React.Fragment>;
+    }
+}
+
+export default Storage;

templates/demo/app/components/whisper.js

@@ -0,0 +1,105 @@
+import EmbarkJS from 'Embark/EmbarkJS';
+import React from 'react';
+import { Alert, Form, FormGroup, FormControl, HelpBlock, Button } from 'react-bootstrap';
+
+class Whisper extends React.Component {
+
+    constructor(props) {
+      super(props);
+
+      this.state = {
+          listenTo: '',
+          channel: '',
+          message: '',
+          subscribedChannels: [],
+          messageList: [],
+          logs: []
+      }
+    }
+
+    handleChange(e, name){
+        this.state[name] = e.target.value;
+        this.setState(this.state);
+    }
+
+    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 + "'})");
+    }
+
+    listenToChannel(e){
+        e.preventDefault();
+
+        this.state.subscribedChannels.push(`subscribed to ${this.state.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}`))
+
+        this.addToLog("EmbarkJS.Messages.listenTo({topic: ['" + this.state.listenTo + "']}).then(function(message) {})");
+    }
+
+    addToLog(txt){
+        this.state.logs.push(txt);
+        this.setState({logs: this.state.logs});
+    }
+
+    render(){
+        return (
+       <React.Fragment>
+            {
+                !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>
+                </React.Fragment> : ''
+            }
+            <h3>Listen To channel</h3>
+            <Form inline>
+                <FormGroup>
+                    <FormControl
+                        type="text"
+                        defaultValue={this.state.listenTo}
+                        placeholder="channel"
+                        onChange={e => this.handleChange(e, 'listenTo')} />
+                    <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>
+                    <p>messages received:</p>
+                    <div id="messagesList">
+                    { this.state.messageList.map((item, i) => <p key={i}>{item}</p>) }
+                    </div>
+                </FormGroup>
+            </Form>
+
+            <h3>Send Message</h3>
+            <Form inline>
+                <FormGroup>
+                    <FormControl
+                        type="text"
+                        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={(e) => this.sendMessage(e)}>Send Message</Button>
+                </FormGroup>
+            </Form>
+
+            <p>Javascript calls being made: </p>
+            <div className="logs">
+            <p>EmbarkJS.Messages.setProvider('whisper')</p>
+            {
+                this.state.logs.map((item, i) => <p key={i}>{item}</p>)
+            }
+            </div>
+        </React.Fragment>
+        );
+    }
+}
+
+export default Whisper;

templates/demo/app/dapp.css

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