From e013239e76b70c14e0a589f715acb073d6474b6b Mon Sep 17 00:00:00 2001
From: Jernej Pregelj <jernej.pregelj88@gmail.com>
Date: Mon, 17 Dec 2018 14:02:35 +0100
Subject: [PATCH] retrieve and consume flow

---
 content/tutorials/react-get-use-data-set.md | 173 ++++++++++++++++++++
 1 file changed, 173 insertions(+)

diff --git a/content/tutorials/react-get-use-data-set.md b/content/tutorials/react-get-use-data-set.md
index 1fb5c3e7..f250bdc0 100644
--- a/content/tutorials/react-get-use-data-set.md
+++ b/content/tutorials/react-get-use-data-set.md
@@ -2,3 +2,176 @@
 title: Get & Use a Data Set
 description: Tutorial to get and use a data set in a basic React app.
 ---
+
+## 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.
+
+Open `src/App.js` in your marketplace app from previous tutorials.
+
+## Retrieve Assets
+
+From previous tutorial we added asset publishing so we can now search for it so we can consume it later. Just after `submitAsset()` function we can add new function that will handle search:
+
+```js
+async retrieveAssets(){
+  this.dbAssets = await this.ocean.searchAssetsByText("Office Humidity")
+  console.log(this.dbAssets)
+}
+```
+
+The last thing we need is a button to start our search inside the render function just after `<button onClick={() => this.submitAsset()}>Register asset</button>`:
+
+```jsx
+<button onClick={()=>this.retrieveAssets()}>Retrieve assets</button>
+```
+
+## Consume Asset
+
+The retrieved assets can now be consumed so in this tutorial we consume the first one. The following code goes after `async retrieveAssets()` function.
+
+```js
+async consumeAsset(){
+  // get all accounts
+  const accounts = await this.ocean.getAccounts()
+  // get first asset
+  const consumeAsset = this.dbAssets[0]
+  // get service we want to execute
+  const service = consumeAsset.findServiceByType('Access')
+  // sign service
+  const serviceAgreementSignatureResult = await this.ocean.signServiceAgreement(
+      consumeAsset.id,
+      service.serviceDefinitionId,
+      accounts[0])
+  // run it
+  await this.ocean.initializeServiceAgreement(
+      consumeAsset.id,
+      service.serviceDefinitionId,
+      serviceAgreementSignatureResult.serviceAgreementId,
+      serviceAgreementSignatureResult.serviceAgreementSignature,
+      // callback to handle the files we get
+      (files) => { console.log('Asset files', files) },
+      accounts[0])
+}
+```
+
+We still need button in render function just after `<button onClick={()=>this.retrieveAssets()}>Retrieve assets</button>` to start consumption:
+
+```jsx
+<button onClick={()=>this.consumeAsset()}>Consume asset</button>
+```
+
+## Final Result
+
+That's it. If you have no errors in your `console.log` and your asset files listed you have working marketplace.
+
+Here is the full source of `src/App.js` that you should have if you followed this tutorial:
+
+```jsx
+import React, { Component } from 'react'
+import './App.css'
+import { Ocean } from '@oceanprotocol/squid'
+import * as Web3 from 'web3'
+
+const web3 = new Web3(window.web3.currentProvider)
+window.ethereum.enable()
+
+const asset = {
+  base: {
+    name: 'Office Humidity',
+    description: 'Weather information of UK including temperature and humidity',
+    dateCreated: '2012-02-01T10:55:11+00:00',
+    author: 'Met Office',
+    size: '3.1bg',
+    license: 'Public Domain',
+    copyrightHolder: 'Met Office',
+    contentUrls: [
+      'https://testocnfiles.blob.core.windows.net/testfiles/testzkp.zip'
+    ],
+    contentType: 'text/csv',
+    links: [
+      {
+        name: 'Dataset sample',
+        type: 'sample',
+        url:
+          'http://data.ceda.ac.uk/badc/ukcp09/data/gridded-land-obs/gridded-land-obs-daily/'
+      }
+    ],
+    tags: 'weather, uk, 2011, temperature, humidity',
+    price: 5,
+    type: 'dataset'
+  },
+  curation: {
+    rating: 0,
+    numVotes: 0,
+    schema: 'Binary Voting'
+  },
+  additionalInformation: {
+    updateFrequency: 'yearly'
+  }
+}
+
+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',
+      parityUri: 'http://localhost:8545',
+      secretStoreUri: 'http://localhost:12001',
+      threshold: 0,
+      password: 'secret',
+      address: '0x068ed00cf0441e4829d9784fcbe7b9e26d4bd8d0'
+    })
+    console.log('Finished loading contracts!')
+  }
+
+  async submitAsset() {
+    const accounts = await this.ocean.getAccounts()
+    const ddo = await this.ocean.registerAsset(asset, accounts[0])
+    alert('Asset successfully submited: ', JSON.stringify(ddo))
+  }
+
+  async retrieveAssets(){
+    this.dbAssets = await this.ocean.searchAssetsByText("Office Humidity")
+    console.log(this.dbAssets)
+  }
+
+  async consumeAsset(){
+    // get all accounts
+    const accounts = await this.ocean.getAccounts()
+    // get first asset
+    const consumeAsset = this.dbAssets[0]
+    // get service we want to execute
+    const service = consumeAsset.findServiceByType('Access')
+    // sign service
+    const serviceAgreementSignatureResult = await this.ocean.signServiceAgreement(
+        consumeAsset.id,
+        service.serviceDefinitionId,
+        accounts[0])
+    // run it
+    await this.ocean.initializeServiceAgreement(
+        consumeAsset.id,
+        service.serviceDefinitionId,
+        serviceAgreementSignatureResult.serviceAgreementId,
+        serviceAgreementSignatureResult.serviceAgreementSignature,
+        // callback to handle the files we get
+        (files) => { console.log('Asset files', files) },
+        accounts[0])
+  }
+
+  render() {
+    return (
+      <div className="App App-header">
+        <h1>Marketplace app</h1>
+        <button onClick={() => this.submitAsset()}>Register asset</button>
+        <button onClick={() => this.retrieveAssets()}>Retrieve assets</button>
+        <button onClick={() => this.consumeAsset()}>Consume asset</button>
+      </div>
+    )
+  }
+}
+
+export default App
+```
\ No newline at end of file