mirror of
https://github.com/oceanprotocol/market.git
synced 2024-06-29 00:57:50 +02:00
Fix display 'No results found' message before displaying results (#890)
* use isMounted hook * PoolTransactions display fix * removed unnecessary hook * get results after loading * no network seleted * compute jobs history fixes * display correct message if no result found * pool shares loading fix * pool transactions loading fix * transactions loading fix
This commit is contained in:
parent
9a47d065b4
commit
88dbb1d4ba
|
@ -10,10 +10,11 @@ import { fetchDataForMultipleChains } from '../../../utils/subgraph'
|
||||||
import { useSiteMetadata } from '../../../hooks/useSiteMetadata'
|
import { useSiteMetadata } from '../../../hooks/useSiteMetadata'
|
||||||
import NetworkName from '../../atoms/NetworkName'
|
import NetworkName from '../../atoms/NetworkName'
|
||||||
import { retrieveDDOListByDIDs } from '../../../utils/aquarius'
|
import { retrieveDDOListByDIDs } from '../../../utils/aquarius'
|
||||||
import axios, { CancelToken } from 'axios'
|
import { CancelToken } from 'axios'
|
||||||
import Title from './Title'
|
import Title from './Title'
|
||||||
import styles from './index.module.css'
|
import styles from './index.module.css'
|
||||||
import { DDO, Logger } from '@oceanprotocol/lib'
|
import { DDO, Logger } from '@oceanprotocol/lib'
|
||||||
|
import { useCancelToken } from '../../../hooks/useCancelToken'
|
||||||
|
|
||||||
const REFETCH_INTERVAL = 20000
|
const REFETCH_INTERVAL = 20000
|
||||||
|
|
||||||
|
@ -130,11 +131,12 @@ export default function PoolTransactions({
|
||||||
accountId: string
|
accountId: string
|
||||||
}): ReactElement {
|
}): ReactElement {
|
||||||
const [transactions, setTransactions] = useState<PoolTransaction[]>()
|
const [transactions, setTransactions] = useState<PoolTransaction[]>()
|
||||||
const [isLoading, setIsLoading] = useState<boolean>(true)
|
const [isLoading, setIsLoading] = useState<boolean>(false)
|
||||||
const { chainIds } = useUserPreferences()
|
const { chainIds } = useUserPreferences()
|
||||||
const { appConfig } = useSiteMetadata()
|
const { appConfig } = useSiteMetadata()
|
||||||
const [dataFetchInterval, setDataFetchInterval] = useState<NodeJS.Timeout>()
|
const [dataFetchInterval, setDataFetchInterval] = useState<NodeJS.Timeout>()
|
||||||
const [data, setData] = useState<PoolTransaction[]>()
|
const [data, setData] = useState<PoolTransaction[]>()
|
||||||
|
const cancelToken = useCancelToken()
|
||||||
|
|
||||||
const getPoolTransactionData = useCallback(async () => {
|
const getPoolTransactionData = useCallback(async () => {
|
||||||
const variables = {
|
const variables = {
|
||||||
|
@ -161,8 +163,9 @@ export default function PoolTransactions({
|
||||||
|
|
||||||
const getPoolTransactions = useCallback(
|
const getPoolTransactions = useCallback(
|
||||||
async (cancelToken: CancelToken) => {
|
async (cancelToken: CancelToken) => {
|
||||||
if (!data) return
|
if (!data) {
|
||||||
|
return
|
||||||
|
}
|
||||||
const poolTransactions: PoolTransaction[] = []
|
const poolTransactions: PoolTransaction[] = []
|
||||||
const didList: string[] = []
|
const didList: string[] = []
|
||||||
|
|
||||||
|
@ -173,7 +176,10 @@ export default function PoolTransactions({
|
||||||
.replace('0x', 'did:op:')
|
.replace('0x', 'did:op:')
|
||||||
didList.push(did)
|
didList.push(did)
|
||||||
}
|
}
|
||||||
if (didList.length === 0) return
|
if (didList.length === 0) {
|
||||||
|
setIsLoading(false)
|
||||||
|
return
|
||||||
|
}
|
||||||
const ddoList = await retrieveDDOListByDIDs(
|
const ddoList = await retrieveDDOListByDIDs(
|
||||||
didList,
|
didList,
|
||||||
chainIds,
|
chainIds,
|
||||||
|
@ -189,9 +195,11 @@ export default function PoolTransactions({
|
||||||
const sortedTransactions = poolTransactions.sort(
|
const sortedTransactions = poolTransactions.sort(
|
||||||
(a, b) => b.timestamp - a.timestamp
|
(a, b) => b.timestamp - a.timestamp
|
||||||
)
|
)
|
||||||
|
|
||||||
setTransactions(sortedTransactions)
|
setTransactions(sortedTransactions)
|
||||||
|
setIsLoading(false)
|
||||||
},
|
},
|
||||||
[data]
|
[data, chainIds, setIsLoading]
|
||||||
)
|
)
|
||||||
|
|
||||||
//
|
//
|
||||||
|
@ -203,7 +211,6 @@ export default function PoolTransactions({
|
||||||
async function getTransactions() {
|
async function getTransactions() {
|
||||||
try {
|
try {
|
||||||
await getPoolTransactionData()
|
await getPoolTransactionData()
|
||||||
|
|
||||||
if (dataFetchInterval) return
|
if (dataFetchInterval) return
|
||||||
const interval = setInterval(async () => {
|
const interval = setInterval(async () => {
|
||||||
await getPoolTransactionData()
|
await getPoolTransactionData()
|
||||||
|
@ -224,24 +231,21 @@ export default function PoolTransactions({
|
||||||
// Transform to final transactions
|
// Transform to final transactions
|
||||||
//
|
//
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const cancelTokenSource = axios.CancelToken.source()
|
if (!cancelToken()) return
|
||||||
|
|
||||||
async function transformData() {
|
async function transformData() {
|
||||||
try {
|
try {
|
||||||
setIsLoading(true)
|
setIsLoading(true)
|
||||||
await getPoolTransactions(cancelTokenSource.token)
|
await getPoolTransactions(cancelToken())
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
Logger.error('Error fetching pool transactions: ', error.message)
|
Logger.error('Error fetching pool transactions: ', error.message)
|
||||||
} finally {
|
|
||||||
setIsLoading(false)
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
transformData()
|
transformData()
|
||||||
|
|
||||||
return () => {
|
return () => {
|
||||||
cancelTokenSource.cancel()
|
cancelToken()
|
||||||
}
|
}
|
||||||
}, [getPoolTransactions])
|
}, [cancelToken, getPoolTransactions])
|
||||||
|
|
||||||
return accountId ? (
|
return accountId ? (
|
||||||
<Table
|
<Table
|
||||||
|
|
|
@ -77,7 +77,7 @@ export default function ComputeJobs({
|
||||||
const { ocean, account, config, connect } = useOcean()
|
const { ocean, account, config, connect } = useOcean()
|
||||||
const { accountId, networkId } = useWeb3()
|
const { accountId, networkId } = useWeb3()
|
||||||
const { ddo } = useAsset()
|
const { ddo } = useAsset()
|
||||||
const [isLoading, setIsLoading] = useState(true)
|
const [isLoading, setIsLoading] = useState(false)
|
||||||
const { chainIds } = useUserPreferences()
|
const { chainIds } = useUserPreferences()
|
||||||
const [jobs, setJobs] = useState<ComputeJobMetaData[]>([])
|
const [jobs, setJobs] = useState<ComputeJobMetaData[]>([])
|
||||||
const isMounted = useIsMounted()
|
const isMounted = useIsMounted()
|
||||||
|
@ -95,21 +95,20 @@ export default function ComputeJobs({
|
||||||
}, [networkId, ocean, connect])
|
}, [networkId, ocean, connect])
|
||||||
|
|
||||||
const fetchJobs = useCallback(async () => {
|
const fetchJobs = useCallback(async () => {
|
||||||
if (!chainIds || !accountId) {
|
if (!chainIds || chainIds.length === 0 || !accountId) {
|
||||||
|
setJobs([])
|
||||||
setIsLoading(false)
|
setIsLoading(false)
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
try {
|
try {
|
||||||
setIsLoading(true)
|
setIsLoading(true)
|
||||||
const jobs = await getComputeJobs(chainIds, config, ocean, account, ddo)
|
const jobs = await getComputeJobs(chainIds, config, ocean, account, ddo)
|
||||||
isMounted() && setJobs(jobs)
|
isMounted() && setJobs(jobs.computeJobs)
|
||||||
|
setIsLoading(jobs.isLoaded)
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
Logger.error(error.message)
|
Logger.error(error.message)
|
||||||
} finally {
|
|
||||||
setIsLoading(false)
|
|
||||||
}
|
}
|
||||||
}, [account, accountId, chainIds, ddo, config, ocean])
|
}, [chainIds, accountId, config, ocean, account, ddo, isMounted])
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
fetchJobs()
|
fetchJobs()
|
||||||
|
|
|
@ -18,6 +18,7 @@ import Decimal from 'decimal.js'
|
||||||
import { useProfile } from '../../../../providers/Profile'
|
import { useProfile } from '../../../../providers/Profile'
|
||||||
import { DDO } from '@oceanprotocol/lib'
|
import { DDO } from '@oceanprotocol/lib'
|
||||||
import { useCancelToken } from '../../../../hooks/useCancelToken'
|
import { useCancelToken } from '../../../../hooks/useCancelToken'
|
||||||
|
import { useIsMounted } from '../../../../hooks/useIsMounted'
|
||||||
import { useUserPreferences } from '../../../../providers/UserPreferences'
|
import { useUserPreferences } from '../../../../providers/UserPreferences'
|
||||||
|
|
||||||
Decimal.set({ toExpNeg: -18, precision: 18, rounding: 1 })
|
Decimal.set({ toExpNeg: -18, precision: 18, rounding: 1 })
|
||||||
|
@ -172,10 +173,11 @@ export default function PoolShares({
|
||||||
const [dataFetchInterval, setDataFetchInterval] = useState<NodeJS.Timeout>()
|
const [dataFetchInterval, setDataFetchInterval] = useState<NodeJS.Timeout>()
|
||||||
const { chainIds } = useUserPreferences()
|
const { chainIds } = useUserPreferences()
|
||||||
const newCancelToken = useCancelToken()
|
const newCancelToken = useCancelToken()
|
||||||
|
const isMounted = useIsMounted()
|
||||||
|
|
||||||
const fetchPoolSharesAssets = useCallback(
|
const fetchPoolSharesAssets = useCallback(
|
||||||
async (cancelToken: CancelToken) => {
|
async (cancelToken: CancelToken) => {
|
||||||
if (!poolShares || isPoolSharesLoading) return
|
if (!poolShares || isPoolSharesLoading || !isMounted()) return
|
||||||
|
|
||||||
try {
|
try {
|
||||||
const assets = await getPoolSharesAssets(
|
const assets = await getPoolSharesAssets(
|
||||||
|
@ -186,9 +188,11 @@ export default function PoolShares({
|
||||||
setAssets(assets)
|
setAssets(assets)
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error('Error fetching pool shares: ', error.message)
|
console.error('Error fetching pool shares: ', error.message)
|
||||||
|
} finally {
|
||||||
|
setLoading(false)
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
[poolShares, isPoolSharesLoading]
|
[poolShares, isPoolSharesLoading, isMounted]
|
||||||
)
|
)
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
|
@ -196,7 +200,6 @@ export default function PoolShares({
|
||||||
async function init() {
|
async function init() {
|
||||||
setLoading(true)
|
setLoading(true)
|
||||||
await fetchPoolSharesAssets(cancelToken)
|
await fetchPoolSharesAssets(cancelToken)
|
||||||
setLoading(false)
|
|
||||||
|
|
||||||
if (dataFetchInterval) return
|
if (dataFetchInterval) return
|
||||||
const interval = setInterval(async () => {
|
const interval = setInterval(async () => {
|
||||||
|
|
|
@ -66,6 +66,11 @@ interface TokenOrder {
|
||||||
timestamp: number
|
timestamp: number
|
||||||
}
|
}
|
||||||
|
|
||||||
|
interface ComputeResults {
|
||||||
|
computeJobs: ComputeJobMetaData[]
|
||||||
|
isLoaded: boolean
|
||||||
|
}
|
||||||
|
|
||||||
async function getAssetMetadata(
|
async function getAssetMetadata(
|
||||||
queryDtList: string,
|
queryDtList: string,
|
||||||
cancelToken: CancelToken,
|
cancelToken: CancelToken,
|
||||||
|
@ -221,9 +226,13 @@ export async function getComputeJobs(
|
||||||
ocean: Ocean,
|
ocean: Ocean,
|
||||||
account: Account,
|
account: Account,
|
||||||
ddo?: DDO
|
ddo?: DDO
|
||||||
): Promise<ComputeJobMetaData[]> {
|
): Promise<ComputeResults> {
|
||||||
const assetDTAddress = ddo?.dataTokenInfo?.address
|
const assetDTAddress = ddo?.dataTokenInfo?.address
|
||||||
|
let computeResult: ComputeResults = {
|
||||||
|
computeJobs: [],
|
||||||
|
isLoaded: false
|
||||||
|
}
|
||||||
|
let isLoading = true
|
||||||
const variables = assetDTAddress
|
const variables = assetDTAddress
|
||||||
? {
|
? {
|
||||||
user: account?.getId().toLowerCase(),
|
user: account?.getId().toLowerCase(),
|
||||||
|
@ -239,16 +248,18 @@ export async function getComputeJobs(
|
||||||
assetDTAddress ? [ddo?.chainId] : chainIds
|
assetDTAddress ? [ddo?.chainId] : chainIds
|
||||||
)
|
)
|
||||||
let data: TokenOrder[] = []
|
let data: TokenOrder[] = []
|
||||||
|
|
||||||
for (let i = 0; i < result.length; i++) {
|
for (let i = 0; i < result.length; i++) {
|
||||||
if (!result[i]?.tokenOrders) continue
|
if (!result[i]?.tokenOrders || result[i].tokenOrders.length === 0) continue
|
||||||
result[i]?.tokenOrders.forEach((tokenOrder: TokenOrder) => {
|
result[i]?.tokenOrders.forEach((tokenOrder: TokenOrder) => {
|
||||||
data.push(tokenOrder)
|
data.push(tokenOrder)
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
if (!ocean || !account || !data) return
|
if (!ocean || !account || !data) return
|
||||||
|
|
||||||
|
if (data.length === 0) {
|
||||||
|
return computeResult
|
||||||
|
}
|
||||||
|
|
||||||
data = data.sort((a, b) => b.timestamp - a.timestamp)
|
data = data.sort((a, b) => b.timestamp - a.timestamp)
|
||||||
const queryDtList = getDtList(data)
|
const queryDtList = getDtList(data)
|
||||||
if (queryDtList === '') return
|
if (queryDtList === '') return
|
||||||
|
@ -262,8 +273,13 @@ export async function getComputeJobs(
|
||||||
ocean
|
ocean
|
||||||
)
|
)
|
||||||
const computeJobs = await getJobs(providers, account, assets)
|
const computeJobs = await getJobs(providers, account, assets)
|
||||||
|
isLoading = false
|
||||||
|
computeResult = {
|
||||||
|
computeJobs: computeJobs,
|
||||||
|
isLoaded: isLoading
|
||||||
|
}
|
||||||
|
|
||||||
return computeJobs
|
return computeResult
|
||||||
}
|
}
|
||||||
|
|
||||||
export async function createTrustedAlgorithmList(
|
export async function createTrustedAlgorithmList(
|
||||||
|
|
Loading…
Reference in New Issue
Block a user