/** * Contribution history component * Displays a list of donations made by a donor using React 19 Suspense * Fetches and displays donation data with useSuspenseQuery */ import { Suspense } from 'react'; import { useSuspenseQuery } from '@tanstack/react-query'; import { api } from '../services/api'; import { queryKeys } from '../lib/query/keys'; import { Card, CardContent, CardHeader, CardTitle } from './ui/card'; import { Skeleton } from './ui/skeleton'; import { ErrorBoundary } from './ErrorBoundary'; import { formatCurrency, formatDate } from '../utils/formatters'; interface ContributionHistoryProps { donorId: string; threshold?: number; } function ContributionHistoryContent({ donorId, threshold = 2000, }: ContributionHistoryProps) { const { data: donations } = useSuspenseQuery({ queryKey: queryKeys.donors.donations(donorId), queryFn: () => api.getDonorDonations(donorId), staleTime: 5 * 60 * 1000, }); const thresholdDisplay = threshold ? `(> $${threshold.toLocaleString()})` : ''; if (donations.length === 0) { return ( Contribution History {thresholdDisplay}

No large contributions found {thresholdDisplay} to politicians in our database.

This donor may have:

  • • Made smaller contributions (under $ {threshold.toLocaleString()})
  • • Not contributed to politicians we track
  • • Contributed only to state/local politicians
); } return ( Contribution History {thresholdDisplay}
{donations.map((donation, index) => (

{donation.first_name} {donation.last_name} ({donation.party}- {donation.state})

{formatCurrency(donation.amount)}

Date: {formatDate(donation.transaction_date)}

))}
); } // Loading fallback component function ContributionHistorySkeleton() { return (
{Array.from({ length: 8 }).map((_, idx) => (
))}
); } // Wrapper component with Suspense boundary export function ContributionHistory(props: ContributionHistoryProps) { return ( }> ); }