1
0
mirror of https://github.com/oceanprotocol/market.git synced 2024-12-02 05:57:29 +01: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:
claudiaHash 2021-10-14 15:49:02 +03:00 committed by GitHub
parent 9a47d065b4
commit 88dbb1d4ba
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 52 additions and 30 deletions

View File

@ -10,10 +10,11 @@ import { fetchDataForMultipleChains } from '../../../utils/subgraph'
import { useSiteMetadata } from '../../../hooks/useSiteMetadata'
import NetworkName from '../../atoms/NetworkName'
import { retrieveDDOListByDIDs } from '../../../utils/aquarius'
import axios, { CancelToken } from 'axios'
import { CancelToken } from 'axios'
import Title from './Title'
import styles from './index.module.css'
import { DDO, Logger } from '@oceanprotocol/lib'
import { useCancelToken } from '../../../hooks/useCancelToken'
const REFETCH_INTERVAL = 20000
@ -130,11 +131,12 @@ export default function PoolTransactions({
accountId: string
}): ReactElement {
const [transactions, setTransactions] = useState<PoolTransaction[]>()
const [isLoading, setIsLoading] = useState<boolean>(true)
const [isLoading, setIsLoading] = useState<boolean>(false)
const { chainIds } = useUserPreferences()
const { appConfig } = useSiteMetadata()
const [dataFetchInterval, setDataFetchInterval] = useState<NodeJS.Timeout>()
const [data, setData] = useState<PoolTransaction[]>()
const cancelToken = useCancelToken()
const getPoolTransactionData = useCallback(async () => {
const variables = {
@ -161,8 +163,9 @@ export default function PoolTransactions({
const getPoolTransactions = useCallback(
async (cancelToken: CancelToken) => {
if (!data) return
if (!data) {
return
}
const poolTransactions: PoolTransaction[] = []
const didList: string[] = []
@ -173,7 +176,10 @@ export default function PoolTransactions({
.replace('0x', 'did:op:')
didList.push(did)
}
if (didList.length === 0) return
if (didList.length === 0) {
setIsLoading(false)
return
}
const ddoList = await retrieveDDOListByDIDs(
didList,
chainIds,
@ -189,9 +195,11 @@ export default function PoolTransactions({
const sortedTransactions = poolTransactions.sort(
(a, b) => b.timestamp - a.timestamp
)
setTransactions(sortedTransactions)
setIsLoading(false)
},
[data]
[data, chainIds, setIsLoading]
)
//
@ -203,7 +211,6 @@ export default function PoolTransactions({
async function getTransactions() {
try {
await getPoolTransactionData()
if (dataFetchInterval) return
const interval = setInterval(async () => {
await getPoolTransactionData()
@ -224,24 +231,21 @@ export default function PoolTransactions({
// Transform to final transactions
//
useEffect(() => {
const cancelTokenSource = axios.CancelToken.source()
if (!cancelToken()) return
async function transformData() {
try {
setIsLoading(true)
await getPoolTransactions(cancelTokenSource.token)
await getPoolTransactions(cancelToken())
} catch (error) {
Logger.error('Error fetching pool transactions: ', error.message)
} finally {
setIsLoading(false)
}
}
transformData()
return () => {
cancelTokenSource.cancel()
cancelToken()
}
}, [getPoolTransactions])
}, [cancelToken, getPoolTransactions])
return accountId ? (
<Table

View File

@ -77,7 +77,7 @@ export default function ComputeJobs({
const { ocean, account, config, connect } = useOcean()
const { accountId, networkId } = useWeb3()
const { ddo } = useAsset()
const [isLoading, setIsLoading] = useState(true)
const [isLoading, setIsLoading] = useState(false)
const { chainIds } = useUserPreferences()
const [jobs, setJobs] = useState<ComputeJobMetaData[]>([])
const isMounted = useIsMounted()
@ -95,21 +95,20 @@ export default function ComputeJobs({
}, [networkId, ocean, connect])
const fetchJobs = useCallback(async () => {
if (!chainIds || !accountId) {
if (!chainIds || chainIds.length === 0 || !accountId) {
setJobs([])
setIsLoading(false)
return
}
try {
setIsLoading(true)
const jobs = await getComputeJobs(chainIds, config, ocean, account, ddo)
isMounted() && setJobs(jobs)
isMounted() && setJobs(jobs.computeJobs)
setIsLoading(jobs.isLoaded)
} catch (error) {
Logger.error(error.message)
} finally {
setIsLoading(false)
}
}, [account, accountId, chainIds, ddo, config, ocean])
}, [chainIds, accountId, config, ocean, account, ddo, isMounted])
useEffect(() => {
fetchJobs()

View File

@ -18,6 +18,7 @@ import Decimal from 'decimal.js'
import { useProfile } from '../../../../providers/Profile'
import { DDO } from '@oceanprotocol/lib'
import { useCancelToken } from '../../../../hooks/useCancelToken'
import { useIsMounted } from '../../../../hooks/useIsMounted'
import { useUserPreferences } from '../../../../providers/UserPreferences'
Decimal.set({ toExpNeg: -18, precision: 18, rounding: 1 })
@ -172,10 +173,11 @@ export default function PoolShares({
const [dataFetchInterval, setDataFetchInterval] = useState<NodeJS.Timeout>()
const { chainIds } = useUserPreferences()
const newCancelToken = useCancelToken()
const isMounted = useIsMounted()
const fetchPoolSharesAssets = useCallback(
async (cancelToken: CancelToken) => {
if (!poolShares || isPoolSharesLoading) return
if (!poolShares || isPoolSharesLoading || !isMounted()) return
try {
const assets = await getPoolSharesAssets(
@ -186,9 +188,11 @@ export default function PoolShares({
setAssets(assets)
} catch (error) {
console.error('Error fetching pool shares: ', error.message)
} finally {
setLoading(false)
}
},
[poolShares, isPoolSharesLoading]
[poolShares, isPoolSharesLoading, isMounted]
)
useEffect(() => {
@ -196,7 +200,6 @@ export default function PoolShares({
async function init() {
setLoading(true)
await fetchPoolSharesAssets(cancelToken)
setLoading(false)
if (dataFetchInterval) return
const interval = setInterval(async () => {

View File

@ -66,6 +66,11 @@ interface TokenOrder {
timestamp: number
}
interface ComputeResults {
computeJobs: ComputeJobMetaData[]
isLoaded: boolean
}
async function getAssetMetadata(
queryDtList: string,
cancelToken: CancelToken,
@ -221,9 +226,13 @@ export async function getComputeJobs(
ocean: Ocean,
account: Account,
ddo?: DDO
): Promise<ComputeJobMetaData[]> {
): Promise<ComputeResults> {
const assetDTAddress = ddo?.dataTokenInfo?.address
let computeResult: ComputeResults = {
computeJobs: [],
isLoaded: false
}
let isLoading = true
const variables = assetDTAddress
? {
user: account?.getId().toLowerCase(),
@ -239,16 +248,18 @@ export async function getComputeJobs(
assetDTAddress ? [ddo?.chainId] : chainIds
)
let data: TokenOrder[] = []
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) => {
data.push(tokenOrder)
})
}
if (!ocean || !account || !data) return
if (data.length === 0) {
return computeResult
}
data = data.sort((a, b) => b.timestamp - a.timestamp)
const queryDtList = getDtList(data)
if (queryDtList === '') return
@ -262,8 +273,13 @@ export async function getComputeJobs(
ocean
)
const computeJobs = await getJobs(providers, account, assets)
isLoading = false
computeResult = {
computeJobs: computeJobs,
isLoaded: isLoading
}
return computeJobs
return computeResult
}
export async function createTrustedAlgorithmList(