diff --git a/src/App.tsx b/src/App.tsx index c75e626..e2ed838 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,5 +1,6 @@ import { useEffect } from "react"; import { useShallow } from "zustand/react/shallow"; +import { useMachineStore } from "./stores/useMachineStore"; import { useMachineCacheStore } from "./stores/useMachineCacheStore"; import { usePatternStore } from "./stores/usePatternStore"; import { useUIStore } from "./stores/useUIStore"; @@ -23,6 +24,11 @@ function App() { document.title = `Respira v${__APP_VERSION__}`; }, []); + // Initialize machine store subscriptions (once on mount) + useEffect(() => { + useMachineStore.getState().initialize(); + }, []); + // Machine cache store - for auto-loading cached pattern const { resumedPattern, resumeFileName } = useMachineCacheStore( useShallow((state) => ({ diff --git a/src/stores/useMachineStore.ts b/src/stores/useMachineStore.ts index 0e47ce7..7ee6c57 100644 --- a/src/stores/useMachineStore.ts +++ b/src/stores/useMachineStore.ts @@ -57,6 +57,9 @@ interface MachineState { resumeSewing: () => Promise; deletePattern: () => Promise; + // Initialization + initialize: () => void; + // Internal methods _setupSubscriptions: () => void; _startPolling: () => void; @@ -309,6 +312,11 @@ export const useMachineStore = create((set, get) => ({ } }, + // Initialize the store (call once from App component) + initialize: () => { + get()._setupSubscriptions(); + }, + // Setup service subscriptions _setupSubscriptions: () => { const { service } = get(); @@ -421,9 +429,6 @@ export const useMachineStore = create((set, get) => ({ }, })); -// Initialize subscriptions when store is created -useMachineStore.getState()._setupSubscriptions(); - // Selector hooks for common use cases export const useIsConnected = () => useMachineStore((state) => state.isConnected);