From 976f1ff8ac3a5e3c4f05f7ff38ac03666ecd1fdb Mon Sep 17 00:00:00 2001 From: Arnas Donauskas Date: Thu, 16 Apr 2026 21:10:50 +0300 Subject: [PATCH] fix: inbox refresh loop, wrong connection status, overlapping banner MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Three issues in the Inbox page: 1. "WhatsApp not connected" banner always showed even when connected. The connection check queried .from("whatsapp_configs") (plural) but the actual table is whatsapp_config (singular). Query always returned no rows, so status was never "connected". Changed to the correct table name and also switched .single() → .maybeSingle() so a missing row returns null cleanly instead of throwing PGRST116. 2. The banner overlapped message content — it used absolute positioning at top-14, left-60, which floated over the thread's header. Restructured the page layout so the banner is part of the flex column (pushes panels down) instead of overlapping them. 3. The inbox "kept refreshing every second" — an infinite loop between MessageThread's fetch and the realtime subscription in the page: MessageThread useEffect depended on a fetchMessages callback that had [conversation, onMessagesLoaded] deps. After fetching messages, it always issued a conversations.unread_count=0 UPDATE. That UPDATE fired a postgres_changes event. The page's handleConversationEvent received it and called setActiveConversation({...prev, ...conv}) — creating a NEW OBJECT REFERENCE for the conversation prop. That changed the conversation prop passed to MessageThread → fetchMessages changed → useEffect re-fired → reset unread → fired another realtime event → loop forever (visible as ~1-2 refreshes per second). Fix: - useEffect now depends on conversation?.id only (a stable string), not the full object reference. - onMessagesLoaded is read through a ref so it doesn't need to be a dependency. - unread_count reset only runs when the conversation actually has unread messages (avoids UPDATE-thrashing realtime). Co-Authored-By: Claude Opus 4.6 (1M context) --- src/app/(dashboard)/inbox/page.tsx | 55 +++++++++-------- src/components/inbox/message-thread.tsx | 79 ++++++++++++++++--------- 2 files changed, 82 insertions(+), 52 deletions(-) diff --git a/src/app/(dashboard)/inbox/page.tsx b/src/app/(dashboard)/inbox/page.tsx index 8488883..61968cd 100644 --- a/src/app/(dashboard)/inbox/page.tsx +++ b/src/app/(dashboard)/inbox/page.tsx @@ -8,7 +8,7 @@ import { ConversationList } from "@/components/inbox/conversation-list"; import { MessageThread } from "@/components/inbox/message-thread"; import { ContactSidebar } from "@/components/inbox/contact-sidebar"; import { toast } from "sonner"; -import { Wifi, WifiOff } from "lucide-react"; +import { WifiOff } from "lucide-react"; export default function InboxPage() { const [conversations, setConversations] = useState([]); @@ -31,11 +31,13 @@ export default function InboxPage() { if (!user) return; + // Table is `whatsapp_config` (singular) — the previous "whatsapp_configs" + // query always returned no rows, so the banner always showed "not connected". const { data } = await supabase - .from("whatsapp_configs") + .from("whatsapp_config") .select("status") .eq("user_id", user.id) - .single(); + .maybeSingle(); setWhatsappConnected(data?.status === "connected"); }; @@ -167,10 +169,11 @@ export default function InboxPage() { ); return ( -
- {/* WhatsApp connection banner */} +
+ {/* WhatsApp connection banner — in the flex column, not absolute, + so it pushes the panels down instead of overlapping them. */} {whatsappConnected === false && ( -
+

WhatsApp is not connected. Go to Settings to connect your account. @@ -178,27 +181,29 @@ export default function InboxPage() {

)} - {/* Left panel: Conversation list */} - +
+ {/* Left panel: Conversation list */} + - {/* Center panel: Message thread */} - + {/* Center panel: Message thread */} + - {/* Right panel: Contact sidebar (hidden on small screens) */} -
- + {/* Right panel: Contact sidebar (hidden on small screens) */} +
+ +
); diff --git a/src/components/inbox/message-thread.tsx b/src/components/inbox/message-thread.tsx index 0465200..439b29f 100644 --- a/src/components/inbox/message-thread.tsx +++ b/src/components/inbox/message-thread.tsx @@ -101,36 +101,61 @@ export function MessageThread({ return { expired, remaining }; }, [messages]); - const fetchMessages = useCallback(async () => { - if (!conversation) return; - setLoading(true); + // Store latest callback in a ref so fetchMessages doesn't need to + // depend on `onMessagesLoaded` — otherwise parent re-renders cause + // fetchMessages to change → useEffect re-fires → refetch → realtime + // UPDATE on conversations.unread_count → parent re-renders → LOOP. + const onMessagesLoadedRef = useRef(onMessagesLoaded); + onMessagesLoadedRef.current = onMessagesLoaded; - const supabase = createClient(); - - const { data, error } = await supabase - .from("messages") - .select("*") - .eq("conversation_id", conversation.id) - .order("created_at", { ascending: true }); - - if (error) { - console.error("Failed to fetch messages:", error); - } else { - onMessagesLoaded(data ?? []); - } - - // Reset unread count - await supabase - .from("conversations") - .update({ unread_count: 0 }) - .eq("id", conversation.id); - - setLoading(false); - }, [conversation, onMessagesLoaded]); + const conversationId = conversation?.id; + const hasUnread = (conversation?.unread_count ?? 0) > 0; useEffect(() => { - fetchMessages(); - }, [fetchMessages]); + if (!conversationId) return; + + const supabase = createClient(); + let cancelled = false; + + (async () => { + setLoading(true); + + const { data, error } = await supabase + .from("messages") + .select("*") + .eq("conversation_id", conversationId) + .order("created_at", { ascending: true }); + + if (cancelled) return; + + if (error) { + console.error("Failed to fetch messages:", error); + } else { + onMessagesLoadedRef.current(data ?? []); + } + + // Only issue the unread_count reset when there's actually something + // to reset. Unconditional updates fire a realtime UPDATE event every + // time, which — combined with the parent's conversation-event handler + // — used to retrigger this effect in a loop. + if (hasUnread) { + await supabase + .from("conversations") + .update({ unread_count: 0 }) + .eq("id", conversationId); + } + + if (!cancelled) setLoading(false); + })(); + + return () => { + cancelled = true; + }; + // Re-fetch only when the selected conversation changes. `hasUnread` + // is used inside but is a boolean derived from conversation; the + // conversationId dep is the real trigger. + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [conversationId]); // Auto-scroll to bottom on new messages useEffect(() => {