unify requirements, make code snippets more clear

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

@@ -5,9 +5,12 @@ description: Tutorial to get and use a data set in a basic React app.
 
 ## Requirements
 
-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.
+This is a continuation of the React App Tutorial. Make sure you already did the previous steps:
 
-Open `src/App.js` in your marketplace app.
+1. [React App Setup](/tutorials/react-setup/)
+2. [Publish a Data Set](/tutorials/react-publish-data-set/)
+
+Open `src/App.js` from your `marketplace/` folder.
 
 ## Retrieve Assets
 
@@ -15,17 +18,21 @@ In the previous tutorial we added asset publishing. We can now search for publis
 
 ```js
 // src/App.js
+// ...
 async retrieveAssets() {
   this.dbAssets = await this.ocean.assets.search("10 Monkey Species Small")
   console.log(this.dbAssets)
 }
+// ...
 ```
 
 Now we need a button to start our search inside the render function just after `<button onClick={() => this.submitAsset()}>Register asset</button>`:
 
 ```jsx
 // src/App.js
+// ...
 <button onClick={() => this.retrieveAssets()}>Retrieve assets</button>
+// ...
 ```
 
 ## Consume Assets
@@ -36,6 +43,7 @@ With the following code we start the consume process with the first search resul
 
 ```js
 // src/App.js
+// ...
 async consumeAsset() {
   // get all accounts
   const accounts = await this.ocean.accounts.list()
@@ -59,13 +67,16 @@ async consumeAsset() {
       0
   )
 }
+// ...
 ```
 
 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
 // src/App.js
+// ...
 <button onClick={() => this.consumeAsset()}>Consume asset</button>
+// ...
 ```
 
 With all these buttons in place, you should see this:

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

@@ -7,7 +7,9 @@ description: Tutorial to add dataset publishing capabilities to a basic React ap
 
 This is a continuation of the [React App Setup](/tutorials/react-setup/) tutorial, so make sure you have done all the steps described in there.
 
-Open `src/App.js` in your marketplace app from the [React App Setup](/tutorials/react-setup/) tutorial.
+1. [React App Setup](/tutorials/react-setup/)
+
+Open `src/App.js` from your `marketplace/` folder.
 
 ## Define Asset
 
@@ -94,31 +96,38 @@ export default asset
 Then import this asset definition at the top of `src/App.js`:
 
 ```js
+// src/App.js
+// ...
 import asset from './asset'
