move columns, columnRules, editRiskAssessmentColumns as component props

EyeSeeTea · Jul 2, 2024 · e6708e7 · e6708e7
1 parent 8f16245
commit e6708e7
Show file tree

Hide file tree

Showing 2 changed files with 53 additions and 41 deletions.
diff --git a/src/webapp/components/table/performance-overview-table/PerformanceOverviewTable.tsx b/src/webapp/components/table/performance-overview-table/PerformanceOverviewTable.tsx
@@ -20,54 +20,23 @@ export type TableColumn = {
     dark?: boolean;
 };
 
-interface PerformanceOverviewTableProps {
+type PerformanceOverviewTableProps = {
+    columns: TableColumn[];
+    columnRules: {
+        [key: TableColumn["value"]]: number;
+    };
+    editRiskAssessmentColumns: TableColumn["value"][];
     rows: {
         [key: TableColumn["value"]]: string;
     }[];
-}
+};
 
 export const PerformanceOverviewTable: React.FC<PerformanceOverviewTableProps> = React.memo(
-    ({ rows }) => {
+    ({ rows, columns, columnRules, editRiskAssessmentColumns }) => {
         const [searchTerm, setSearchTerm] = useState<string>("");
         const [filterValue, setFilterValue] = useState("");
         const [filteredRows, setFilteredRows] = useState(rows);
 
-        const columns: TableColumn[] = [
-            { label: "Event", value: "event" },
-            { label: "Location", value: "location" },
-            { label: "Cases", value: "cases" },
-            { label: "Deaths", value: "deaths" },
-            { label: "Duration", value: "duration" },
-            { label: "Manager", value: "manager" },
-            { label: "Detect 7d", dark: true, value: "detect7d" },
-            { label: "Notify 1d", dark: true, value: "notify1d" },
-            { label: "ERA1", value: "era1" },
-            { label: "ERA2", value: "era2" },
-            { label: "ERA3", value: "era3" },
-            { label: "ERA4", value: "era4" },
-            { label: "ERA5", value: "era5" },
-            { label: "ERA6", value: "era6" },
-            { label: "ERA7", value: "era7" },
-            { label: "ERI", value: "eri" },
-            { label: "Respond 7d", dark: true, value: "respond7d" },
-        ];
-
-        const editRiskAssessmentColumns = [
-            "era1",
-            "era2",
-            "era3",
-            "era4",
-            "era5",
-            "era6",
-            "era7",
-            "eri",
-        ];
-        const columnRules: { [key: string]: number } = {
-            detect7d: 7,
-            notify1d: 1,
-            respond7d: 7,
-        };
-
         const calculateColumns = [...editRiskAssessmentColumns, ..._.keys(columnRules)];
 
         useEffect(() => {

diff --git a/src/webapp/pages/dashboard/DashboardPage.tsx b/src/webapp/pages/dashboard/DashboardPage.tsx
@@ -3,9 +3,47 @@ import React from "react";
 import i18n from "../../../utils/i18n";
 import { Layout } from "../../components/layout/Layout";
 import { Section } from "../../components/section/Section";
-import { PerformanceOverviewTable } from "../../components/table/performance-overview-table/PerformanceOverviewTable";
+import {
+    PerformanceOverviewTable,
+    TableColumn,
+} from "../../components/table/performance-overview-table/PerformanceOverviewTable";
 
 export const DashboardPage: React.FC = React.memo(() => {
+    // TODO remove harcoded data
+    const columns: TableColumn[] = [
+        { label: "Event", value: "event" },
+        { label: "Location", value: "location" },
+        { label: "Cases", value: "cases" },
+        { label: "Deaths", value: "deaths" },
+        { label: "Duration", value: "duration" },
+        { label: "Manager", value: "manager" },
+        { label: "Detect 7d", dark: true, value: "detect7d" },
+        { label: "Notify 1d", dark: true, value: "notify1d" },
+        { label: "ERA1", value: "era1" },
+        { label: "ERA2", value: "era2" },
+        { label: "ERA3", value: "era3" },
+        { label: "ERA4", value: "era4" },
+        { label: "ERA5", value: "era5" },
+        { label: "ERA6", value: "era6" },
+        { label: "ERA7", value: "era7" },
+        { label: "ERI", value: "eri" },
+        { label: "Respond 7d", dark: true, value: "respond7d" },
+    ];
+    const editRiskAssessmentColumns = [
+        "era1",
+        "era2",
+        "era3",
+        "era4",
+        "era5",
+        "era6",
+        "era7",
+        "eri",
+    ];
+    const columnRules: { [key: string]: number } = {
+        detect7d: 7,
+        notify1d: 1,
+        respond7d: 7,
+    };
     const dataPerformanceOverview = [
         {
             event: "Cholera",
@@ -150,7 +188,12 @@ export const DashboardPage: React.FC = React.memo(() => {
             </Section>
             <Section title={i18n.t("7-1-7 performance")}>7-1-7 performance content</Section>
             <Section title={i18n.t("Performance overview")}>
-                <PerformanceOverviewTable rows={dataPerformanceOverview} />
+                <PerformanceOverviewTable
+                    columns={columns}
+                    rows={dataPerformanceOverview}
+                    columnRules={columnRules}
+                    editRiskAssessmentColumns={editRiskAssessmentColumns}
+                />
             </Section>
         </Layout>
     );