Mod/dev 14599 Tanstack Query for Adv Search Results Table

src/js/components/search/resultsView/ResultsView.jsx

@@ -3,15 +3,12 @@
  * Created by Andrea Blackwell
  **/
 
-import React, { useEffect, useState } from "react";
+import React from "react";
 import PropTypes from "prop-types";
-import { isCancel } from "axios";
 import { useSelector } from "react-redux";
 
 import TopFilterBarContainer from "containers/search/topFilterBar/TopFilterBarContainer";
-import SearchAwardsOperation from "models/v1/search/SearchAwardsOperation";
-import { performSpendingByAwardTabCountSearch, areFiltersEqual } from "helpers/searchHelper";
-import { performTabCountSearch } from "helpers/keywordHelper";
+import useResultsCount from "containers/search/resultsView/useResultsCount";
 import NewSearchScreen from "./NewSearchScreen";
 import NoDataScreen from "./NoDataScreen";
 import SectionsContent from "./SectionsContent";
@@ -34,124 +31,57 @@ const ResultsView = React.memo(function ResultsView({
     hash,
     setFilterCount
 }) {
-    const [hasResults, setHasResults] = useState(false);
-    const [resultContent, setResultContent] = useState(null);
-    const [tabData, setTabData] = useState();
-    const [inFlight, setInFlight] = useState(false);
-    const [error, setError] = useState(false);
-
     const filters = useSelector((state) => state.appliedFilters.filters);
     const spendingLevel = useSelector((state) => state.searchView.spendingLevel);
 
-    let countRequest;
-
-    const checkForData = () => {
-        if (countRequest) {
-            countRequest.cancel();
-        }
-
-        const searchParamsTemp = new SearchAwardsOperation();
-        searchParamsTemp.fromState(filters);
+    const { data, error } = useResultsCount(filters, spendingLevel, hash);
 
-        setInFlight(true);
-        setError(false);
+    let content = null;
 
-        if (spendingLevel === 'transactions') {
-            countRequest = performTabCountSearch({
-                filters: searchParamsTemp.toParams(),
-                spending_level: spendingLevel,
-                auditTrail: 'Results View - Tab Counts'
-            });
-        }
-        else {
-            // if subawards is true, newAwardsOnly cannot be true, so we remove dateType
-            if (spendingLevel === 'subawards') {
-                delete searchParamsTemp.dateType;
-            }
+    if (!error && data) {
+        /* eslint-disable camelcase */
+        const {
+            contracts, direct_payments, grants, idvs, loans, other, subgrants, subcontracts
+        } = data.data.results;
+        let resCount = contracts + direct_payments + grants + idvs + loans + other;
 
-            countRequest = performSpendingByAwardTabCountSearch({
-                filters: searchParamsTemp.toParams(),
-                spending_level: spendingLevel,
-                auditTrail: 'Results View - Tab Counts'
-            });
+        if (spendingLevel === 'subawards') {
+            resCount = subgrants + subcontracts;
         }
 
-        countRequest.promise
-            .then((res) => {
-                /* eslint-disable camelcase */
-                setTabData(res.data);
-                const {
-                    contracts, direct_payments, grants, idvs, loans, other, subgrants, subcontracts
-                } = res.data.results;
-                let resCount = contracts + direct_payments + grants + idvs + loans + other;
+        const hasResults = resCount > 0;
+        /* eslint-enable camelcase */
 
-                if (spendingLevel === 'subawards') {
-                    resCount = subgrants + subcontracts;
-                }
-                /* eslint-enable camelcase */
-
-                if (resCount > 0) {
-                    setHasResults(true);
-                }
-                else {
-                    setHasResults(false);
-                }
-
-                setInFlight(false);
-                setError(false);
-            })
-            .catch((err) => {
-                if (!isCancel(err)) {
-                    setInFlight(false);
-                    setError(true);
-                    console.log(err);
-                }
-            });
-    };
-
-    useEffect(() => {
-        if (!areFiltersEqual(filters) || !hash) {
-            checkForData();
+        if (!hash && noFiltersApplied) {
+            content = <NewSearchScreen />;
         }
 
-        return () => {
-            countRequest?.cancel();
-        };
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [filters, spendingLevel]);
-    useEffect(() => {
-        let content = null;
-
-        if (!inFlight && !error) {
-            if (!hash && noFiltersApplied) {
-                content = <NewSearchScreen />;
+        if (!noFiltersApplied) {
+            if (hasResults) {
+                content = (
+                    <SectionsContent
+                        tabData={data.data}
+                        hash={hash}
+                        spendingLevel={spendingLevel} />
+                );
             }
-
-            if (!noFiltersApplied) {
-                if (hasResults) {
-                    content = (
-                        <SectionsContent
-                            tabData={tabData}
-                            hash={hash}
-                            spendingLevel={spendingLevel} />
-                    );
-                }
-                else {
-                    content = <NoDataScreen />;
-                }
+            else {
+                content = <NoDataScreen />;
             }
         }
-
-        setResultContent(content);
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [noFiltersApplied, hasResults, inFlight, error, hash]);
+    }
 
     return (
         <div className="search-results-view-container">
             <div className="search-results-wrapper">
-                <TopFilterBarContainer resultsView filters={filters} setFilterCount={setFilterCount} />
-                <div className={`search-results ${showMobileFilters && isMobile ? 'behind-filters' : ''}`}>
-                    {resultContent}
+                <TopFilterBarContainer
+                    resultsView
+                    filters={filters}
+                    setFilterCount={setFilterCount} />
+                <div className={`search-results ${
+                    showMobileFilters && isMobile ? 'behind-filters' : ''
+                }`}>
+                    {content}
                 </div>
             </div>
         </div>

src/js/components/search/resultsView/SectionsContent.jsx

@@ -6,21 +6,34 @@
 import React, { useEffect, useState } from "react";
 import PropTypes from "prop-types";
 
+import Analytics from "helpers/analytics/Analytics";
 import TableSection from "./table/TableSection";
 import CategoriesSection from "./categories/CategoriesSection";
 import TimeSection from "./time/TimeSection";
 import MapSection from "./map/MapSection";
-import Analytics from "../../../helpers/analytics/Analytics";
 
 require("pages/search/searchPage.scss");
 
+const logVisualizationViewEvent = (action, label) => window.setTimeout(
+    () => Analytics.event({
+        event: 'search_visualization_type',
+        category: 'Advanced Search - Visualization Type',
+        action,
+        gtm: true,
+        label
+    }), 15 * 1000);
+
 const propTypes = {
     tabData: PropTypes.object,
     hash: PropTypes.string,
     spendingLevel: PropTypes.string
 };
 
-const SectionsContent = (props) => {
+const SectionsContent = ({
+    tabData,
+    hash,
+    spendingLevel
+}) => {
     const [observerSupported, setObserverSupported] = useState(false);
     const [timeHasLoaded, setTimeHasLoaded] = useState(false);
     const [categoriesHasLoaded, setCategoriesHasLoaded] = useState(false);
@@ -30,44 +43,31 @@ const SectionsContent = (props) => {
         threshold: 0.1
     };
 
-    const logVisualizationViewEvent = (activeLabel) => {
-        window.setTimeout(() => {
-            Analytics.event({
-                event: 'search_visualization_type',
-                category: 'Advanced Search - Visualization Type',
-                action: activeLabel,
-                gtm: true,
-                label: props.hash
-            });
-        }, 15 * 1000);
-    };
-
     const callbackFunction = (entries) => {
         entries.forEach((entry) => {
             const section = entry.target.className;
             if (entry.isIntersecting) {
                 if (section === 'awards') {
-                    logVisualizationViewEvent("awards");
+                    logVisualizationViewEvent("awards", hash);
                 }
                 else if (section === 'time') {
                     setTimeHasLoaded(true);
-                    logVisualizationViewEvent("time");
+                    logVisualizationViewEvent("time", hash);
                 }
                 else if (section === 'categories') {
                     setCategoriesHasLoaded(true);
-                    logVisualizationViewEvent("categories");
+                    logVisualizationViewEvent("categories", hash);
                 }
                 else if (section === "map") {
                     setMapHasLoaded(true);
-                    logVisualizationViewEvent("map");
+                    logVisualizationViewEvent("map", hash);
                 }
             }
         });
     };
 
     useEffect(() => {
         setObserverSupported('IntersectionObserver' in window);
-        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
 
     // eslint-disable-next-line consistent-return
@@ -88,25 +88,28 @@ const SectionsContent = (props) => {
             return () => observer.disconnect();
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [observerSupported, props.hash]);
+    }, [observerSupported, hash]);
 
     return (
         <>
-            <TableSection {...props} />
+            <TableSection
+                tabData={tabData}
+                hash={hash}
+                spendingLevel={spendingLevel} />
             <CategoriesSection
-                spendingLevel={props.spendingLevel}
+                spendingLevel={spendingLevel}
                 categoriesHasLoaded={categoriesHasLoaded}
                 setSelectedDropdown={setSelectedDropdown}
                 selectedDropdown={selectedDropdown}
-                hash={props.hash} />
+                hash={hash} />
             <TimeSection
                 timeHasLoaded={timeHasLoaded}
-                hash={props.hash}
-                spendingLevel={props.spendingLevel} />
+                hash={hash}
+                spendingLevel={spendingLevel} />
             <MapSection
-                spendingLevel={props.spendingLevel}
+                spendingLevel={spendingLevel}
                 mapHasLoaded={mapHasLoaded}
-                hash={props.hash} />
+                hash={hash} />
         </>
     );
 };

src/js/components/search/resultsView/table/TableSection.jsx

@@ -2,9 +2,9 @@
  * TableSection.jsx
  */
 
-import React from "react";
+import React, { useMemo } from "react";
 import PropTypes from "prop-types";
-import ResultsTableContainer from "../../../../containers/search/resultsView/ResultsTableContainer";
+import ResultsTableContainer from "containers/search/resultsView/ResultsTableContainer";
 
 import TableDsm from "./TableDsm";
 
@@ -17,27 +17,19 @@ const propTypes = {
 const TableSection = ({
     tabData, hash, spendingLevel
 }) => {
-    const sectionTitle = () => {
-        switch (spendingLevel) {
-            case 'awards': return 'Prime Award Results';
-            case 'subawards': return 'Subaward Results';
-            default: return 'Transaction Results';
-        }
-    };
+    const sectionTitle = spendingLevel === "awards" ? 'Prime Award Results' : 'Subaward Results';
 
-    const wrapperProps = {
-        sectionTitle: sectionTitle(),
-        dsmContent: <TableDsm spendingLevel={spendingLevel} />,
-        sectionName: 'table'
-    };
+    const dsmContent = useMemo(() => <TableDsm spendingLevel={spendingLevel} />, [spendingLevel]);
 
     return (
         <div id="search-page-component" className="awards">
             <ResultsTableContainer
                 tabData={tabData}
-                wrapperProps={wrapperProps}
                 hash={hash}
-                spendingLevel={spendingLevel} />
+                spendingLevel={spendingLevel}
+                sectionTitle={sectionTitle}
+                dsmContent={dsmContent}
+                sectionName="table" />
         </div>
     );
 };

src/js/containers/account/awards/AccountAwardsContainer.jsx

@@ -15,7 +15,7 @@ import * as SearchHelper from 'helpers/searchHelper';
 import { defaultColumns, defaultSort } from 'dataMapping/search/awardTableColumns';
 import AccountAwardSearchOperation from 'models/v1/account/queries/AccountAwardSearchOperation';
 import ResultsTableSection from 'components/search/resultsView/table/ResultsTableSection';
-import { tableTypes, subTypes } from 'containers/search/resultsView/ResultsTableContainer';
+import { tableTypes, subTypes } from 'dataMapping/search/resultsView/table';
 import { SectionHeader } from "data-transparency-ui";
 
 const propTypes = {