renaming zustand hook

src/hooks/useActiveApp.ts

@@ -1,8 +1,8 @@
-import { useExtensionState } from "./useExtensionState";
+import { useStore } from "./useStore";
 
 export function useActiveApp() {
-  const apps = useExtensionState((s) => s.apps);
-  const activeAppName = useExtensionState((s) => s.activeAppName);
+  const apps = useStore((s) => s.apps);
+  const activeAppName = useStore((s) => s.activeAppName);
 
   return apps.find((app) => app.name === activeAppName);
 }

src/hooks/useDomain.ts

@@ -1,7 +1,7 @@
-import { useExtensionState } from "./useExtensionState";
+import { useStore } from "./useStore";
 
 export function useDomain() {
-  const domain = useExtensionState((s) => s.domain);
-  const setDomain = useExtensionState((s) => s.setDomain);
+  const domain = useStore((s) => s.domain);
+  const setDomain = useStore((s) => s.setDomain);
   return { domain, setDomain };
 }

src/hooks/useEditMode.ts

@@ -1,8 +1,8 @@
-import { useExtensionState } from "./useExtensionState";
+import { useStore } from "./useStore";
 
 export function useEditMode() {
-  const isEditing = useExtensionState((s) => s.isEditing);
-  const setEditMode = useExtensionState((s) => s.setEditMode);
+  const isEditing = useStore((s) => s.isEditing);
+  const setEditMode = useStore((s) => s.setEditMode);
   const startEditMode = () => setEditMode(true);
   const endEditMode = () => setEditMode(false);
 

src/hooks/useExtensionState.ts → src/hooks/useStore.ts

@@ -1,7 +1,6 @@
 import { create } from "zustand";
 import { createJSONStorage, persist } from "zustand/middleware";
 
-import ChromeStateStorage from "@/lib/ChromeStateStorage";
 import { DEMO_APPS, INSPECTOR_APP } from "@/lib/EmbeddableApps";
 
 import type { RetoolApp } from "@/types/extension";
@@ -26,6 +25,8 @@ export type Actions = {
   updateActiveApp: (props: Partial<RetoolApp>) => void;
   setEditMode: (state: boolean) => void;
   updateWorkflow: (workflow: Partial<State["workflow"]>) => void;
+  getActiveApp: () => RetoolApp | undefined;
+  reset: () => void;
 };
 
 export const STORAGE_KEY = "app-embedder-for-retool2";
@@ -41,10 +42,11 @@ const initialState: State = {
   apps: [INSPECTOR_APP, ...DEMO_APPS],
 };
 
-export const useExtensionState = create<State & Actions>()(
+export const useStore = create<State & Actions>()(
   // persist(
   (set, get) => ({
     ...initialState,
+    reset: () => useStore.setState(initialState),
     setDomain: (domain) => set(() => ({ domain })),
     setEditMode: (isEditing) => set(() => ({ isEditing })),
     setActiveApp: (activeAppName) => set(() => ({ activeAppName })),
@@ -62,22 +64,20 @@ export const useExtensionState = create<State & Actions>()(
         get().updateApp(name, props);
       }
     },
-    updateWorkflow: (props) =>
+    updateWorkflow: (props) => {
       set((state) => ({
         ...state,
         workflow: { ...state.workflow, ...props },
-      })),
+      }));
+    },
+    getActiveApp: () => {
+      const activeAppName = get().activeAppName;
+      return get().apps.find((app) => app.name === activeAppName);
+    },
   })
   //   {
   //     name: STORAGE_KEY,
   //     storage: createJSONStorage(() => ChromeStateStorage),
   //   }
   // )
 );
-
-export const getActiveApp = () => {
-  const state = useExtensionState.getState();
-  return state.apps.find((app) => app.name === state.activeAppName);
-};
-
-export const reset = () => useExtensionState.setState(initialState);

src/pages/Options/Tabs/ConfigTab.tsx

@@ -3,7 +3,7 @@ import { Col, Container, Row } from "react-bootstrap";
 import { FormProvider, useForm } from "react-hook-form";
 
 import { useEditMode } from "@/hooks/useEditMode";
-import { getActiveApp, useExtensionState } from "@/hooks/useExtensionState";
+import { useStore } from "@/hooks/useStore";
 
 import AppCard from "../components/AppCard";
 import AppForm from "../components/AppForm";
