From bb69de817d1a574677308b9bdbd3e4f8f5dccbda Mon Sep 17 00:00:00 2001
From: Mohammad Torkashvand <mohammad.torkashvand@geant.org>
Date: Wed, 16 Aug 2023 12:08:29 +0200
Subject: [PATCH] make them a single component

---
 .../src/components/DownloadCSVButton.tsx      | 60 ------------
 .../src/components/DownloadDataButton.tsx     | 97 +++++++++++++++++++
 .../src/components/DownloadExcelButton.tsx    | 45 ---------
 compendium-frontend/src/helpers/constants.ts  |  5 +
 compendium-frontend/src/pages/Budget.tsx      | 21 ++--
 .../src/pages/ChargingStructure.tsx           | 21 ++--
 compendium-frontend/src/pages/ECProjects.tsx  | 19 ++--
 .../src/pages/FundingSource.tsx               | 25 ++---
 .../src/pages/ParentOrganisation.tsx          | 19 ++--
 compendium-frontend/src/pages/StaffGraph.tsx  | 21 ++--
 .../src/pages/SubOrganisation.tsx             | 19 ++--
 11 files changed, 183 insertions(+), 169 deletions(-)
 delete mode 100644 compendium-frontend/src/components/DownloadCSVButton.tsx
 create mode 100644 compendium-frontend/src/components/DownloadDataButton.tsx
 delete mode 100644 compendium-frontend/src/components/DownloadExcelButton.tsx

