oceanprotocol/docs
1
0
Fork 0
mirror of https://github.com/oceanprotocol/docs.git synced 2024-11-26 19:49:26 +01:00
Code Releases Activity

react tutorial snippet updates

Browse Source
This commit is contained in:
Matthias Kretschmann 2019-11-20 19:32:42 +01:00
parent 1973215b7b
commit 1b83d24725
Signed by: m
GPG Key ID: 606EEEF3C479A91F
3 changed files with 15 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
content/tutorials/react-get-use-data-set.md
View File

@ -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: 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: 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: 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 ## 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: 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: We still need a button to start consumption. In the render function, just after the _Search assets_ button, add:

10
content/tutorials/react-publish-data-set.md
View File

@ -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: 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`: 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 ## 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: 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: 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. 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: 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/).** **Move on to [Get & Use a Data Set](/tutorials/react-get-use-data-set/).**

14
content/tutorials/react-setup.md
View File

@ -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: 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`: 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: 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 ## 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: 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: 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: 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: 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: 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: 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. 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. 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.