Merge pull request #197 from oceanprotocol/minor-fixes-in-react-app-tutorial

Minor fixes in the React App Tutorial

content/tutorials/react-get-use-data-set.md

@@ -3,13 +3,11 @@ title: Get & Use a Data Set
 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
 
-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
 
@@ -30,7 +28,7 @@ The last thing we need is a button to start our search inside the render functio
 
 ## 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
 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
 <button onClick={() => this.consumeAsset()}>Consume asset</button>
@@ -67,9 +65,13 @@ With all these buttons in place, you should see this:
 
 ![React App 05](images/react-app-05.png)
 
-## Final Result
+Tip: Before clicking the `Retrieve assets` button, it might help to reload the page.
 
-That's it. If you have no errors in your `console.log` and can see your asset files listed, you have a working marketplace.
+Go ahead and click the `Retrieve assets` button, and then the `Consume asset` button. Approve all the MetaMask dialog boxes. 
+
+If you have no errors in your `console.log` and can see your asset files listed, you have a working marketplace.
+
+## Final Result
 
 Here is the full source of `src/App.js` that you should have if you followed this tutorial:
 
@@ -171,7 +173,7 @@ class App extends Component {
   }
 
   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)
   }
 
@@ -183,13 +185,13 @@ class App extends Component {
     // get service we want to execute
     const service = consumeAsset.findServiceByType('Access')
     // order service agreement
-    const agreement = await ocean.assets.order(
+    const agreement = await this.ocean.assets.order(
       consumeAsset.id,
       service.serviceDefinitionId,
       accounts[0]
     )
     // consume it
-    await ocean.assets.consume(
+    await this.ocean.assets.consume(
       agreement,
       consumeAsset.id,
       service.serviceDefinitionId,

content/tutorials/react-publish-data-set.md

@@ -101,9 +101,13 @@ The last thing we need is a button to start our registration inside the render f
 <button onClick={() => this.submitAsset()}>Register asset</button>
 ```
 
-## Final Result
+Tip: Before clicking the `Register asset` button, it might help to reload the page.
 
-That's it. If you have no errors in your `console.log` and you receive an alert after you click `Register asset` then you have successfully registered an asset.
+When you click on the `Register asset` button, you should get four separate dialog boxes from MetaMask, in a series, i.e. the second one only appears after you accept/approve the first one, and so on.
+
+If you have no errors in your `console.log`, then  you have successfully registered an asset.
+
+## Final Result
 
 Here is the full source of `src/App.js` that you should have if you followed this tutorial:
 
@@ -216,3 +220,5 @@ class App extends Component {
 
 export default App
 ```
+
+Move on to [Get & Use a Data Set](/tutorials/react-get-use-data-set/).

content/tutorials/react-setup.md

@@ -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`
 - 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 but recommended) Clean out all your old Docker stuff using `docker system prune --all --volumes`
   - Use Barge to run a local Spree Testnet:
 
     ```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
     ```
 
-- [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
 
@@ -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.
 
-## Create Ocean instance
+## Create 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
 async componentDidMount() {