DataPage.tsx

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

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

import { Chart as ChartJS } from 'chart.js';
import { usePreview } from "../helpers/usePreview";
import NetworkSidebar from "./NetworkSidebar";
import ConnectedUsersSidebar from "./ConnectedUsersSidebar";
import ServicesSidebar from "./ServicesSidebar";

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

interface inputProps {
    title: string,
    description?: string,
    filter: ReactElement,
    children: ReactElement,
    category: Sections
}

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

    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="grow">
                <Row>
                    <h3 className="m-4">{title}</h3>
                </Row>
                <Row>
                    <p className="p-md-4">{description}</p>
                </Row>
                <Row>
                    {filter}
                </Row>
                <Row>
                    {children}
                </Row>
            </Container>
        </>
    );
}

export default DataPage;