fix: grid settings

src/debugFlags.ts

@@ -62,7 +62,9 @@ export const debugShowQuadrantBoxes = debug && false;
 export const debugShowCellsForDirtyQuadrants = debug && false;
 
 // --------
-// file i/o
+// Hooks
 // --------
 
 export const debugShowFileIO = debug && true;
+
+export const debugGridSettings = debug && true;

src/quadratic/QuadraticApp.tsx

@@ -7,7 +7,6 @@ import { loadAssets } from '../gridGL/loadAssets';
 import { IS_READONLY_MODE } from '../constants/app';
 import { debugSkipPythonLoad } from '../debugFlags';
 import init, { hello } from 'quadratic-core';
-import { useGridSettings } from '../ui/menus/TopBar/SubMenus/useGridSettings';
 import { SheetController } from '../grid/controller/sheetController';
 import { useGenerateLocalFiles } from '../hooks/useGenerateLocalFiles';
 import { PixiApp } from '../gridGL/pixiApp/PixiApp';
@@ -19,8 +18,6 @@ export const QuadraticApp = () => {
   const [loading, setLoading] = useState(true);
   const [itemsLoaded, setItemsLoaded] = useState<loadableItem[]>([]);
   const didMount = useRef(false);
-  const { presentationMode, setPresentationMode } = useGridSettings();
-  const [settingsReset, setSettingsReset] = useState(false);
   const [sheetController] = useState<SheetController>(new SheetController());
   const localFiles = useGenerateLocalFiles(sheetController);
   const [app] = useState(() => new PixiApp(sheetController, localFiles.save));
@@ -32,14 +29,6 @@ export const QuadraticApp = () => {
     }
   }, [itemsLoaded]);
 
