move StatisticTable logic to useTableFilters hook

EyeSeeTea · Jul 10, 2024 · 7558e1a · 7558e1a
1 parent de6212c
commit 7558e1a
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 32 deletions.
diff --git a/src/webapp/components/table/statistic-table/StatisticTable.tsx b/src/webapp/components/table/statistic-table/StatisticTable.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useState } from "react";
+import React from "react";
 import styled from "styled-components";
 import {
     Table,
@@ -16,7 +16,6 @@ import { MultipleSelector } from "../../selector/MultipleSelector";
 import { useTableFilters } from "../../../hooks/useTableFilters";
 import { useTableCell } from "../../../hooks/useTableCell";
 import { ColoredCell } from "./ColoredCell";
-import _ from "../../../../domain/entities/generic/Collection";
 
 export type TableColumn = {
     value: string;
@@ -48,33 +47,12 @@ export type StatisticTableProps = {
 
 export const StatisticTable: React.FC<StatisticTableProps> = React.memo(
     ({ rows, columns, columnRules, editRiskAssessmentColumns, filters: filtersConfig }) => {
-        const [searchTerm, setSearchTerm] = useState<string>("");
-
-        const [filters, setFilters] = useState<FiltersValuesType>(
-            filtersConfig.reduce((acc: FiltersValuesType, filter) => {
-                acc[filter.value] = [];
-                return acc;
-            }, {})
-        );
-
         const calculateColumns = [...editRiskAssessmentColumns, ...Object.keys(columnRules)];
 
-        const filteredRows = useTableFilters(rows, searchTerm, filters);
+        const { searchTerm, setSearchTerm, filters, setFilters, filteredRows, filterOptions } =
+            useTableFilters(rows, filtersConfig);
         const { getCellColor } = useTableCell(editRiskAssessmentColumns, columnRules);
 
-        const filterOptions = useCallback(
-            (column: TableColumn["value"]) => {
-                return _(rows)
-                    .map(row => ({
-                        value: row[column] || "",
-                        label: row[column] || "",
-                    }))
-                    .uniqBy(filter => filter.value)
-                    .value();
-            },
-            [rows]
-        );
-
         return (
             <React.Fragment>
                 <Container>

diff --git a/src/webapp/hooks/useTableFilters.ts b/src/webapp/hooks/useTableFilters.ts
@@ -1,15 +1,22 @@
-import { useMemo } from "react";
+import { useCallback, useMemo, useState } from "react";
 import _ from "../../domain/entities/generic/Collection";
 import {
     FiltersValuesType,
+    FilterType,
     StatisticTableProps,
+    TableColumn,
 } from "../components/table/statistic-table/StatisticTable";
 
-export const useTableFilters = (
-    rows: StatisticTableProps["rows"],
-    searchTerm: string,
-    filters: FiltersValuesType
-) => {
+export const useTableFilters = (rows: StatisticTableProps["rows"], filtersConfig: FilterType[]) => {
+    const [searchTerm, setSearchTerm] = useState<string>("");
+
+    const [filters, setFilters] = useState<FiltersValuesType>(
+        filtersConfig.reduce((acc: FiltersValuesType, filter) => {
+            acc[filter.value] = [];
+            return acc;
+        }, {})
+    );
+
     const filteredRows = useMemo(() => {
         const allFiltersEmpty = Object.keys(filters).every(
             key => (filters[key] || []).length === 0
@@ -36,5 +43,18 @@ export const useTableFilters = (
         }
     }, [rows, searchTerm, filters]);
 
-    return filteredRows;
+    const filterOptions = useCallback(
+        (column: TableColumn["value"]) => {
+            return _(rows)
+                .map(row => ({
+                    value: row[column] || "",
+                    label: row[column] || "",
+                }))
+                .uniqBy(filter => filter.value)
+                .value();
+        },
+        [rows]
+    );
+
+    return { searchTerm, setSearchTerm, filters, setFilters, filteredRows, filterOptions };
 };