Quickstart

import { useState } from 'react';

function CreateEvent() {
  const [event, setEvent] = useState({
    name: '',
    date: '',
    location: '',
    expectedAttendees: 0,
    sustainabilityGoals: []
  });
  
  const handleSubmit = async (e) => {
    e.preventDefault();
    const response = await fetch('/api/events', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'Authorization': `Bearer ${token}`
      },
      body: JSON.stringify(event)
    });
    
    const newEvent = await response.json();
    console.log('Event created:', newEvent);
  };
  
  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        placeholder="Event name"
        value={event.name}
        onChange={(e) => setEvent({...event, name: e.target.value})}
      />
      {/* Additional fields */}
      <button type="submit">Create Event</button>
    </form>
  );
}

function InviteAttendee({ eventId }) {
  const [email, setEmail] = useState('');
  
  const sendInvite = async () => {
    const response = await fetch(`/api/events/${eventId}/invites`, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'Authorization': `Bearer ${token}`
      },
      body: JSON.stringify({
        email,
        role: 'attendee',
        sendEmail: true
      })
    });
    
    if (response.ok) {
      alert('Invitation sent!');
    }
  };
  
  return (
    <div>
      <input
        type="email"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
        placeholder="[email protected]"
      />
      <button onClick={sendInvite}>Send Invite</button>
    </div>
  );
}

import { useEffect, useState } from 'react';

function EventAnalytics({ eventId }) {
  const [metrics, setMetrics] = useState(null);
  
  useEffect(() => {
    fetch(`/api/events/${eventId}/analytics`, {
      headers: {
        'Authorization': `Bearer ${token}`
      }
    })
      .then(res => res.json())
      .then(data => setMetrics(data));
  }, [eventId]);
  
  if (!metrics) return <div>Loading...</div>;
  
  return (
    <div>
      <h2>Sustainability Metrics</h2>
      <div>
        <h3>Carbon Footprint</h3>
        <p>{metrics.carbonFootprint.total} tonnes CO₂e</p>
        <ul>
          <li>Travel: {metrics.carbonFootprint.travel} t</li>
          <li>Venue: {metrics.carbonFootprint.venue} t</li>
          <li>Catering: {metrics.carbonFootprint.catering} t</li>
        </ul>
      </div>
      
      <div>
        <h3>Waste Diversion</h3>
        <p>{metrics.wasteStats.diversionRate}% diverted from landfill</p>
      </div>
    </div>
  );
}