InteractiveDataSourcesPage.jsx

import React, { useState, useEffect } from 'react';
import { useNavigate } from 'react-router';
import { find, throttle, uniqueId } from 'lodash-es';
import { useDispatch } from 'react-redux';
import { ComingSoon, FlexGridCol } from 'data-transparency-ui';

import { combineQueryParams, getQueryParamString } from 'helpers/queryParams';
import { getBaseUrl, handleShareOptionClick } from 'helpers/socialShare';
import { stickyHeaderHeight } from 'dataMapping/stickyHeader/stickyHeader';
import { interactiveDataSourcesPageMetaTags } from 'helpers/metaTagHelper';
import PageWrapper from 'components/sharedComponents/PageWrapper';
import DownloadStaticFile from "components/sharedComponents/DownloadStaticFile";
import ShareIcon508 from 'components/sharedComponents/buttons/ShareIcon508';
import { showModal } from 'redux/actions/modal/modalActions';
import useQueryParams from "hooks/useQueryParams";
import InteractiveDataSourcesSection from './InteractiveDataSourcesSection';
import AboutSection from './sections/AboutSection';
import IntroSection from './sections/IntroSection';
import FederalSpendingOverview from './scrollerSections/FederalSpendingOverview';
import DataTypes from './scrollerSections/DataTypes';
import DataSubmissionExtraction from './scrollerSections/DataSubmissionExtraction';
import Frequency from './scrollerSections/Frequency';
import DataValidation from './scrollerSections/DataValidation';
import DataFeatures from './scrollerSections/DataFeatures';
import DataUseCases from './scrollerSections/DataUseCases';
import DataAvailable from './scrollerSections/DataAvailable';
import DataSourceSystems from './scrollerSections/DataSourceSystems';
import AccountData from './scrollerSections/AccountData';
import AwardData from './scrollerSections/AwardData';
import AdditionalData from './scrollerSections/AdditionalData';

require('pages/interactiveDataSources/index.scss');

