Merge pull request #49 from simplicityf/feat/share-campaign

feat: feat: sync selected campaign to URL query param

Author: ritik4ever

frontend/src/App.tsx

@@ -26,6 +26,21 @@ function delay(ms: number): Promise<void> {
   });
 }
 
+function getCampaignIdFromUrl(): string | null {
+  const params = new URLSearchParams(window.location.search);
+  return params.get("campaign");
+}
+
+function setCampaignIdInUrl(campaignId: string | null): void {
+  const url = new URL(window.location.href);
+  if (campaignId) {
+    url.searchParams.set("campaign", campaignId);
+  } else {
+    url.searchParams.delete("campaign");
+  }
+  window.history.replaceState(null, "", url.toString());
+}
+
 function toOptimisticPledgedCampaign(campaign: Campaign, amount: number): Campaign {
   const nowInSeconds = Math.floor(Date.now() / 1000);
   const nextPledgedAmount = round(campaign.pledgedAmount + amount);
@@ -74,6 +89,11 @@ function App() {
   const [actionError, setActionError] = useState<string | null>(null);
   const [actionMessage, setActionMessage] = useState<string | null>(null);
   const [pendingPledgeCampaignId, setPendingPledgeCampaignId] = useState<string | null>(null);
+  const [invalidUrlCampaignId, setInvalidUrlCampaignId] = useState<string | null>(null);
+
+  useEffect(() => {
+    setCampaignIdInUrl(selectedCampaignId);
+  }, [selectedCampaignId]);
 
   async function refreshCampaigns(nextSelectedId?: string | null) {
     const startedAt = Date.now();
@@ -100,17 +120,6 @@ function App() {
       return;
     }
 
-    const startedAt = Date.now();
-    setIsSelectedLoading(true);
-    try {
-      const data = await getCampaignHistory(campaignId);
-      setHistory(data);
-    } finally {
-      const elapsed = Date.now() - startedAt;
-      const minMs = 200;
-      if (elapsed < minMs) await delay(minMs - elapsed);
-      setIsSelectedLoading(false);
-    }
   }
 
   async function refreshSelectedCampaign(campaignId: string | null) {
@@ -133,23 +142,7 @@ function App() {
 
   useEffect(() => {
     async function bootstrap() {
-      const startedAt = Date.now();
-      setIsCampaignsLoading(true);
-      try {
-        const [campaignData, issueData] = await Promise.all([
-          listCampaigns(),
-          listOpenIssues(),
-        ]);
-
-        setCampaigns(campaignData);
-        setIssues(issueData);
-        setSelectedCampaignId(campaignData[0]?.id ?? null);
-      } finally {
-        const elapsed = Date.now() - startedAt;
-        const minMs = 350;
-        if (elapsed < minMs) await delay(minMs - elapsed);
-        setIsCampaignsLoading(false);
-        setInitialLoad(false);
+
       }
     }
 
@@ -158,29 +151,26 @@ function App() {
 
   useEffect(() => {
     setSelectedCampaignDetails(null);
-    void Promise.all([refreshHistory(selectedCampaignId), refreshSelectedCampaign(selectedCampaignId)]);
+    void Promise.all([
+      refreshHistory(selectedCampaignId),
+      refreshSelectedCampaign(selectedCampaignId),
+    ]);
   }, [selectedCampaignId]);
 
+  // ── derived state ────────────────────────────────────────────────────────
+
   const selectedCampaign = useMemo(() => {
     const baseCampaign =
       campaigns.find((campaign) => campaign.id === selectedCampaignId) ?? null;
-    if (!baseCampaign) {
-      return null;
-    }
-    if (selectedCampaignDetails?.id !== baseCampaign.id) {
-      return baseCampaign;
-    }
-    return {
-      ...baseCampaign,
-      pledges: selectedCampaignDetails.pledges,
-    };
+    if (!baseCampaign) return null;
+    if (selectedCampaignDetails?.id !== baseCampaign.id) return baseCampaign;
+    return { ...baseCampaign, pledges: selectedCampaignDetails.pledges };
   }, [campaigns, selectedCampaignDetails, selectedCampaignId]);
 
   const metrics = useMemo(() => {
-    const open = campaigns.filter((campaign) => campaign.progress.status === "open").length;
-    const funded = campaigns.filter((campaign) => campaign.progress.status === "funded").length;
-    const pledged = campaigns.reduce((sum, campaign) => sum + campaign.pledgedAmount, 0);
-
+    const open = campaigns.filter((c) => c.progress.status === "open").length;
+    const funded = campaigns.filter((c) => c.progress.status === "funded").length;
+    const pledged = campaigns.reduce((sum, c) => sum + c.pledgedAmount, 0);
     return {
       total: campaigns.length,
       open,
@@ -189,6 +179,8 @@ function App() {
     };
   }, [campaigns]);
 
+  // ── action handlers ──────────────────────────────────────────────────────
+
   async function handleCreate(payload: Parameters<typeof createCampaign>[0]) {
     setCreateError(null);
     setActionError(null);
@@ -197,14 +189,23 @@ function App() {
     try {
       const campaign = await createCampaign(payload);
       await refreshCampaigns(campaign.id);
-      await Promise.all([refreshHistory(campaign.id), refreshSelectedCampaign(campaign.id)]);
+      await Promise.all([
+        refreshHistory(campaign.id),
+        refreshSelectedCampaign(campaign.id),
+      ]);
       setActionMessage(`Campaign #${campaign.id} is live and ready for pledges.`);
     } catch (error) {
-      setCreateError(error instanceof Error ? error.message : "Failed to create campaign.");
+      setCreateError(
+        error instanceof Error ? error.message : "Failed to create campaign.",
+      );
     }
   }
 
-  async function handlePledge(campaignId: string, contributor: string, amount: number) {
+  async function handlePledge(
+    campaignId: string,
+    contributor: string,
+    amount: number,
+  ) {
     setActionError(null);
     setActionMessage(null);
 
@@ -222,15 +223,13 @@ function App() {
       metadata: { pending: true },
     };
 
-    setCampaigns((currentCampaigns) =>
-      currentCampaigns.map((campaign) =>
-        campaign.id === campaignId ? toOptimisticPledgedCampaign(campaign, amount) : campaign,
+    setCampaigns((current) =>
+      current.map((c) =>
+        c.id === campaignId ? toOptimisticPledgedCampaign(c, amount) : c,
       ),
     );
-    setSelectedCampaignDetails((currentDetails) => {
-      if (!currentDetails || currentDetails.id !== campaignId) {
-        return currentDetails;
-      }
+    setSelectedCampaignDetails((current) => {
+      if (!current || current.id !== campaignId) return current;
       const optimisticPledge = {
         id: -Date.now(),
         campaignId,
@@ -239,13 +238,13 @@ function App() {
         createdAt: optimisticTimestamp,
       };
       return {
-        ...toOptimisticPledgedCampaign(currentDetails, amount),
-        pledges: [optimisticPledge, ...(currentDetails.pledges ?? [])],
+        ...toOptimisticPledgedCampaign(current, amount),
+        pledges: [optimisticPledge, ...(current.pledges ?? [])],
       };
     });
     setPendingPledgeCampaignId(campaignId);
     if (selectedCampaignId === campaignId) {
-      setHistory((currentHistory) => [optimisticEvent, ...currentHistory]);
+      setHistory((current) => [optimisticEvent, ...current]);
     }
     setActionMessage("Submitting pledge...");
 
@@ -255,69 +254,103 @@ function App() {
     try {
       await addPledge(campaignId, { contributor, amount });
       const elapsedMs = Date.now() - pendingStartedAt;
-      if (elapsedMs < minimumPendingMs) {
-        await delay(minimumPendingMs - elapsedMs);
-      }
+      if (elapsedMs < minimumPendingMs) await delay(minimumPendingMs - elapsedMs);
       await refreshCampaigns(campaignId);
-      await Promise.all([refreshHistory(campaignId), refreshSelectedCampaign(campaignId)]);
+      await Promise.all([
+        refreshHistory(campaignId),
+        refreshSelectedCampaign(campaignId),
+      ]);
       setPendingPledgeCampaignId(null);
       setActionMessage("Pledge recorded in the local goal vault.");
     } catch (error) {
       const elapsedMs = Date.now() - pendingStartedAt;
-      if (elapsedMs < minimumPendingMs) {
-        await delay(minimumPendingMs - elapsedMs);
-      }
+      if (elapsedMs < minimumPendingMs) await delay(minimumPendingMs - elapsedMs);
       setCampaigns(previousCampaigns);
       setSelectedCampaignDetails(previousSelectedDetails);
       await refreshSelectedCampaign(campaignId);
-      if (selectedCampaignId === campaignId) {
-        setHistory(previousHistory);
-      }
+      if (selectedCampaignId === campaignId) setHistory(previousHistory);
       setPendingPledgeCampaignId(null);
-      setActionError(error instanceof Error ? error.message : "Failed to add pledge.");
+      setActionError(
+        error instanceof Error ? error.message : "Failed to add pledge.",
+      );
       setActionMessage(null);
     }
   }
 
   async function handleClaim(campaign: Campaign) {
     setActionError(null);
     setActionMessage(null);
-
     try {
       await claimCampaign(campaign.id, campaign.creator);
       await refreshCampaigns(campaign.id);
-      await Promise.all([refreshHistory(campaign.id), refreshSelectedCampaign(campaign.id)]);
+      await Promise.all([
+        refreshHistory(campaign.id),
+        refreshSelectedCampaign(campaign.id),
+      ]);
       setActionMessage("Campaign claimed successfully.");
     } catch (error) {
-      setActionError(error instanceof Error ? error.message : "Failed to claim campaign.");
+      setActionError(
+        error instanceof Error ? error.message : "Failed to claim campaign.",
+      );
     }
   }
 
   async function handleRefund(campaignId: string, contributor: string) {
     setActionError(null);
     setActionMessage(null);
-
     try {
       await refundCampaign(campaignId, contributor);
       await refreshCampaigns(campaignId);
-      await Promise.all([refreshHistory(campaignId), refreshSelectedCampaign(campaignId)]);
+      await Promise.all([
+        refreshHistory(campaignId),
+        refreshSelectedCampaign(campaignId),
+      ]);
       setActionMessage("Refund recorded for the selected contributor.");
     } catch (error) {
-      setActionError(error instanceof Error ? error.message : "Failed to refund contributor.");
+      setActionError(
+        error instanceof Error ? error.message : "Failed to refund contributor.",
+      );
     }
   }
 
+  /** Called when the user picks a campaign in the table. Clears any
+   *  "invalid link" banner since they are now navigating intentionally. */
+  function handleSelect(campaignId: string) {
+    setInvalidUrlCampaignId(null);
+    setSelectedCampaignId(campaignId);
+  }
+
+  // ── render ───────────────────────────────────────────────────────────────
+
   return (
     <div className="app-shell">
       <header className="hero">
         <p className="eyebrow">Soroban crowdfunding MVP</p>
         <h1>Stellar Goal Vault</h1>
         <p className="hero-copy">
-          Create funding goals, collect pledges, and model claim or refund flows before
-          wiring the full Soroban transaction path.
+          Create funding goals, collect pledges, and model claim or refund flows
+          before wiring the full Soroban transaction path.
         </p>
       </header>
 
+      {/* Invalid shared-link banner */}
+      {invalidUrlCampaignId && (
+        <div className="invalid-campaign-banner" role="alert">
+          <strong>Campaign not found.</strong> The link you followed referenced
+          campaign&nbsp;<code>{invalidUrlCampaignId}</code>, which doesn't exist or
+          may have been removed.
+          {campaigns.length > 0 && " Showing the first available campaign instead."}
+          <button
+            className="btn-ghost invalid-campaign-dismiss"
+            type="button"
+            onClick={() => setInvalidUrlCampaignId(null)}
+            aria-label="Dismiss"
+          >
+            ✕
+          </button>
+        </div>
+      )}
+
       <section className="metric-grid">
         <article className="metric-card">
           <span>Total campaigns</span>
@@ -355,7 +388,7 @@ function App() {
         campaigns={campaigns}
   isLoading={isCampaignsLoading || initialLoad}
         selectedCampaignId={selectedCampaignId}
-        onSelect={setSelectedCampaignId}
+        onSelect={handleSelect}
       />
 
       <section className="secondary-grid">
@@ -366,4 +399,4 @@ function App() {
   );
 }
 
-export default App;
+export default App;