Add real-time updates and fix delete button state

- Simplified useRealtimeSync to use router.refresh() polling
- Created RealtimeUpdater component for easy integration
- Added real-time updates to home page (3s polling)
- Fixed DeleteItemButton to properly reset state on error
- Updates now refresh every 3 seconds and on window focus
- Changes from other users/browsers will appear quickly

hooks/useRealtimeSync.ts

@@ -1,10 +1,10 @@
 'use client'
 
-import { useEffect, useRef, useCallback, useState } from 'react'
+import { useEffect, useRef, useCallback } from 'react'
 import { useRouter } from 'next/navigation'
 
 interface UseRealtimeSyncOptions {
-  listId: string
+  listId?: string
   enabled?: boolean
   pollInterval?: number
   onUpdate?: () => void
@@ -12,7 +12,7 @@ interface UseRealtimeSyncOptions {
 
 /**
  * Hook to enable real-time synchronization of list data
- * Polls the server for updates and refreshes the page when changes are detected
+ * Polls the server for updates by refreshing the route
  */
 export function useRealtimeSync({
   listId,
@@ -21,48 +21,14 @@ export function useRealtimeSync({
   onUpdate
 }: UseRealtimeSyncOptions) {
   const router = useRouter()
-  const [lastUpdated, setLastUpdated] = useState<number>(Date.now())
   const intervalRef = useRef<NodeJS.Timeout | null>(null)
-  const isPollingRef = useRef(false)
 
-  const checkForUpdates = useCallback(async () => {
-    // Prevent concurrent polling
-    if (isPollingRef.current) return
-    
-    try {
-      isPollingRef.current = true
-      
-      // Fetch the latest update timestamp for the list
-      const response = await fetch(`/api/lists/${listId}/last-updated`, {
-        method: 'GET',
-        headers: {
-          'Cache-Control': 'no-cache',
-        },
-      })
-
-      if (response.ok) {
-        const data = await response.json()
-        const serverTimestamp = new Date(data.lastUpdated).getTime()
-        
-        // If server timestamp is newer than our last known update, refresh
-        if (serverTimestamp > lastUpdated) {
-          setLastUpdated(serverTimestamp)
-          
-          // Refresh the current route to get latest data
-          router.refresh()
-          
-          // Call optional callback
-          if (onUpdate) {
-            onUpdate()
-          }
-        }
-      }
-    } catch (error) {
-      console.error('Error checking for updates:', error)
-    } finally {
-      isPollingRef.current = false
+  const refresh = useCallback(() => {
+    router.refresh()
+    if (onUpdate) {
+      onUpdate()
     }
-  }, [listId, lastUpdated, router, onUpdate])
+  }, [router, onUpdate])
 
   useEffect(() => {
     if (!enabled) {
@@ -74,7 +40,7 @@ export function useRealtimeSync({
     }
 
     // Start polling
-    intervalRef.current = setInterval(checkForUpdates, pollInterval)
+    intervalRef.current = setInterval(refresh, pollInterval)
 
     // Cleanup on unmount
     return () => {
@@ -83,13 +49,13 @@ export function useRealtimeSync({
         intervalRef.current = null
       }
     }
-  }, [enabled, pollInterval, checkForUpdates])
+  }, [enabled, pollInterval, refresh])
 
-  // Also check for updates when the page becomes visible again
+  // Also refresh when the page becomes visible again
   useEffect(() => {
     const handleVisibilityChange = () => {
       if (document.visibilityState === 'visible' && enabled) {
-        checkForUpdates()
+        refresh()
       }
     }
 
@@ -97,10 +63,9 @@ export function useRealtimeSync({
     return () => {
       document.removeEventListener('visibilitychange', handleVisibilityChange)
     }
-  }, [enabled, checkForUpdates])
+  }, [enabled, refresh])
 
   return {
-    lastUpdated,
-    checkForUpdates,
+    refresh,
   }
 }