From ff23ac43ebcbb7215f5df53857a040efcc29c35d Mon Sep 17 00:00:00 2001
From: Jay Hodgson <jay.hodgson@sagebase.org>
Date: Fri, 2 Feb 2024 14:52:21 -0800
Subject: [PATCH] PORTALS-2908: add Announcements section to the NF Browse
 Tools page, and clean up PopularSearches

---
 .../portal-components/nf/BrowseToolsPage.tsx  | 21 +++++-
 .../portal-components/nf/PopularSearches.tsx  | 66 +++++--------------
 .../nf/style/_BrowseToolsPage.scss            |  3 +
 3 files changed, 41 insertions(+), 49 deletions(-)

diff --git a/apps/portals/src/portal-components/nf/BrowseToolsPage.tsx b/apps/portals/src/portal-components/nf/BrowseToolsPage.tsx
index 46891ba8ed..8b41f297e6 100644
--- a/apps/portals/src/portal-components/nf/BrowseToolsPage.tsx
+++ b/apps/portals/src/portal-components/nf/BrowseToolsPage.tsx
@@ -12,6 +12,7 @@ import { ReactComponent as PlasmidsReagents } from './assets/plasmids-reagents.s
 import PopularSearches from './PopularSearches'
 import { Form } from 'react-bootstrap'
 import pluralize from 'pluralize'
+import PortalComponents from '../../portal-components'
 
 export const gotoExploreToolsWithFullTextSearch = (
   fullTextSearchString: string,
@@ -218,6 +219,25 @@ const BrowseToolsPage = () => {
           </SynapseComponents.WideButton>
         </div>
       </Layout>
+      <Layout outsideContainerClassName="home-container-description  home-bg-dark home-spacer">
+        <Typography variant="sectionTitle" className="sectionTitle">
+          Announcements
+        </Typography>
+        <PortalComponents.Ecosystem
+          config={[
+            {
+              title: 'Free Cell Lines',
+              ownerId: 'syn26451327',
+              wikiId: '614272',
+            },
+            {
+              title: 'Acquire Tissue',
+              ownerId: 'syn26451327',
+              wikiId: '625915',
+            },
+          ]}
+        />
+      </Layout>
       <Layout outsideContainerClassName="home-spacer highlightSubmitToolContainer">
         <Typography variant="sectionTitle" className="sectionTitle">
           Submit a Tool to NF Research Tools Central
@@ -249,5 +269,4 @@ const BrowseToolsPage = () => {
     </div>
   )
 }
-
 export default BrowseToolsPage
diff --git a/apps/portals/src/portal-components/nf/PopularSearches.tsx b/apps/portals/src/portal-components/nf/PopularSearches.tsx
index ef6c1dace2..bae0364771 100644
--- a/apps/portals/src/portal-components/nf/PopularSearches.tsx
+++ b/apps/portals/src/portal-components/nf/PopularSearches.tsx
@@ -1,13 +1,9 @@
-import React, { useEffect, useState } from 'react'
-import {
-  SynapseClient,
-  SynapseConstants,
-  SynapseContextUtils,
-  SynapseUtilityFunctions,
-} from 'synapse-react-client'
-import { QueryBundleRequest, RowSet } from '@sage-bionetworks/synapse-types'
+import React from 'react'
+import { SynapseConstants, SynapseUtilityFunctions } from 'synapse-react-client'
+import { QueryBundleRequest } from '@sage-bionetworks/synapse-types'
 import { gotoExploreToolsWithFullTextSearch } from './BrowseToolsPage'
 import { Link } from '@mui/material'
+import { SynapseQueries } from 'synapse-react-client'
 
 export type PopularSearchesProps = {
   sql: string
@@ -19,47 +15,21 @@ export type PopularSearchesProps = {
 const PopularSearches: React.FunctionComponent<PopularSearchesProps> = ({
   sql,
 }) => {
-  const { accessToken } = SynapseContextUtils.useSynapseContext()
-  const [rowSet, setRowSet] = useState<RowSet>()
-  const [isLoading, setIsLoading] = useState<boolean>()
-  let mounted = true
-  useEffect(() => {
-    const fetchData = async function () {
-      setIsLoading(true)
-      const entityId =
-        SynapseUtilityFunctions.parseEntityIdFromSqlStatement(sql)
-      const partMask = SynapseConstants.BUNDLE_MASK_QUERY_RESULTS
-      const request: QueryBundleRequest = {
-        partMask,
-        concreteType: 'org.sagebionetworks.repo.model.table.QueryBundleRequest',
-        entityId,
-        query: {
-          sql,
-          limit: 4,
-        },
-      }
+  const partMask = SynapseConstants.BUNDLE_MASK_QUERY_RESULTS
+  const entityId = SynapseUtilityFunctions.parseEntityIdFromSqlStatement(sql)
+  const request: QueryBundleRequest = {
+    partMask,
+    concreteType: 'org.sagebionetworks.repo.model.table.QueryBundleRequest',
+    entityId,
+    query: {
+      sql,
+      limit: 4,
+    },
+  }
+  const { data: queryResultResponse, isLoading } =
+    SynapseQueries.useGetQueryResultBundleWithAsyncStatus(request)
 
-      const queryResultBundle = await SynapseClient.getQueryTableResults(
-        request,
-        accessToken,
-      )
-      setIsLoading(false)
-      const { queryResult } = queryResultBundle
-      const queryResults = queryResult?.queryResults
-      if (queryResults) {
-        if (mounted) {
-          setRowSet(queryResults)
-        }
-      } else {
-        console.log('PopularSearches: Error getting data')
-      }
-    }
-    fetchData()
-
-    return () => {
-      mounted = false
-    }
-  }, [sql, accessToken])
+  const rowSet = queryResultResponse?.responseBody?.queryResult?.queryResults
 
   return (
     <div className="PopularSearches">
diff --git a/apps/portals/src/portal-components/nf/style/_BrowseToolsPage.scss b/apps/portals/src/portal-components/nf/style/_BrowseToolsPage.scss
index 49f3aec249..f50cebe04a 100644
--- a/apps/portals/src/portal-components/nf/style/_BrowseToolsPage.scss
+++ b/apps/portals/src/portal-components/nf/style/_BrowseToolsPage.scss
@@ -77,4 +77,7 @@
       background-color: #dc6525;
     }
   }
+  .Ecosystem {
+    padding-bottom: 0px;
+  }
 }