DRY refactor, use AssetList component

src/components/organisms/AssetList.module.css

@@ -10,3 +10,8 @@
     gap: var(--spacer);
   }
 }
+
+.empty {
+  color: var(--color-secondary);
+  font-size: var(--font-size-small);
+}

src/components/organisms/AssetList.tsx

@@ -1,18 +1,20 @@
 import AssetTeaser from '../molecules/AssetTeaser'
 import React from 'react'
 import { QueryResult } from '@oceanprotocol/lib/dist/node/metadatastore/MetadataStore'
-import shortid from 'shortid'
 import Pagination from '../molecules/Pagination'
 import { updateQueryStringParameter } from '../../utils'
 import styles from './AssetList.module.css'
 import { MetaDataMarket } from '../../@types/MetaData'
 import { DDO } from '@oceanprotocol/lib'
+import { oceanConfig } from '../../../app.config'
 
 declare type AssetListProps = {
   queryResult: QueryResult
 }
 
 const AssetList: React.FC<AssetListProps> = ({ queryResult }) => {
+  // TODO: restore Pagination behavior
+
   // Construct the urls on the pagination links. This is only for UX,
   // since the links are no <Link> they will not work by itself.
   // function hrefBuilder(pageIndex: number) {
@@ -38,20 +40,21 @@ const AssetList: React.FC<AssetListProps> = ({ queryResult }) => {
   return (
     <>
       <div className={styles.assetList}>
-        {queryResult &&
+        {queryResult && queryResult.totalResults > 0 ? (
           queryResult.results.map((ddo: DDO) => {
             const { attributes }: MetaDataMarket = new DDO(
               ddo
             ).findServiceByType('metadata')
 
             return (
-              <AssetTeaser
-                did={ddo.id}
-                metadata={attributes}
-                key={shortid.generate()}
-              />
+              <AssetTeaser did={ddo.id} metadata={attributes} key={ddo.id} />
             )
-          })}
+          })
+        ) : (
+          <div className={styles.empty}>
+            No data sets found in {oceanConfig.metadataStoreUri}
+          </div>
+        )}
       </div>
       {/* <Pagination
         totalPages={queryResult.totalPages}

src/components/pages/Home.module.css

@@ -1,9 +1 @@
-.grid {
-  composes: assetList from '../organisms/AssetList.module.css';
-  margin-top: calc(var(--spacer) * 2);
-}
 
-.empty {
-  color: var(--color-secondary);
-  font-size: var(--font-size-small);
-}

src/components/pages/Home.tsx

@@ -4,57 +4,46 @@ import { ServiceMetaDataMarket } from '../../@types/MetaData'
 import AssetTeaser from '../molecules/AssetTeaser'
 import styles from './Home.module.css'
 import { oceanConfig } from '../../../app.config'
-import { DDO, MetadataStore, Logger } from '@oceanprotocol/lib'
+import { MetadataStore, Logger } from '@oceanprotocol/lib'
+import AssetList from '../organisms/AssetList'
+import { QueryResult } from '@oceanprotocol/lib/dist/node/metadatastore/MetadataStore'
+
+async function getLatestAssets() {
+  try {
+    const metadataStore = new MetadataStore(
+      oceanConfig.metadataStoreUri,
+      Logger
+    )
+
+    const result = await metadataStore.queryMetadata({
+      page: 1,
+      offset: 10,
+      query: {},
+      sort: { created: -1 }
+    })
+
+    return result
+  } catch (error) {
+    console.error(error.message)
+  }
+}
 
 export default function HomePage(): ReactElement {
-  const [assets, setAssets] = useState<DDO[]>()
+  const [queryResult, setQueryResult] = useState<QueryResult>()
 
   useEffect(() => {
-    async function getLatestAssets() {
-      try {
-        const metadataStore = new MetadataStore(
-          oceanConfig.metadataStoreUri,
-          Logger
-        )
-
-        const result = await metadataStore.queryMetadata({
-          page: 1,
-          offset: 10,
-          query: {},
-          sort: { created: -1 }
-        })
-
-        result && result.results && setAssets(result.results)
-      } catch (error) {
-        console.error(error.message)
-      }
+    async function init() {
+      const results = await getLatestAssets()
+      setQueryResult(results)
     }
-    getLatestAssets()
+    init()
   }, [])
 
   return (
     <>
       <SearchBar large />
-
-      {assets && (
-        <div className={styles.grid}>
-          {assets.length ? (
-            assets.map((ddo: DDO) => {
-              const {
-                attributes
-              }: ServiceMetaDataMarket = ddo.findServiceByType('metadata')
-
-              return (
-                <AssetTeaser key={ddo.id} did={ddo.id} metadata={attributes} />
-              )
-            })
-          ) : (
-            <div className={styles.empty}>
-              No data sets found in {oceanConfig.metadataStoreUri}
-            </div>
-          )}
-        </div>
-      )}
+      <h3>Latest Data Sets</h3>
+      {queryResult && <AssetList queryResult={queryResult} />}
     </>
   )
 }