From 35b9369696fe70291d4c9862e49d0ade224ac183 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jos=C3=A9=20Ribeiro?= <me@joseribeiro.dev>
Date: Thu, 2 May 2024 19:24:01 -0300
Subject: [PATCH] feat(DataTable): add expanded param to exposed table state

---
 src/components/DataTable/DataTable.tsx       | 39 ++++++++++++++------
 src/components/DataTable/useSWRDataTable.tsx |  2 +-
 src/components/DataTable/useTableState.tsx   |  5 +++
 3 files changed, 33 insertions(+), 13 deletions(-)

diff --git a/src/components/DataTable/DataTable.tsx b/src/components/DataTable/DataTable.tsx
index c5e2ab4..dd82a29 100644
--- a/src/components/DataTable/DataTable.tsx
+++ b/src/components/DataTable/DataTable.tsx
@@ -7,7 +7,7 @@ import {
   getSortedRowModel,
   useReactTable,
 } from "@tanstack/react-table";
-import React, { useEffect } from "react";
+import React, { useEffect, useMemo } from "react";
 import { useNavigate } from "react-router-dom";
 
 import { TableContext } from "./TableContext";
@@ -55,6 +55,7 @@ export function DataTable({
     columnFilters,
     sorting,
     grouping,
+    expanded,
   } = tableState;
 
   const {
@@ -64,6 +65,7 @@ export function DataTable({
     setColumnFilters,
     setSorting,
     setGrouping,
+    setExpanded,
   } = setTableState;
 
   if (error) {
@@ -90,6 +92,7 @@ export function DataTable({
       rowSelection,
       columnFilters,
       pagination,
+      expanded,
       columnVisibility: {
         ...columnVisibility,
         ...hiddenColumns,
@@ -106,6 +109,7 @@ export function DataTable({
     onPaginationChange: setPagination,
     manualPagination: true,
     enableRowSelection: true,
+    onExpandedChange: setExpanded,
     onRowSelectionChange: setRowSelection,
     onSortingChange: setSorting,
     onColumnFiltersChange: setColumnFilters,
@@ -146,17 +150,28 @@ export function DataTable({
     navigate,
   ]);
 
-  // eslint-disable-next-line react/jsx-no-constructed-context-values
-  const contextValue = {
-    data,
-    filters,
-    error,
-    tableState,
-    setTableState,
-    table,
-    searchKey,
-    isLoading,
-  };
+  const contextValue = useMemo(
+    () => ({
+      data,
+      filters,
+      error,
+      tableState,
+      setTableState,
+      table,
+      searchKey,
+      isLoading,
+    }),
+    [
+      data,
+      filters,
+      error,
+      tableState,
+      setTableState,
+      table,
+      searchKey,
+      isLoading,
+    ]
+  );
 
   return (
     <TableContext.Provider value={contextValue}>
diff --git a/src/components/DataTable/useSWRDataTable.tsx b/src/components/DataTable/useSWRDataTable.tsx
index 650f2bd..38a58f9 100644
--- a/src/components/DataTable/useSWRDataTable.tsx
+++ b/src/components/DataTable/useSWRDataTable.tsx
@@ -31,7 +31,7 @@ const dataTableFetcher = async ([pathOrUrl, paramsObject]) => {
 };
 
 export function useSWRDataTable(path, initialSearch = {}, options = {}) {
-  const { tableState, setTableState } = useTableState({ ...initialSearch });
+  const { tableState, setTableState } = useTableState(initialSearch);
 
   const { data, error, isLoading } = useSWR(
     [
diff --git a/src/components/DataTable/useTableState.tsx b/src/components/DataTable/useTableState.tsx
index b998656..1d43671 100644
--- a/src/components/DataTable/useTableState.tsx
+++ b/src/components/DataTable/useTableState.tsx
@@ -19,6 +19,7 @@ export function useTableState(
   const [sorting, setSorting] = useState(initialState.sorting || []);
 
   const [grouping, setGrouping] = useState(initialState.grouping || []);
+  const [expanded, setExpanded] = useState(initialState.expanded || false);
 
   const state = useMemo(
     () => ({
@@ -28,6 +29,7 @@ export function useTableState(
       columnFilters,
       sorting,
       grouping,
+      expanded,
     }),
     [
       pagination,
@@ -36,6 +38,7 @@ export function useTableState(
       columnFilters,
       sorting,
       grouping,
+      expanded,
     ]
   );
 
@@ -47,6 +50,7 @@ export function useTableState(
       setColumnFilters,
       setSorting,
       setGrouping,
+      setExpanded,
     }),
     [
       setPagination,
@@ -55,6 +59,7 @@ export function useTableState(
       setColumnFilters,
       setSorting,
       setGrouping,
+      setExpanded,
     ]
   );