meezi/web/dashboard/src/lib/offline/use-offline-sync.ts

"use client";

import { useCallback, useEffect, useRef } from "react";
import { useSyncQueueStore } from "@/lib/stores/sync-queue.store";
import {
  getAllQueueItems,
  getQueueCount,
  removeQueueItem,
  markQueueItemFailed,
} from "@/lib/offline/offline-db";
import { apiPost } from "@/lib/api/client";

/**
 * Processes one queued item and returns whether it succeeded.
 */
async function processItem(item: Awaited<ReturnType<typeof getAllQueueItems>>[number]): Promise<boolean> {
  try {
    if (item.type === "create_order") {
      const { cafeId, body } = item.payload as { cafeId: string; body: unknown };
      await apiPost(`/api/cafes/${cafeId}/orders`, body as Record<string, unknown>);
    } else if (item.type === "add_items") {
      const { cafeId, orderId, body } = item.payload as {
        cafeId: string;
        orderId: string;
        body: unknown;
      };
      await apiPost(
        `/api/cafes/${cafeId}/orders/${orderId}/items`,
        body as Record<string, unknown>
      );
    }
    return true;
  } catch {
    return false;
  }
}

/**
 * Call this hook once in the app shell to:
 * - Load initial queue count from IndexedDB on mount
 * - Listen to online/offline events
 * - Auto-sync when back online or tab becomes visible
 */
export function useOfflineSync() {
  const { setQueueCount, setSyncing, setOnline } = useSyncQueueStore();
  const syncLock = useRef(false);

  const refreshCount = useCallback(async () => {
    const n = await getQueueCount();
    setQueueCount(n);
    return n;
  }, [setQueueCount]);

  const syncQueue = useCallback(async () => {
    if (syncLock.current) return;
    if (!navigator.onLine) return;
    const count = await refreshCount();
    if (count === 0) return;

    syncLock.current = true;
    setSyncing(true);
    try {
      const items = await getAllQueueItems();
      for (const item of items) {
        if (item.status === "failed" && item.retries >= 3) continue; // give up after 3
        const ok = await processItem(item);
        if (ok) {
          await removeQueueItem(item.id);
        } else {
          await markQueueItemFailed(item.id);
        }
      }
    } finally {
      syncLock.current = false;
      setSyncing(false);
      await refreshCount();
    }
  }, [refreshCount, setSyncing]);

  useEffect(() => {
    // Load initial count
    void refreshCount();

    // Track online state
    const handleOnline = () => {
      setOnline(true);
      void syncQueue();
    };
    const handleOffline = () => setOnline(false);

    setOnline(typeof navigator !== "undefined" ? navigator.onLine : true);
    window.addEventListener("online", handleOnline);
    window.addEventListener("offline", handleOffline);

    // Sync when tab regains focus
    const handleVisibility = () => {
      if (document.visibilityState === "visible" && navigator.onLine) {
        void syncQueue();
      }
    };
    document.addEventListener("visibilitychange", handleVisibility);

    return () => {
      window.removeEventListener("online", handleOnline);
      window.removeEventListener("offline", handleOffline);
      document.removeEventListener("visibilitychange", handleVisibility);
    };
  }, [syncQueue, setOnline, refreshCount]);

  return { syncQueue, refreshCount };
}