step 14: create `Post` component and use EmbarkJS.onReady()

This commit is contained in:
Pascal Precht 2019-02-14 15:13:11 +01:00
parent 08e4031442
commit c6a4464bcf
No known key found for this signature in database
GPG Key ID: 0EE28D8D6FD85D7D
4 changed files with 48 additions and 1 deletions

39
app/js/components/Post.js Normal file
View File

@ -0,0 +1,39 @@
import React, { Component } from 'react';
import EmbarkJS from 'Embark/EmbarkJS';
import dateformat from 'dateformat';
export class Post extends Component {
constructor(props) {
super(props);
this.state = {
topic: '',
content: ''
};
}
async componentDidMount() {
const ipfsHash = web3.utils.toAscii(this.props.description);
const data = await EmbarkJS.Storage.get(ipfsHash);
const { topic, content } = JSON.parse(data);
this.setState({ topic, content });
}
render() {
const formattedDate = dateformat(
new Date(this.props.creationDate * 1000),
'yyyy-mm-dd HH:MM:ss'
);
return (
<React.Fragment>
<hr />
<h3>{this.state.topic}</h3>
<p>{this.state.content}</p>
<p><small><i>created at {formattedDate} by {this.props.owner}</i></small></p>
<button>Upvote</button>
<button>Downvote</button>
</React.Fragment>
)
}
}

View File

@ -7,5 +7,7 @@ import { App } from './components/App';
// e.g if you have a contract named SimpleStorage:
//import SimpleStorage from 'Embark/contracts/SimpleStorage';
render(<App />, document.getElementById('root'));
EmbarkJS.onReady(() => {
render(<App />, document.getElementById('root'));
});

5
package-lock.json generated
View File

@ -4,6 +4,11 @@
"lockfileVersion": 1,
"requires": true,
"dependencies": {
"dateformat": {
"version": "3.0.3",
"resolved": "https://registry.npmjs.org/dateformat/-/dateformat-3.0.3.tgz",
"integrity": "sha512-jyCETtSl3VMZMWeRo7iY1FL19ges1t55hMo5yaam4Jrsm5EPL89UQkoQRyiI+Yf4k8r2ZpdngkV8hr1lIdjb3Q=="
},
"js-tokens": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",

View File

@ -10,6 +10,7 @@
"homepage": "",
"devDependencies": {},
"dependencies": {
"dateformat": "^3.0.3",
"react": "^16.4.2",
"react-dom": "^16.4.2"
}