PublicEventLoader Component

PublicEventLoader Component

Component: src/features/events/components/PublicEventLoader.tsx Route: /events/:orgIdPrefix/:orgSlug/:eventSlug/* Access: Public (no authentication required)

---

Overview

The PublicEventLoader is a wrapper component that handles URL parsing, data fetching, and routing for public event pages. It fetches event data from the get-public-event Edge Function and renders the appropriate child component.

Features

• URL parsing - Extracts org prefix, org slug, and event slug
• Data fetching - Calls Edge Function to get event data
• Loading state - Shows spinner while fetching
• Error handling - Displays error messages for invalid URLs
• Route handling - Routes to event page, success page, or checklist

URL Structure

/events/{orgIdPrefix}/{orgSlug}/{eventSlug}
/events/{orgIdPrefix}/{orgSlug}/{eventSlug}/success
/events/{orgIdPrefix}/{orgSlug}/{eventSlug}/checklist/{token}

Example:

/events/abc123/awakenings/guatemala-trip-2025
/events/abc123/awakenings/guatemala-trip-2025/success?registration_id=xxx
/events/abc123/awakenings/guatemala-trip-2025/checklist/xyz789

URL Parameters

const { orgIdPrefix, orgSlug, eventSlug } = useParams<{
  orgIdPrefix: string;
  orgSlug: string;
  eventSlug: string;
}>();

State Management

const [eventConfig, setEventConfig] = useState<EventConfig | null>(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null);

Data Fetching

useEffect(() => {
  const fetchEvent = async () => {
    try {
      const response = await fetch(
        `${SUPABASE_URL}/functions/v1/get-public-event?org=${orgSlug}&slug=${eventSlug}`
      );
      
      if (!response.ok) {
        if (response.status === 404) {
          setError('Event not found');
        } else {
          setError('Failed to load event');
        }
        return;
      }
      
      const data = await response.json();
      
      // Verify org ID prefix matches
      if (!data.organizationId.startsWith(orgIdPrefix)) {
        setError('Invalid event URL');
        return;
      }
      
      setEventConfig(data);
    } catch (err) {
      setError('Failed to load event');
    } finally {
      setLoading(false);
    }
  };
  
  fetchEvent();
}, [orgIdPrefix, orgSlug, eventSlug]);

Routing Logic

const location = useLocation();
const path = location.pathname;

// Determine which component to render
if (path.includes('/success')) {
  return <EventRegistrationSuccess config={eventConfig} />;
}

if (path.includes('/checklist/')) {
  // ChecklistPortal handles its own token extraction
  return <ChecklistPortal />;
}

// Default: show registration page
return <PublicEventPage config={eventConfig} />;

Loading State

if (loading) {
  return (
    <div className="min-h-screen flex items-center justify-center">
      <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
    </div>
  );
}

Error State

if (error) {
  return (
    <div className="min-h-screen flex flex-col items-center justify-center gap-4">
      <AlertCircle className="h-12 w-12 text-destructive" />
      <h1 className="text-2xl font-semibold">{error}</h1>
      <p className="text-muted-foreground">
        The event you're looking for doesn't exist or has been removed.
      </p>
      <Button onClick={() => window.history.back()}>
        Go Back
      </Button>
    </div>
  );
}

Security Considerations

• Org ID prefix validation - Ensures URL matches actual organization ID
• Event status check - Only shows published events
• No sensitive data - Edge Function only returns public event info

Related Components

• PublicEventPage - Registration form
• EventRegistrationSuccess - Confirmation page
• ChecklistPortal - Pre-event requirements

Related Documentation

• Main Events Doc: ../06-EVENTS-TICKETING.md
• Public Event Page: ./05-PUBLIC-EVENT-PAGE.md

Synced from IFMmvp-Frontend documentation: pages/marketing/events/08-PUBLIC-EVENT-LOADER.md