Fix connection accept: stale cache, hidden button, and false 409 error
- incomingQuery: staleTime:0 + refetchOnMount:'always' so pending
requests are always fresh when components mount (was inheriting
5-min global staleTime, causing empty pendingRequestIds on nav)
- NotificationsPage: show Accept button while incoming data loads
(was hidden during async gap); disable with spinner until ready
- Both toast and page: treat 409 as success ("already accepted")
instead of showing error (fixes race when both fire respond)
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
parent
2fb41e0cf4
commit
2139ea8077
@ -36,9 +36,15 @@ export default function NotificationToaster() {
|
|||||||
await respondRef.current({ requestId, action });
|
await respondRef.current({ requestId, action });
|
||||||
toast.dismiss(loadingId);
|
toast.dismiss(loadingId);
|
||||||
toast.success(action === 'accept' ? 'Connection accepted' : 'Request declined');
|
toast.success(action === 'accept' ? 'Connection accepted' : 'Request declined');
|
||||||
} catch (err) {
|
} catch (err: any) {
|
||||||
toast.dismiss(loadingId);
|
toast.dismiss(loadingId);
|
||||||
toast.error(getErrorMessage(err, 'Failed to respond to request'));
|
// 409 means the request was already resolved (e.g. accepted via notification center)
|
||||||
|
const status = err?.response?.status;
|
||||||
|
if (status === 409) {
|
||||||
|
toast.success(action === 'accept' ? 'Connection already accepted' : 'Request already resolved');
|
||||||
|
} else {
|
||||||
|
toast.error(getErrorMessage(err, 'Failed to respond to request'));
|
||||||
|
}
|
||||||
} finally {
|
} finally {
|
||||||
respondingRef.current.delete(requestId);
|
respondingRef.current.delete(requestId);
|
||||||
}
|
}
|
||||||
|
|||||||
@ -31,7 +31,7 @@ export default function NotificationsPage() {
|
|||||||
deleteNotification,
|
deleteNotification,
|
||||||
} = useNotifications();
|
} = useNotifications();
|
||||||
|
|
||||||
const { incomingRequests, respond, isResponding } = useConnections();
|
const { incomingRequests, respond, isResponding, isLoadingIncoming } = useConnections();
|
||||||
const queryClient = useQueryClient();
|
const queryClient = useQueryClient();
|
||||||
const navigate = useNavigate();
|
const navigate = useNavigate();
|
||||||
const [filter, setFilter] = useState<Filter>('all');
|
const [filter, setFilter] = useState<Filter>('all');
|
||||||
@ -93,7 +93,13 @@ export default function NotificationsPage() {
|
|||||||
}
|
}
|
||||||
toast.success(action === 'accept' ? 'Connection accepted' : 'Request declined');
|
toast.success(action === 'accept' ? 'Connection accepted' : 'Request declined');
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
toast.error(getErrorMessage(err, 'Failed to respond'));
|
// 409 means the request was already resolved (e.g. accepted via toast)
|
||||||
|
const status = (err as any)?.response?.status;
|
||||||
|
if (status === 409) {
|
||||||
|
toast.success(action === 'accept' ? 'Connection already accepted' : 'Request already resolved');
|
||||||
|
} else {
|
||||||
|
toast.error(getErrorMessage(err, 'Failed to respond'));
|
||||||
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
@ -218,22 +224,23 @@ export default function NotificationsPage() {
|
|||||||
{/* Connection request actions (inline) */}
|
{/* Connection request actions (inline) */}
|
||||||
{notification.type === 'connection_request' &&
|
{notification.type === 'connection_request' &&
|
||||||
notification.source_id &&
|
notification.source_id &&
|
||||||
pendingRequestIds.has(notification.source_id) && (
|
!notification.is_read &&
|
||||||
|
(isLoadingIncoming || pendingRequestIds.has(notification.source_id)) && (
|
||||||
<div className="flex items-center gap-1.5 shrink-0">
|
<div className="flex items-center gap-1.5 shrink-0">
|
||||||
<Button
|
<Button
|
||||||
size="sm"
|
size="sm"
|
||||||
onClick={(e) => { e.stopPropagation(); handleConnectionRespond(notification, 'accept'); }}
|
onClick={(e) => { e.stopPropagation(); handleConnectionRespond(notification, 'accept'); }}
|
||||||
disabled={isResponding}
|
disabled={isResponding || isLoadingIncoming}
|
||||||
className="gap-1 h-7 text-xs"
|
className="gap-1 h-7 text-xs"
|
||||||
>
|
>
|
||||||
{isResponding ? <Loader2 className="h-3 w-3 animate-spin" /> : <Check className="h-3 w-3" />}
|
{(isResponding || isLoadingIncoming) ? <Loader2 className="h-3 w-3 animate-spin" /> : <Check className="h-3 w-3" />}
|
||||||
Accept
|
Accept
|
||||||
</Button>
|
</Button>
|
||||||
<Button
|
<Button
|
||||||
variant="ghost"
|
variant="ghost"
|
||||||
size="sm"
|
size="sm"
|
||||||
onClick={(e) => { e.stopPropagation(); handleConnectionRespond(notification, 'reject'); }}
|
onClick={(e) => { e.stopPropagation(); handleConnectionRespond(notification, 'reject'); }}
|
||||||
disabled={isResponding}
|
disabled={isResponding || isLoadingIncoming}
|
||||||
className="h-7 text-xs"
|
className="h-7 text-xs"
|
||||||
>
|
>
|
||||||
<X className="h-3 w-3" />
|
<X className="h-3 w-3" />
|
||||||
|
|||||||
@ -20,6 +20,8 @@ export function useConnections() {
|
|||||||
const { data } = await api.get<ConnectionRequest[]>('/connections/requests/incoming');
|
const { data } = await api.get<ConnectionRequest[]>('/connections/requests/incoming');
|
||||||
return data;
|
return data;
|
||||||
},
|
},
|
||||||
|
staleTime: 0,
|
||||||
|
refetchOnMount: 'always',
|
||||||
});
|
});
|
||||||
|
|
||||||
const outgoingQuery = useQuery({
|
const outgoingQuery = useQuery({
|
||||||
@ -95,6 +97,7 @@ export function useConnections() {
|
|||||||
incomingRequests: incomingQuery.data ?? [],
|
incomingRequests: incomingQuery.data ?? [],
|
||||||
outgoingRequests: outgoingQuery.data ?? [],
|
outgoingRequests: outgoingQuery.data ?? [],
|
||||||
isLoading: connectionsQuery.isLoading,
|
isLoading: connectionsQuery.isLoading,
|
||||||
|
isLoadingIncoming: incomingQuery.isLoading,
|
||||||
search: searchMutation.mutateAsync,
|
search: searchMutation.mutateAsync,
|
||||||
isSearching: searchMutation.isPending,
|
isSearching: searchMutation.isPending,
|
||||||
sendRequest: sendRequestMutation.mutateAsync,
|
sendRequest: sendRequestMutation.mutateAsync,
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user