1
0
mirror of https://github.com/oceanprotocol/docs.git synced 2024-11-26 19:49:26 +01:00

Minor fixes in the React App Tutorial

This commit is contained in:
Troy McConaghy 2019-04-02 13:18:59 +02:00
parent fb86e854aa
commit 2192a49827
3 changed files with 13 additions and 12 deletions

View File

@ -3,13 +3,11 @@ title: Get & Use a Data Set
description: Tutorial to get and use a data set in a basic React app. description: Tutorial to get and use a data set in a basic React app.
--- ---
**NOTICE: This section of the React App Tutorial is not currently working because it hasn't been updated to work with the latest squid-js. There is [an open issue to update it](https://github.com/oceanprotocol/docs/issues/181).**
## Requirements ## Requirements
This is a continuation of the [React App Setup](/tutorials/react-setup/) and [React Publish Data-set](/tutorials/react-publish-data-set/) tutorial, so make sure you have done all the steps described in there. This is a continuation of the React App Tutorial. Make sure you already did the [React App Setup](/tutorials/react-setup/) and the [Publish a Data Set](/tutorials/react-publish-data-set/) steps.
Open `src/App.js` in your marketplace app from previous tutorials. Open `src/App.js` in your marketplace app.
## Retrieve Assets ## Retrieve Assets
@ -30,7 +28,7 @@ The last thing we need is a button to start our search inside the render functio
## Consume Assets ## Consume Assets
The retrieved assets can now be consumed so in this tutorial we consume the first one. The following code goes after `async retrieveAssets()` function. The retrieved assets can now be consumed so in this tutorial we consume the first one. The following code goes after the `async retrieveAssets()` function.
```js ```js
async consumeAsset() { async consumeAsset() {
@ -57,7 +55,7 @@ async consumeAsset() {
} }
``` ```
We still need button in render function just after `<button onClick={()=>this.retrieveAssets()}>Retrieve assets</button>` to start consumption: We still need a button to start consumption. In the render function, just after the `<button onClick={()=>this.retrieveAssets()}>Retrieve assets</button>` line, add:
```jsx ```jsx
<button onClick={() => this.consumeAsset()}>Consume asset</button> <button onClick={() => this.consumeAsset()}>Consume asset</button>
@ -171,7 +169,7 @@ class App extends Component {
} }
async retrieveAssets() { async retrieveAssets() {
this.dbAssets = await ocean.assets.search("10 Monkey Species Small") this.dbAssets = await this.ocean.assets.search("10 Monkey Species Small")
console.log(this.dbAssets) console.log(this.dbAssets)
} }
@ -183,13 +181,13 @@ class App extends Component {
// get service we want to execute // get service we want to execute
const service = consumeAsset.findServiceByType('Access') const service = consumeAsset.findServiceByType('Access')
// order service agreement // order service agreement
const agreement = await ocean.assets.order( const agreement = await this.ocean.assets.order(
consumeAsset.id, consumeAsset.id,
service.serviceDefinitionId, service.serviceDefinitionId,
accounts[0] accounts[0]
) )
// consume it // consume it
await ocean.assets.consume( await this.ocean.assets.consume(
agreement, agreement,
consumeAsset.id, consumeAsset.id,
service.serviceDefinitionId, service.serviceDefinitionId,

View File

@ -216,3 +216,5 @@ class App extends Component {
export default App export default App
``` ```
Move on to [Get & Use a Data Set](/tutorials/react-get-use-data-set/).

View File

@ -9,6 +9,7 @@ description: This tutorial shows how you can build a basic [React](https://react
- `npm` >= 5.2 is installed. You can check using `npm -v` - `npm` >= 5.2 is installed. You can check using `npm -v`
- Git clone the [oceanprotocol/barge](https://github.com/oceanprotocol/barge) repository, then in that directory: - Git clone the [oceanprotocol/barge](https://github.com/oceanprotocol/barge) repository, then in that directory:
- (Optional) If you want to use Azure Storage or Amazon S3 storage, then go through the tutorials to set those up: [Azure](/tutorials/azure-for-brizo/) or [Amazon](/tutorials/amazon-s3-for-brizo/). Note that if you're using Azure Storage, you must edit the `barge/brizo.env` file and set all `AZURE_`... values. - (Optional) If you want to use Azure Storage or Amazon S3 storage, then go through the tutorials to set those up: [Azure](/tutorials/azure-for-brizo/) or [Amazon](/tutorials/amazon-s3-for-brizo/). Note that if you're using Azure Storage, you must edit the `barge/brizo.env` file and set all `AZURE_`... values.
- (Optional but recommended) Clean out all your old Docker stuff using `docker system prune --all --volumes`
- Use Barge to run a local Spree Testnet: - Use Barge to run a local Spree Testnet:
```bash ```bash
@ -18,7 +19,7 @@ description: This tutorial shows how you can build a basic [React](https://react
./start_ocean.sh --latest --no-pleuston --local-spree-node ./start_ocean.sh --latest --no-pleuston --local-spree-node
``` ```
- [Get some Spree Ether](/tutorials/get-ether-and-ocean-tokens/#get-ether-for-a-local-spree-testnet) in a local account managed by MetaMask. - Once your local Spree network is running, [get some Spree Ether](/tutorials/get-ether-and-ocean-tokens/#get-ether-for-a-local-spree-testnet) in a local account managed by MetaMask.
## New Create React App ## New Create React App
@ -77,11 +78,11 @@ After those steps you should see this, and MetaMask should have asked you to all
Note: If you see an error like `inpage.js:1 MetaMask - RPC Error: Internal JSON-RPC error.` in your `console.log`, don't worry about it. It's a MetaMask thing. Note: If you see an error like `inpage.js:1 MetaMask - RPC Error: Internal JSON-RPC error.` in your `console.log`, don't worry about it. It's a MetaMask thing.
## Create Ocean instance ## Create Ocean Instance
Now that we are successfully connected with Web3, we can set up our Ocean instance. Now that we are successfully connected with Web3, we can set up our Ocean instance.
At the beginning of your component, create a new Ocean instance with all configuration within the `componentDidMount` lifecycle method. All Ocean Protocol operations can be executed from this Ocean instance. At the beginning of your component (i.e. right after the `class App extends Component {` line), create a new Ocean instance with all configuration within the `componentDidMount` lifecycle method. All Ocean Protocol operations can be executed from this Ocean instance.
```js ```js
async componentDidMount() { async componentDidMount() {