fix jotai debug values & reset atomWithHash

src/Providers.tsx

@@ -5,6 +5,7 @@ import { BrowserRouter } from "react-router-dom";
 import { HelmetProvider } from "react-helmet-async";
 import { Provider, Atom } from "jotai";
 import { globalScope } from "@src/atoms/globalScope";
+import { DebugAtoms } from "@src/atoms/utils";
 import LocalizationProvider from "@mui/lab/LocalizationProvider";
 import AdapterDateFns from "@mui/lab/AdapterDateFns";
 import createCache from "@emotion/cache";
@@ -36,6 +37,7 @@ export default function Providers({
             scope={globalScope}
             initialValues={initialAtomValues}
           >
+            <DebugAtoms scope={globalScope} />
             <LocalizationProvider dateAdapter={AdapterDateFns}>
               <CacheProvider value={muiCache}>
                 <RowyThemeProvider>

src/atoms/tableScope/ui.ts

@@ -5,6 +5,12 @@ import type { PopoverProps } from "@mui/material";
 import type { ColumnConfig, TableFilter } from "@src/types/table";
 import { SEVERITY_LEVELS } from "@src/components/TableToolbar/CloudLogs/CloudLogSeverityIcon";
 
+function beforeUnloadHandler(event: BeforeUnloadEvent) {
+  event.preventDefault();
+  return (event.returnValue =
+    "Are you sure you want to leave? You may have unsaved changes.");
+}
+
 /**
  * Open table column menu. Set to `null` to close.
  *
@@ -36,7 +42,8 @@ export const columnMenuAtom = atom<{
  *
  * @example Close:
  * ```
- * openColumnModal(null)
+ * import { RESET } from "jotai/utils";
+ * openColumnModal(RESET)
  * ```
  */
 export const columnModalAtom = atomWithHash<{

src/atoms/utils.ts

@@ -0,0 +1,9 @@
+import { Scope } from "jotai/core/atom";
+import { useAtomsDebugValue } from "jotai/devtools";
+
+export function DebugAtoms(
+  options: { scope: Scope } & Parameters<typeof useAtomsDebugValue>[0]
+) {
+  useAtomsDebugValue(options);
+  return null;
+}

src/components/ColumnModals/ColumnModals.tsx

@@ -1,4 +1,5 @@
 import { useAtom } from "jotai";
+import { RESET } from "jotai/utils";
 
 import NewColumnModal from "./NewColumnModal";
 import NameChangeModal from "./NameChangeModal";
@@ -23,7 +24,7 @@ export default function ColumnModals() {
 
   if (!columnModal) return null;
 
-  const handleClose = () => setColumnModal(null);
+  const handleClose = () => setColumnModal(RESET);
 
   if (columnModal.type === "new")
     return <NewColumnModal handleClose={handleClose} />;

src/components/Table/Table.tsx

@@ -274,16 +274,21 @@ export default function Table({
                 value,
               });
             }}
-            onSelectedCellChange={({ rowIdx, idx }) =>
-              setSelectedCell({
-                path: rows[rowIdx]._rowy_ref.path,
-                columnKey: tableColumnsOrdered.filter((col) =>
-                  userDocHiddenFields
-                    ? !userDocHiddenFields.includes(col.key)
-                    : true
-                )[idx].key,
-              })
-            }
+            onSelectedCellChange={({ rowIdx, idx }) => {
+              if (!rows[rowIdx]?._rowy_ref) return; // May be the header row
+
+              const path = rows[rowIdx]._rowy_ref.path;
+              if (!path) return;
+
+              const columnKey = tableColumnsOrdered.filter((col) =>
+                userDocHiddenFields
+                  ? !userDocHiddenFields.includes(col.key)
+                  : true
+              )[idx]?.key;
+              if (!columnKey) return; // May be the final column
+
+              setSelectedCell({ path, columnKey });
+            }}
           />
         </DndProvider>
 

src/components/TableToolbar/CloudLogs/CloudLogs.tsx

@@ -1,4 +1,5 @@
 import { useAtom, useSetAtom } from "jotai";
+import { RESET } from "jotai/utils";
 
 import TableToolbarButton from "@src/components/TableToolbar/TableToolbarButton";
 import { CloudLogs as LogsIcon } from "@src/assets/icons";
@@ -17,7 +18,7 @@ export default function CloudLogs() {
   const [modal, setModal] = useAtom(tableModalAtom, tableScope);
 
   const open = modal === "cloudLogs";
-  const setOpen = (open: boolean) => setModal(open ? "cloudLogs" : null);
+  const setOpen = (open: boolean) => setModal(open ? "cloudLogs" : RESET);
 
   return (
     <>

src/components/TableToolbar/Export/Export.tsx

@@ -1,5 +1,6 @@
 import { useState, useMemo } from "react";
 import { useAtom } from "jotai";
+import { RESET } from "jotai/utils";
 import {
   query as firestoreQuery,
   Query,
@@ -42,7 +43,7 @@ export interface IExportModalContentsProps {
 export default function Export() {
   const [modal, setModal] = useAtom(tableModalAtom, tableScope);
   const open = modal === "export";
-  const setOpen = (open: boolean) => setModal(open ? "export" : null);
+  const setOpen = (open: boolean) => setModal(open ? "export" : RESET);
   const [mode, setMode] = useState<"Export" | "Download">("Export");
 
   const [firebaseDb] = useAtom(firebaseDbAtom, globalScope);

src/components/TableToolbar/Extensions/Extensions.tsx

@@ -1,5 +1,6 @@
 import { useState } from "react";
 import { useAtom, useSetAtom } from "jotai";
+import { RESET } from "jotai/utils";
 import { isEqual } from "lodash-es";
 
 import TableToolbarButton from "@src/components/TableToolbar/TableToolbarButton";
@@ -50,7 +51,7 @@ export default function Extensions() {
   );
 
   const open = modal === "extensions";
-  const setOpen = (open: boolean) => setModal(open ? "extensions" : null);
+  const setOpen = (open: boolean) => setModal(open ? "extensions" : RESET);
 
   const [openMigrationGuide, setOpenMigrationGuide] = useState(false);
   const [extensionModal, setExtensionModal] = useState<{

src/components/TableToolbar/Webhooks/Webhooks.tsx

@@ -1,5 +1,6 @@
 import { useState } from "react";
 import { useAtom, useSetAtom } from "jotai";
+import { RESET } from "jotai/utils";
 import { isEqual } from "lodash-es";
 import { useSnackbar } from "notistack";
 
@@ -50,7 +51,7 @@ export default function Webhooks() {
     useState(currentWebhooks);
 
   const open = modal === "webhooks";
-  const setOpen = (open: boolean) => setModal(open ? "webhooks" : null);
+  const setOpen = (open: boolean) => setModal(open ? "webhooks" : RESET);
 
   const [webhookModal, setWebhookModal] = useState<{
     mode: "add" | "update";

src/index.tsx

@@ -8,11 +8,11 @@ import reportWebVitals from "./reportWebVitals";
 const container = document.getElementById("root")!;
 const root = createRoot(container);
 root.render(
-  // <StrictMode>
-  <Providers>
-    <App />
-  </Providers>
-  // </StrictMode>
+  <StrictMode>
+    <Providers>
+      <App />
+    </Providers>
+  </StrictMode>
 );
 
 // If you want to start measuring performance in your app, pass a function

src/pages/Table.tsx

@@ -1,5 +1,6 @@
 import { useRef, Suspense } from "react";
 import { useAtom, Provider } from "jotai";
+import { DebugAtoms } from "@src/atoms/utils";
 import { useParams } from "react-router-dom";
 import { DataGridHandle } from "react-data-grid";
 import { isEmpty } from "lodash-es";
@@ -89,6 +90,7 @@ export default function ProvidedTablePage() {
           [currentUserAtom, currentUser],
         ]}
       >
+        <DebugAtoms scope={tableScope} />
         <TableSourceFirestore />
         <main>
           <TablePage />