diff --git a/compendium-frontend/src/components/DownloadCSVButton.tsx b/compendium-frontend/src/components/DownloadCSVButton.tsx
deleted file mode 100644
index b4caf249..00000000
--- a/compendium-frontend/src/components/DownloadCSVButton.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-import React from 'react';
-
-interface DownloadCSVProps {
-    data: any[];
-    filename?: string;
-}
-
-
-function createCSVRows(jsonData: any[], header: string[]): string[] {
-    return jsonData.map(obj => {
-        return header.map(fieldName => {
-            const value = obj[fieldName];
-
-            if (value === null) {
-                return "";
-            }
-
-            // Always wrap strings in double quotes and escape internal double quotes
-            if (typeof value === 'string') {
-                return `"${value.replace(/"/g, '""')}"`;
-            }
-
-            return value;
-        }).join(',');
-    });
-}
-
-
-function convertToCSV(jsonData: any[]): string {
-    if (!jsonData.length) return "";
-
-    const header = Object.keys(jsonData[0]);
-    const rows = createCSVRows(jsonData, header);
-
-    // Combine header and rows with newline characters
-    return [header.join(','), ...rows].join('\r\n');
-}
-
-
-const DownloadCSVButton: React.FC<DownloadCSVProps> = ({ data, filename = 'data.csv' }) => {
-
-    const downloadCSV = () => {
-        const csv = convertToCSV(data);
-        const blob = new Blob([csv], { type: 'text/csv' });
-        const link = document.createElement('a');
-        link.href = URL.createObjectURL(blob);
-        link.download = filename;
-        document.body.appendChild(link);
-        link.click();
-        document.body.removeChild(link);
-    }
-
-    return (
-        <>
-            <button onClick={downloadCSV}>Download CSV</button>
-        </>
-    );
-}
-
-export default DownloadCSVButton;
diff --git a/compendium-frontend/src/components/DownloadDataButton.tsx b/compendium-frontend/src/components/DownloadDataButton.tsx
new file mode 100644
index 00000000..589da67b
--- /dev/null
+++ b/compendium-frontend/src/components/DownloadDataButton.tsx
@@ -0,0 +1,97 @@
+import React from 'react';
+import * as XLSX from "xlsx";
+import {ExportType} from "../helpers/constants";
+import * as buffer from "buffer";
+
+
+
+interface DownloadCSVProps {
+    data: any[];
+    filename: string;
+    exportType?: ExportType;
+}
+
+
+function createCSVRows(jsonData: any[], header: string[]): string[] {
+    return jsonData.map(obj => {
+        return header.map(fieldName => {
+            const value = obj[fieldName];
+
+            if (value === null) {
+                return "";
+            }
+
+            // Always wrap strings in double quotes and escape internal double quotes
+            if (typeof value === 'string') {
+                return `"${value.replace(/"/g, '""')}"`;
+            }
+
+            return value;
+        }).join(',');
+    });
+}
+
+
+function convertToCSV(jsonData: any[]): string {
+    if (!jsonData.length) return "";
+
+    const header = Object.keys(jsonData[0]);
+    const rows = createCSVRows(jsonData, header);
+
+    // Combine header and rows with newline characters
+    return [header.join(','), ...rows].join('\r\n');
+}
+
+function convertToExcel(jsonData: any[], 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);
+    const wbout = XLSX.write(wb, {bookType: 'xlsx', type: 'binary'});
+
+    const buffer = new ArrayBuffer(wbout.length);
+    const view = new Uint8Array(buffer);
+    for (let i = 0; i < wbout.length; i++) {
+        // Convert each character of the binary workbook string to an 8-bit integer and store in the Uint8Array 'view' for blob creation.
+        view[i] = wbout.charCodeAt(i) & 0xFF;
+    }
+
+    return new Blob([buffer], {type: 'application/octet-stream'});
+}
+
+const DownloadDataButton: React.FC<DownloadCSVProps> = ({data, filename, exportType}) => {
+
+    const downloadData = () => {
+        let blob;
+
+        switch (exportType) {
+            case ExportType.EXCEL: {
+                const csv = convertToExcel(data);
+                blob = new Blob([csv], {type: 'application/octet-stream'});
+                filename = filename.endsWith('.xlsx') ? filename : `${filename}.xlsx`;
+                break;
+            }
+            case ExportType.CSV:
+            default: {
+                const csvData = convertToCSV(data);
+                blob = new Blob([csvData], {type: 'text/csv'});
+                filename = filename.endsWith('.csv') ? filename : `${filename}.csv`;
+                break;
+            }
+        }
+
+        const link = document.createElement('a');
+        link.href = URL.createObjectURL(blob);
+        link.download = filename;
+        document.body.appendChild(link);
+        link.click();
+        document.body.removeChild(link);
+    }
+
+    return (
+        <>
+            <button onClick={downloadData}>Download {exportType}</button>
+        </>
+    );
+}
+
+export default DownloadDataButton;
diff --git a/compendium-frontend/src/components/DownloadExcelButton.tsx b/compendium-frontend/src/components/DownloadExcelButton.tsx
deleted file mode 100644
index f51e9e2f..00000000
--- a/compendium-frontend/src/components/DownloadExcelButton.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import React from 'react';
-import * as XLSX from 'xlsx';
-
-interface DownloadExcelProps {
-    data: any[];
-    filename?: string;
-    sheetName?: string;
-}
-
-function convertToExcel(jsonData: any[], 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);
-    const wbout = XLSX.write(wb, { bookType: 'xlsx', type: 'binary' });
-
-    const buffer = new ArrayBuffer(wbout.length);
-    const view = new Uint8Array(buffer);
-    for (let i = 0; i < wbout.length; i++) {
-        // Convert each character of the binary workbook string to an 8-bit integer and store in the Uint8Array 'view' for blob creation.
-        view[i] = wbout.charCodeAt(i) & 0xFF;
-    }
-
-    return new Blob([buffer], { type: 'application/octet-stream' });
-}
-
-const DownloadExcelButton: React.FC<DownloadExcelProps> = ({ data, filename = 'data.xlsx', sheetName }) => {
-
-    const downloadExcel = () => {
-        const blob = convertToExcel(data, sheetName);
-        const link = document.createElement('a');
-        link.href = URL.createObjectURL(blob);
-        link.download = filename;
-        document.body.appendChild(link);
-        link.click();
-        document.body.removeChild(link);
-    }
-
-    return (
-        <>
-            <button onClick={downloadExcel}>Download Excel</button>
-        </>
-    );
-}
-
-export default DownloadExcelButton;
diff --git a/compendium-frontend/src/helpers/constants.ts b/compendium-frontend/src/helpers/constants.ts
index aaed454c..7654b5ac 100644
--- a/compendium-frontend/src/helpers/constants.ts
+++ b/compendium-frontend/src/helpers/constants.ts
@@ -4,4 +4,9 @@ export enum Sections {
     ConnectedUsers = 'CONNECTED USERS',
     Network = 'NETWORK',
     Services = 'SERVICES',
+}
+
+export enum ExportType {
+    CSV = "CSV",
+    EXCEL = "EXCEL",
 }
