oceanprotocol
/
commons
mirror of https://github.com/oceanprotocol/commons.git
1
0
Fork 0
Code Releases Activity

lint fixes and formatting

This commit is contained in:
Matthias Kretschmann 2019-02-05 16:00:22 +01:00
parent 281d28e6ae
commit 868788e614
Signed by: m
GPG Key ID: 606EEEF3C479A91F
11 changed files with 1902 additions and 338 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1752
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

1
package.json
View File

@ -39,6 +39,7 @@
"prettier": "^1.16.2",
"prettier-stylelint": "^0.4.2",
"react-scripts": "2.1.3",
"stylelint": "^9.10.1",
"stylelint-config-bigchaindb": "^1.2.1",
"stylelint-config-css-modules": "^1.3.0",
"stylelint-config-standard": "^18.2.0",

28
src/App.tsx
View File

@ -6,20 +6,16 @@ import { provideOcean } from './ocean'
import Routes from './Routes'
import './styles/global.scss'
import {
nodeHost,
nodePort,
nodeScheme
} from './config'
import { nodeHost, nodePort, nodeScheme } from './config'
interface IState {
isLogged: boolean,
web3: any,
ocean: {},
startLogin: () => void,
isLogged: boolean
web3: any
ocean: {}
startLogin: () => void
}
class App extends Component<{},IState> {
class App extends Component<{}, IState> {
public startLogin: () => void
constructor(props: {}) {
super(props)
@ -33,7 +29,7 @@ class App extends Component<{},IState> {
isLogged: false,
web3: {},
ocean: {},
startLogin: this.startLogin,
startLogin: this.startLogin
}
}
@ -52,7 +48,7 @@ class App extends Component<{},IState> {
}
private startLoginProcess = async () => {
if((window as any).web3) {
if ((window as any).web3) {
const web3 = new Web3((window as any).web3.currentProvider)
try {
const accounts = await web3.eth.getAccounts()
@ -79,7 +75,7 @@ class App extends Component<{},IState> {
}
private bootstrap = async () => {
if((window as any).web3) {
if ((window as any).web3) {
const web3 = new Web3((window as any).web3.currentProvider)
try {
const accounts = await web3.eth.getAccounts()
@ -102,7 +98,11 @@ class App extends Component<{},IState> {
private setDefaultProvider = () => {
this.setState(state => ({
isLogged: false,
web3: new Web3(new Web3.providers.HttpProvider(`${nodeScheme}://${nodeHost}:${nodePort}`))
web3: new Web3(
new Web3.providers.HttpProvider(
`${nodeScheme}://${nodeHost}:${nodePort}`
)
)
}))
}
}

4
src/context/User.ts
View File

@ -4,5 +4,7 @@ export const User = React.createContext({
isLogged: false,
web3: {},
ocean: {},
startLogin: () => {/* empty */}
startLogin: () => {
/* empty */
}
})

64
src/models/AssetModel.ts
View File

@ -1,40 +1,42 @@
const AssetModel = {
'assetId': null,
'publisherId': null,
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
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
curation: {
rating: null,
numVotes: null,
schema: null
},
'additionalInformation': {
'updateFrequency': null,
'structuredMarkup': []
additionalInformation: {
updateFrequency: null,
structuredMarkup: []
}
}

4
src/ocean.ts
View File

@ -1,6 +1,4 @@
import {
Ocean
} from '@oceanprotocol/squid/dist/node/squid'
import { Ocean } from '@oceanprotocol/squid/dist/node/squid'
import {
address,

2
src/pages/About.tsx
View File

@ -6,13 +6,11 @@ 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>
)
}

58
src/pages/Details.tsx
View File

@ -4,29 +4,34 @@ import React, { Component } from 'react'
import { User } from '../context/User'
interface IState {
ddo: any,
ddo: any
metadata: any
}
interface IProps {
location: any,
location: any
match: any
}
class Details extends Component<IProps, IState> {
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 ddo = await this.context.ocean.resolveDID(
this.props.match.params.did
)
const { metadata } = ddo.findServiceByType('Metadata')
this.setState({ddo, metadata})
this.setState({ ddo, metadata })
}
public render() {
return (
<>
{this.state.metadata ? (this.showDetails(this.state.ddo)): (<div>Loading</div>)}
{this.state.metadata ? (
this.showDetails(this.state.ddo)
) : (
<div>Loading</div>
)}
</>
)
}
@ -34,29 +39,36 @@ class Details extends Component<IProps, IState> {
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)
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],
)
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>
<button onClick={this.purchaseAsset.bind(this, ddo)}>
Purchase asset
</button>
</>
)
}

9
src/pages/Home.tsx
View File

@ -11,7 +11,6 @@ interface IProps {
}
class Home extends Component<IProps, IState> {
public state = { search: '' }
public render() {
@ -21,11 +20,15 @@ class Home extends Component<IProps, IState> {
<div>
<form onSubmit={this.searchAssets}>
<input type="text" name="search" value={this.state.search} onChange={this.inputChange} />
<input
type="text"
name="search"
value={this.state.search}
onChange={this.inputChange}
/>
<Button>Search</Button>
</form>
</div>
</div>
)
}

301
src/pages/Publish.tsx
View File

@ -6,21 +6,20 @@ 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[],
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(),
@ -31,7 +30,7 @@ class Publish extends Component<{}, IState> {
type: 'dataset' as AssetType,
license: '',
copyrightHolder: '',
categories: [''],
categories: ['']
}
public render() {
@ -39,89 +38,215 @@ class Publish extends Component<{}, IState> {
<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>
<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>) => {
private inputChange = (
event: ChangeEvent<HTMLInputElement> | ChangeEvent<HTMLSelectElement>
) => {
this.setState({
[event.target.name]: event.target.value
})
}
private inputToArrayChange = (event: ChangeEvent<HTMLInputElement> | ChangeEvent<HTMLSelectElement>) => {
private inputToArrayChange = (
event: ChangeEvent<HTMLInputElement> | ChangeEvent<HTMLSelectElement>
) => {
this.setState({
[event.target.name]: [event.target.value]
})
@ -136,7 +261,7 @@ class Publish extends Component<{}, IState> {
base: Object.assign(AssetModel.base, {
name: this.state.name,
description: this.state.description,
dateCreated: (new Date()).toString(),
dateCreated: new Date().toString(),
author: this.state.author,
license: this.state.license,
copyrightHolder: this.state.copyrightHolder,
@ -152,7 +277,9 @@ class Publish extends Component<{}, IState> {
tags: ''
}),
curation: Object.assign(AssetModel.curation),
additionalInformation: Object.assign(AssetModel.additionalInformation)
additionalInformation: Object.assign(
AssetModel.additionalInformation
)
}
const ddo = await this.context.ocean.registerAsset(newAsset, account[0])
}

17
src/pages/Search.tsx
View File

@ -8,12 +8,11 @@ interface IState {
}
interface IProps {
location: any,
location: any
history: any
}
class Search extends Component<IProps, IState> {
class Search extends Component<IProps, IState> {
public state = { results: [] }
public async componentDidMount() {
@ -30,18 +29,22 @@ class Search extends Component<IProps, IState> {
}
}
const assets = await ocean.searchAssets(queryRequest)
this.setState(state => ({results:assets}))
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>)}
{this.state.results.length ? (
this.state.results.map(asset => this.renderAssetBox(asset))
) : (
<div>No data sets yet</div>
)}
</>
)
}
private renderAssetBox = (asset:any) => {
private renderAssetBox = (asset: any) => {
const { metadata } = asset.findServiceByType('Metadata')
return (
<div key={asset.id} onClick={this.openDetails.bind(this, asset.id)}>
@ -52,7 +55,7 @@ class Search extends Component<IProps, IState> {
)
}
private openDetails = (assetId:string) => {
private openDetails = (assetId: string) => {
this.props.history.push(`/asset/${assetId}`)
}
}