Minor touchups

compendium-frontend/src/components/DataPage.tsx

-import React, { ReactElement } from "react";
+import React, { ReactElement, useEffect } from "react";
 import { Container, Row } from "react-bootstrap";
 
 import OrganizationSidebar from "./sidebar/OrganizationSidebar";
@@ -14,6 +14,7 @@ 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;
@@ -26,8 +27,8 @@ interface inputProps {
     filter: ReactElement,
     children: ReactElement,
     category: Sections,
-    data?: any,
-    filename?: string,
+    data: NrenAndYearDatapoint[],
+    filename: string,
 }
 
 function DataPage({ title, description, filter, children, category, data, filename }: inputProps): ReactElement {
@@ -36,11 +37,11 @@ function DataPage({ title, description, filter, children, category, data, filena
 
     const { trackPageView } = useMatomo()
 
-    React.useEffect(() => {
+    useEffect(() => {
         trackPageView({
             documentTitle: title
         })
-    }, [trackPageView])
+    }, [trackPageView, title])
 
     return (
         <>
@@ -61,10 +62,10 @@ function DataPage({ title, description, filter, children, category, data, filena
                 <Row>
                     <p className="p-md-4">{description}</p>
                 </Row>
-                {data && filename &&
+
                 <Row align="right" style={{ position: 'relative' }}>
                     <DownloadContainer data={data} filename={filename} />
-                    </Row>}
+                </Row>
                 <Row>
                     {filter}
                 </Row>

compendium-frontend/src/components/download/DownloadContainer.tsx

@@ -3,8 +3,13 @@ import DownloadDataButton from "./DownloadDataButton";
 import DownloadImageChartButton from "./DownloadImageChartButton";
 
 import { ExportType } from "../../helpers/constants";
+import { NrenAndYearDatapoint } from "../../Schema";
 
-const DownloadContainer = ({ data, filename }) => {
+interface DownloadProps {
+    data: NrenAndYearDatapoint[];
+    filename: string;
+}
+const DownloadContainer = ({ data, filename }: DownloadProps) => {
     return <div className="downloadcontainer">
         <DownloadDataButton data={data} filename={`${filename}.csv`} exportType={ExportType.CSV} />
         <DownloadDataButton data={data} filename={`${filename}.xlsx`} exportType={ExportType.EXCEL} />

compendium-frontend/src/components/download/DownloadDataButton.tsx

@@ -2,16 +2,17 @@ import React from 'react';
 import * as XLSX from "xlsx";
 import { ExportType } from "../../helpers/constants";
 import { FaDownload } from 'react-icons/fa';
+import { NrenAndYearDatapoint } from '../../Schema';
 
 
 interface DownloadProps {
-    data: any[];
+    data: NrenAndYearDatapoint[];
     filename: string;
     exportType: ExportType;
 }
 
 
-function createCSVRows(jsonData: any[], header: string[]): string[] {
+function createCSVRows(jsonData: NrenAndYearDatapoint[], header: string[]): string[] {
     return jsonData.map(obj => {
         return header.map(fieldName => {
             const value = obj[fieldName];
@@ -31,7 +32,7 @@ function createCSVRows(jsonData: any[], header: string[]): string[] {
 }
 
 
-function convertToCSV(jsonData: any[]): string {
+function convertToCSV(jsonData: NrenAndYearDatapoint[]): string {
     if (!jsonData.length) return "";
 
     const header = Object.keys(jsonData[0]);
@@ -41,7 +42,7 @@ function convertToCSV(jsonData: any[]): string {
     return [header.join(','), ...rows].join('\r\n');
 }
 
-function convertToExcel(jsonData: any[], sheetName = "Sheet1"): Blob {
+function convertToExcel(jsonData: NrenAndYearDatapoint[], sheetName = "Sheet1"): Blob {
     const ws = XLSX.utils.json_to_sheet(jsonData);
     const wb = XLSX.utils.book_new();
     XLSX.utils.book_append_sheet(wb, ws, sheetName);

compendium-frontend/src/helpers/useData.tsx

@@ -38,7 +38,7 @@ export function useData<Datatype extends NrenAndYearDatapoint>(url, setFilterSel
                     return { selectedYears: newSelectedYears, selectedNrens: newSelectedNrens };
                 });
             });
-    }, [loadUrl, setFilterSelection]);
+    }, [loadUrl, setFilterSelection]); // eslint-disable-line react-hooks/exhaustive-deps
 
     const { years, nrens } = useMemo(
         () => getYearsAndNrens(data),