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