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

title	description
Get & Use a Data Set	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.

Requirements

This is a continuation of the React App Setup and 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

In the previous tutorial we added asset publishing. We can now search for published assets for consumption. Just after the submitAsset() function we can add a new function that will handle search:

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>:

<button onClick={() => this.retrieveAssets()}>Retrieve assets</button>

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.

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:

<button onClick={() => this.consumeAsset()}>Consume asset</button>

With all these buttons in place, you should see this:

Final Result

That's it. If you have no errors in your console.log and can see your asset files listed, you have a working marketplace.

Here is the full source of src/App.js that you should have if you followed this tutorial:

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: 'node0',
      address: '0x00bd138abd70e2f00903268f3db08f2d25677c9e'
    })
    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