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:
parent
a8aebf2fac
commit
49caca234d
@ -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"
|
||||||
/>
|
/>
|
||||||
)
|
)
|
||||||
|
Loading…
Reference in New Issue
Block a user