zustand

// stores/useAuthStore.ts — Authentication state
import { create } from 'zustand'
import { persist } from 'zustand/middleware'

interface User {
  id: string
  name: string
  email: string
  role: 'admin' | 'member'
}

interface AuthState {
  user: User | null
  token: string | null
  isLoading: boolean
  login: (email: string, password: string) => Promise<void>
  logout: () => void
  updateProfile: (updates: Partial<User>) => void
}

export const useAuthStore = create<AuthState>()(
  persist(
    (set, get) => ({
      user: null,
      token: null,
      isLoading: false,

      login: async (email, password) => {
        set({ isLoading: true })
        try {
          const res = await fetch('/api/auth/login', {
            method: 'POST',
            body: JSON.stringify({ email, password }),
          })
          const { user, token } = await res.json()
          set({ user, token, isLoading: false })
        } catch {
          set({ isLoading: false })
          throw new Error('Login failed')
        }
      },

      logout: () => set({ user: null, token: null }),

      updateProfile: (updates) =>
        set((state) => ({
          user: state.user ? { ...state.user, ...updates } : null,
        })),
    }),
    { name: 'auth-storage' }   // persists to localStorage
  )
)

// components/Header.tsx — Consume state with a hook
import { useAuthStore } from '../stores/useAuthStore'

export function Header() {
  // Only re-renders when these specific values change
  const user = useAuthStore((state) => state.user)
  const logout = useAuthStore((state) => state.logout)

  return (
    <header>
      {user ? (
        <>
          <span>Welcome, {user.name}</span>
          <button onClick={logout}>Sign Out</button>
        </>
      ) : (
        <a href="/login">Sign In</a>
      )}
    </header>
  )
}

// stores/useAppStore.ts — Combined store with slices
import { create } from 'zustand'
import { devtools, immer } from 'zustand/middleware'

interface AppState {
  // UI slice
  sidebarOpen: boolean
  theme: 'light' | 'dark'
  toggleSidebar: () => void
  setTheme: (theme: 'light' | 'dark') => void

  // Notifications slice
  notifications: Array<{ id: string; message: string; type: 'info' | 'error' }>
  addNotification: (message: string, type: 'info' | 'error') => void
  removeNotification: (id: string) => void
}

export const useAppStore = create<AppState>()(
  devtools(
    immer((set) => ({
      sidebarOpen: true,
      theme: 'light',
      notifications: [],

      toggleSidebar: () => set((state) => { state.sidebarOpen = !state.sidebarOpen }),
      setTheme: (theme) => set((state) => { state.theme = theme }),

      addNotification: (message, type) => set((state) => {
        state.notifications.push({ id: crypto.randomUUID(), message, type })
      }),
      removeNotification: (id) => set((state) => {
        state.notifications = state.notifications.filter(n => n.id !== id)
      }),
    })),
    { name: 'app-store' }    // shows in Redux DevTools
  )
)

// lib/api.ts — Access store from non-React code
import { useAuthStore } from '../stores/useAuthStore'

export async function fetchWithAuth(url: string) {
  const token = useAuthStore.getState().token
  const res = await fetch(url, {
    headers: { Authorization: `Bearer ${token}` },
  })
  if (res.status === 401) {
    useAuthStore.getState().logout()
  }
  return res
}