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>

src/components/pages/History/Downloads.tsx

@@ -2,10 +2,13 @@ import React, { ReactElement, useEffect, useState } from 'react'
 import Table from '../../atoms/Table'
 import { gql, useQuery } from '@apollo/client'
 import Time from '../../atoms/Time'
-import { OrdersData_tokenOrders as OrdersDataTokenOrders } from '../../../@types/apollo/OrdersData'
 import web3 from 'web3'
 import AssetTitle from '../../molecules/AssetListTitle'
 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`
   query OrdersData($user: String!) {
@@ -24,26 +27,28 @@ const getTokenOrders = gql`
   }
 `
 
+interface DownloadedAssets {
+  did: string
+  dtSymbol: string
+  timestamp: string
+}
+
 const columns = [
   {
     name: 'Data Set',
-    selector: function getAssetRow(row: OrdersDataTokenOrders) {
-      const did = web3.utils
-        .toChecksumAddress(row.datatokenId.address)
-        .replace('0x', 'did:op:')
-
-      return <AssetTitle did={did} />
+    selector: function getAssetRow(row: DownloadedAssets) {
+      return <AssetTitle did={row.did} />
     }
   },
   {
     name: 'Datatoken',
-    selector: function getTitleRow(row: OrdersDataTokenOrders) {
-      return row.datatokenId.symbol
+    selector: function getTitleRow(row: DownloadedAssets) {
+      return row.dtSymbol
     }
   },
   {
     name: 'Time',
-    selector: function getTimeRow(row: OrdersDataTokenOrders) {
+    selector: function getTimeRow(row: DownloadedAssets) {
       return <Time date={row.timestamp.toString()} relative isUnix />
     }
   }
@@ -51,21 +56,56 @@ const columns = [
 
 export default function ComputeDownloads(): ReactElement {
   const { accountId } = useWeb3()
-  const [orders, setOrders] = useState<OrdersDataTokenOrders[]>()
+  const [isLoading, setIsLoading] = useState(false)
+  const [orders, setOrders] = useState<DownloadedAssets[]>()
   const { data } = useQuery(getTokenOrders, {
     variables: { user: accountId?.toLowerCase() }
   })
+  const { config } = useOcean()
 
   useEffect(() => {
-    if (!data) return
-    setOrders(data.tokenOrders)
-  }, [data])
+    if (!config.metadataCacheUri || !data) return
+
+    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 (
     <Table
       columns={columns}
       data={orders}
       paginationPerPage={10}
+      isLoading={isLoading}
       emptyMessage="Your downloads will show up here"
     />
   )