Paul Bailey
0fc8c719b9
- 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
38 lines
841 B
TypeScript
38 lines
841 B
TypeScript
'use client'
|
|
|
|
import { useEffect, useCallback } from 'react'
|
|
import { useRouter } from 'next/navigation'
|
|
|
|
/**
|
|
* Hook for real-time updates via polling
|
|
* Refreshes data at regular intervals to show changes from other users/browsers
|
|
*/
|
|
export function useRealtimeUpdates(intervalMs: number = 3000) {
|
|
const router = useRouter()
|
|
|
|
const refresh = useCallback(() => {
|
|
router.refresh()
|
|
}, [router])
|
|
|
|
useEffect(() => {
|
|
// Poll for updates
|
|
const interval = setInterval(() => {
|
|
refresh()
|
|
}, intervalMs)
|
|
|
|
// Also refresh when window regains focus
|
|
const handleFocus = () => {
|
|
refresh()
|
|
}
|
|
|
|
window.addEventListener('focus', handleFocus)
|
|
|
|
return () => {
|
|
clearInterval(interval)
|
|
window.removeEventListener('focus', handleFocus)
|
|
}
|
|
}, [intervalMs, refresh])
|
|
|
|
return { refresh }
|
|
}
|