step 13: introduce CreatePost component

app/js/components/App.js

@@ -1,8 +1,14 @@
 import React, { Component } from 'react';
+import { CreatePost } from './CreatePost';
 
 export class App extends Component {
 
   render() {
-    return <h1>DReddit</h1>
+    return (
+      <React.Fragment>
+        <h1>DReddit</h1>
+        <CreatePost />
+      </React.Fragment>
+    )
   }
 }

app/js/components/CreatePost.js

@@ -0,0 +1,72 @@
+import React, { Component } from 'react';
+import EmbarkJS from 'Embark/EmbarkJS';
+import DReddit from 'Embark/contracts/Dreddit';
+
+export class CreatePost extends Component {
+
+  constructor(props) {
+    super(props);
+    
+    this.state = {
+      topic: '',
+      content: '',
+      loading: false
+    };
+  }
+
+  handleChange(field, event) {
+    this.setState({
+      [field]: event.target.value
+    });
+  }
+
+  async createPost(event) {
+    event.preventDefault();
+    
+    this.setState({
+      loading: true
+    });
+
+    const ipfsHash = await EmbarkJS.Storage.saveText(JSON.stringify({
+      topic: this.state.topic,
+      content: this.state.content
+    }));
+
+    const accounts = await web3.eth.getAccounts();
+    const createPost = await DReddit.methods.createPost(web3.utils.toHex(ipfsHash));
+    const estimate = await createPost.estimateGas();
+    
+    await createPost.send({from: accounts[0], gas: estimate});
+
+    this.setState({
+      topic: '',
+      content: '',
+      loading: false
+    });
+  }
+
+  render() {
+    return (
+      <form onSubmit={e => this.createPost(e)}>
+        <div>
+          <label>Topic</label>
+          <input 
+            type="text" 
+            name="topic" 
+            value={this.state.topic} 
+            onChange={e => this.handleChange('topic', e)}/>
+        </div>
+        <div>
+          <textarea 
+            name="content"
+            value={this.state.content}
+            onChange={e => this.handleChange('content', e)}></textarea>
+        </div>
+        <button type="submit">Post</button>
+        {this.state.loading && 
+          <p>Posting...</p>
+        }
+      </form>
+    )
+  }
+}