@affectively/aeon-pages 1.3.0

package/packages/react/src/hooks/useConflicts.ts

@@ -0,0 +1,277 @@
+/**
+ * useConflicts Hook
+ *
+ * React hook for managing conflicts in offline-first applications.
+ * Provides access to conflict list, resolution methods, and statistics.
+ */
+
+import { useState, useEffect, useCallback, useMemo } from 'react';
+
+// ============================================================================
+// Types
+// ============================================================================
+
+export type ResolutionStrategy =
+  | 'local-wins'
+  | 'remote-wins'
+  | 'merge'
+  | 'last-modified'
+  | 'manual';
+
+export interface Conflict {
+  id: string;
+  operationId: string;
+  sessionId: string;
+  localData: Record<string, unknown>;
+  remoteData: Record<string, unknown>;
+  type: 'update_update' | 'delete_update' | 'update_delete' | 'concurrent';
+  severity: 'low' | 'medium' | 'high';
+  detectedAt: number;
+  resolution?: {
+    strategy: ResolutionStrategy;
+    resolvedData: Record<string, unknown>;
+    resolvedAt: number;
+    resolvedBy?: string;
+  };
+}
+
+export interface ConflictStats {
+  total: number;
+  unresolved: number;
+  highSeverity: number;
+  byType: Record<Conflict['type'], number>;
+  byStrategy: Record<ResolutionStrategy, number>;
+}
+
+export interface UseConflictsResult {
+  /** All conflicts */
+  conflicts: Conflict[];
+  /** Unresolved conflicts only */
+  unresolvedConflicts: Conflict[];
+  /** High severity conflicts */
+  highSeverityConflicts: Conflict[];
+  /** Conflict statistics */
+  stats: ConflictStats;
+  /** Resolve a conflict */
+  resolveConflict: (
+    conflictId: string,
+    strategy: ResolutionStrategy,
+    customData?: Record<string, unknown>,
+  ) => Promise<void>;
+  /** Dismiss a conflict (remove without resolution) */
+  dismissConflict: (conflictId: string) => void;
+  /** Clear all resolved conflicts */
+  clearResolved: () => void;
+  /** Refresh conflicts from source */
+  refresh: () => void;
+  /** Whether conflicts are loading */
+  isLoading: boolean;
+}
+
+// ============================================================================
+// Mock conflict resolver (would connect to actual ConflictResolver in production)
+// ============================================================================
+
+const conflictStore: Map<string, Conflict> = new Map();
+const listeners: Set<() => void> = new Set();
+
+function notifyListeners() {
+  listeners.forEach((listener) => listener());
+}
+
+// ============================================================================
+// Hook Implementation
+// ============================================================================
+
+/**
+ * Hook to manage conflicts in offline-first applications
+ */
+export function useConflicts(sessionId?: string): UseConflictsResult {
+  const [conflicts, setConflicts] = useState<Conflict[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+
+  const loadConflicts = useCallback(() => {
+    const allConflicts = Array.from(conflictStore.values());
+    const filtered = sessionId
+      ? allConflicts.filter((c) => c.sessionId === sessionId)
+      : allConflicts;
+    setConflicts(filtered);
+  }, [sessionId]);
+
+  useEffect(() => {
+    loadConflicts();
+
+    const listener = () => loadConflicts();
+    listeners.add(listener);
+
+    return () => {
+      listeners.delete(listener);
+    };
+  }, [loadConflicts]);
+
+  const unresolvedConflicts = useMemo(
+    () => conflicts.filter((c) => !c.resolution),
+    [conflicts],
+  );
+
+  const highSeverityConflicts = useMemo(
+    () => conflicts.filter((c) => !c.resolution && c.severity === 'high'),
+    [conflicts],
+  );
+
+  const stats = useMemo<ConflictStats>(() => {
+    const byType: Record<Conflict['type'], number> = {
+      update_update: 0,
+      delete_update: 0,
+      update_delete: 0,
+      concurrent: 0,
+    };
+
+    const byStrategy: Record<ResolutionStrategy, number> = {
+      'local-wins': 0,
+      'remote-wins': 0,
+      merge: 0,
+      'last-modified': 0,
+      manual: 0,
+    };
+
+    let unresolved = 0;
+    let highSeverity = 0;
+
+    for (const conflict of conflicts) {
+      byType[conflict.type]++;
+
+      if (!conflict.resolution) {
+        unresolved++;
+        if (conflict.severity === 'high') {
+          highSeverity++;
+        }
+      } else {
+        byStrategy[conflict.resolution.strategy]++;
+      }
+    }
+
+    return {
+      total: conflicts.length,
+      unresolved,
+      highSeverity,
+      byType,
+      byStrategy,
+    };
+  }, [conflicts]);
+
+  const resolveConflict = useCallback(
+    async (
+      conflictId: string,
+      strategy: ResolutionStrategy,
+      customData?: Record<string, unknown>,
+    ) => {
+      setIsLoading(true);
+
+      try {
+        const conflict = conflictStore.get(conflictId);
+        if (!conflict) {
+          throw new Error(`Conflict ${conflictId} not found`);
+        }
+
+        let resolvedData: Record<string, unknown>;
+
+        switch (strategy) {
+          case 'local-wins':
+            resolvedData = conflict.localData;
+            break;
+          case 'remote-wins':
+            resolvedData = conflict.remoteData;
+            break;
+          case 'merge':
+            // Simple merge - combine both, local wins for conflicts
+            resolvedData = { ...conflict.remoteData, ...conflict.localData };
+            break;
+          case 'last-modified':
+            // Default to local
+            resolvedData = conflict.localData;
+            break;
+          case 'manual':
+            if (!customData) {
+              throw new Error('Manual resolution requires customData');
+            }
+            resolvedData = customData;
+            break;
+          default:
+            resolvedData = conflict.localData;
+        }
+
+        conflict.resolution = {
+          strategy,
+          resolvedData,
+          resolvedAt: Date.now(),
+        };
+
+        conflictStore.set(conflictId, conflict);
+        notifyListeners();
+      } finally {
+        setIsLoading(false);
+      }
+    },
+    [],
+  );
+
+  const dismissConflict = useCallback((conflictId: string) => {
+    conflictStore.delete(conflictId);
+    notifyListeners();
+  }, []);
+
+  const clearResolved = useCallback(() => {
+    for (const [id, conflict] of conflictStore) {
+      if (conflict.resolution) {
+        conflictStore.delete(id);
+      }
+    }
+    notifyListeners();
+  }, []);
+
+  const refresh = useCallback(() => {
+    loadConflicts();
+  }, [loadConflicts]);
+
+  return {
+    conflicts,
+    unresolvedConflicts,
+    highSeverityConflicts,
+    stats,
+    resolveConflict,
+    dismissConflict,
+    clearResolved,
+    refresh,
+    isLoading,
+  };
+}
+
+// ============================================================================
+// Helper functions for external use
+// ============================================================================
+
+/**
+ * Add a conflict to the store (for testing or external integration)
+ */
+export function addConflict(conflict: Conflict): void {
+  conflictStore.set(conflict.id, conflict);
+  notifyListeners();
+}
+
+/**
+ * Get all conflicts from the store
+ */
+export function getAllConflicts(): Conflict[] {
+  return Array.from(conflictStore.values());
+}
+
+/**
+ * Clear all conflicts
+ */
+export function clearAllConflicts(): void {
+  conflictStore.clear();
+  notifyListeners();
+}
+
+export default useConflicts;

package/packages/react/src/hooks/useNetworkState.ts

@@ -0,0 +1,209 @@
+/**
+ * useNetworkState Hook
+ *
+ * React hook for monitoring network state and bandwidth.
+ * Provides real-time updates on connection quality and effective type.
+ */
+
+import { useState, useEffect, useCallback } from 'react';
+
+// ============================================================================
+// Types
+// ============================================================================
+
+export type NetworkState = 'online' | 'offline' | 'poor' | 'unknown';
+
+export interface BandwidthProfile {
+  /** Estimated bandwidth in Kbps */
+  speedKbps: number;
+  /** Estimated latency in ms */
+  latencyMs: number;
+  /** Reliability score (0-1) */
+  reliability: number;
+  /** Effective connection type */
+  effectiveType: '2g' | '3g' | '4g' | 'slow-2g' | 'unknown';
+}
+
+export interface NetworkStateResult {
+  /** Current network state */
+  state: NetworkState;
+  /** Whether currently online */
+  isOnline: boolean;
+  /** Whether on poor connection */
+  isPoor: boolean;
+  /** Bandwidth profile */
+  bandwidth: BandwidthProfile;
+  /** Time since last state change */
+  timeSinceChange: number;
+  /** Force refresh network state */
+  refresh: () => void;
+}
+
+// Network Information API types
+interface NetworkInformation {
+  effectiveType?: '2g' | '3g' | '4g' | 'slow-2g';
+  downlink?: number;
+  rtt?: number;
+  saveData?: boolean;
+  addEventListener?: (event: string, callback: () => void) => void;
+  removeEventListener?: (event: string, callback: () => void) => void;
+}
+
+interface NavigatorWithConnection extends Navigator {
+  connection?: NetworkInformation;
+  mozConnection?: NetworkInformation;
+  webkitConnection?: NetworkInformation;
+}
+
+// ============================================================================
+// Hook Implementation
+// ============================================================================
+
+/**
+ * Hook to monitor network state and bandwidth
+ */
+export function useNetworkState(): NetworkStateResult {
+  const [state, setState] = useState<NetworkState>('unknown');
+  const [lastChange, setLastChange] = useState(Date.now());
+  const [bandwidth, setBandwidth] = useState<BandwidthProfile>({
+    speedKbps: 1024,
+    latencyMs: 50,
+    reliability: 1,
+    effectiveType: 'unknown',
+  });
+
+  const getConnection = useCallback((): NetworkInformation | undefined => {
+    if (typeof navigator === 'undefined') return undefined;
+    const nav = navigator as NavigatorWithConnection;
+    return nav.connection || nav.mozConnection || nav.webkitConnection;
+  }, []);
+
+  const updateBandwidth = useCallback(() => {
+    const conn = getConnection();
+    if (!conn) return;
+
+    const effectiveType = conn.effectiveType || 'unknown';
+    let speedKbps = 1024;
+    let latencyMs = 50;
+    let reliability = 1;
+
+    switch (effectiveType) {
+      case 'slow-2g':
+        speedKbps = 50;
+        latencyMs = 2000;
+        reliability = 0.5;
+        break;
+      case '2g':
+        speedKbps = 150;
+        latencyMs = 1000;
+        reliability = 0.7;
+        break;
+      case '3g':
+        speedKbps = 750;
+        latencyMs = 400;
+        reliability = 0.85;
+        break;
+      case '4g':
+        speedKbps = 5000;
+        latencyMs = 50;
+        reliability = 0.95;
+        break;
+    }
+
+    // Use actual values if available
+    if (conn.downlink) {
+      speedKbps = conn.downlink * 1024;
+    }
+    if (conn.rtt) {
+      latencyMs = conn.rtt;
+    }
+
+    setBandwidth({
+      speedKbps,
+      latencyMs,
+      reliability,
+      effectiveType,
+    });
+
+    // Update state based on connection quality
+    if (effectiveType === 'slow-2g' || effectiveType === '2g') {
+      setState((prev) => {
+        if (prev !== 'poor') {
+          setLastChange(Date.now());
+        }
+        return 'poor';
+      });
+    }
+  }, [getConnection]);
+
+  const updateOnlineState = useCallback(() => {
+    if (typeof navigator === 'undefined') return;
+
+    const isOnline = navigator.onLine;
+    setState((prev) => {
+      const newState = isOnline ? 'online' : 'offline';
+      if (prev !== newState) {
+        setLastChange(Date.now());
+      }
+      return newState;
+    });
+
+    if (isOnline) {
+      updateBandwidth();
+    }
+  }, [updateBandwidth]);
+
+  const refresh = useCallback(() => {
+    updateOnlineState();
+  }, [updateOnlineState]);
+
+  useEffect(() => {
+    // Initial state
+    updateOnlineState();
+
+    // Listen for online/offline events
+    const handleOnline = () => {
+      setState('online');
+      setLastChange(Date.now());
+      updateBandwidth();
+    };
+
+    const handleOffline = () => {
+      setState('offline');
+      setLastChange(Date.now());
+    };
+
+    if (typeof window !== 'undefined') {
+      window.addEventListener('online', handleOnline);
+      window.addEventListener('offline', handleOffline);
+    }
+
+    // Listen for connection changes
+    const conn = getConnection();
+    if (conn?.addEventListener) {
+      conn.addEventListener('change', updateBandwidth);
+    }
+
+    return () => {
+      if (typeof window !== 'undefined') {
+        window.removeEventListener('online', handleOnline);
+        window.removeEventListener('offline', handleOffline);
+      }
+
+      if (conn?.removeEventListener) {
+        conn.removeEventListener('change', updateBandwidth);
+      }
+    };
+  }, [getConnection, updateBandwidth, updateOnlineState]);
+
+  return {
+    state,
+    isOnline: state === 'online' || state === 'poor',
+    isPoor: state === 'poor',
+    bandwidth,
+    timeSinceChange: Date.now() - lastChange,
+    refresh,
+  };
+}
+
+export default useNetworkState;