fix: Remove module-level side effect from useMachineStore initialization

**Problem:**
Store initialization was happening at module load via side effect:
```typescript
useMachineStore.getState()._setupSubscriptions();
```

This caused several issues:
- Executed before app was ready
- Made testing difficult (runs before test setup)
- Hard to control initialization timing
- Could cause issues in different environments

**Solution:**
- Added public `initialize()` method to useMachineStore
- Call initialization from App component's useEffect (proper lifecycle)
- Removed module-level side effect

**Benefits:**
-  Controlled initialization timing
-  Better testability (no side effects on import)
-  Follows React lifecycle patterns
-  No behavioral changes for end users

**Testing:**
- Build tested successfully
- Linter passed
- All TypeScript types validated

Fixes #38

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
Jan-Henrik Bruhn 2025-12-26 23:29:08 +01:00
parent 851d37c1d2
commit e44bea11c1
2 changed files with 14 additions and 3 deletions

View file

@ -1,5 +1,6 @@
import { useEffect } from "react"; import { useEffect } from "react";
import { useShallow } from "zustand/react/shallow"; import { useShallow } from "zustand/react/shallow";
import { useMachineStore } from "./stores/useMachineStore";
import { useMachineCacheStore } from "./stores/useMachineCacheStore"; import { useMachineCacheStore } from "./stores/useMachineCacheStore";
import { usePatternStore } from "./stores/usePatternStore"; import { usePatternStore } from "./stores/usePatternStore";
import { useUIStore } from "./stores/useUIStore"; import { useUIStore } from "./stores/useUIStore";
@ -23,6 +24,11 @@ function App() {
document.title = `Respira v${__APP_VERSION__}`; 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 // Machine cache store - for auto-loading cached pattern
const { resumedPattern, resumeFileName } = useMachineCacheStore( const { resumedPattern, resumeFileName } = useMachineCacheStore(
useShallow((state) => ({ useShallow((state) => ({

View file

@ -57,6 +57,9 @@ interface MachineState {
resumeSewing: () => Promise<void>; resumeSewing: () => Promise<void>;
deletePattern: () => Promise<void>; deletePattern: () => Promise<void>;
// Initialization
initialize: () => void;
// Internal methods // Internal methods
_setupSubscriptions: () => void; _setupSubscriptions: () => void;
_startPolling: () => void; _startPolling: () => void;
@ -309,6 +312,11 @@ export const useMachineStore = create<MachineState>((set, get) => ({
} }
}, },
// Initialize the store (call once from App component)
initialize: () => {
get()._setupSubscriptions();
},
// Setup service subscriptions // Setup service subscriptions
_setupSubscriptions: () => { _setupSubscriptions: () => {
const { service } = get(); const { service } = get();
@ -421,9 +429,6 @@ export const useMachineStore = create<MachineState>((set, get) => ({
}, },
})); }));
// Initialize subscriptions when store is created
useMachineStore.getState()._setupSubscriptions();
// Selector hooks for common use cases // Selector hooks for common use cases
export const useIsConnected = () => export const useIsConnected = () =>
useMachineStore((state) => state.isConnected); useMachineStore((state) => state.isConnected);