diff --git a/frontend/src/components/notifications/NotificationToaster.tsx b/frontend/src/components/notifications/NotificationToaster.tsx index 22e52dd..11597f0 100644 --- a/frontend/src/components/notifications/NotificationToaster.tsx +++ b/frontend/src/components/notifications/NotificationToaster.tsx @@ -62,6 +62,12 @@ export default function NotificationToaster() { maxSeenIdRef.current = maxCurrent; } + // Eagerly refresh incoming requests when connection_request notifications arrive + // so accept buttons work immediately on NotificationsPage / PeoplePage + if (newNotifications.some((n) => n.type === 'connection_request')) { + queryClient.invalidateQueries({ queryKey: ['connections', 'incoming'] }); + } + // Show toasts newNotifications.forEach((notification) => { if (notification.type === 'connection_request' && notification.source_id) { diff --git a/frontend/src/components/notifications/NotificationsPage.tsx b/frontend/src/components/notifications/NotificationsPage.tsx index 35533b2..2ab5f9c 100644 --- a/frontend/src/components/notifications/NotificationsPage.tsx +++ b/frontend/src/components/notifications/NotificationsPage.tsx @@ -1,5 +1,6 @@ -import { useState, useMemo } from 'react'; +import { useState, useMemo, useEffect } from 'react'; import { useNavigate } from 'react-router-dom'; +import { useQueryClient } from '@tanstack/react-query'; import { Bell, Check, CheckCheck, Trash2, UserPlus, Info, AlertCircle, X, Loader2 } from 'lucide-react'; import { formatDistanceToNow } from 'date-fns'; import { toast } from 'sonner'; @@ -31,6 +32,7 @@ export default function NotificationsPage() { } = useNotifications(); const { incomingRequests, respond, isResponding } = useConnections(); + const queryClient = useQueryClient(); const navigate = useNavigate(); const [filter, setFilter] = useState('all'); @@ -40,6 +42,17 @@ export default function NotificationsPage() { [incomingRequests], ); + // Eagerly fetch incoming requests when notifications contain connection_request + // entries whose source_id isn't in pendingRequestIds yet (stale connections data) + useEffect(() => { + const hasMissing = notifications.some( + (n) => n.type === 'connection_request' && n.source_id && !n.is_read && !pendingRequestIds.has(n.source_id), + ); + if (hasMissing) { + queryClient.invalidateQueries({ queryKey: ['connections', 'incoming'] }); + } + }, [notifications, pendingRequestIds, queryClient]); + const filtered = useMemo(() => { if (filter === 'unread') return notifications.filter((n) => !n.is_read); return notifications;