Generate Store Action

Generate a Zustand async action for the health store with loading/error state management.

Usage

When user requests to add a store action, ask for:

1. Action name (e.g., "fetchWaterLogs", "addSleepLog", "updateWeight")
2. API endpoint (e.g., "/api/water-intake", "/api/sleep")
3. HTTP method (GET, POST, PUT, DELETE)
4. Request/response types
5. State updates needed (what gets stored in Zustand)

Implementation Pattern

Based on

src/lib/store/healthStore.ts

existing patterns.

Pattern Structure

Add to existing store in

src/lib/store/healthStore.ts

:

// In HealthState interface:
interface HealthState {
  // ... existing state ...
  waterLogs: WaterLog[];

  // ... existing actions ...
  fetchWaterLogs: (date: string) => Promise<void>;
  addWaterLog: (log: Omit<WaterLog, 'id' | 'createdAt'>) => Promise<void>;
  deleteWaterLog: (id: string) => Promise<void>;
}

// In the store creation:
export const useHealthStore = create<HealthState>((set, get) => ({
  // ... existing state ...
  waterLogs: [],

  // ... existing actions ...

  fetchWaterLogs: async (date: string) => {
    set({ isLoading: true, error: null });
    try {
      const response = await fetch(`/api/water-intake?date=${date}`);
      if (!response.ok) throw new Error('Failed to fetch water logs');
      const data = await response.json();
      set({ waterLogs: data, isLoading: false });
    } catch (err: any) {
      set({ error: err.message, isLoading: false });
      toast.error(err.message || 'Failed to fetch water logs');
    }
  },

  addWaterLog: async (log: Omit<WaterLog, 'id' | 'createdAt'>) => {
    set({ isLoading: true, error: null });
    try {
      const response = await fetch('/api/water-intake', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(log),
      });
      if (!response.ok) throw new Error('Failed to add water log');
      const newLog = await response.json();
      set({
        waterLogs: [...get().waterLogs, newLog],
        isLoading: false,
      });
      toast.success('Water intake logged');
    } catch (err: any) {
      set({ error: err.message, isLoading: false });
      toast.error(err.message || 'Failed to add water log');
    }
  },

  deleteWaterLog: async (id: string) => {
    set({ isLoading: true, error: null });
    try {
      const response = await fetch(`/api/water-intake?id=${id}`, {
        method: 'DELETE',
      });
      if (!response.ok) throw new Error('Failed to delete water log');
      set({
        waterLogs: get().waterLogs.filter((log) => log.id !== id),
        isLoading: false,
      });
      toast.success('Water log deleted');
    } catch (err: any) {
      set({ error: err.message, isLoading: false });
      toast.error(err.message || 'Failed to delete water log');
    }
  },
}));

Key Conventions

• Always wrap in

  set({ isLoading: true, error: null })

• Use

  await fetch()

  with proper method and headers
• Check

  !response.ok

  to handle HTTP errors
• Parse response with

  await response.json()

• Use

  get()

  to access current state in actions
• Update state with

  set()

  including

  isLoading: false

• Call

  toast.success()

  on success
• Call

  toast.error()

  on failure
• Include error message in toast:

  err.message || 'Default message'

• For arrays: use spread operator to create new array
• State updates are immutable (don't mutate existing state)

Steps

1. Ask user for action name, API endpoint, method, and types
2. Open

   src/lib/store/healthStore.ts

3. Add action type to HealthState interface
4. Add initial state if needed (empty array, null, etc.)
5. Implement action function following the pattern above
6. Include proper error handling and toast notifications
7. Format with Prettier

Implementation Checklist

• Action added to HealthState interface
• Initial state added if new data field
• Async action with try-catch
• Loading state managed (set/unset)
• Error state managed
• API endpoint correct
• HTTP method correct
• Response validation (!response.ok)
• Toast notifications added
• State updates are immutable
• get() used to access current state