Move mobile tab state into zustand

app/src/components/AppContextProvider.tsx

@@ -34,16 +34,12 @@ const defaultLanguage = Object.keys(languages).includes(browserLanguage)
   ? browserLanguage
   : "en";
 
-type mobileEditorTab = "text" | "graph";
-
 type TAppContext = {
   updateUserSettings: (newSettings: Partial<UserSettings>) => void;
   theme: Theme;
   language: string;
   shareModal: boolean;
   setShareModal: Dispatch<SetStateAction<boolean>>;
-  mobileEditorTab: mobileEditorTab;
-  toggleMobileEditorTab: () => void;
   session: Session | null;
   customer?: CustomerInfo;
   customerIsLoading: boolean;
@@ -64,15 +60,6 @@ const Provider = ({ children }: { children?: ReactNode }) => {
     LOCAL_STORAGE_SETTINGS_KEY,
     "{}"
   );
-  const [mobileEditorTab, setMobileEditorTab] =
-    useState<mobileEditorTab>("text");
-  const toggleMobileEditorTab = useCallback(
-    () =>
-      setMobileEditorTab((currentTab) =>
-        currentTab === "text" ? "graph" : "text"
-      ),
-    []
-  );
 
   const { settings, theme } = useMemo<{
     settings: UserSettings;
@@ -157,8 +144,6 @@ const Provider = ({ children }: { children?: ReactNode }) => {
         updateUserSettings,
         setShareModal,
         shareModal,
-        mobileEditorTab,
-        toggleMobileEditorTab,
         session,
         customer,
         customerIsLoading,

app/src/components/EditWrapper.tsx

@@ -1,22 +1,22 @@
-import { ReactNode, useContext } from "react";
+import { ReactNode } from "react";
 
 import { useFullscreen } from "../lib/hooks";
 import { Box } from "../slang";
-import { AppContext } from "./AppContextProvider";
 import styles from "./EditWrapper.module.css";
 import MobileTabToggle from "./MobileTabToggle";
+import { useMobileStore } from "../lib/useMobileStore";
 /**
  * Adds the wrapper for the toggle between the editor and the graph
  * on mobile.
  */
 export function EditWrapper({ children }: { children: ReactNode }) {
-  const { mobileEditorTab } = useContext(AppContext);
+  const tab = useMobileStore((state) => state.tab);
   const isFullscreen = useFullscreen();
   return (
     <Box
       as="main"
       className={styles.EditWrapper}
-      data-mobile-tab={mobileEditorTab}
+      data-mobile-tab={tab}
       template="[main] minmax(0, 1fr) auto / [main] minmax(0, 1fr)"
     >
       {children}

app/src/components/MobileTabToggle.tsx

@@ -1,11 +1,11 @@
 import { t } from "@lingui/macro";
-import { useContext } from "react";
 
 import { Box } from "../slang";
-import { AppContext } from "./AppContextProvider";
+import { useMobileStore } from "../lib/useMobileStore";
 
 export default function MobileTabToggle() {
-  const { toggleMobileEditorTab, mobileEditorTab } = useContext(AppContext);
+  const tab = useMobileStore((state) => state.tab);
+  const toggleTab = useMobileStore((state) => state.toggleTab);
   return (
     <Box p={1} at={{ tablet: { display: "none" } }}>
       <Box
@@ -14,10 +14,10 @@ export default function MobileTabToggle() {
         color="palette-white-0"
         rad={1}
         p={3}
-        onClick={toggleMobileEditorTab}
+        onClick={toggleTab}
       >
         <span className="text-xs">
-          {mobileEditorTab === "graph" ? t`Editor` : t`Graph`}
+          {tab === "graph" ? t`Editor` : t`Graph`}
         </span>
       </Box>
     </Box>

app/src/lib/useMobileStore.ts

@@ -0,0 +1,27 @@
+import { create } from "zustand";
+import { persist } from "zustand/middleware";
+
+export type MobileEditorTab = "text" | "graph";
+
+export type MobileStore = {
+  tab: MobileEditorTab;
+  toggleTab: () => void;
+};
+
+/**
+ * Stores client-side state related to the editor.
+ */
+export const useMobileStore = create<MobileStore>()(
+  persist(
+    (set) => ({
+      tab: "text",
+      toggleTab: () =>
+        set((state) => ({
+          tab: state.tab === "text" ? "graph" : "text",
+        })),
+    }),
+    {
+      name: "ff-mobile-store",
+    }
+  )
+);