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 pull request #10 from oceanprotocol/feature/eslint

Browse Source 
Switch to ESLint
This commit is contained in:
Jernej Pregelj 2019-02-05 17:39:14 +01:00 committed by GitHub
commit 513d615df3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
16 changed files with 2206 additions and 491 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
}
}

2085
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": {
@ -30,16 +30,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": {

53
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?) => {
if (event) {
event.preventDefault()
}
this.startLoginProcess()
}
this.state = {
isLogged: false,
web3: {},
ocean: {},
startLogin: this.startLogin,
class App extends Component<{}, AppState> {
public startLogin = (event?: any) => {
if (event) {
event.preventDefault()
}
this.startLoginProcess()
}
public state = {
isLogged: false,
web3: {},
ocean: {},
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}`
)
)
}))
}
}

2
src/Routes.tsx
View File

@ -11,7 +11,7 @@ import Search from './pages/Search'
const Routes = () => (
<Router>
<Switch>
<Route exact={true} component={Home} path="/" />
<Route exact component={Home} path="/" />
<Route component={About} path="/about" />
<Route component={Publish} path="/publish" />
<Route component={Search} path="/search" />

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 } = 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>
)
}

80
src/pages/Details.tsx
View File

@ -1,66 +1,78 @@
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(
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(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

@ -2,16 +2,15 @@ import React, { ChangeEvent, Component, FormEvent } from 'react'
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() {
@ -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>
)
}

306
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,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,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.

10
tslint.json
View File

@ -1,10 +0,0 @@
{
"defaultSeverity": "error",
"extends": ["tslint:recommended", "tslint-config-prettier", "tslint-react"],
"jsRules": {},
"rules": {
"object-literal-sort-keys": false,
"semicolon": [true, "never"]
},
"rulesDirectory": []
}