Merge pull request #9 from oceanprotocol/feature/forms

Feature/forms

package.json

@@ -16,19 +16,22 @@
   },
   "dependencies": {
     "@oceanprotocol/squid": "^0.2.7",
+    "query-string": "^6.2.0",
     "react": "^16.7.0",
     "react-dom": "^16.7.0",
     "react-router-dom": "^4.3.1",
     "web3": "^1.0.0-beta.37"
   },
   "devDependencies": {
-    "@types/jest": "23.3.12",
+    "@types/jest": "23.3.13",
-    "@types/node": "10.12.18",
+    "@types/node": "10.12.19",
-    "@types/react": "16.7.20",
+    "@types/query-string": "^6.2.0",
+    "@types/react": "16.7.22",
     "@types/react-dom": "16.0.11",
     "@types/react-router-dom": "^4.3.1",
+    "@types/web3": "^1.0.18",
     "node-sass": "^4.11.0",
-    "prettier": "^1.16.1",
+    "prettier": "^1.16.2",
     "prettier-stylelint": "^0.4.2",
     "react-scripts": "2.1.3",
     "stylelint-config-bigchaindb": "^1.2.1",

src/App.tsx

@@ -1,20 +1,110 @@
 import React, { Component } from 'react'
+import Web3 from 'web3'
 import styles from './App.module.scss'
-import { User, userDefaults } from './context/User'
+import { User } from './context/User'
+import { provideOcean } from './ocean'
+import Routes from './Routes'
 import './styles/global.scss'
 
-import Routes from './Routes'
+import {
+    nodeHost,
+    nodePort,
+    nodeScheme
+} from './config'
+
+interface IState {
+    isLogged: boolean,
+    web3: any,
+    ocean: {},
+    startLogin: () => void,
+}
+
+class App extends Component<{},IState> {
+    public startLogin: () => void
+    constructor(props: {}) {
+        super(props)
+        this.startLogin = (event?) => {
+            if (event) {
+                event.preventDefault()
+            }
+            this.startLoginProcess()
+        }
+        this.state = {
+            isLogged: false,
+            web3: {},
+            ocean: {},
+            startLogin: this.startLogin,
+        }
+    }
+
+    public async componentDidMount() {
+        this.bootstrap()
+    }
 
-class App extends Component {
     public render() {
         return (
             <div className={styles.app}>
-                <User.Provider value={userDefaults}>
+                <User.Provider value={this.state}>
                     <Routes />
                 </User.Provider>
             </div>
         )
     }
+
+    private startLoginProcess = async () => {
+        if((window as any).web3) {
+            const web3 = new Web3((window as any).web3.currentProvider)
+            try {
+                const accounts = await web3.eth.getAccounts()
+                if (accounts.length === 0 && (window as any).ethereum) {
+                    await (window as any).ethereum.enable()
+                    const { ocean } = await provideOcean()
+                    this.setState(state => ({
+                        isLogged: true,
+                        web3,
+                        ocean
+                    }))
+                } else {
+                    this.setState(state => ({
+                        isLogged: true,
+                        web3
+                    }))
+                }
+            } catch (e) {
+                this.setDefaultProvider()
+            }
+        } else {
+            this.setDefaultProvider()
+        }
+    }
+
+    private bootstrap = async () => {
+        if((window as any).web3) {
+            const web3 = new Web3((window as any).web3.currentProvider)
+            try {
+                const accounts = await web3.eth.getAccounts()
+                if (accounts.length > 0) {
+                    const { ocean } = await provideOcean()
+                    this.setState(state => ({
+                        isLogged: true,
+                        web3,
+                        ocean
+                    }))
+                }
+            } catch (e) {
+                this.setDefaultProvider()
+            }
+        } else {
+            this.setDefaultProvider()
+        }
+    }
+
+    private setDefaultProvider = () => {
+        this.setState(state => ({
+            isLogged: false,
+            web3: new Web3(new Web3.providers.HttpProvider(`${nodeScheme}://${nodeHost}:${nodePort}`))
+        }))
+    }
 }
 
 export default App

src/Routes.tsx

@@ -1,12 +1,21 @@
 import React from 'react'
 import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'
+
+import About from './pages/About'
+import Details from './pages/Details'
 import Home from './pages/Home'
 import NotFound from './pages/NotFound'
+import Publish from './pages/Publish'
+import Search from './pages/Search'
 
 const Routes = () => (
     <Router>
         <Switch>
             <Route exact={true} component={Home} path="/" />
+            <Route component={About} path="/about" />
+            <Route component={Publish} path="/publish" />
+            <Route component={Search} path="/search" />
+            <Route component={Details} path="/asset/:did" />
             <Route component={NotFound} />
         </Switch>
     </Router>

src/config.ts

@@ -0,0 +1,25 @@
+export const nodeScheme = 'http'
+export const nodeHost = 'localhost'
+export const nodePort = 8545
+
+export const aquariusScheme = 'http'
+export const aquariusHost = 'localhost'
+export const aquariusPort = 5000
+
+export const brizoScheme = 'https'
+export const brizoHost = 'localhost'
+export const brizoPort = 8030
+
+export const parityScheme = 'http'
+export const parityHost = 'localhost'
+export const parityPort = 8545
+
+export const secretStoreScheme = 'http'
+export const secretStoreHost = 'localhost'
+export const secretStorePort = 12001
+
+export const threshold = 0
+export const password = 'node0'
+export const address = '0x00bd138abd70e2f00903268f3db08f2d25677c9e'
+
+export const verbose = true

src/context/User.ts

@@ -1,7 +1,8 @@
 import React from 'react'
 
-export const userDefaults = {
+export const User = React.createContext({
-    logged: false
+    isLogged: false,
-}
+    web3: {},
-
+    ocean: {},
-export const User = React.createContext(userDefaults)
+    startLogin: () => {/* empty */}
+})

src/models/AssetModel.ts

@@ -0,0 +1,41 @@
+const AssetModel = {
+    'assetId': null,
+    'publisherId': null,
+
+    // OEP-08 Attributes
+    // https://github.com/oceanprotocol/OEPs/tree/master/8
+    'base': {
+        'name': null,
+        'description': null,
+        'dateCreated': null,
+        'size': null,
+        'author': null,
+        'type': '',
+        'license': null,
+        'copyrightHolder': null,
+        'encoding': null,
+        'compression': null,
+        'contentType': null,
+        'workExample': null,
+        'contentUrls': [],
+        'links': [{
+            'name': null,
+            'type': null,
+            'url': null
+        }],
+        'inLanguage': null,
+        'tags': [],
+        'price': null
+    },
+    'curation': {
+        'rating': null,
+        'numVotes': null,
+        'schema': null
+    },
+    'additionalInformation': {
+        'updateFrequency': null,
+        'structuredMarkup': []
+    }
+}
+
+export default AssetModel

src/ocean.ts

@@ -0,0 +1,49 @@
+import {
+    Ocean
+} from '@oceanprotocol/squid/dist/node/squid'
+
+import {
+    address,
+    aquariusHost,
+    aquariusPort,
+    aquariusScheme,
+    brizoHost,
+    brizoPort,
+    brizoScheme,
+    nodeHost,
+    nodePort,
+    nodeScheme,
+    parityHost,
+    parityPort,
+    parityScheme,
+    password,
+    secretStoreHost,
+    secretStorePort,
+    secretStoreScheme,
+    threshold,
+    verbose
+} from './config'
+
+export async function provideOcean() {
+    const nodeUri = `${nodeScheme}://${nodeHost}:${nodePort}`
+    const aquariusUri = `${aquariusScheme}://${aquariusHost}:${aquariusPort}`
+    const brizoUri = `${brizoScheme}://${brizoHost}:${brizoPort}`
+    const parityUri = `${parityScheme}://${parityHost}:${parityPort}`
+    const secretStoreUri = `${secretStoreScheme}://${secretStoreHost}:${secretStorePort}`
+
+    const config = {
+        nodeUri,
+        aquariusUri,
+        brizoUri,
+        parityUri,
+        secretStoreUri,
+        threshold,
+        password,
+        address,
+        verbose
+    }
+
+    const ocean = await Ocean.getInstance(config)
+
+    return { ocean }
+}

src/pages/About.module.scss

@@ -0,0 +1,16 @@
+@import '../styles/variables';
+
+.about {
+    background: $brand-black;
+    color: $brand-white;
+    min-height: calc(100vh - #{$page-frame} * 2);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-wrap: wrap;
+
+    > div {
+        text-align: center;
+        width: 100%;
+    }
+}

src/pages/About.tsx

@@ -0,0 +1,21 @@
+import React, { Component } from 'react'
+import Button from '../components/atoms/Button'
+import styles from './About.module.scss'
+
+class About extends Component {
+    public render() {
+        return (
+            <div className={styles.about}>
+
+                <Button>I am a button</Button>
+                <Button primary={true}>I am a primary button</Button>
+                <Button href="https://hello.com">
+                    I am a link disguised as a button
+                </Button>
+
+            </div>
+        )
+    }
+}
+
+export default About

src/pages/Details.tsx

@@ -0,0 +1,66 @@
+import { Logger } from '@oceanprotocol/squid'
+import queryString from 'query-string'
+import React, { Component } from 'react'
+import { User } from '../context/User'
+
+interface IState {
+    ddo: any,
+    metadata: any
+}
+
+interface IProps {
+    location: any,
+    match: any
+}
+
+class Details extends Component<IProps, IState>  {
+
+    public state = { ddo: null, metadata: null }
+
+    public async componentDidMount() {
+        const ddo = await this.context.ocean.resolveDID(this.props.match.params.did)
+        const { metadata } = ddo.findServiceByType('Metadata')
+        this.setState({ddo, metadata})
+    }
+
+    public render() {
+        return (
+            <>
+                {this.state.metadata ? (this.showDetails(this.state.ddo)): (<div>Loading</div>)}
+            </>
+        )
+    }
+
+    private purchaseAsset = async (ddo: any) => {
+        const account = await this.context.ocean.getAccounts()
+        const service = ddo.findServiceByType('Access')
+        const serviceAgreementSignatureResult: any = await this.context.ocean
+            .signServiceAgreement(
+                ddo.id,
+                service.serviceDefinitionId,
+                account[0])
+        Logger.log('serviceAgreementSignatureResult', serviceAgreementSignatureResult)
+
+        await this.context.ocean
+            .initializeServiceAgreement(
+                ddo.id,
+                service.serviceDefinitionId,
+                serviceAgreementSignatureResult.serviceAgreementId,
+                serviceAgreementSignatureResult.serviceAgreementSignature,
+                (files: any) => Logger.log(`Got files, first files length in bytes: ${files[0].length}`),
+                account[0],
+            )
+    }
+
+    private showDetails = (ddo: any) => {
+        return (
+            <>
+                <div>{JSON.stringify(this.state.metadata)}</div>
+                <button onClick={this.purchaseAsset.bind(this, ddo)}>Purchase asset</button>
+            </>
+        )
+    }
+}
+
+Details.contextType = User
+export default Details

src/pages/Home.tsx

@@ -1,21 +1,45 @@
-import React, { Component } from 'react'
+import React, { ChangeEvent, Component, FormEvent } from 'react'
 import Button from '../components/atoms/Button'
 import styles from './Home.module.scss'
 
-class Home extends Component {
+interface IState {
+    search?: string
+}
+
+interface IProps {
+    history: any
+}
+
+class Home extends Component<IProps, IState> {
+
+    public state = { search: '' }
+
     public render() {
         return (
             <div className={styles.home}>
                 <div>Home</div>
 
-                <Button>I am a button</Button>
+                <div>
-                <Button primary={true}>I am a primary button</Button>
+                    <form onSubmit={this.searchAssets}>
-                <Button href="https://hello.com">
+                        <input type="text" name="search" value={this.state.search} onChange={this.inputChange} />
-                    I am a link disguised as a button
+                        <Button>Search</Button>
-                </Button>
+                    </form>
+                </div>
+
             </div>
         )
     }
+
+    private inputChange = (event: ChangeEvent<HTMLInputElement>) => {
+        this.setState({
+            [event.target.name]: event.target.value
+        })
+    }
+
+    private searchAssets = (event: FormEvent<HTMLFormElement>) => {
+        event.preventDefault()
+        this.props.history.push(`/search?q=${this.state.search}`)
+    }
 }
 
 export default Home

src/pages/Publish.tsx

@@ -0,0 +1,162 @@
+import React, { ChangeEvent, Component, FormEvent } from 'react'
+import Button from '../components/atoms/Button'
+import { User } from '../context/User'
+import AssetModel from '../models/AssetModel'
+
+type AssetType = 'dataset' | 'algorithm' | 'container' | 'workflow' | 'other'
+
+interface IState {
+    name?: string,
+    dateCreated?: Date,
+    description?: string,
+    files?: string[],
+    price?: number,
+    author?: string,
+    type?: AssetType,
+    license?: string,
+    copyrightHolder?: string,
+    categories?: string[],
+    tags?: string[]
+}
+
+class Publish extends Component<{}, IState> {
+
+    public state = {
+        name: '',
+        dateCreated: new Date(),
+        description: '',
+        files: [''],
+        price: 0,
+        author: '',
+        type: 'dataset' as AssetType,
+        license: '',
+        copyrightHolder: '',
+        categories: [''],
+    }
+
+    public render() {
+        return (
+            <div>
+                <h1>Publish</h1>
+                <form onSubmit={this.registerAsset}>
+                  <div>Name:<input type="text" name="name" value={this.state.name} onChange={this.inputChange} /></div>
+                  <div>Description:<input type="text" name="description" value={this.state.description} onChange={this.inputChange} /></div>
+                  <div>Price:<input type="number" name="price" value={this.state.price} onChange={this.inputChange} /></div>
+                  <div>Author:<input type="text" name="author" value={this.state.author} onChange={this.inputChange} /></div>
+                  <div>Files:<input type="text" name="files" value={this.state.files[0]} onChange={this.inputToArrayChange} /></div>
+                  <div>Type:
+                      <select name="type" value={this.state.type} onChange={this.inputChange}>
+                          <option value="dataset">Data set</option>
+                          <option value="algorithm">Algorithm</option>
+                          <option value="container">Container</option>
+                          <option value="workflow">Workflow</option>
+                          <option value="other">Other</option>
+                      </select>
+                  </div>
+                  <div>License:
+                      <select name="license" value={this.state.license} onChange={this.inputChange}>
+                          <option value="none">No License Specified</option>
+                          <option value="Public Domain">Public Domain</option>
+                          <option value="CC BY">CC BY: Attribution</option>
+                          <option value="CC BY-SA">CC BY-SA: Attribution ShareAlike</option>
+                          <option value="CC BY-ND">CC BY-ND: Attribution-NoDerivs</option>
+                          <option value="CC BY-NC">CC BY-NC: Attribution-NonCommercial</option>
+                          <option value="CC BY-NC-SA">CC BY-NC-SA: Attribution-NonCommercial-ShareAlike</option>
+                          <option value="CC BY-NC-ND">CC BY-NC-ND: Attribution-NonCommercial-NoDerivs</option>
+                      </select>
+                  </div>
+                  <div>Category:
+                      <select name="categories" value={this.state.categories[0]} onChange={this.inputToArrayChange}>
+                          <option value="No Category Specified">No Category Specified</option>
+                          <option value="Image Recognition">Image Recognition</option>
+                          <option value="Dataset Of Datasets">Dataset Of Datasets</option>
+                          <option value="Language">Language</option>
+                          <option value="Performing Arts">Performing Arts</option>
+                          <option value="Visual Arts & Design">Visual Arts & Design</option>
+                          <option value="Philosophy">Philosophy</option>
+                          <option value="History">History</option>
+                          <option value="Theology">Theology</option>
+                          <option value="Anthropology & Archeology">Anthropology & Archeology</option>
+                          <option value="Sociology">Sociology</option>
+                          <option value="Psychology">Psychology</option>
+                          <option value="Politics">Politics</option>
+                          <option value="Interdisciplinary">Interdisciplinary</option>
+                          <option value="Economics & Finance">Economics & Finance</option>
+                          <option value="Demography">Demography</option>
+                          <option value="Biology">Biology</option>
+                          <option value="Chemistry">Chemistry</option>
+                          <option value="Physics & Energy">Physics & Energy</option>
+                          <option value="Earth & Climate">Earth & Climate</option>
+                          <option value="Space & Astronomy">Space & Astronomy</option>
+                          <option value="Mathematics">Mathematics</option>
+                          <option value="Computer Technology">Computer Technology</option>
+                          <option value="Engineering">Engineering</option>
+                          <option value="Agriculture & Bio Engineering">Agriculture & Bio Engineering</option>
+                          <option value="Transportation">Transportation</option>
+                          <option value="Urban Planning">Urban Planning</option>
+                          <option value="Medicine">Medicine</option>
+                          <option value="Language">Language</option>
+                          <option value="Business & Management">Business & Management</option>
+                          <option value="Sports & Recreation">Sports & Recreation</option>
+                          <option value="Communication & Journalism">Communication & Journalism</option>
+                          <option value="Other">Other</option>
+                      </select>
+                  </div>
+                  <div>CopyrightHolder:<input type="text" name="copyrightHolder" value={this.state.copyrightHolder} onChange={this.inputChange} /></div>
+                  <User.Consumer>
+                      {states => ( /* tslint:disable-next-line */
+                          <div>
+                              {states.isLogged ? (<div><Button>Register asset (we are logged)</Button></div>) : (<div><button onClick={states.startLogin}>Register asset (login first)</button></div>)}
+                          </div>
+                      )}
+                  </User.Consumer>
+                </form>
+            </div>
+        )
+    }
+
+    private inputChange = (event: ChangeEvent<HTMLInputElement> | ChangeEvent<HTMLSelectElement>) => {
+        this.setState({
+            [event.target.name]: event.target.value
+        })
+    }
+
+    private inputToArrayChange = (event: ChangeEvent<HTMLInputElement> | ChangeEvent<HTMLSelectElement>) => {
+        this.setState({
+            [event.target.name]: [event.target.value]
+        })
+    }
+
+    private registerAsset = async (event: FormEvent<HTMLFormElement>) => {
+        event.preventDefault()
+        const account = await this.context.ocean.getAccounts()
+        const newAsset = {
+            // OEP-08 Attributes
+            // https://github.com/oceanprotocol/OEPs/tree/master/8
+            base: Object.assign(AssetModel.base, {
+                name: this.state.name,
+                description: this.state.description,
+                dateCreated: (new Date()).toString(),
+                author: this.state.author,
+                license: this.state.license,
+                copyrightHolder: this.state.copyrightHolder,
+                contentUrls: [this.state.files],
+                price: this.state.price,
+                type: this.state.type,
+                size: '',
+                encoding: '',
+                compression: undefined,
+                contentType: '',
+                workExample: undefined,
+                inLanguage: undefined,
+                tags: ''
+            }),
+            curation: Object.assign(AssetModel.curation),
+            additionalInformation: Object.assign(AssetModel.additionalInformation)
+        }
+        const ddo = await this.context.ocean.registerAsset(newAsset, account[0])
+    }
+}
+
+Publish.contextType = User
+export default Publish

src/pages/Search.tsx

@@ -0,0 +1,60 @@
+import queryString from 'query-string'
+import React, { Component } from 'react'
+import { Link } from 'react-router-dom'
+import { provideOcean } from '../ocean'
+
+interface IState {
+    results: any[]
+}
+
+interface IProps {
+    location: any,
+    history: any
+}
+
+class Search extends Component<IProps, IState>  {
+
+    public state = { results: [] }
+
+    public async componentDidMount() {
+        // temporary ocean init and asset retrieval
+        const { ocean } = await provideOcean()
+        const searchParams = queryString.parse(this.props.location.search)
+        const queryRequest: any = {
+            offset: 100,
+            page: 0,
+            query: {
+                $text: {
+                    $search: searchParams.q
+                }
+            }
+        }
+        const assets = await ocean.searchAssets(queryRequest)
+        this.setState(state => ({results:assets}))
+    }
+
+    public render() {
+        return (
+            <>
+                {this.state.results.length ? (this.state.results.map(asset => this.renderAssetBox(asset))): (<div>No data sets yet</div>)}
+            </>
+        )
+    }
+
+    private renderAssetBox = (asset:any) => {
+        const { metadata } = asset.findServiceByType('Metadata')
+        return (
+            <div key={asset.id} onClick={this.openDetails.bind(this, asset.id)}>
+                <div>{asset.id}</div>
+                <div>{metadata.base.name}</div>
+                <div>{metadata.base.description}</div>
+            </div>
+        )
+    }
+
+    private openDetails = (assetId:string) => {
+        this.props.history.push(`/asset/${assetId}`)
+    }
+}
+
+export default Search