\ No newline at end of file
diff --git a/compendium-frontend/src/pages/Budget.tsx b/compendium-frontend/src/pages/Budget.tsx
index 7ad98bdc..e3eb58ab 100644
--- a/compendium-frontend/src/pages/Budget.tsx
+++ b/compendium-frontend/src/pages/Budget.tsx
@@ -1,14 +1,17 @@
-import React, { ReactElement, useEffect, useMemo, useState } from 'react';
-import { Row } from "react-bootstrap";
+import React, {ReactElement, useEffect, useMemo, useState} from 'react';
+import {Row} from "react-bootstrap";
 
-import { Budget, FilterSelection } from "../Schema";
-import { createBudgetDataset, getYearsAndNrens, loadDataWithFilterNrenSelectionFallback } from "../helpers/dataconversion";
+import {Budget, FilterSelection} from "../Schema";
+import {
+    createBudgetDataset,
+    getYearsAndNrens,
+    loadDataWithFilterNrenSelectionFallback
+} from "../helpers/dataconversion";
 import DataPage from '../components/DataPage';
 import Filter from "../components/graphing/Filter";
 import LineGraph from "../components/graphing/LineGraph";
-import { Sections } from '../helpers/constants';
-import DownloadCSVButton from "../components/DownloadCSVButton";
-import DownloadExcelButton from "../components/DownloadExcelButton";
+import {ExportType, Sections} from '../helpers/constants';
+import DownloadDataButton from "../components/DownloadDataButton";
 
 interface inputProps {
     filterSelection: FilterSelection
@@ -47,8 +50,8 @@ function BudgetPage({ filterSelection, setFilterSelection }: inputProps): ReactE
         fluctuation of budget over years and with other NRENs.' category={Sections.Organisation} filter={filterNode}>
             <>
                 <Row>
-                    <DownloadCSVButton data={budgetResponse} filename="budget_data.csv"/>
-                    <DownloadExcelButton data={budgetResponse} filename="budget_data.xlsx"/>
+                    <DownloadDataButton data={budgetResponse} filename="budget_data.csv" exportType={ExportType.CSV}/>
+                    <DownloadDataButton data={budgetResponse} filename="budget_data.xlsx" exportType={ExportType.EXCEL}/>
                 </Row>
                 <Row>
                     <LineGraph data={budgetData} />
diff --git a/compendium-frontend/src/pages/ChargingStructure.tsx b/compendium-frontend/src/pages/ChargingStructure.tsx
index 826df886..cae43e56 100644
--- a/compendium-frontend/src/pages/ChargingStructure.tsx
+++ b/compendium-frontend/src/pages/ChargingStructure.tsx
@@ -1,15 +1,18 @@
-import React, { useMemo, useState } from "react";
+import React, {useMemo, useState} from "react";
 import {Row, Table} from "react-bootstrap";
-import { Chart as ChartJS, CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend } from 'chart.js';
+import {BarElement, CategoryScale, Chart as ChartJS, Legend, LinearScale, Title, Tooltip} from 'chart.js';
 
-import { ChargingStructure, FilterSelection } from "../Schema";
-import { createChargingStructureDataLookup, getYearsAndNrens, loadDataWithFilterSelectionFallback } from "../helpers/dataconversion";
+import {ChargingStructure, FilterSelection} from "../Schema";
+import {
+    createChargingStructureDataLookup,
+    getYearsAndNrens,
+    loadDataWithFilterSelectionFallback
+} from "../helpers/dataconversion";
 import ColorPill from "../components/ColorPill";
 import DataPage from "../components/DataPage";
 import Filter from "../components/graphing/Filter";
-import { Sections } from "../helpers/constants";
-import DownloadCSVButton from "../components/DownloadCSVButton";
-import DownloadExcelButton from "../components/DownloadExcelButton";
+import {ExportType, Sections} from "../helpers/constants";
+import DownloadDataButton from "../components/DownloadDataButton";
 
 
 ChartJS.register(
@@ -59,8 +62,8 @@ function ChargingStructurePage({ filterSelection, setFilterSelection }: inputPro
         category={Sections.Organisation} filter={filterNode}>
             <>
                 <Row>
-                    <DownloadCSVButton data={chargingStructureData} filename="charging_mechanism_of_nrens_per_year.csv"/>
-                    <DownloadExcelButton data={chargingStructureData} filename="charging_mechanism_of_nrens_per_year.xlsx"/>
+                    <DownloadDataButton data={chargingStructureData} filename="charging_mechanism_of_nrens_per_year.csv" exportType={ExportType.CSV}/>
+                    <DownloadDataButton data={chargingStructureData} filename="charging_mechanism_of_nrens_per_year.xlsx" exportType={ExportType.EXCEL} />
                 </Row>
                 <Table className="charging-struct-table" striped bordered responsive>
                     <colgroup>
diff --git a/compendium-frontend/src/pages/ECProjects.tsx b/compendium-frontend/src/pages/ECProjects.tsx
index 0659c101..b2dbc05a 100644
--- a/compendium-frontend/src/pages/ECProjects.tsx
+++ b/compendium-frontend/src/pages/ECProjects.tsx
@@ -1,13 +1,16 @@
-import React, { useEffect, useMemo, useState } from 'react';
+import React, {useEffect, useMemo, useState} from 'react';
 import {Row, Table} from "react-bootstrap";
 
-import { ECProject, FilterSelection } from "../Schema";
-import { createECProjectsDataLookup, getYearsAndNrens, loadDataWithFilterSelectionFallback } from '../helpers/dataconversion';
+import {ECProject, FilterSelection} from "../Schema";
+import {
+    createECProjectsDataLookup,
+    getYearsAndNrens,
+    loadDataWithFilterSelectionFallback
+} from '../helpers/dataconversion';
 import DataPage from '../components/DataPage';
 import Filter from "../components/graphing/Filter"
-import { Sections } from '../helpers/constants';
-import DownloadCSVButton from "../components/DownloadCSVButton";
-import DownloadExcelButton from "../components/DownloadExcelButton";
+import {ExportType, Sections} from '../helpers/constants';
+import DownloadDataButton from "../components/DownloadDataButton";
 
 
 interface inputProps {
@@ -63,8 +66,8 @@ function ECProjects({ filterSelection, setFilterSelection }: inputProps) {
         category={Sections.Organisation} filter={filterNode}>
             <>
                 <Row>
-                    <DownloadCSVButton data={projectData} filename="nren_involvement_in_european_commission_projects.csv"/>
-                    <DownloadExcelButton data={projectData} filename="nren_involvement_in_european_commission_projects.xlsx"/>
+                    <DownloadDataButton data={projectData} filename="nren_involvement_in_european_commission_projects.csv" exportType={ExportType.CSV}/>
+                    <DownloadDataButton data={projectData} filename="nren_involvement_in_european_commission_projects.xlsx" exportType={ExportType.EXCEL}/>
                 </Row>
                 <Table borderless className='compendium-table'>
                     <thead>
diff --git a/compendium-frontend/src/pages/FundingSource.tsx b/compendium-frontend/src/pages/FundingSource.tsx
index aa7fbddf..599e7a72 100644
--- a/compendium-frontend/src/pages/FundingSource.tsx
+++ b/compendium-frontend/src/pages/FundingSource.tsx
@@ -1,17 +1,20 @@
-import React, { useEffect, useMemo, useState } from 'react';
-import { Bar } from 'react-chartjs-2';
-import { Col, Row } from "react-bootstrap";
-import { Chart as ChartJS } from 'chart.js';
+import React, {useEffect, useMemo, useState} from 'react';
+import {Bar} from 'react-chartjs-2';
+import {Col, Row} from "react-bootstrap";
+import {Chart as ChartJS} from 'chart.js';
 import ChartDataLabels from 'chartjs-plugin-datalabels';
 
-import { FundingSource, FilterSelection } from "../Schema";
-import { createFundingSourceDataset, getYearsAndNrens, loadDataWithFilterSelectionFallback } from "../helpers/dataconversion";
+import {FilterSelection, FundingSource} from "../Schema";
+import {
+  createFundingSourceDataset,
+  getYearsAndNrens,
+  loadDataWithFilterSelectionFallback
+} from "../helpers/dataconversion";
 import DataPage from '../components/DataPage';
 import Filter from "../components/graphing/Filter"
-import { Sections } from '../helpers/constants';
+import {ExportType, Sections} from '../helpers/constants';
 import ColorBadge from '../components/ColorBadge';
-import DownloadCSVButton from "../components/DownloadCSVButton";
-import DownloadExcelButton from "../components/DownloadExcelButton";
+import DownloadDataButton from "../components/DownloadDataButton";
 
 export const chartOptions = {
   maintainAspectRatio: false,
@@ -158,8 +161,8 @@ function FundingSourcePage({ filterSelection, setFilterSelection }: inputProps)
       category={Sections.Organisation} filter={filterNode}>
         <>
             <Row>
-                <DownloadCSVButton data={fundingSourceData} filename="income_source_of_nren_per_year.csv"/>
-                <DownloadExcelButton data={fundingSourceData} filename="income_source_of_nren_per_year.xlsx"/>
+                <DownloadDataButton data={fundingSourceData} filename="income_source_of_nren_per_year.csv" exportType={ExportType.CSV}/>
+                <DownloadDataButton data={fundingSourceData} filename="income_source_of_nren_per_year.xlsx" exportType={ExportType.EXCEL}/>
             </Row>
             <div>
                 <FundingSourceLegend/>
diff --git a/compendium-frontend/src/pages/ParentOrganisation.tsx b/compendium-frontend/src/pages/ParentOrganisation.tsx
index b193d8a2..64c6c909 100644
--- a/compendium-frontend/src/pages/ParentOrganisation.tsx
+++ b/compendium-frontend/src/pages/ParentOrganisation.tsx
@@ -1,13 +1,16 @@
-import React, { useEffect, useMemo, useState } from 'react';
+import React, {useEffect, useMemo, useState} from 'react';
 import {Row, Table} from "react-bootstrap";
 
-import { Organisation, FilterSelection } from "../Schema";
-import { createOrganisationDataLookup, getYearsAndNrens, loadDataWithFilterSelectionFallback } from "../helpers/dataconversion";
+import {FilterSelection, Organisation} from "../Schema";
+import {
+    createOrganisationDataLookup,
+    getYearsAndNrens,
+    loadDataWithFilterSelectionFallback
+} from "../helpers/dataconversion";
 import DataPage from '../components/DataPage';
 import Filter from "../components/graphing/Filter"
-import { Sections } from '../helpers/constants';
-import DownloadCSVButton from "../components/DownloadCSVButton";
-import DownloadExcelButton from "../components/DownloadExcelButton";
+import {ExportType, Sections} from '../helpers/constants';
+import DownloadDataButton from "../components/DownloadDataButton";
 
 
 function getJSXFromMap(data: Map<string, Map<number, Organisation[]>>) {
@@ -58,8 +61,8 @@ function ParentOrganisation({ filterSelection, setFilterSelection }: inputProps)
         category={Sections.Organisation} filter={filterNode}>
             <>
                 <Row>
-                    <DownloadCSVButton data={organisationData} filename="nren_parent_organisations.csv"/>
-                    <DownloadExcelButton data={organisationData} filename="nren_parent_organisations.xlsx"/>
+                    <DownloadDataButton data={organisationData} filename="nren_parent_organisations.csv" exportType={ExportType.CSV}/>
+                    <DownloadDataButton data={organisationData} filename="nren_parent_organisations.xlsx" exportType={ExportType.EXCEL}/>
                 </Row>
                 <Table borderless className='compendium-table'>
                     <thead>
diff --git a/compendium-frontend/src/pages/StaffGraph.tsx b/compendium-frontend/src/pages/StaffGraph.tsx
index 6cd9a044..155f1a49 100644
--- a/compendium-frontend/src/pages/StaffGraph.tsx
+++ b/compendium-frontend/src/pages/StaffGraph.tsx
@@ -1,17 +1,16 @@
-import React, { useEffect, useMemo, useState } from 'react';
-import { Bar } from 'react-chartjs-2';
-import { Chart as ChartJS, CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend } from 'chart.js';
+import React, {useEffect, useMemo, useState} from 'react';
+import {Bar} from 'react-chartjs-2';
+import {BarElement, CategoryScale, Chart as ChartJS, Legend, LinearScale, Title, Tooltip} from 'chart.js';
 
-import { NrenStaff, FilterSelection } from "../Schema";
-import { createNRENStaffDataset, getYearsAndNrens, loadDataWithFilterSelectionFallback } from "../helpers/dataconversion";
+import {FilterSelection, NrenStaff} from "../Schema";
+import {createNRENStaffDataset, getYearsAndNrens, loadDataWithFilterSelectionFallback} from "../helpers/dataconversion";
 import DataPage from '../components/DataPage';
 import Filter from "../components/graphing/Filter"
-import { Sections } from '../helpers/constants';
+import {ExportType, Sections} from '../helpers/constants';
 import WithLegend from '../components/WithLegend';
 import htmlLegendPlugin from '../plugins/HTMLLegendPlugin';
 import {Row} from "react-bootstrap";
-import DownloadCSVButton from "../components/DownloadCSVButton";
-import DownloadExcelButton from "../components/DownloadExcelButton";
+import DownloadDataButton from "../components/DownloadDataButton";
 
 ChartJS.register(
     CategoryScale,
@@ -154,15 +153,15 @@ function StaffGraph({ filterSelection, setFilterSelection, roles = false }: inpu
     ? "The graph shows the roles of NREN employees. On hovering over the graph will give the percentage of employees in that role. This graph can be used to compare, selecting multiple NRENs to see the fluctuation of roles over selected year and with other NRENs."
     : "The graph shows the types of employment for NREN employees. On hovering over the graphs will give the percentage of employees in that type of employment. This graph can be used to compare, selecting multiple NRENs to see the fluctuation of types of employment over selected year and with other NRENs.";
 
-    const filename = roles ? "roles_of_nren_employees.csv" : "types_of_employment_for_nren.csv";
+    const filename = roles ? "roles_of_nren_employees" : "types_of_employment_for_nrens";
     return (
         <DataPage title={title} 
         description={description}
         category={Sections.Organisation} filter={filterNode}>
             <>
                 <Row>
-                    <DownloadCSVButton data={staffData} filename={filename}/>
-                    <DownloadExcelButton data={staffData} filename={filename}/>
+                    <DownloadDataButton data={staffData} filename={filename} exportType={ExportType.CSV}/>
+                    <DownloadDataButton data={staffData} filename={filename} exportType={ExportType.EXCEL}/>
                 </Row>
                 <WithLegend>
                     <div className="chart-container" style={{'height': `${height}rem`}}>
diff --git a/compendium-frontend/src/pages/SubOrganisation.tsx b/compendium-frontend/src/pages/SubOrganisation.tsx
index 3d31754f..2412018f 100644
--- a/compendium-frontend/src/pages/SubOrganisation.tsx
+++ b/compendium-frontend/src/pages/SubOrganisation.tsx
@@ -1,13 +1,16 @@
-import React, { useEffect, useMemo, useState } from 'react';
+import React, {useEffect, useMemo, useState} from 'react';
 import {Row, Table} from "react-bootstrap";
 
-import { Organisation, FilterSelection } from "../Schema";
-import { createOrganisationDataLookup, getYearsAndNrens, loadDataWithFilterSelectionFallback } from "../helpers/dataconversion";
+import {FilterSelection, Organisation} from "../Schema";
+import {
+    createOrganisationDataLookup,
+    getYearsAndNrens,
+    loadDataWithFilterSelectionFallback
+} from "../helpers/dataconversion";
 import DataPage from '../components/DataPage';
 import Filter from "../components/graphing/Filter"
-import { Sections } from '../helpers/constants';
-import DownloadCSVButton from "../components/DownloadCSVButton";
-import DownloadExcelButton from "../components/DownloadExcelButton";
+import {ExportType, Sections} from '../helpers/constants';
+import DownloadDataButton from "../components/DownloadDataButton";
 
 
 function getJSXFromMap(data: Map<string, Map<number, Organisation[]>>) {
@@ -63,8 +66,8 @@ function SubOrganisation({ filterSelection, setFilterSelection }: inputProps) {
         category={Sections.Organisation} filter={filterNode}>
             <>
                 <Row>
-                    <DownloadCSVButton data={organisationData} filename="nren_suborganisations.csv"/>
-                    <DownloadExcelButton data={organisationData} filename="nren_suborganisations.xlsx"/>
+                    <DownloadDataButton data={organisationData} filename="nren_suborganisations.csv" exportType={ExportType.CSV}/>
+                    <DownloadDataButton data={organisationData} filename="nren_suborganisations.xlsx" exportType={ExportType.EXCEL}/>
                 </Row>
                 <Table borderless className='compendium-table'>
                     <thead>
-- 
GitLab