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

title	description
Publish a Data Set	Tutorial to add data set publishing capabilities to a basic React app.

Requirements

This is a continuation of the React App Setup tutorial, so make sure you have all the steps running.

Adding Publishing

1. Open src/App.js in your marketplace app from the React App Setup tutorial.

2. First let's add the asset that we want to publish. To do that we need to add the following code after window.ethereum.enable() line.

   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'
     }
   }
   

3. Now that we have asset to submit we need function to handle it. Just before render() { let's add:

     async submitAsset(){
       const accounts = await this.ocean.getAccounts()
       const ddo = await this.ocean.registerAsset(asset, accounts[0])
       alert("Asset successfully submited:", JSON.stringify(ddo))
     }
   

4. Last thing we need is button to start our registration inside render function just after <h1>Marketplace app</h1>

   <button onClick={() => this.submitAsset()}>Register asset</button>
   

Finished

That's it, if you have no errors in your console.log and you receive alert after you click Register asset you have successfully registered an asset.

Here is 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/dist/node/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))
  }
  render() {
    return (
      <div className="App">
        <h1>Marketplace app</h1>
        <button onClick={() => this.submitAsset()}>Register asset</button>
      </div>
    )
  }
}
export default App