oceanprotocol/commons
1
0
Fork 0
mirror of https://github.com/oceanprotocol/commons.git synced 2023-03-15 18:03:00 +01:00
Code Releases Activity

merge

Browse Source
This commit is contained in:
Jernej Pregelj 2019-02-06 16:23:45 +01:00
commit 7d4261cec1
14 changed files with 2205 additions and 480 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
.eslintrc Normal file
View File

@ -0,0 +1,25 @@
{
"parser": "@typescript-eslint/parser",
"parserOptions": {
"project": "./tsconfig.json"
},
"extends": [
"oceanprotocol",
"oceanprotocol/react",
"plugin:prettier/recommended",
"prettier/react",
"prettier/standard",
"plugin:@typescript-eslint/recommended"
],
"plugins": ["@typescript-eslint", "prettier"],
"rules": {
"@typescript-eslint/explicit-function-return-type": 0,
"@typescript-eslint/member-delimiter-style": [
"error",
{ "multiline": { "delimiter": "none" } }
]
},
"env": {
"jest": true
}
}

2081
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

11
package.json
View File

@ -11,7 +11,7 @@
"format:css": "prettier-stylelint --write --quiet 'src/**/*.{css,scss}'",
"format": "npm run format:js && npm run format:css",
"lint:css": "stylelint './src/**/*.{css,scss}'",
"lint:js": "tslint -c tslint.json 'src/**/*.{ts,tsx}'",
"lint:js": "eslint --ignore-path .gitignore --ignore-path .prettierignore --ext .ts,.tsx .",
"lint": "npm run lint:js && npm run lint:css"
},
"dependencies": {
@ -32,16 +32,19 @@
"@types/react-dom": "16.0.11",
"@types/react-router-dom": "^4.3.1",
"@types/web3": "^1.0.18",
"@typescript-eslint/eslint-plugin": "^1.2.0",
"@typescript-eslint/parser": "^1.2.0",
"eslint-config-oceanprotocol": "^1.3.0",
"eslint-config-prettier": "^3.3.0",
"eslint-plugin-prettier": "^3.0.0",
"node-sass": "^4.11.0",
"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",
"tslint": "^5.12.1",
"tslint-config-prettier": "^1.17.0",
"tslint-react": "^3.6.0",
"typescript": "3.2.4"
},
"eslintConfig": {

39
src/App.tsx
View File

@ -6,35 +6,28 @@ 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,
interface AppState {
isLogged: boolean
web3: any
ocean: {}
startLogin: () => void
}
class App extends Component<{},IState> {
public startLogin: () => void
constructor(props: {}) {
super(props)
this.startLogin = (event?) => {
class App extends Component<{}, AppState> {
public startLogin = (event?: any) => {
if (event) {
event.preventDefault()
}
this.startLoginProcess()
}
this.state = {
public state = {
isLogged: false,
web3: {},
ocean: {},
startLogin: this.startLogin,
}
startLogin: this.startLogin
}
public async componentDidMount() {
@ -52,7 +45,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 +72,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 +95,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}`
)
)
}))
}
}

5
src/components/atoms/Button.tsx
View File

@ -1,14 +1,15 @@
import React, { PureComponent } from 'react'
import styles from './Button.module.scss'
interface IButtonProps {
interface ButtonProps {
children: string
primary?: boolean
link?: boolean
href?: string
onClick?: any
}
export default class Button extends PureComponent<IButtonProps, any> {
export default class Button extends PureComponent<ButtonProps, any> {
public render() {
let classes
const { primary, link, href, children, ...props } = this.props

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,

4
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 primary>I am a primary button</Button>
<Button href="https://hello.com">
I am a link disguised as a button
</Button>
</div>
)
}

66
src/pages/Details.tsx
View File

@ -1,54 +1,52 @@
import { Logger } from '@oceanprotocol/squid'
import queryString from 'query-string'
import React, { Component } from 'react'
import Button from '../components/atoms/Button'
import { User } from '../context/User'
interface IState {
ddo: any,
interface DetailsState {
ddo: any
metadata: any
}
interface IProps {
location: any,
interface DetailsProps {
location: any
match: any
}
class Details extends Component<IProps, IState> {
export default class Details extends Component<DetailsProps, DetailsState> {
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>)}
</>
const ddo = await this.context.ocean.resolveDID(
this.props.match.params.did
)
const { metadata } = ddo.findServiceByType('Metadata')
this.setState({ ddo, metadata })
}
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(
const serviceAgreementSignatureResult: any = await this.context.ocean.signServiceAgreement(
ddo.id,
service.serviceDefinitionId,
account[0])
Logger.log('serviceAgreementSignatureResult', serviceAgreementSignatureResult)
account[0]
)
Logger.log(
'serviceAgreementSignatureResult',
serviceAgreementSignatureResult
)
await this.context.ocean
.initializeServiceAgreement(
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],
(files: any) =>
Logger.log(
`Got files, first files length in bytes: ${files[0].length}`
),
account[0]
)
}
@ -56,11 +54,25 @@ class Details extends Component<IProps, IState> {
return (
<>
<div>{JSON.stringify(this.state.metadata)}</div>
<button onClick={this.purchaseAsset.bind(this, ddo)}>Purchase asset</button>
<Button onClick={this.purchaseAsset(ddo)}>
Purchase asset
</Button>
</>
)
}
public render() {
return (
<>
{this.state.metadata ? (
this.showDetails(this.state.ddo)
) : (
<div>Loading</div>
)}
</>
)
}
}
Details.contextType = User
export default Details

15
src/pages/Home.tsx
View File

@ -3,16 +3,15 @@ import { Link } from 'react-router-dom'
import Button from '../components/atoms/Button'
import styles from './Home.module.scss'
interface IState {
interface HomeState {
search?: string
}
interface IProps {
interface HomeProps {
history: any
}
class Home extends Component<IProps, IState> {
class Home extends Component<HomeProps, HomeState> {
public state = { search: '' }
public render() {
@ -24,11 +23,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>
)
}

240
src/pages/Publish.tsx
View File

@ -5,22 +5,21 @@ 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[],
interface PublishState {
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> {
class Publish extends Component<{}, PublishState> {
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,13 +38,58 @@ 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}>
<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>
@ -53,60 +97,137 @@ class Publish extends Component<{}, IState> {
<option value="other">Other</option>
</select>
</div>
<div>License:
<select name="license" value={this.state.license} onChange={this.inputChange}>
<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>
<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>
<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="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="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="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="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="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="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="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>)}
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>
@ -115,13 +236,17 @@ class Publish extends Component<{}, IState> {
)
}
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,8 +277,11 @@ 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])
}
}

27
src/pages/Search.tsx
View File

@ -3,17 +3,16 @@ import React, { Component } from 'react'
import { Link } from 'react-router-dom'
import { provideOcean } from '../ocean'
interface IState {
interface SearchState {
results: any[]
}
interface IProps {
location: any,
interface SearchProps {
location: any
history: any
}
class Search extends Component<IProps, IState> {
class Search extends Component<SearchProps, SearchState> {
public state = { results: [] }
public async componentDidMount() {
@ -30,31 +29,31 @@ 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)}>
<Link key={asset.id} to={`/asset/${asset.id}`}>
<div>{asset.id}</div>
<div>{metadata.base.name}</div>
<div>{metadata.base.description}</div>
</div>
</Link>
)
}
private openDetails = (assetId:string) => {
this.props.history.push(`/asset/${assetId}`)
}
}
export default Search

2
src/serviceWorker.ts
View File

@ -1,4 +1,4 @@
/* tslint:disable */
/* eslint-disable */
// This optional code is used to register a service worker.
// register() is not called by default.