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
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
|
"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"
import { useUserInterfaceStore } from "@/lib/stores/user-interface-store"
const DEBOUNCE_MILLISECONDS = 3000
const STALE_ENTRY_THRESHOLD_HOURS = 48
export function useRealtimeEntries() {
const queryClient = useQueryClient()
const supabaseClientReference = useRef(createSupabaseBrowserClient())
const pendingCountReference = useRef(0)
const debounceTimerReference = useRef<ReturnType<typeof setTimeout> | null>(null)
useEffect(() => {
function invalidateTimelineQueries() {
queryClient.invalidateQueries({
queryKey: queryKeys.timeline.all,
})
queryClient.invalidateQueries({
queryKey: queryKeys.unreadCounts.all,
})
}
function flushPendingNotifications() {
const count = pendingCountReference.current
if (count === 0) return
pendingCountReference.current = 0
debounceTimerReference.current = null
const autoRefresh = useUserInterfaceStore.getState().autoRefreshTimeline
const isAtTop = useUserInterfaceStore.getState().isEntryListAtTop
if (autoRefresh && isAtTop) {
invalidateTimelineQueries()
return
}
const message =
count === 1 ? "1 new entry" : `${count} new entries`
useNotificationStore.getState().addNotification(message)
toast(message, {
action: {
label: "refresh",
onClick: () => {
invalidateTimelineQueries()
},
},
})
}
const supabaseClient = supabaseClientReference.current
const channel = supabaseClient
.channel("entries-realtime")
.on(
"postgres_changes",
{
event: "INSERT",
schema: "public",
table: "entries",
},
(payload) => {
const publishedAt = payload.new?.published_at
if (publishedAt) {
const entryAge =
Date.now() - new Date(publishedAt).getTime()
const thresholdMilliseconds =
STALE_ENTRY_THRESHOLD_HOURS * 60 * 60 * 1000
if (entryAge > thresholdMilliseconds) {
return
}
}
pendingCountReference.current++
if (debounceTimerReference.current) {
clearTimeout(debounceTimerReference.current)
}
debounceTimerReference.current = setTimeout(
flushPendingNotifications,
DEBOUNCE_MILLISECONDS
)
}
)
.subscribe()
return () => {
if (debounceTimerReference.current) {
clearTimeout(debounceTimerReference.current)
}
supabaseClient.removeChannel(channel)
}
}, [queryClient])
}
|