1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
|
"use client"
import { useEffect, useRef } from "react"
import { useQueryClient } from "@tanstack/react-query"
import { createSupabaseBrowserClient } from "@/lib/supabase/client"
import { queryKeys } from "@/lib/queries/query-keys"
import { toast } from "sonner"
import { useNotificationStore } from "@/lib/stores/notification-store"
const DEBOUNCE_MILLISECONDS = 3000
export function useRealtimeEntries() {
const queryClient = useQueryClient()
const supabaseClientReference = useRef(createSupabaseBrowserClient())
const pendingCountReference = useRef(0)
const debounceTimerReference = useRef<ReturnType<typeof setTimeout> | null>(null)
useEffect(() => {
function flushPendingNotifications() {
const count = pendingCountReference.current
if (count === 0) return
pendingCountReference.current = 0
debounceTimerReference.current = null
const message =
count === 1 ? "1 new entry" : `${count} new entries`
useNotificationStore.getState().addNotification(message)
toast(message, {
action: {
label: "refresh",
onClick: () => {
queryClient.invalidateQueries({
queryKey: queryKeys.timeline.all,
})
},
},
})
}
const channel = supabaseClientReference.current
.channel("entries-realtime")
.on(
"postgres_changes",
{
event: "INSERT",
schema: "public",
table: "entries",
},
() => {
pendingCountReference.current++
if (debounceTimerReference.current) {
clearTimeout(debounceTimerReference.current)
}
debounceTimerReference.current = setTimeout(
flushPendingNotifications,
DEBOUNCE_MILLISECONDS
)
}
)
.subscribe()
return () => {
if (debounceTimerReference.current) {
clearTimeout(debounceTimerReference.current)
}
supabaseClientReference.current.removeChannel(channel)
}
}, [queryClient])
}
|