const InteractiveDataSourcesPage = () => {
    const [activeSection, setActiveSection] = useState('intro-section');
    const query = useQueryParams();
    const history = useNavigate();
    const dispatch = useDispatch();
    const handleShareDispatch = (url) => {
        dispatch(showModal(url));
    };
    const sections = [
        {
            section: 'intro-section',
            label: 'Introduction',
            showSectionWrapper: false,
            scroller: false,
            component: <IntroSection />
        },
        {
            section: 'history-section',
            label: 'History of the DATA Act',
            showSectionWrapper: false,
            scroller: false,
            component: <AboutSection />
        },
        {
            section: 'federal-spending-overview',
            label: 'Federal Spending Overview',
            showSectionWrapper: false,
            scroller: true,
            component: <FederalSpendingOverview title="Federal Spending Overview" subtitle="How do federal dollars move from Congress to the American people?" />
        },
        {
            section: 'data-available',
            label: 'Data Available on USAspending.gov',
            showSectionWrapper: false,
            scroller: true,
            component: <DataAvailable title="Data Available on USAspending.gov" subtitle="What kinds of data does USAspending.gov have?" />
        },
        {
            section: 'data-types',
            label: 'Data Types',
            showSectionWrapper: false,
            scroller: true,
            component: <DataTypes title="Data Types" subtitle="How can I understand all the data types on USAspending.gov?" />
        },
        {
            section: 'data-source-systems',
            label: 'Source Systems',
            showSectionWrapper: false,
            scroller: true,
            component: <DataSourceSystems title="Source Systems" subtitle="What government data systems flow into USAspending.gov?" />
        },
        {
            section: 'account-data',
            label: 'Account Data',
            showSectionWrapper: false,
            scroller: true,
            component: <AccountData title="Account Data" subtitle="What are the sources for account data on USAspending.gov?" />
        },
        {
            section: 'award-data',
            label: 'Award Data',
            showSectionWrapper: false,
            scroller: true,
            component: <AwardData title="Award Data" subtitle="What are the sources for award data on USAspending.gov?" />
        },
        {
            section: 'additional-data',
            label: 'Additional Data',
            showSectionWrapper: false,
            scroller: true,
            component: <AdditionalData title="Additional Data" subtitle="What are the sources for additional data on USAspending.gov?" />
        },
        {
            section: 'data-submission-extraction',
            label: 'Data Submission and Extraction',
            showSectionWrapper: false,
            scroller: true,
            component: <DataSubmissionExtraction title="Data Submission and Extraction" subtitle="What data are submitted to, versus extracted by, USAspending.gov?" />
        },
        {
            section: 'frequency',
            label: 'Frequency of Data Updates',
            showSectionWrapper: false,
            scroller: true,
            component: <Frequency title="Frequency of Data Updates" subtitle="How often are data updated on USAspending.gov?" />
        },
        {
            section: 'data-validation',
            label: 'Data Validation',
            showSectionWrapper: false,
            scroller: true,
            component: <DataValidation title="Data Validation" subtitle="How does the Data Broker validate data before they are publicly available?" />
        },
        {
            section: 'data-access',
            label: 'Features on USAspending.gov',
            showSectionWrapper: false,
            scroller: true,
            component: <DataFeatures title="Features on USAspending.gov" subtitle="Where can I find data on USAspending.gov from these sources?" />
        },
        {
            section: 'data-use-cases',
            label: 'Use Cases',
            showSectionWrapper: false,
            scroller: true,
            component: <DataUseCases title="Use Cases" subtitle="What can I do with the data on USAspending.gov?" />
        }
    ];

    const jumpToSection = (section = '') => {
        // we've been provided a section to jump to
        // check if it's a valid section
        const sectionObj = find(sections, ['section', section]);
        if (!sectionObj) return;

        // find the section in dom
        const sectionDom = document.querySelector(`#interactive-data-sources-${sectionObj.section}`);
        if (!sectionDom) return;

        // add section to url
        const newQueryParams = combineQueryParams(query, { section: `${section}` });
        history({
            path: `${getQueryParamString(newQueryParams)}`
        }, { replace: true });

        setActiveSection(section);
        const sectionTop = (sectionDom.offsetTop - stickyHeaderHeight);
        window.scrollTo({
            top: sectionTop + 200,
            left: 0,
            behavior: 'smooth'
        });
    };

    useEffect(() => {
        if (query.section) {
            jumpToSection(query.section);
        }
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [query.section]);

    useEffect(throttle(() => {
        // prevents a console error about react unmounted component leak
        let isMounted = true;
        if (isMounted) {
            const urlSection = query.section;
            if (urlSection) {
                setActiveSection(urlSection);
                jumpToSection(urlSection);
            }
        }
        return () => {
            isMounted = false;
        };
    }, 100), [history, query.section]);

    const emailData = {
        subject: "USAspending Data Sources",
        body: "View a visualization of USAspending data sources on this interactive page: https://www.usaspending.gov/data-sources"
    };

    const handleShare = (name) => {
        handleShareOptionClick(name, `data-sources`, emailData, handleShareDispatch);
    };

    return (
        <PageWrapper
            pageName="interactive-data-sources"
            classNames="usa-da-interactive-data-sources-page"
            metaTagProps={interactiveDataSourcesPageMetaTags}
            title="Data Sources"
            toolBarComponents={[
                <DownloadStaticFile
                    key={uniqueId()}
                    path="/data/data-sources-download.pdf" />,
                <ShareIcon508
                    key={uniqueId()}
                    url={getBaseUrl('data-sources')}
                    onShareOptionClick={handleShare} />
            ]}
            sections={sections}
            activeSection={activeSection}
            jumpToSection={jumpToSection}
            inPageNav>
            <main id="main-content" className="main-content usda__flex-row">
                <FlexGridCol width={12} className="body usda__flex-col">
                    {sections.map((section) => (
                        <InteractiveDataSourcesSection
                            key={section.section}
                            section={section}>
                            {section.component || <ComingSoon />}
                        </InteractiveDataSourcesSection>
                    ))}
                </FlexGridCol>
            </main>
        </PageWrapper>
    );
};
export default InteractiveDataSourcesPage;