dreddit-dapp/instructions/6 Coding: dApp.md

## Coding our dApp
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:
```
import EmbarkJS from 'Embark/EmbarkJS';
import web3 from 'Embark/web3';
import DReddit from 'Embark/contracts/DReddit';

```
> 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.

Save the content of the post in IPFS
```
const ipfsHash = await EmbarkJS.Storage.saveText(JSON.stringify(textToSave));
```

Then, estimate the gas needed to execute the `create` function

```
const {create} = DReddit.methods;    
const toSend = await create(web3.utils.toHex(ipfsHash));
const estimatedGas = await toSend.estimateGas();
```

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 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:
```
EmbarkJS.onReady(() => {
    this._loadPosts();
});
```
> `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:

```
const {posts, numPosts} = DReddit.methods;
```

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 fetch each post individually:

```
const currentPost = posts(i).call();
```
> 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` 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 and populate `title` and `content`:
```
const jsonContent = JSON.parse(ipfsText);

const title = jsonContent.title;
const content = jsonContent.content;
```

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:
```
const {vote} = DReddit.methods;
const toSend = vote(this.props.id, choice);
const estimatedGas = await toSend.estimateGas();
```

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! Also try to fix any bug we may have introduced.