Updates Instructions 6: DApp for better flow
Mostly grammar changes here, but there are 2 very important updates to be made: 1. Remove `EtherPress` import - it's unnecessary. 2. Change `post` in loop to `currentPost` to match the names actually used in the template.
This commit is contained in:
parent
0d78c99dc3
commit
0da0f6adb1
|
@ -1,17 +1,16 @@
|
|||
## Coding our dApp
|
||||
Let's use our DReddit JS Object, and the `EmbarkJS` API to interact with our contract and IPFS. While we update oru files, notice how Embark watches and recompiles any asset we modify when we save the changes:
|
||||
Let's use our DReddit JS Object, and the `EmbarkJS` API to interact with our contract and IPFS. While we update our files, notice how Embark watches and recompiles any asset we modify when we save the changes. Navigate to the `app/js/components` folder and follow along from there:
|
||||
|
||||
###### `Create.js`
|
||||
|
||||
1. Start by importing EmbarkJS, web3 and the contract object
|
||||
1. Start by importing EmbarkJS, web3 and the contract object:
|
||||
```
|
||||
import EmbarkJS from 'Embark/EmbarkJS';
|
||||
import EtherPress from 'Embark/contracts/EtherPress';
|
||||
import web3 from 'Embark/web3';
|
||||
```
|
||||
> Both EmbarkJS and web3 are normally imported whenever there's a need to interact with web3 technologies. You'll see these imports present in both `App.js` and `Post.js`
|
||||
|
||||
2. Update the `handleClick` event, that is triggered when you press the 'Publish' button. This will save the post on IPFS, and invoke our contract. We need to obtain a gas estimate and add our post using the contract's `create` function.
|
||||
2. Update the `handleClick` event that is triggered when you press the `Publish` button. This will save the post on IPFS, and invoke our contract. We need to obtain a gas estimate and add our post using the contract's `create` function.
|
||||
|
||||
Save the content of the post in IPFS
|
||||
```
|
||||
|
@ -31,12 +30,12 @@ Finally, generate the transaction
|
|||
const receipt = await toSend.send({from: web3.eth.defaultAccount,
|
||||
gas: estimatedGas + 1000});
|
||||
```
|
||||
> Notice that we added 1000 wei to the estimated gas. There are situations where the estimated gas is incorrect depending on the state of the contractor if you're deleting items from an array. Adding a extra wei value helps avoid running into an Out of Gas exception.
|
||||
> Notice that we added 1000 wei to the estimated gas. There are situations where the estimated gas is incorrect depending on the state of the contract, or if you're deleting items from an array. Adding some extra wei helps avoid running into unexpected Out of Gas exceptions.
|
||||
|
||||
###### `App.js`
|
||||
|
||||
|
||||
1. Edit `componentDidMount()`. Execute `this._loadPosts()` as soon as EmbarkJS initializes.
|
||||
1. Edit `componentDidMount()`. Execute `this._loadPosts()` as soon as EmbarkJS initializes:
|
||||
```
|
||||
EmbarkJS.onReady(() => {
|
||||
this._loadPosts();
|
||||
|
@ -44,32 +43,32 @@ EmbarkJS.onReady(() => {
|
|||
```
|
||||
> `onReady()` is used if you want to execute any action that uses EmbarkJS or web3 as soon as the page loads.
|
||||
|
||||
2. Edit `_loadPosts`. Extract the functions `posts` and `numPosts` from the contract in order to read the posts content.
|
||||
2. Edit `_loadPosts`. Extract the functions `posts` and `numPosts` from the contract in order to read the posts content:
|
||||
|
||||
```
|
||||
const {posts, numPosts} = DReddit.methods;
|
||||
```
|
||||
|
||||
Using `numPosts` obtain the number of posts our contract has.
|
||||
Using `numPosts` to obtain the number of posts our contract has in storage:
|
||||
```
|
||||
const total = await numPosts().call();
|
||||
```
|
||||
|
||||
And then, inside the loop, invoke `posts` to obtain each post individually
|
||||
And then, inside the loop, invoke `posts` to fetch each post individually:
|
||||
|
||||
```
|
||||
const post = posts(i).call();
|
||||
const currentPost = posts(i).call();
|
||||
```
|
||||
> Notice we aren't using `await` here. It's not a good practice to `await` inside a loop. It's better to load all the promises inside an array, and then, call `Promise.all()` on this array.
|
||||
> Notice that we aren't using `await` here. It's not good practice to use `await` inside a loop. It's better to load all the promises inside an array, and then, call `Promise.all()` on this array.
|
||||
|
||||
###### `Post.js`
|
||||
|
||||
1. Edit `_loadAttributes`. Obtain the post from IPFS
|
||||
1. Edit `_loadAttributes` so that we can `get` the post from IPFS:
|
||||
```
|
||||
const ipfsText = await EmbarkJS.Storage.get(ipfsHash);
|
||||
```
|
||||
|
||||
Convert the text retrieved from IPFS into a JSON object an populate `title` and `content`
|
||||
Convert the text retrieved from IPFS into a JSON object and populate `title` and `content`:
|
||||
```
|
||||
const jsonContent = JSON.parse(ipfsText);
|
||||
|
||||
|
@ -77,22 +76,22 @@ const title = jsonContent.title;
|
|||
const content = jsonContent.content;
|
||||
```
|
||||
|
||||
Determine if the user can vote on this post
|
||||
Determine if the user can vote on this post:
|
||||
```
|
||||
const canVote = await DReddit.methods.canVote(this.props.id).call();
|
||||
```
|
||||
|
||||
2. Edit `_vote`. Estimate the cost of invoking the `vote` function of our DReddit contract
|
||||
2. Edit `_vote`. Estimate the cost of invoking the `vote` function of our DReddit contract:
|
||||
```
|
||||
const {vote} = DReddit.methods;
|
||||
const toSend = vote(this.props.id, choice);
|
||||
const estimatedGas = await toSend.estimateGas();
|
||||
```
|
||||
|
||||
Send the transaction
|
||||
Send the transaction:
|
||||
```
|
||||
const receipt = await toSend.send({gas: estimatedGas + 1000});
|
||||
```
|
||||
|
||||
#### Check the dApp
|
||||
Open a browser, navigate to http://localhost:8000 and admire your creation! and also try to fix any bug we may have introduced.
|
||||
Open a browser, navigate to http://localhost:8000 and admire your creation! Also try to fix any bug we may have introduced.
|
||||
|
|
Loading…
Reference in New Issue