+// ...
 ```
 
 ## Handle Asset Publishing
 
 Now that we have an asset to submit, we need a function to handle it. Just before `render() {` let's add this function:
 
-```js
+```jsx
 // src/App.js
+// ...
 async submitAsset() {
-    const accounts = await this.ocean.accounts.list()
+  const accounts = await this.ocean.accounts.list()
-    const ddo = await this.ocean.assets.create(asset, accounts[0])
+  const ddo = await this.ocean.assets.create(asset, accounts[0])
-    console.log('Asset successfully submitted.')
+  console.log('Asset successfully submitted.')
-    console.log(ddo)
+  console.log(ddo)
-    alert(
+  alert(
-      'Asset successfully submitted. Look into your console to see the response DDO object.'
+    'Asset successfully submitted. Look into your console to see the response DDO object.'
-    )
+  )
-  }
+}
+// ...
 ```
 
 The last thing we need is a button to start our registration inside the render function just after `<h1>Marketplace app</h1>`:
 
 ```jsx
 // src/App.js
+// ...
 <button onClick={() => this.submitAsset()}>Register asset</button>
+// ...
 ```
 
 Tip: Before clicking the `Register asset` button, it might help to reload the page.

content/tutorials/react-setup.md

@@ -90,6 +90,7 @@ At the beginning of your component (i.e. right after the `class App extends Comp
 
 ```js
 // src/App.js
+//...
 async componentDidMount() {
   this.ocean = await new Ocean.getInstance({
     web3Provider: web3,
@@ -100,8 +101,9 @@ async componentDidMount() {
     parityUri: 'http://localhost:8545',
     secretStoreUri: 'http://localhost:12001'
   })
-  console.log("Finished loading contracts.")
+  console.log('Finished loading contracts.')
 }
+//...
 ```
 
 ## Final Result

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

@@ -1,180 +0,0 @@
----
-title: Publish a Data Set
-description: Tutorial to add dataset publishing capabilities to a basic React app.
----
-
-## Requirements
-
-This is a continuation of the [React App Setup](/tutorials/react-setup/) tutorial, so make sure you have done all the steps described in there.
-
-Open `src/App.js` in your marketplace app from the [React App Setup](/tutorials/react-setup/) tutorial.
-
-## Define Asset
-
-First, let's add the [asset](/concepts/terminology/#asset-or-data-asset) that we want to publish.
-
-To do that, we need to define the asset based on the [OEP-08](https://github.com/oceanprotocol/OEPs/tree/master/8) metadata structure. Let's create a new file `src/asset.js` and fill it with:
-
-```js
-// src/asset.js
-const asset = {
-  base: {
-    name: '10 Monkey Species Small',
-    dateCreated: '2012-02-01T10:55:11Z',
-    author: 'Mario',
-    license: 'CC0: Public Domain',
-    contentType: 'jpg/txt',
-    price: 10,
-    files: [
-      {
-        index: 0,
-        contentType: 'application/zip',
-        checksum: '2bf9d229d110d1976cdf85e9f3256c7f',
-        checksumType: 'MD5',
-        contentLength: 12057507,
-        compression: 'zip',
-        encoding: 'UTF-8',
-        url:
-          'https://s3.amazonaws.com/datacommons-seeding-us-east/10_Monkey_Species_Small/assets/training.zip'
-      },
-      {
-        index: 1,
-        contentType: 'text/txt',
-        checksum: '354d19c0733c47ef3a6cce5b633116b0',
-        checksumType: 'MD5',
-        contentLength: 928,
-        url:
-          'https://s3.amazonaws.com/datacommons-seeding-us-east/10_Monkey_Species_Small/assets/monkey_labels.txt',
-        resourceId: 'test'
-      },
-      {
-        index: 2
-      }
-    ],
-    checksum: '',
-    categories: ['image'],
-    tags: ['image data', 'classification', 'animals'],
-    type: 'dataset',
-    description: 'EXAMPLE ONLY ',
-    copyrightHolder: 'Unknown',
-    workExample: 'image path, id, label',
-    links: [
-      {
-        name: 'example model',
-        url:
-          'https://drive.google.com/open?id=1uuz50RGiAW8YxRcWeQVgQglZpyAebgSM'
-      },
-      {
-        name: 'example code',
-        type: 'example code',
-        url: 'https://github.com/slothkong/CNN_classification_10_monkey_species'
-      },
-      {
-        url:
-          'https://s3.amazonaws.com/datacommons-seeding-us-east/10_Monkey_Species_Small/links/discovery/n5151.jpg',
-        name: 'n5151.jpg',
-        type: 'discovery'
-      },
-      {
-        url:
-          'https://s3.amazonaws.com/datacommons-seeding-us-east/10_Monkey_Species_Small/links/sample/sample.zip',
-        name: 'sample.zip',
-        type: 'sample'
-      }
-    ],
-    inLanguage: 'en'
-  }
-}
-
-export default asset
-```
-
-Then import this asset from the top of `src/App.js`:
-
-```js
-import asset from './asset'
-```
-
-## Handle Asset Publishing
-
-Now that we have an asset to submit, we need a function to handle it. Just before `render() {` let's add this function:
-
-```js
-// src/App.js
-async submitAsset() {
-    const accounts = await this.ocean.accounts.list()
-    const ddo = await this.ocean.assets.create(asset, accounts[0])
-    console.log('Asset successfully submitted.')
-    console.log(ddo)
-    alert(
-      'Asset successfully submitted. Look into your console to see the response DDO object.'
-    )
-  }
-```
-
-The last thing we need is a button to start our registration inside the render function just after `<h1>Marketplace app</h1>`:
-
-```jsx
-// src/App.js
-<button onClick={() => this.submitAsset()}>Register asset</button>
-```
-
-Tip: Before clicking the `Register asset` button, it might help to reload the page.
-
-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:
-
-```jsx
-// src/App.js
-import React, { Component } from 'react'
-import './App.css'
-import { Ocean } from '@oceanprotocol/squid'
-import * as Web3 from 'web3'
-import asset from './asset'
-
-const web3 = new Web3(window.web3.currentProvider)
-window.ethereum.enable()
-
-class App extends Component {
-  async componentDidMount() {
-    this.ocean = await new Ocean.getInstance({
-      web3Provider: web3,
-      nodeUri: 'http://localhost:8545',
-      aquariusUri: 'http://localhost:5000',
-      brizoUri: 'http://localhost:8030',
-      brizoAddress: '0x00bd138abd70e2f00903268f3db08f2d25677c9e',
-      parityUri: 'http://localhost:8545',
-      secretStoreUri: 'http://localhost:12001'
-    })
-    console.log('Finished loading contracts.')
-  }
-
-  async submitAsset() {
-    const accounts = await this.ocean.accounts.list()
-    const ddo = await this.ocean.assets.create(asset, accounts[0])
-    console.log('Asset successfully submitted.')
-    console.log(ddo)
-    alert(
-      'Asset successfully submitted. Look into your console to see the response DDO object.'
-    )
-  }
-
-  render() {
-    return (
-      <div className="App App-header">
-        <h1>Marketplace app</h1>
-        <button onClick={() => this.submitAsset()}>Register asset</button>
-      </div>
-    )
-  }
-}
-
-export default App
-```
-
-Move on to [Get & Use a Data Set](/tutorials/react-get-use-data-set/).