fix data grid cell selection not updating side drawer

src/atoms/tableScope/ui.ts

@@ -3,8 +3,8 @@ import { atom } from "jotai";
 /** Store side drawer open state */
 export const sideDrawerOpenAtom = atom(false);
 
-/** Store selected cell for side drawer */
-export const sideDrawerSelectedCellAtom = atom<{
+/** Store selected cell in table */
+export const selectedCellAtom = atom<{
   path: string;
   columnKey: string;
 } | null>(null);

src/components/SideDrawer/SideDrawer.tsx

@@ -14,14 +14,17 @@ import ErrorFallback from "@src/components/ErrorFallback";
 import StyledDrawer from "./StyledDrawer";
 // import Form from "./Form";
 
+import { globalScope, userSettingsAtom } from "@src/atoms/globalScope";
 import {
   tableScope,
+  tableIdAtom,
   tableColumnsOrderedAtom,
   tableRowsAtom,
   sideDrawerOpenAtom,
-  sideDrawerSelectedCellAtom,
+  selectedCellAtom,
 } from "@src/atoms/tableScope";
 import { analytics, logEvent } from "@src/analytics";
+import { formatSubTableName } from "@src/utils/table";
 
 export const DRAWER_WIDTH = 512;
 export const DRAWER_COLLAPSED_WIDTH = 36;
@@ -31,10 +34,15 @@ export default function SideDrawer({
 }: {
   dataGridRef?: React.MutableRefObject<DataGridHandle | null>;
 }) {
+  const [userSettings] = useAtom(userSettingsAtom, globalScope);
+  const [tableId] = useAtom(tableIdAtom, tableScope);
   const [tableColumnsOrdered] = useAtom(tableColumnsOrderedAtom, tableScope);
   const [tableRows] = useAtom(tableRowsAtom, tableScope);
 
-  const [cell, setCell] = useAtom(sideDrawerSelectedCellAtom, tableScope);
+  const userDocHiddenFields =
+    userSettings.tables?.[formatSubTableName(tableId)]?.hiddenFields ?? [];
+
+  const [cell, setCell] = useAtom(selectedCellAtom, tableScope);
   const [open, setOpen] = useAtom(sideDrawerOpenAtom, tableScope);
   const selectedCellRowIndex = findIndex(tableRows, [
     "_rowy_ref.path",
@@ -50,10 +58,12 @@ export default function SideDrawer({
 
     setCell((cell) => ({ columnKey: cell!.columnKey, path: newPath }));
 
-    const columnIndex = findIndex(tableColumnsOrdered, [
-      "key",
-      cell!.columnKey,
-    ]);
+    const columnIndex = findIndex(
+      tableColumnsOrdered.filter(
+        (col) => !userDocHiddenFields.includes(col.key)
+      ),
+      ["key", cell!.columnKey]
+    );
 
     dataGridRef?.current?.selectCell(
       { rowIdx: rowIndex, idx: columnIndex },

src/components/Table/Table.tsx

@@ -40,7 +40,7 @@ import {
   tablePageAtom,
   updateColumnAtom,
   updateFieldAtom,
-  sideDrawerSelectedCellAtom,
+  selectedCellAtom,
 } from "@src/atoms/tableScope";
 
 import { getFieldType, getFieldProp } from "@src/components/fields";
@@ -71,10 +71,7 @@ export default function Table({
   const [tableRows] = useAtom(tableRowsAtom, tableScope);
   const [tableNextPage] = useAtom(tableNextPageAtom, tableScope);
   const setTablePage = useSetAtom(tablePageAtom, tableScope);
-  const setSideDrawerSelectedCell = useSetAtom(
-    sideDrawerSelectedCellAtom,
-    tableScope
-  );
+  const setSelectedCell = useSetAtom(selectedCellAtom, tableScope);
 
   const updateColumn = useSetAtom(updateColumnAtom, tableScope);
   const updateField = useSetAtom(updateFieldAtom, tableScope);
@@ -277,19 +274,16 @@ export default function Table({
                 value,
               });
             }}
-            onRowClick={(row, column) =>
-              setSideDrawerSelectedCell({
-                path: row._rowy_ref.path,
-                columnKey: column.key,
+            onSelectedCellChange={({ rowIdx, idx }) =>
+              setSelectedCell({
+                path: rows[rowIdx]._rowy_ref.path,
+                columnKey: tableColumnsOrdered.filter((col) =>
+                  userDocHiddenFields
+                    ? !userDocHiddenFields.includes(col.key)
+                    : true
+                )[idx].key,
               })
             }
-            // FIXME:
-            // onSelectedCellChange={({ rowIdx, idx }) =>
-            //   setSelectedCell({
-            //     rowIndex: rowIdx,
-            //     colIndex: idx,
-            //   })
-            // }
           />
         </DndProvider>
 

src/sources/TableSourceFirestore.tsx

@@ -134,7 +134,7 @@ const TableSourceFirestore = memo(function TableSourceFirestore() {
               },
               data,
             },
-          })
+          }).catch(console.log)
     );
 
     return () => setAuditChange(undefined);