From 032b3e14968fe1d2f898910e13fa4a536ca4ff06 Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Thu, 21 Oct 2021 12:31:19 +0100
Subject: [PATCH] quick refactor of AssetList data flow

---
 src/@types/aquarius/BaseQueryParams.d.ts      |  1 +
 src/@utils/aquarius.ts                        |  4 +++
 .../@shared/AssetList/AssetList.tsx           | 25 +++++++++++--------
 .../Asset/AssetActions/Compute/index.tsx      |  1 +
 .../Edit/FormEditComputeDataset.tsx           |  1 +
 5 files changed, 21 insertions(+), 11 deletions(-)

diff --git a/src/@types/aquarius/BaseQueryParams.d.ts b/src/@types/aquarius/BaseQueryParams.d.ts
index 658b73f4d..f987e3e5c 100644
--- a/src/@types/aquarius/BaseQueryParams.d.ts
+++ b/src/@types/aquarius/BaseQueryParams.d.ts
@@ -5,6 +5,7 @@ interface EsPaginationOptions {
 
 interface BaseQueryParams {
   chainIds: number[]
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   nestedQuery?: any
   esPaginationOptions?: EsPaginationOptions
   sortOptions?: SortOptions
diff --git a/src/@utils/aquarius.ts b/src/@utils/aquarius.ts
index 71c7f2916..8dd550fab 100644
--- a/src/@utils/aquarius.ts
+++ b/src/@utils/aquarius.ts
@@ -9,6 +9,10 @@ import { PriceList, getAssetsPriceList } from './subgraph'
 import axios, { CancelToken, AxiosResponse } from 'axios'
 import { OrdersData_tokenOrders as OrdersData } from '../@types/apollo/OrdersData'
 import { metadataCacheUri } from '../../app.config'
+import {
+  SortDirectionOptions,
+  SortTermOptions
+} from '../@types/aquarius/SearchQuery'
 
 export const MAXIMUM_NUMBER_OF_PAGES_WITH_RESULTS = 476
 
diff --git a/src/components/@shared/AssetList/AssetList.tsx b/src/components/@shared/AssetList/AssetList.tsx
index b03560707..ac7cd6548 100644
--- a/src/components/@shared/AssetList/AssetList.tsx
+++ b/src/components/@shared/AssetList/AssetList.tsx
@@ -41,22 +41,27 @@ const AssetList: React.FC<AssetListProps> = ({
   noPublisher
 }) => {
   const { chainIds } = useUserPreferences()
-  const [assetsWithPrices, setAssetWithPrices] = useState<AssetListPrices[]>()
-  const [loading, setLoading] = useState<boolean>(true)
+  const [assetsWithPrices, setAssetsWithPrices] = useState<AssetListPrices[]>()
+  const [loading, setLoading] = useState<boolean>(isLoading)
   const isMounted = useIsMounted()
+
   useEffect(() => {
     if (!assets) return
-    isLoading && setLoading(true)
+
+    const initialAssets: AssetListPrices[] = assets.map((asset) => ({
+      ddo: asset,
+      price: null
+    }))
+    setAssetsWithPrices(initialAssets)
+    setLoading(false)
 
     async function fetchPrices() {
-      const asset = await getAssetsBestPrices(assets)
+      const assetsWithPrices = await getAssetsBestPrices(assets)
       if (!isMounted()) return
-      setAssetWithPrices(asset)
-      setLoading(false)
+      setAssetsWithPrices(assetsWithPrices)
     }
-
     fetchPrices()
-  }, [assets])
+  }, [assets, isMounted])
 
   // // This changes the page field inside the query
   function handlePageChange(selected: number) {
@@ -72,9 +77,7 @@ const AssetList: React.FC<AssetListProps> = ({
     <div className={styleClasses}>
       <div className={styles.empty}>No network selected</div>
     </div>
-  ) : assetsWithPrices &&
-    !loading &&
-    (isLoading === undefined || isLoading === false) ? (
+  ) : assetsWithPrices && !loading ? (
     <>
       <div className={styleClasses}>
         {assetsWithPrices.length > 0 ? (
diff --git a/src/components/Asset/AssetActions/Compute/index.tsx b/src/components/Asset/AssetActions/Compute/index.tsx
index 347a0006b..f481818ba 100644
--- a/src/components/Asset/AssetActions/Compute/index.tsx
+++ b/src/components/Asset/AssetActions/Compute/index.tsx
@@ -38,6 +38,7 @@ import AssetActionHistoryTable from '../AssetActionHistoryTable'
 import ComputeJobs from '../../../Profile/History/ComputeJobs'
 import { useCancelToken } from '@hooks/useCancelToken'
 import { useIsMounted } from '@hooks/useIsMounted'
+import { SortTermOptions } from '../../../../@types/aquarius/SearchQuery'
 
 export default function Compute({
   dtBalance,
diff --git a/src/components/Asset/AssetActions/Edit/FormEditComputeDataset.tsx b/src/components/Asset/AssetActions/Edit/FormEditComputeDataset.tsx
index 6da9fa9a8..898070af3 100644
--- a/src/components/Asset/AssetActions/Edit/FormEditComputeDataset.tsx
+++ b/src/components/Asset/AssetActions/Edit/FormEditComputeDataset.tsx
@@ -15,6 +15,7 @@ import { publisherTrustedAlgorithm as PublisherTrustedAlgorithm } from '@oceanpr
 import { useSiteMetadata } from '@hooks/useSiteMetadata'
 import FormActions from './FormActions'
 import { useCancelToken } from '@hooks/useCancelToken'
+import { SortTermOptions } from '../../../../@types/aquarius/SearchQuery'
 
 export default function FormEditComputeDataset({
   data,