From 3f1ecc33cb114e04bf0ef95d38d010d72f1dc247 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marc=20Gu=CC=88ell=20Segarra?= <marc@ondori.dev>
Date: Wed, 2 Oct 2024 16:57:51 +0200
Subject: [PATCH] fix: adjust options reset table behaviour

---
 .../InfiniteTable/InfiniteTable.tsx           | 73 +++++++++++--------
 .../InfiniteTable/columnStateHelper.ts        |  2 +-
 .../InfiniteTable/useColumnState.ts           |  9 +--
 3 files changed, 45 insertions(+), 39 deletions(-)

diff --git a/src/components/InfiniteTable/InfiniteTable.tsx b/src/components/InfiniteTable/InfiniteTable.tsx
index 2ae01ea..eccbbf8 100644
--- a/src/components/InfiniteTable/InfiniteTable.tsx
+++ b/src/components/InfiniteTable/InfiniteTable.tsx
@@ -103,6 +103,8 @@ const InfiniteTableComp = forwardRef<InfiniteTableRef, InfiniteTableProps>(
     const datasourceRef = useRef<{
       getRows: (params: IGetRowsParams) => void;
     }>();
+    const notifyColumnChanges = useRef(false);
+    const firstTimeResized = useRef(false);
 
     useDeepCompareEffect(() => {
       gridRef.current?.api?.forEachNode((node) => {
@@ -146,34 +148,35 @@ const InfiniteTableComp = forwardRef<InfiniteTableRef, InfiniteTableProps>(
       onGetColumnsState,
     });
 
-    const onColumnChanged = useCallback(() => {
-      const state = gridRef?.current?.api.getColumnState();
-      if (!state) {
-        return;
-      }
-      if (areStatesEqual(state, columnsPersistedStateRef.current)) {
-        return;
-      }
-      applyAndUpdateNewState(state);
-      onColumnsChangedProps?.(state);
-    }, [
-      applyAndUpdateNewState,
-      columnsPersistedStateRef,
-      onColumnsChangedProps,
-    ]);
-
-    const onColumnMoved = useCallback(() => {
-      onColumnChanged();
-    }, [onColumnChanged]);
+    const debouncedOnColumnChanged = useMemo(
+      () =>
+        debounce(() => {
+          const state = gridRef?.current?.api.getColumnState();
+          if (!state) {
+            return;
+          }
+          if (areStatesEqual(state, columnsPersistedStateRef.current)) {
+            return;
+          }
+          if (!notifyColumnChanges.current) {
+            notifyColumnChanges.current = true;
+            return;
+          }
+          applyAndUpdateNewState(state);
+          onColumnsChangedProps?.(state);
+        }, 300),
+      [applyAndUpdateNewState, columnsPersistedStateRef, onColumnsChangedProps],
+    );
 
-    const onColumnResized = useCallback(
-      (event: ColumnResizedEvent) => {
-        if (!event.finished) {
-          return;
-        }
-        onColumnChanged();
-      },
-      [onColumnChanged],
+    const debouncedOnColumnResized = useMemo(
+      () =>
+        debounce((event: ColumnResizedEvent) => {
+          if (!event.finished) {
+            return;
+          }
+          debouncedOnColumnChanged();
+        }, 300),
+      [debouncedOnColumnChanged],
     );
 
     const getSortedFields = useCallback(():
@@ -258,9 +261,11 @@ const InfiniteTableComp = forwardRef<InfiniteTableRef, InfiniteTableProps>(
               strings?.["resetTableViewLabel"] || "resetTableViewLabel"
             }
             onResetTableView={async () => {
+              notifyColumnChanges.current = false;
               applyAndUpdateNewState([]);
               gridRef.current?.api.resetColumnState();
               applyAutoFitState();
+              onColumnsChangedProps?.([]);
             }}
           />
         ),
@@ -282,6 +287,7 @@ const InfiniteTableComp = forwardRef<InfiniteTableRef, InfiniteTableProps>(
       strings,
       applyAndUpdateNewState,
       applyAutoFitState,
+      onColumnsChangedProps,
     ]);
 
     const scrollToSavedPosition = useCallback(() => {
@@ -353,6 +359,11 @@ const InfiniteTableComp = forwardRef<InfiniteTableRef, InfiniteTableProps>(
             });
           }
 
+          if (!columnsPersistedStateRef.current && !firstTimeResized.current) {
+            firstTimeResized.current = true;
+            applyAutoFitState();
+          }
+
           dataIsLoading.current = false;
           gridRef.current?.api.hideOverlay();
           if (firstTimeDataLoaded.current) {
@@ -369,8 +380,10 @@ const InfiniteTableComp = forwardRef<InfiniteTableRef, InfiniteTableProps>(
         onRequestData,
         getSortedFields,
         hasStatusColumn,
-        memoizedOnRowStatus,
         selectedRowKeys,
+        columnsPersistedStateRef,
+        memoizedOnRowStatus,
+        applyAutoFitState,
         scrollToSavedPosition,
       ],
     );
@@ -473,8 +486,8 @@ const InfiniteTableComp = forwardRef<InfiniteTableRef, InfiniteTableProps>(
             suppressRowClickSelection={true}
             rowBuffer={5}
             rowSelection={"multiple"}
-            onDragStopped={onColumnMoved}
-            onColumnResized={onColumnResized}
+            onDragStopped={debouncedOnColumnChanged}
+            onColumnResized={debouncedOnColumnResized}
             rowModelType={"infinite"}
             cacheBlockSize={30}
             onSelectionChanged={onSelectionChanged}
diff --git a/src/components/InfiniteTable/columnStateHelper.ts b/src/components/InfiniteTable/columnStateHelper.ts
index e472e5f..e893530 100644
--- a/src/components/InfiniteTable/columnStateHelper.ts
+++ b/src/components/InfiniteTable/columnStateHelper.ts
@@ -1,6 +1,6 @@
 export const STATUS_COLUMN = "$status";
 export const CHECKBOX_COLUMN = "$checkbox";
-export const FIXED_COLUMNS_TO_IGNORE = [CHECKBOX_COLUMN];
+export const FIXED_COLUMNS_TO_IGNORE = [CHECKBOX_COLUMN, STATUS_COLUMN];
 export const ALL_COLUMNS_TO_IGNORE = [...FIXED_COLUMNS_TO_IGNORE];
 
 export const getPersistedColumnState = ({
diff --git a/src/components/InfiniteTable/useColumnState.ts b/src/components/InfiniteTable/useColumnState.ts
index 3c850ad..4be0824 100644
--- a/src/components/InfiniteTable/useColumnState.ts
+++ b/src/components/InfiniteTable/useColumnState.ts
@@ -22,7 +22,6 @@ export const useColumnState = ({
   columns: TableColumn[];
   onGetColumnsState?: () => ColumnState[] | undefined;
 }) => {
-  const firstTimeResized = useRef(false);
   const columnsPersistedStateRef = useRef<ColumnState[]>();
 
   const columnsToIgnore = FIXED_COLUMNS_TO_IGNORE;
@@ -95,14 +94,8 @@ export const useColumnState = ({
 
     if (columnsPersistedStateRef.current) {
       applyPersistedState();
-      return;
     }
-
-    if (!columnsPersistedStateRef.current && !firstTimeResized.current) {
-      firstTimeResized.current = true;
-      applyAutoFitState();
-    }
-  }, [applyAutoFitState, applyPersistedState, columns, onGetColumnsState]);
+  }, [applyPersistedState, columns, onGetColumnsState]);
 
   return {
     loadPersistedColumnState,