From 8929392ba3157e6621cadf2add03b78913a55318 Mon Sep 17 00:00:00 2001
From: Afsal K <makafsal@users.noreply.github.com>
Date: Fri, 14 Jun 2024 22:56:54 +0530
Subject: [PATCH] refactor(useNestedRows): implement types (#5460)

---
 .../src/components/Datagrid/types/index.ts    |  1 +
 .../{useNestedRows.js => useNestedRows.ts}    | 36 +++++++------------
 2 files changed, 13 insertions(+), 24 deletions(-)
 rename packages/ibm-products/src/components/Datagrid/{useNestedRows.js => useNestedRows.ts} (75%)

diff --git a/packages/ibm-products/src/components/Datagrid/types/index.ts b/packages/ibm-products/src/components/Datagrid/types/index.ts
index 6bc4f13e81..79c6636746 100644
--- a/packages/ibm-products/src/components/Datagrid/types/index.ts
+++ b/packages/ibm-products/src/components/Datagrid/types/index.ts
@@ -264,6 +264,7 @@ export interface DataGridState<T extends object = any>
   onVirtualScroll?: (evt?: boolean) => void;
   fetchMoreData?: () => void;
   loadMoreThreshold?: number;
+  expandedRowIds?: object;
   onRowClick?: (row, event) => void;
   onSort?: boolean;
 }
diff --git a/packages/ibm-products/src/components/Datagrid/useNestedRows.js b/packages/ibm-products/src/components/Datagrid/useNestedRows.ts
similarity index 75%
rename from packages/ibm-products/src/components/Datagrid/useNestedRows.js
rename to packages/ibm-products/src/components/Datagrid/useNestedRows.ts
index 095a54f0a5..b17631e521 100644
--- a/packages/ibm-products/src/components/Datagrid/useNestedRows.js
+++ b/packages/ibm-products/src/components/Datagrid/useNestedRows.ts
@@ -9,39 +9,27 @@ import cx from 'classnames';
 import { pkg } from '../../settings';
 import useNestedRowExpander from './useNestedRowExpander';
 import { useEffect } from 'react';
+import { Hooks, TableInstance } from 'react-table';
+import { DataGridState, DatagridRow } from './types';
 
 const blockClass = `${pkg.prefix}--datagrid`;
 
-const useNestedRows = (hooks) => {
+const useNestedRows = (hooks: Hooks) => {
   useNestedRowExpander(hooks);
-  const useInstance = (instance) => {
-    useEffect(() => {
-      const { rows } = instance;
-      const defaultExpandedRows = rows.filter(
-        (row) => row?.original?.defaultExpanded
-      );
-      if (defaultExpandedRows?.length) {
-        defaultExpandedRows.map((defaultExpandedRow) => {
-          if (
-            !defaultExpandedRow.isExpanded &&
-            !defaultExpandedRow.hasExpanded
-          ) {
-            defaultExpandedRow?.toggleRowExpanded?.();
-            defaultExpandedRow.hasExpanded = true;
-            return;
-          }
-        });
-      }
-    }, [instance, instance.rows]);
+  const useInstance = (instance: TableInstance) => {
     // This useEffect will expand rows if they exist in the initialState obj
     useEffect(() => {
       const { rows, initialState } = instance;
-      const { expandedRowIds } = initialState;
+      const { expandedRowIds } = initialState as DataGridState;
+
       if (expandedRowIds) {
         Object.keys(expandedRowIds).forEach((key) => {
-          const row = rows.filter((r) => r.id.toString() === key.toString());
-          if (row.length && key.toString() === row[0].id.toString()) {
-            row[0].toggleRowExpanded();
+          const row = rows.filter(
+            (r) => r.id.toString() === key.toString()
+          ) as DatagridRow[];
+
+          if (row?.length && key.toString() === row[0].id.toString()) {
+            row[0]?.toggleRowExpanded();
           }
         });
       }