1
0
mirror of https://github.com/oceanprotocol/market.git synced 2024-12-02 05:57:29 +01:00

filter ordered assets by service type (#515)

* filter ordered assets by service type

* filter dids fetched

* loader added

* show loader fix

Co-authored-by: claudia.holhos <claudia.holhos@hpm.ro>
This commit is contained in:
claudiaHash 2021-04-15 15:54:41 +03:00 committed by GitHub
parent a8aebf2fac
commit 49caca234d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -2,10 +2,13 @@ import React, { ReactElement, useEffect, useState } from 'react'
import Table from '../../atoms/Table' import Table from '../../atoms/Table'
import { gql, useQuery } from '@apollo/client' import { gql, useQuery } from '@apollo/client'
import Time from '../../atoms/Time' import Time from '../../atoms/Time'
import { OrdersData_tokenOrders as OrdersDataTokenOrders } from '../../../@types/apollo/OrdersData'
import web3 from 'web3' import web3 from 'web3'
import AssetTitle from '../../molecules/AssetListTitle' import AssetTitle from '../../molecules/AssetListTitle'
import { useWeb3 } from '../../../providers/Web3' import { useWeb3 } from '../../../providers/Web3'
import axios from 'axios'
import { useOcean } from '../../../providers/Ocean'
import { retrieveDDO } from '../../../utils/aquarius'
import { Logger } from '@oceanprotocol/lib'
const getTokenOrders = gql` const getTokenOrders = gql`
query OrdersData($user: String!) { query OrdersData($user: String!) {
@ -24,26 +27,28 @@ const getTokenOrders = gql`
} }
` `
interface DownloadedAssets {
did: string
dtSymbol: string
timestamp: string
}
const columns = [ const columns = [
{ {
name: 'Data Set', name: 'Data Set',
selector: function getAssetRow(row: OrdersDataTokenOrders) { selector: function getAssetRow(row: DownloadedAssets) {
const did = web3.utils return <AssetTitle did={row.did} />
.toChecksumAddress(row.datatokenId.address)
.replace('0x', 'did:op:')
return <AssetTitle did={did} />
} }
}, },
{ {
name: 'Datatoken', name: 'Datatoken',
selector: function getTitleRow(row: OrdersDataTokenOrders) { selector: function getTitleRow(row: DownloadedAssets) {
return row.datatokenId.symbol return row.dtSymbol
} }
}, },
{ {
name: 'Time', name: 'Time',
selector: function getTimeRow(row: OrdersDataTokenOrders) { selector: function getTimeRow(row: DownloadedAssets) {
return <Time date={row.timestamp.toString()} relative isUnix /> return <Time date={row.timestamp.toString()} relative isUnix />
} }
} }
@ -51,21 +56,56 @@ const columns = [
export default function ComputeDownloads(): ReactElement { export default function ComputeDownloads(): ReactElement {
const { accountId } = useWeb3() const { accountId } = useWeb3()
const [orders, setOrders] = useState<OrdersDataTokenOrders[]>() const [isLoading, setIsLoading] = useState(false)
const [orders, setOrders] = useState<DownloadedAssets[]>()
const { data } = useQuery(getTokenOrders, { const { data } = useQuery(getTokenOrders, {
variables: { user: accountId?.toLowerCase() } variables: { user: accountId?.toLowerCase() }
}) })
const { config } = useOcean()
useEffect(() => { useEffect(() => {
if (!data) return if (!config.metadataCacheUri || !data) return
setOrders(data.tokenOrders)
}, [data]) async function filterAssets() {
const filteredOrders: DownloadedAssets[] = []
const source = axios.CancelToken.source()
setIsLoading(true)
try {
for (let i = 0; i < data.tokenOrders.length; i++) {
const did = web3.utils
.toChecksumAddress(data.tokenOrders[i].datatokenId.address)
.replace('0x', 'did:op:')
const ddo = await retrieveDDO(
did,
config?.metadataCacheUri,
source.token
)
if (ddo.service[1].type === 'access') {
filteredOrders.push({
did: did,
dtSymbol: data.tokenOrders[i].datatokenId.symbol,
timestamp: data.tokenOrders[i].timestamp
})
}
}
setOrders(filteredOrders)
} catch (err) {
Logger.log(err.message)
} finally {
setIsLoading(false)
}
}
filterAssets()
}, [config?.metadataCacheUri, data])
return ( return (
<Table <Table
columns={columns} columns={columns}
data={orders} data={orders}
paginationPerPage={10} paginationPerPage={10}
isLoading={isLoading}
emptyMessage="Your downloads will show up here" emptyMessage="Your downloads will show up here"
/> />
) )