124 lines
3.0 KiB
TypeScript
124 lines
3.0 KiB
TypeScript
import React, { ReactElement, useCallback, useEffect, useState } from 'react'
|
|
import Tabs from '@shared/atoms/Tabs'
|
|
import PublishedList from './PublishedList'
|
|
import Downloads from './Downloads'
|
|
import ComputeJobs from './ComputeJobs'
|
|
import styles from './index.module.css'
|
|
import { useWeb3 } from '@context/Web3'
|
|
import { getComputeJobs } from '@utils/compute'
|
|
import { useUserPreferences } from '@context/UserPreferences'
|
|
import { useCancelToken } from '@hooks/useCancelToken'
|
|
import { LoggerInstance } from '@oceanprotocol/lib'
|
|
|
|
interface HistoryTab {
|
|
title: string
|
|
content: JSX.Element
|
|
}
|
|
|
|
const refreshInterval = 10000 // 10 sec.
|
|
|
|
function getTabs(
|
|
accountId: string,
|
|
userAccountId: string,
|
|
jobs: ComputeJobMetaData[],
|
|
isLoadingJobs: boolean,
|
|
refetchJobs: boolean,
|
|
setRefetchJobs: any
|
|
): HistoryTab[] {
|
|
const defaultTabs: HistoryTab[] = [
|
|
{
|
|
title: 'Published',
|
|
content: <PublishedList accountId={accountId} />
|
|
},
|
|
{
|
|
title: 'Downloads',
|
|
content: <Downloads accountId={accountId} />
|
|
}
|
|
]
|
|
const computeTab: HistoryTab = {
|
|
title: 'Compute Jobs',
|
|
content: (
|
|
<ComputeJobs
|
|
jobs={jobs}
|
|
isLoading={isLoadingJobs}
|
|
refetchJobs={() => setRefetchJobs(!refetchJobs)}
|
|
/>
|
|
)
|
|
}
|
|
if (accountId === userAccountId) {
|
|
defaultTabs.push(computeTab)
|
|
}
|
|
return defaultTabs
|
|
}
|
|
|
|
export default function HistoryPage({
|
|
accountIdentifier
|
|
}: {
|
|
accountIdentifier: string
|
|
}): ReactElement {
|
|
const { accountId } = useWeb3()
|
|
const { chainIds } = useUserPreferences()
|
|
const newCancelToken = useCancelToken()
|
|
|
|
const url = new URL(location.href)
|
|
const defaultTab = url.searchParams.get('defaultTab')
|
|
|
|
const [refetchJobs, setRefetchJobs] = useState(false)
|
|
const [isLoadingJobs, setIsLoadingJobs] = useState(false)
|
|
const [jobs, setJobs] = useState<ComputeJobMetaData[]>([])
|
|
|
|
const fetchJobs = useCallback(
|
|
async (type: string) => {
|
|
if (!chainIds || chainIds.length === 0 || !accountId) {
|
|
return
|
|
}
|
|
|
|
try {
|
|
type === 'init' && setIsLoadingJobs(true)
|
|
const computeJobs = await getComputeJobs(
|
|
chainIds,
|
|
accountId,
|
|
null,
|
|
newCancelToken()
|
|
)
|
|
setJobs(computeJobs.computeJobs)
|
|
setIsLoadingJobs(!computeJobs.isLoaded)
|
|
} catch (error) {
|
|
LoggerInstance.error(error.message)
|
|
setIsLoadingJobs(false)
|
|
}
|
|
},
|
|
[accountId, chainIds, isLoadingJobs, newCancelToken]
|
|
)
|
|
|
|
useEffect(() => {
|
|
fetchJobs('init')
|
|
|
|
// init periodic refresh for jobs
|
|
const balanceInterval = setInterval(
|
|
() => fetchJobs('repeat'),
|
|
refreshInterval
|
|
)
|
|
|
|
return () => {
|
|
clearInterval(balanceInterval)
|
|
}
|
|
}, [refetchJobs])
|
|
|
|
const tabs = getTabs(
|
|
accountIdentifier,
|
|
accountId,
|
|
jobs,
|
|
isLoadingJobs,
|
|
refetchJobs,
|
|
setRefetchJobs
|
|
)
|
|
|
|
let defaultTabIndex = 0
|
|
defaultTab === 'ComputeJobs' ? (defaultTabIndex = 4) : (defaultTabIndex = 0)
|
|
|
|
return (
|
|
<Tabs items={tabs} className={styles.tabs} defaultIndex={defaultTabIndex} />
|
|
)
|
|
}
|