DataPage.tsx

import React, { ReactElement, useEffect } from "react";
import { Container, Row } from "react-bootstrap";

import OrganizationSidebar from "./sidebar/OrganizationSidebar";
import PageHeader from "../components/global/PageHeader"
import SectionNavigation from "./SectionNavigation";
import { Sections } from "../helpers/constants";
import PolicySidebar from "./sidebar/PolicySidebar";

import { Chart as ChartJS } from 'chart.js';
import { usePreview } from "../helpers/usePreview";
import NetworkSidebar from "./sidebar/NetworkSidebar";
import ConnectedUsersSidebar from "./sidebar/ConnectedUsersSidebar";
import ServicesSidebar from "./sidebar/ServicesSidebar";
import DownloadContainer from "./download/DownloadContainer";
import useMatomo from "../matomo/UseMatomo";
import { NrenAndYearDatapoint } from "../Schema";


ChartJS.defaults.font.size = 16;
ChartJS.defaults.font.family = 'Open Sans';
ChartJS.defaults.font.weight = 700;

interface inputProps {
    title: string,
    description?: string | ReactElement,
    filter: ReactElement,
    children: ReactElement,
    category: Sections,
    data: NrenAndYearDatapoint[],
    filename: string,
}

function DataPage({ title, description, filter, children, category, data, filename }: inputProps): ReactElement {
    const preview = usePreview();
    const locationWithoutPreview = window.location.origin + window.location.pathname;

    const { trackPageView } = useMatomo()

    useEffect(() => {
        trackPageView({
            documentTitle: title
        })
    }, [trackPageView, title])

    return (
        <>
            {category === Sections.Organisation && <OrganizationSidebar />}
            {category === Sections.Policy && <PolicySidebar />}
            {category === Sections.Network && <NetworkSidebar />}
            {category === Sections.ConnectedUsers && <ConnectedUsersSidebar />}
            {category === Sections.Services && <ServicesSidebar />}
            <PageHeader type={'data'} />
            {preview && <Row className="preview-banner">
                <span>You are viewing a preview of the website which includes pre-published survey data. <a href={locationWithoutPreview}>Click here</a> to deactivate preview mode.</span>
            </Row>}
            <SectionNavigation activeCategory={category} />
            <Container className="mb-5 grow">
                <Row>
                    <h3 className="m-1">{title}</h3>
                </Row>
                <Row>
                    <p className="p-md-4">{description}</p>
                </Row>

                <Row align="right" style={{ position: 'relative' }}>
                    <DownloadContainer data={data} filename={filename} />
                </Row>
                <Row>
                    {filter}
                </Row>
                <Row>
                    {children}
                </Row>
            </Container>
        </>
    );
}

export default DataPage;