fix(Datatable): fix column visibility state

src/components/Datatable/Datatable.tsx

@@ -54,6 +54,9 @@
   tableConfig = {},
   resetSelectionFn,
 }: DatatableProps<D>): React.ReactElement {
+  useEffect(() => {
+    DatatableStore.update(() => datatableInitialState);
+  }, []);
   const [persistedState, setPersistedState] = useLocalStorageState(
     `datatable_${id}`,
   );
@@ -72,7 +75,7 @@
     );
     // eslint-disable-next-line
     return unsubscribe;
   }, []);
 
   // Set canceled signal to prevent data fetch when unmounting
   useEffect(

src/components/Datatable/components/ColumnsControls/ColumnsControls.tsx

@@ -1,7 +1,8 @@
-import React, { useRef } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import PropTypes from 'prop-types';
 import { pluck } from 'ramda';
 import { noop } from 'ramda-adjunct';
+import { useDeepCompareEffect } from 'use-deep-compare';
 
 import { ControlDropdown } from '../../../ControlDropdown';
 import { SortableList } from '../../../SortableList';
@@ -32,31 +33,42 @@
     resetOrderedColumns,
     isInDefaultOrder,
   } = useColumnOrder();
-  const {
-    hiddenColumns,
-    setHiddenColumn,
-    storeVisibleColumns,
-    reinitializeVisibleColumns,
-    resetVisisbleColumns,
-    isInDefaultVisibility,
-  } = useColumnVisibility();
+  const { isInDefaultVisibility } = useColumnVisibility();
   const allColumns = DatatableStore.useState((s) => s.columns);
+  const hiddenColumns = DatatableStore.useState((s) => s.hiddenColumns);
+  console.log(
+    '🚀 ~ file: ColumnsControls.tsx:38 ~ hiddenColumns:',
+    hiddenColumns,
+  );
+
+  const [localHiddenColumns, setLocalHiddenColumns] = useState(hiddenColumns);
+  console.log(
+    '🚀 ~ file: ColumnsControls.tsx:42 ~ localHiddenColumns:',
+    localHiddenColumns,
+  );
+
+  useDeepCompareEffect(() => {
+    setLocalHiddenColumns(hiddenColumns);
+  }, [hiddenColumns]);
 
   const handleCloseColumnsControl = () => {
     onClose();
     reinitializeOrderedColumns();
-    reinitializeVisibleColumns();
   };
   const handleApplyColumnsControl = () => {
     onApply(!isInDefaultOrder || !isInDefaultVisibility);
     storeOrderedColumns();
-    storeVisibleColumns();
+    DatatableStore.update((s) => {
+      s.hiddenColumns = localHiddenColumns;
+    });
   };
 
   const handleResetColumnsControl = () => {
     onReset();
     resetOrderedColumns();
-    resetVisisbleColumns();
+    DatatableStore.update((s) => {
+      s.hiddenColumns = [];
+    });
   };
 
   return (
@@ -86,12 +98,26 @@
               >
                 <Text size={TextSizes.md}>{label}</Text>
                 <Switch
-                  checked={!hiddenColumns.includes(id)}
+                  checked={!localHiddenColumns.includes(id)}
                   name={`visibility-${id}`}
                   size={SwitchSizes.sm}
                   switchId={`visibility-${id}`}
                   onChange={(e) => {
-                    setHiddenColumn(id, e.target.checked);
+                    const { checked } = e.target;
+                    setLocalHiddenColumns((prev) => {
+                      console.log(
+                        '🚀 ~ file: ColumnsControls.tsx:101 ~ setLocalHiddenColumns ~ prev:',
+                        prev,
+                      );
+                      const next = checked
+                        ? prev.filter((col) => col !== id)
+                        : [...prev, id];
+                      console.log(
+                        '🚀 ~ file: ColumnsControls.tsx:102 ~ next:',
+                        next,
+                      );
+                      return next;
+                    });
                   }}
                 />
               </Inline>

src/components/Datatable/components/ColumnsControls/hooks/useColumnVisibility.ts

@@ -1,60 +1,19 @@
-import { useEffect, useState } from 'react';
 import { isEmptyArray } from 'ramda-adjunct';
 
 import { DatatableStore } from '../../../Datatable.store';
 
 export const useColumnVisibility = (): {
   hiddenColumns: string[];
-  setHiddenColumn: (id: string, value: boolean) => void;
-  storeVisibleColumns: () => void;
-  reinitializeVisibleColumns: () => void;
-  resetVisisbleColumns: () => void;
   isInDefaultVisibility: boolean;
 } => {
   const { hiddenColumns } = DatatableStore.useState((s) => ({
     hiddenColumns: s.hiddenColumns,
   }));
-  const [localHiddenColumns, setLocalHiddenColumns] = useState(hiddenColumns);
 
-  useEffect(() => {
-    const unsubscribe = DatatableStore.subscribe(
-      (s) => ({ hidden: s.hiddenColumns }),
-      ({ hidden }) => {
-        setLocalHiddenColumns(hidden);
-      },
-    );
-
-    return () => {
-      unsubscribe();
-    };
-  }, []);
-  const setHiddenColumn = (id, value) => {
-    if (value === true) {
-      setLocalHiddenColumns((prev) => prev.filter((col) => col !== id));
-    } else {
-      setLocalHiddenColumns((prev) => [...prev, id]);
-    }
-  };
-  const isInDefaultVisibility = isEmptyArray(localHiddenColumns);
-  const storeVisibleColumns = () => {
-    DatatableStore.update((s) => {
-      s.hiddenColumns = localHiddenColumns;
-    });
-  };
-
-  const resetVisisbleColumns = () => {
-    setLocalHiddenColumns([]);
-  };
-  const reinitializeVisibleColumns = () => {
-    setLocalHiddenColumns(hiddenColumns);
-  };
+  const isInDefaultVisibility = isEmptyArray(hiddenColumns);
 
   return {
-    hiddenColumns: localHiddenColumns,
-    setHiddenColumn,
-    storeVisibleColumns,
-    reinitializeVisibleColumns,
-    resetVisisbleColumns,
+    hiddenColumns,
     isInDefaultVisibility,
   };
 };