@@ -15,7 +15,7 @@ function ConfigTab() {
   const methods = useForm<RetoolApp>();
   const { isEditing, startEditMode } = useEditMode();
 
-  const app = getActiveApp();
+  const app = useStore((s) => s.getActiveApp());
 
   return (
     <>

src/pages/Options/Tabs/JSONTab.tsx

@@ -2,12 +2,12 @@ import React from "react";
 import { Card, Col, Row } from "react-bootstrap";
 import Container from "react-bootstrap/Container";
 
-import { useExtensionState } from "@/hooks/useExtensionState";
+import { useStore } from "@/hooks/useStore";
 
 import { SimpleJsonView } from "../components/SimpleJsonView";
 
 function JSONTab() {
-  const state = useExtensionState();
+  const state = useStore();
   console.log(state);
   return (
     <Container className="pb-5">

src/pages/Options/Tabs/StorageTab.tsx

@@ -1,13 +1,14 @@
 import React from "react";
 import { Alert, Button, Col, Container, Row } from "react-bootstrap";
 
-import { reset, useExtensionState } from "@/hooks/useExtensionState";
+import { useStore } from "@/hooks/useStore";
 
 import AppCard from "../components/AppCard";
 
 function StorageTab() {
-  const apps = useExtensionState((s) => s.apps);
-  const activeAppName = useExtensionState((s) => s.activeAppName);
+  const apps = useStore((s) => s.apps);
+  const reset = useStore((s) => s.reset);
+  const activeAppName = useStore((s) => s.activeAppName);
 
   return (
     <Container className="px-5 pb-5 mt-4">

src/pages/Options/Tabs/WorkflowTab.tsx

@@ -6,16 +6,16 @@ import Container from "react-bootstrap/Container";
 import Form from "react-bootstrap/Form";
 import useSWR from "swr";
 
-import { useExtensionState } from "@/hooks/useExtensionState";
+import { useStore } from "@/hooks/useStore";
 import { getWorkflowApps } from "@/lib/WorkflowDataFetcher";
 
 import { SimpleJsonView } from "../components/SimpleJsonView";
 
 import type { RetoolApp } from "@/types/extension";
 
 function WorkflowTab() {
-  const workflow = useExtensionState((s) => s.workflow);
-  const updateWorkflow = useExtensionState((s) => s.updateWorkflow);
+  const workflow = useStore((s) => s.workflow);
+  const updateWorkflow = useStore((s) => s.updateWorkflow);
 
   const [useProvider, setUseProvider] = useState(false);
 

src/pages/Options/components/AppCard.tsx

@@ -1,17 +1,15 @@
 import "./AppCard.css";
 
 import { clsx } from "clsx";
-import React, { useMemo } from "react";
+import React from "react";
 import { Badge, Button, Card, Col, Row } from "react-bootstrap";
 
-import { useDomain } from "@/hooks/useDomain";
 import { useEditMode } from "@/hooks/useEditMode";
-import { useExtensionState } from "@/hooks/useExtensionState";
 import { useRetoolAppUrl } from "@/hooks/useRetoolAppUrl";
+import { useStore } from "@/hooks/useStore";
 
 import type { RetoolApp, UrlParam } from "@/types/extension";
 
-// Base props
 type BaseProps = {
   app: RetoolApp;
   isActive: boolean;
@@ -30,8 +28,8 @@ type Props = EditProps | StdProps;
 
 function AppCard({ app, isActive, ...props }: Props) {
   const { endEditMode } = useEditMode();
-  const domain = useExtensionState((s) => s.domain);
-  const setActiveApp = useExtensionState((s) => s.setActiveApp);
+  const domain = useStore((s) => s.domain);
+  const setActiveApp = useStore((s) => s.setActiveApp);
 
   const appUrl = useRetoolAppUrl(domain, app);
 

src/pages/Options/components/AppForm.tsx

@@ -5,7 +5,7 @@ import { Controller, useFieldArray, useForm } from "react-hook-form";
 
 import { useDomain } from "@/hooks/useDomain";
 import { useEditMode } from "@/hooks/useEditMode";
-import { useExtensionState } from "@/hooks/useExtensionState";
+import { useStore } from "@/hooks/useStore";
 import { errorToast, successToast } from "@/lib/toast";
 
 import AddButton from "./AddButton";
@@ -25,7 +25,7 @@ const INIT_PARAM = { param: "", value: "" };
 function AppForm({ app }: Props) {
   const { domain } = useDomain();
   const { setEditMode } = useEditMode();
-  const updateActiveApp = useExtensionState((s) => s.updateActiveApp);
+  const updateActiveApp = useStore((s) => s.updateActiveApp);
 
   const {
     control,