From 1b83d24725d8aa595b9156c72ff0bbb79b428f09 Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Wed, 20 Nov 2019 19:32:42 +0100 Subject: [PATCH] react tutorial snippet updates --- content/tutorials/react-get-use-data-set.md | 6 +++--- content/tutorials/react-publish-data-set.md | 10 +++++----- content/tutorials/react-setup.md | 14 +++++++------- 3 files changed, 15 insertions(+), 15 deletions(-) diff --git a/content/tutorials/react-get-use-data-set.md b/content/tutorials/react-get-use-data-set.md index d1601234..c93b5f8a 100644 --- a/content/tutorials/react-get-use-data-set.md +++ b/content/tutorials/react-get-use-data-set.md @@ -18,7 +18,7 @@ In the previous tutorial we added asset publishing. We can now search for publis We will store the search results in the local component state so we have to set its initial state first: -GITHUB-EMBED https://github.com/oceanprotocol/react-tutorial/blob/2765a7e6ae9a948d311d3949636cf832d2664900/src/index.js jsx 15-18 GITHUB-EMBED +GITHUB-EMBED https://github.com/oceanprotocol/react-tutorial/blob/e639e9ed4432e8b72ca453d50ed7bdaa36f1efb4/src/index.js jsx 15-19 GITHUB-EMBED Just after the `registerAsset()` function we add a new `searchAssets` function that will handle search: @@ -26,7 +26,7 @@ GITHUB-EMBED https://github.com/oceanprotocol/react-tutorial/blob/2765a7e6ae9a94 Now we need a button to start our search inside the `render()` function, just after the _Register asset_ button: -GITHUB-EMBED https://github.com/oceanprotocol/react-tutorial/blob/2765a7e6ae9a948d311d3949636cf832d2664900/src/index.js jsx 114-115 GITHUB-EMBED +GITHUB-EMBED https://github.com/oceanprotocol/react-tutorial/blob/2765a7e6ae9a948d311d3949636cf832d2664900/src/index.js jsx 115 GITHUB-EMBED ## Consume Asset @@ -34,7 +34,7 @@ Consuming means downloading one or multiple files attached to an asset. During t With the following code we start the consume process with the first search result, then go on to download its first attached file. Put it after the `searchAssets()` function: -GITHUB-EMBED https://github.com/oceanprotocol/react-tutorial/blob/14df1d877be48deda15afa12bf3c4efbafffcd4b/src/index.js jsx 69-95 GITHUB-EMBED +GITHUB-EMBED https://github.com/oceanprotocol/react-tutorial/blob/e639e9ed4432e8b72ca453d50ed7bdaa36f1efb4/src/index.js jsx 72-98 GITHUB-EMBED We still need a button to start consumption. In the render function, just after the _Search assets_ button, add: diff --git a/content/tutorials/react-publish-data-set.md b/content/tutorials/react-publish-data-set.md index a286fa81..56bfb3c4 100644 --- a/content/tutorials/react-publish-data-set.md +++ b/content/tutorials/react-publish-data-set.md @@ -19,21 +19,21 @@ To do that, we need to define the asset based on the [OEP-08](https://github.com Let's create a new file `src/asset.js` and fill it with: -GITHUB-EMBED https://github.com/oceanprotocol/react-tutorial/blob/876afd6238928b6627893939afbd08484185f91f/src/asset.js js GITHUB-EMBED +GITHUB-EMBED https://github.com/oceanprotocol/react-tutorial/blob/e639e9ed4432e8b72ca453d50ed7bdaa36f1efb4/src/asset.js js GITHUB-EMBED Then import this asset definition at the top of `src/index.js`: -GITHUB-EMBED https://github.com/oceanprotocol/react-tutorial/blob/2765a7e6ae9a948d311d3949636cf832d2664900/src/index.js jsx 5 GITHUB-EMBED +GITHUB-EMBED https://github.com/oceanprotocol/react-tutorial/blob/e639e9ed4432e8b72ca453d50ed7bdaa36f1efb4/src/index.js jsx 5 GITHUB-EMBED ## Handle Asset Publishing Now that we have an asset to submit, we need a function to handle it. Just before `render() {` let's add this `registerAsset` function: -GITHUB-EMBED https://github.com/oceanprotocol/react-tutorial/blob/2765a7e6ae9a948d311d3949636cf832d2664900/src/index.js jsx 40-52 GITHUB-EMBED +GITHUB-EMBED https://github.com/oceanprotocol/react-tutorial/blob/e639e9ed4432e8b72ca453d50ed7bdaa36f1efb4/src/index.js jsx 15,16,18-20,41-55 GITHUB-EMBED The last thing we need is a button to start our registration inside the `render()` function: -GITHUB-EMBED https://github.com/oceanprotocol/react-tutorial/blob/2765a7e6ae9a948d311d3949636cf832d2664900/src/index.js jsx 111-113 GITHUB-EMBED +GITHUB-EMBED https://github.com/oceanprotocol/react-tutorial/blob/e639e9ed4432e8b72ca453d50ed7bdaa36f1efb4/src/index.js jsx 114-116 GITHUB-EMBED Note how we disable the button when Web3 is not available to reduce user confusion. Within the Ocean Protocol flow of registering, searching, and consuming, only searching is possible without Web3. @@ -51,6 +51,6 @@ Have a look into `console.log` to see the various steps of the register process. Here is the full source of `src/index.js` that you should have if you followed this tutorial: -GITHUB-EMBED https://github.com/oceanprotocol/react-tutorial/blob/2765a7e6ae9a948d311d3949636cf832d2664900/src/index.js jsx 1-5,6-16,18-27,34-52,96-113,119-124 GITHUB-EMBED +GITHUB-EMBED https://github.com/oceanprotocol/react-tutorial/blob/e639e9ed4432e8b72ca453d50ed7bdaa36f1efb4/src/index.js jsx 1-5,6-16,18-28,35-52,96-116,122-127 GITHUB-EMBED **Move on to [Get & Use a Data Set](/tutorials/react-get-use-data-set/).** diff --git a/content/tutorials/react-setup.md b/content/tutorials/react-setup.md index 1871c2ea..100a8bd5 100644 --- a/content/tutorials/react-setup.md +++ b/content/tutorials/react-setup.md @@ -41,7 +41,7 @@ marketplace/ First, create a new project folder for your new app, e.g. `marketplace`. Within that, add a new file `package.json` with the following content: -GITHUB-EMBED https://github.com/oceanprotocol/react-tutorial/blob/14df1d877be48deda15afa12bf3c4efbafffcd4b/package.json json GITHUB-EMBED +GITHUB-EMBED https://github.com/oceanprotocol/react-tutorial/blob/e639e9ed4432e8b72ca453d50ed7bdaa36f1efb4/package.json json GITHUB-EMBED Notice the `@oceanprotocol/squid` dependency, which is the [Ocean Protocol JavaScript library](https://github.com/oceanprotocol/squid-js). Save that file, and in your terminal install the dependencies we have just defined in `package.json`: @@ -51,13 +51,13 @@ npm install Then create the HTML file used to render the React app into. For that, create a folder `public/` and in it a file `index.html` with the following content: -GITHUB-EMBED https://github.com/oceanprotocol/react-tutorial/blob/2765a7e6ae9a948d311d3949636cf832d2664900/public/index.html html GITHUB-EMBED +GITHUB-EMBED https://github.com/oceanprotocol/react-tutorial/blob/e639e9ed4432e8b72ca453d50ed7bdaa36f1efb4/public/index.html html GITHUB-EMBED ## Add Basic Markup Create a new folder `src/` and within that a `index.js` file with the following content as our base, where we already import squid-js and web3.js: -GITHUB-EMBED https://github.com/oceanprotocol/react-tutorial/blob/14df1d877be48deda15afa12bf3c4efbafffcd4b/src/index.js jsx 1-4,6,14,97-108,119-124 GITHUB-EMBED +GITHUB-EMBED https://github.com/oceanprotocol/react-tutorial/blob/e639e9ed4432e8b72ca453d50ed7bdaa36f1efb4/src/index.js jsx 1-4,6,14,100-110,122-127 GITHUB-EMBED At this point you can start up the app and see the result in your browser: @@ -75,15 +75,15 @@ We already are importing web3.js but we still need to enable account access for To do that we add a simple check at top of `src/index.js` and then enable account access with: -GITHUB-EMBED https://github.com/oceanprotocol/react-tutorial/blob/2765a7e6ae9a948d311d3949636cf832d2664900/src/index.js jsx 7-12 GITHUB-EMBED +GITHUB-EMBED https://github.com/oceanprotocol/react-tutorial/blob/e639e9ed4432e8b72ca453d50ed7bdaa36f1efb4/src/index.js jsx 7-12 GITHUB-EMBED And let's also output some warning for non-Web3 browsers within our `render()` function: -GITHUB-EMBED https://github.com/oceanprotocol/react-tutorial/blob/2765a7e6ae9a948d311d3949636cf832d2664900/src/index.js jsx 109 GITHUB-EMBED +GITHUB-EMBED https://github.com/oceanprotocol/react-tutorial/blob/e639e9ed4432e8b72ca453d50ed7bdaa36f1efb4/src/index.js jsx 112 GITHUB-EMBED This should give you the following markup: -GITHUB-EMBED https://github.com/oceanprotocol/react-tutorial/blob/2765a7e6ae9a948d311d3949636cf832d2664900/src/index.js jsx 1-4,6-14,97-109,119-124 GITHUB-EMBED +GITHUB-EMBED https://github.com/oceanprotocol/react-tutorial/blob/e639e9ed4432e8b72ca453d50ed7bdaa36f1efb4/src/index.js jsx 1-4,6-14,100-112,122-127 GITHUB-EMBED After those steps go to your browser. You should see MetaMask asking you to allow access to your account: @@ -97,7 +97,7 @@ Now that we are successfully connected with Web3, we can set up our Ocean instan At the beginning of your component, create a new Ocean instance with all required endpoint configurations within the `componentDidMount` lifecycle method. All Ocean Protocol operations can be executed from this Ocean instance. -GITHUB-EMBED https://github.com/oceanprotocol/react-tutorial/blob/2765a7e6ae9a948d311d3949636cf832d2664900/src/index.js jsx 15-16,18-27,34-38 GITHUB-EMBED +GITHUB-EMBED https://github.com/oceanprotocol/react-tutorial/blob/e639e9ed4432e8b72ca453d50ed7bdaa36f1efb4/src/index.js jsx 15-16,19-28,35-39 GITHUB-EMBED This will initiate a connection to all Ocean components in Nile, load the contracts, and finally store the Ocean object in the local component state for reuse.