State Management

TanStack Query v5 (Server State)

API verilerini yönetir: caching, refetching, invalidation.

Yapılandırma

// staleTime: 60s (1 dakika fresh kabul)
// refetchInterval: 60s (1 dakikada bir yenile)
const queryClient = new QueryClient({
  defaultOptions: { queries: { staleTime: 60000, refetchInterval: 60000 } }
})

Query Key Pattern

const alarmKeys = {
  all: ['alarms'],
  policies: () => ['alarms', 'policies'],
  policy: (id) => ['alarms', 'policies', id],
  incidents: (filters) => ['alarms', 'incidents', filters],
  count: () => ['alarms', 'count'],
}

Custom Hooks

• useAlarmPolicies(), useAlarmPolicy(id) — Alarm kuralları
• useAlarmIncidents(params) — Alarm olayları (filtreleme)
• useAlarmCount() — Dashboard KPI sayaçları
• useAggregatedData() — Aggregated ölçüm verileri
• useCreateAlarmPolicy(), useUpdateAlarmPolicy() — Mutation hooks
• useAckAlarm(), useSnoozeAlarm(), useCloseAlarm() — Alarm aksiyonları

Zustand v4 (Client State)

useSidebar Store

useSidebar = {
  isMobileOpen: boolean,
  setMobileOpen(open),
  toggleMobile(),
  touchStartX, touchEndX,    // Swipe gesture tracking
  handleSwipe(),              // Sol kenardan sağa = aç
  swipeThreshold: 75          // px
}
// persist: 'sidebar-storage' (localStorage)

useAuthStore

useAuthStore = {
  user: User | null,
  accessToken: string | null,
  refreshToken: string | null,
  isAuthenticated: boolean,
  setAuth(user, tokens),
  clearAuth(),
}
// persist: 'auth-storage' (localStorage)

useThemeStore

useThemeStore = { theme: 'light' | 'dark' | 'system', setTheme() }

WebSocket

WebSocketClient

class WebSocketClient {
  // Auto-reconnect: max 10 deneme, 3s aralık
  // Ping/pong: 30s keepalive
  // Token-based auth: ws://host/ws/telemetry?token=JWT
  // Multi-handler: subscription pattern
}

WebSocketProvider (React Context)

// Token varsa otomatik bağlanır
// siteConfig.wsUrl kullanır
<WebSocketProvider>
  <App />
</WebSocketProvider>

Mesaj Tipleri

Tip	Açıklama	Veri
measurement	Ölçüm güncelleme	device_id, data (voltage, current, power...)
device_status	Cihaz durumu	device_id, online/offline
gateway_status	Gateway durumu	gateway_id, online/offline
alarm	Alarm bildirimi	alarm_id, severity, device_id

Custom Hooks

useAlarmWebSocket

WebSocket'ten alarm mesajlarını dinler, toast bildirimi gösterir ve TanStack Query cache'ini invalidate eder.

useTelemetry / useDeviceTelemetry

WebSocket'ten gerçek zamanlı ölçüm verilerini dinler. Widget'lara canlı veri besler.

const { data } = useDeviceTelemetry(deviceId)
// data: { voltage_l1n: 230.5, current_l1: 45.2, ... }

API Client

class ApiClient {
  constructor(baseUrl: string) // siteConfig.apiUrl
  
  getToken()     // localStorage'dan access_token
  getHeaders()   // Authorization: Bearer {token}
  
  get<T>(url)
  post<T>(url, data)
  put<T>(url, data)
  delete<T>(url)
}

export const apiClient = new ApiClient(siteConfig.apiUrl)