diff --git a/content/tutorials/images/react-app-05.png b/content/tutorials/images/react-app-05.png new file mode 100644 index 00000000..9cdb6bc2 Binary files /dev/null and b/content/tutorials/images/react-app-05.png differ diff --git a/content/tutorials/react-get-use-data-set.md b/content/tutorials/react-get-use-data-set.md index f250bdc0..196c29e4 100644 --- a/content/tutorials/react-get-use-data-set.md +++ b/content/tutorials/react-get-use-data-set.md @@ -5,7 +5,7 @@ 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. +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. @@ -14,7 +14,7 @@ Open `src/App.js` in your marketplace app from previous tutorials. 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(){ +async retrieveAssets() { this.dbAssets = await this.ocean.searchAssetsByText("Office Humidity") console.log(this.dbAssets) } @@ -23,7 +23,7 @@ async retrieveAssets(){ The last thing we need is a button to start our search inside the render function just after ``: ```jsx - + ``` ## Consume Asset @@ -31,7 +31,7 @@ The last thing we need is a button to start our search inside the render functio 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(){ +async consumeAsset() { // get all accounts const accounts = await this.ocean.getAccounts() // get first asset @@ -58,9 +58,13 @@ async consumeAsset(){ We still need button in render function just after `` to start consumption: ```jsx - + ``` +With all these buttons in place, you should see this: + +![React App 05](images/react-app-05.png) + ## Final Result That's it. If you have no errors in your `console.log` and your asset files listed you have working marketplace. @@ -133,12 +137,12 @@ class App extends Component { alert('Asset successfully submited: ', JSON.stringify(ddo)) } - async retrieveAssets(){ - this.dbAssets = await this.ocean.searchAssetsByText("Office Humidity") + async retrieveAssets() { + this.dbAssets = await this.ocean.searchAssetsByText('Office Humidity') console.log(this.dbAssets) } - async consumeAsset(){ + async consumeAsset() { // get all accounts const accounts = await this.ocean.getAccounts() // get first asset @@ -147,18 +151,22 @@ class App extends Component { const service = consumeAsset.findServiceByType('Access') // sign service const serviceAgreementSignatureResult = await this.ocean.signServiceAgreement( - consumeAsset.id, - service.serviceDefinitionId, - accounts[0]) + 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]) + consumeAsset.id, + service.serviceDefinitionId, + serviceAgreementSignatureResult.serviceAgreementId, + serviceAgreementSignatureResult.serviceAgreementSignature, + // callback to handle the files we get + files => { + console.log('Asset files', files) + }, + accounts[0] + ) } render() { @@ -174,4 +182,4 @@ class App extends Component { } export default App -``` \ No newline at end of file +``` diff --git a/content/tutorials/react-publish-data-set.md b/content/tutorials/react-publish-data-set.md index 5f18f581..e6d14643 100644 --- a/content/tutorials/react-publish-data-set.md +++ b/content/tutorials/react-publish-data-set.md @@ -5,9 +5,9 @@ description: Tutorial to add dataset publishing capabilities to a basic React ap ## 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. +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. +Open `src/App.js` in your marketplace app from the [React App Setup](/tutorials/react-setup/) tutorial. ## Define Asset