Merge pull request #765 from CollinsKRO/feature/issue-600-campaign-404-handling

fix(frontend): Handle 404 gracefully in campaign detail panel

Author: ritik4ever

frontend/src/App.tsx

@@ -743,6 +743,7 @@ function App() {
             isConnectingWallet={isConnectingWallet}
             isPledgePending={pendingPledgeCampaignId === selectedCampaignId}
             isLoading={isSelectedLoading || initialLoad}
+            notFoundCampaignId={invalidUrlCampaignId}
             onConnectWallet={handleConnectWallet}
             onDisconnectWallet={handleDisconnectWallet}
             onPledge={handlePledge}

frontend/src/components/CampaignDetailPanel.test.tsx

@@ -1,4 +1,5 @@
 import { render, screen } from '@testing-library/react';
+import { BrowserRouter } from 'react-router-dom';
 
 import { CampaignDetailPanel } from './CampaignDetailPanel';
 import { AppConfig, Campaign } from '../types/campaign';
@@ -50,6 +51,57 @@ const mockCampaign: Campaign = {
 };
 
 describe('CampaignDetailPanel', () => {
+  it('renders loading state', () => {
+    render(
+      <BrowserRouter>
+        <CampaignDetailPanel
+          campaign={null}
+          appConfig={mockConfig}
+          isLoading={true}
+        />
+      </BrowserRouter>
+    );
+    expect(screen.getByRole('region')).toBeInTheDocument();
+  });
+
+  it('renders not found state when notFoundCampaignId is provided', () => {
+    render(
+      <BrowserRouter>
+        <CampaignDetailPanel
+          campaign={null}
+          appConfig={mockConfig}
+          notFoundCampaignId="999"
+        />
+      </BrowserRouter>
+    );
+    expect(screen.getByText('Campaign not found')).toBeInTheDocument();
+    expect(screen.getByText(/campaign #999 does not exist/i)).toBeInTheDocument();
+    expect(screen.getByRole('link', { name: 'Back to campaigns' })).toBeInTheDocument();
+  });
+
+  it('renders empty state when no campaign is selected', () => {
+    render(
+      <BrowserRouter>
+        <CampaignDetailPanel
+          campaign={null}
+          appConfig={mockConfig}
+          isLoading={false}
+        />
+      </BrowserRouter>
+    );
+    expect(screen.getByText('Campaign actions')).toBeInTheDocument();
+  });
 
+  it('renders campaign details when campaign is provided', () => {
+    render(
+      <BrowserRouter>
+        <CampaignDetailPanel
+          campaign={mockCampaign}
+          appConfig={mockConfig}
+          isLoading={false}
+        />
+      </BrowserRouter>
+    );
+    expect(screen.getByText('Test Campaign')).toBeInTheDocument();
   });
 });

frontend/src/components/CampaignDetailPanel.tsx

@@ -1,7 +1,11 @@
 
 
+
+
+
 import { FormEvent, useState, useEffect } from 'react';
-import { MousePointer2 } from 'lucide-react';
+import { MousePointer2, AlertCircle } from 'lucide-react';
+import { Link } from 'react-router-dom';
 import { Campaign, AppConfig } from '../types/campaign';
 import CopyButton from './CopyButton';
 import { AddressAvatar } from './AddressAvatar';
@@ -16,6 +20,7 @@ interface CampaignDetailPanelProps {
   isConnectingWallet?: boolean;
   isLoading?: boolean;
   isPledgePending?: boolean;
+  notFoundCampaignId?: string | null;
   onConnectWallet?: () => Promise<void>;
   onDisconnectWallet?: () => void;
   onPledge?: (campaignId: string, amount: number, assetCode: string) => Promise<void>;
@@ -66,6 +71,7 @@ export function CampaignDetailPanel({
   isConnectingWallet = false,
   isLoading = false,
   isPledgePending = false,
+  notFoundCampaignId = null,
   onConnectWallet = async () => {},
   onDisconnectWallet = () => {},
   onPledge = async () => {},
@@ -109,6 +115,24 @@ export function CampaignDetailPanel({
     );
   }
 
+  if (notFoundCampaignId) {
+    return (
+      <section className="card detail-panel">
+        <div className="section-heading">
+          <h2>Campaign not found</h2>
+          <p className="muted">
+            The campaign <code>#{notFoundCampaignId}</code> does not exist or may have been removed.
+          </p>
+        </div>
+        <div style={{ marginTop: 24 }}>
+          <Link to="/" className="btn-ghost">
+            Back to campaigns
+          </Link>
+        </div>
+      </section>
+    );
+  }
+
   if (!campaign) {
     return (
       <EmptyState