step 14: create `Post` component and use EmbarkJS.onReady()
This commit is contained in:
parent
08e4031442
commit
c6a4464bcf
|
@ -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>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
|
@ -7,5 +7,7 @@ import { App } from './components/App';
|
||||||
// e.g if you have a contract named SimpleStorage:
|
// e.g if you have a contract named SimpleStorage:
|
||||||
//import SimpleStorage from 'Embark/contracts/SimpleStorage';
|
//import SimpleStorage from 'Embark/contracts/SimpleStorage';
|
||||||
|
|
||||||
render(<App />, document.getElementById('root'));
|
EmbarkJS.onReady(() => {
|
||||||
|
render(<App />, document.getElementById('root'));
|
||||||
|
});
|
||||||
|
|
||||||
|
|
|
@ -4,6 +4,11 @@
|
||||||
"lockfileVersion": 1,
|
"lockfileVersion": 1,
|
||||||
"requires": true,
|
"requires": true,
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
"dateformat": {
|
||||||
|
"version": "3.0.3",
|
||||||
|
"resolved": "https://registry.npmjs.org/dateformat/-/dateformat-3.0.3.tgz",
|
||||||
|
"integrity": "sha512-jyCETtSl3VMZMWeRo7iY1FL19ges1t55hMo5yaam4Jrsm5EPL89UQkoQRyiI+Yf4k8r2ZpdngkV8hr1lIdjb3Q=="
|
||||||
|
},
|
||||||
"js-tokens": {
|
"js-tokens": {
|
||||||
"version": "4.0.0",
|
"version": "4.0.0",
|
||||||
"resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
|
"resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
|
||||||
|
|
|
@ -10,6 +10,7 @@
|
||||||
"homepage": "",
|
"homepage": "",
|
||||||
"devDependencies": {},
|
"devDependencies": {},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
"dateformat": "^3.0.3",
|
||||||
"react": "^16.4.2",
|
"react": "^16.4.2",
|
||||||
"react-dom": "^16.4.2"
|
"react-dom": "^16.4.2"
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue