mirror of
https://github.com/oceanprotocol/commons.git
synced 2023-03-15 18:03:00 +01:00
Merge branch 'master' into feature/form-components
This commit is contained in:
commit
2e5d51070e
4654
package-lock.json
generated
4654
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
11
package.json
11
package.json
@ -17,6 +17,7 @@
|
||||
"dependencies": {
|
||||
"@oceanprotocol/squid": "^0.2.7",
|
||||
"classnames": "^2.2.6",
|
||||
"query-string": "^6.2.0",
|
||||
"react": "^16.7.0",
|
||||
"react-dom": "^16.7.0",
|
||||
"react-router-dom": "^4.3.1",
|
||||
@ -24,13 +25,15 @@
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/classnames": "^2.2.7",
|
||||
"@types/jest": "23.3.12",
|
||||
"@types/node": "10.12.18",
|
||||
"@types/react": "16.7.20",
|
||||
"@types/jest": "23.3.13",
|
||||
"@types/node": "10.12.19",
|
||||
"@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",
|
||||
|
98
src/App.tsx
98
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
|
||||
|
@ -1,14 +1,23 @@
|
||||
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 Styleguide from './pages/Styleguide'
|
||||
import Publish from './pages/Publish'
|
||||
import Search from './pages/Search'
|
||||
|
||||
const Routes = () => (
|
||||
<Router>
|
||||
<Switch>
|
||||
<Route exact={true} component={Home} path="/" />
|
||||
<Route component={Styleguide} path="/styleguide" />
|
||||
<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>
|
||||
|
25
src/config.ts
Normal file
25
src/config.ts
Normal file
@ -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
|
@ -1,7 +1,8 @@
|
||||
import React from 'react'
|
||||
|
||||
export const userDefaults = {
|
||||
logged: false
|
||||
}
|
||||
|
||||
export const User = React.createContext(userDefaults)
|
||||
export const User = React.createContext({
|
||||
isLogged: false,
|
||||
web3: {},
|
||||
ocean: {},
|
||||
startLogin: () => {/* empty */}
|
||||
})
|
||||
|
41
src/models/AssetModel.ts
Normal file
41
src/models/AssetModel.ts
Normal file
@ -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
|
49
src/ocean.ts
Normal file
49
src/ocean.ts
Normal file
@ -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 }
|
||||
}
|
16
src/pages/About.module.scss
Normal file
16
src/pages/About.module.scss
Normal file
@ -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%;
|
||||
}
|
||||
}
|
21
src/pages/About.tsx
Normal file
21
src/pages/About.tsx
Normal file
@ -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
|
66
src/pages/Details.tsx
Normal file
66
src/pages/Details.tsx
Normal file
@ -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
|
@ -1,17 +1,48 @@
|
||||
import React, { Component } from 'react'
|
||||
import React, { ChangeEvent, Component, FormEvent } from 'react'
|
||||
import { Link } from 'react-router-dom'
|
||||
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>
|
||||
|
||||
<Link to={'/styleguide'}>Styleguide</Link>
|
||||
|
||||
<div>
|
||||
<form onSubmit={this.searchAssets}>
|
||||
<input type="text" name="search" value={this.state.search} onChange={this.inputChange} />
|
||||
<Button>Search</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
|
||||
|
162
src/pages/Publish.tsx
Normal file
162
src/pages/Publish.tsx
Normal file
@ -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
|
60
src/pages/Search.tsx
Normal file
60
src/pages/Search.tsx
Normal file
@ -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
|
Loading…
Reference in New Issue
Block a user