-  // reset presentation mode when app starts
-  useEffect(() => {
-    if (!settingsReset) {
-      if (presentationMode) setPresentationMode(false);
-      setSettingsReset(true);
-    }
-  }, [presentationMode, setPresentationMode, settingsReset, setSettingsReset]);
-
   // Loading Effect
   useEffect(() => {
     // Ensure this only runs once

src/ui/menus/TopBar/SubMenus/useGridSettings.ts

@@ -1,7 +1,8 @@
-import { useCallback, useEffect } from 'react';
-import useLocalStorage from '../../../../hooks/useLocalStorage';
 import mixpanel from 'mixpanel-browser';
+import { atom, useRecoilState, AtomEffect } from 'recoil';
+import { debugGridSettings } from '../../../../debugFlags';
 
+const SETTINGS_KEY = 'viewSettings';
 export interface GridSettings {
   showGridAxes: boolean;
   showHeadings: boolean;
@@ -20,6 +21,40 @@ export const defaultGridSettings: GridSettings = {
   presentationMode: false,
 };
 
+// Persist the GrdiSettings
+const localStorageEffect: AtomEffect<GridSettings> = ({ setSelf, onSet }) => {
+  // Initialize from localStorage
+  // Note: presentationMode is always off on a fresh page reload
+  const savedValue = localStorage.getItem(SETTINGS_KEY);
+  if (savedValue != null) {
+    const settings = JSON.parse(savedValue);
+    const newSettings = { ...settings, presentationMode: false };
+    localStorage.setItem(SETTINGS_KEY, JSON.stringify(newSettings));
+    if (debugGridSettings) console.log('[gridSettings] initializing with values from localStorage', newSettings);
+    setSelf(newSettings);
+    window.dispatchEvent(new Event('grid-settings'));
+  }
+
+  onSet((newValue, _, isReset) => {
+    if (debugGridSettings) console.log('[gridSettings] setting new value', newValue);
+    isReset ? localStorage.removeItem(SETTINGS_KEY) : localStorage.setItem(SETTINGS_KEY, JSON.stringify(newValue));
+  });
+};
+
+// Emit an event so pixi app can respond and pull latest values from localStorage
+const emitGridSettingsChange: AtomEffect<GridSettings> = ({ onSet }) => {
+  onSet((newValue) => {
+    if (debugGridSettings) console.log('[gridSettings] emitting `grid-settings` event');
+    window.dispatchEvent(new Event('grid-settings'));
+  });
+};
+
+const gridSettingsAtom = atom({
+  key: 'gridSettings',
+  default: defaultGridSettings,
+  effects: [localStorageEffect, emitGridSettingsChange],
+});
+
 interface GridSettingsReturn {
   showGridAxes: boolean;
   showHeadings: boolean;
@@ -36,91 +71,62 @@ interface GridSettingsReturn {
 }
 
 export const useGridSettings = (): GridSettingsReturn => {
-  const [settings, setSettings] = useLocalStorage('viewSettings', defaultGridSettings);
+  const [settings, setSettings] = useRecoilState(gridSettingsAtom);
 
-  useEffect(() => {
-    if (settings) {
-      window.dispatchEvent(new Event('grid-settings'));
-    }
-  }, [settings]);
-
-  const setShowGridAxes = useCallback(
-    (value: boolean) => {
-      if (value !== settings.showGridAxes) {
+  const setShowGridAxes = (value: boolean) =>
+    setSettings((currentState) => {
+      if (value !== currentState.showGridAxes) {
         mixpanel.track('[Grid].[Settings].setShowGridAxes', { value });
-        setSettings({
-          ...settings,
-          showGridAxes: value,
-        });
+        return { ...currentState, showGridAxes: value };
       }
-    },
-    [settings, setSettings]
-  );
+      return currentState;
+    });
 
-  const setShowHeadings = useCallback(
-    (value: boolean) => {
-      if (value !== settings.showHeadings) {
+  const setShowHeadings = (value: boolean) =>
+    setSettings((currentState) => {
+      if (value !== currentState.showHeadings) {
         mixpanel.track('[Grid].[Settings].setShowHeadings', { value });
-        setSettings({
-          ...settings,
-          showHeadings: value,
-        });
+        return { ...currentState, showHeadings: value };
       }
-    },
-    [settings, setSettings]
-  );
+      return currentState;
+    });
 
-  const setShowGridLines = useCallback(
-    (value: boolean) => {
-      if (value !== settings.showGridLines) {
+  const setShowGridLines = (value: boolean) =>
+    setSettings((currentState) => {
+      if (value !== currentState.showGridLines) {
         mixpanel.track('[Grid].[Settings].setShowGridLines', { value });
-        setSettings({
-          ...settings,
-          showGridLines: value,
-        });
+        return { ...currentState, showGridLines: value };
       }
-    },
-    [settings, setSettings]
-  );
+      return currentState;
+    });
 
-  const setShowCellTypeOutlines = useCallback(
-    (value: boolean) => {
-      if (value !== settings.showCellTypeOutlines) {
+  const setShowCellTypeOutlines = (value: boolean) =>
+    setSettings((currentState) => {
+      if (value !== currentState.showCellTypeOutlines) {
         mixpanel.track('[Grid].[Settings].setShowCellTypeOutlines', { value });
-        setSettings({
-          ...settings,
-          showCellTypeOutlines: value,
-        });
+        return { ...settings, showCellTypeOutlines: value };
       }
-    },
-    [settings, setSettings]
-  );
+      return currentState;
+    });
 
-  const setShowA1Notation = useCallback(
-    (value: boolean) => {
-      if (value !== settings.showA1Notation) {
+  const setShowA1Notation = (value: boolean) =>
+    setSettings((currentState) => {
+      if (value !== currentState.showA1Notation) {
         mixpanel.track('[Grid].[Settings].setShowA1Notation', { value });
-        setSettings({
-          ...settings,
-          showA1Notation: value,
-        });
+        return { ...currentState, showA1Notation: value };
       }
-    },
-    [settings, setSettings]
-  );
+      return currentState;
+    });
 
-  const setPresentationMode = useCallback(
-    (value: boolean) => {
-      if (value !== settings.presentationMode) {
+  const setPresentationMode = (value: boolean) => {
+    setSettings((currentState) => {
+      if (value !== currentState.presentationMode) {
         mixpanel.track('[Grid].[Settings].setPresentationMode', { value });
-        setSettings({
-          ...settings,
-          presentationMode: value,
-        });
+        return { ...currentState, presentationMode: value };
       }
-    },
-    [settings, setSettings]
-  );
+      return currentState;
+    });
+  };
 
   return {
     ...settings,