Add RSVP functionality with dynamic form and slug-based URLs

frontend/src/App.tsx

@@ -5,6 +5,8 @@ import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
 import { Container } from '@mui/material';
 import EventList from './components/EventList';
 import EventForm from './components/EventForm';
+import RSVPForm from './components/RSVPForm';
+import './App.css';
 
 const darkTheme = createTheme({
   palette: {
@@ -22,20 +24,30 @@ const darkTheme = createTheme({
   },
 });
 
-function App() {
+const App: React.FC = () => {
   return (
     <ThemeProvider theme={darkTheme}>
       <CssBaseline />
       <Router>
-        <Container maxWidth="md" sx={{ mt: 4 }}>
+        <div className="min-h-screen bg-gray-100">
-          <Routes>
+          <header className="bg-white shadow">
-            <Route path="/" element={<EventList />} />
+            <div className="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
-            <Route path="/create" element={<EventForm />} />
+              <h1 className="text-3xl font-bold text-gray-900">RSVP Manager</h1>
-          </Routes>
+            </div>
-        </Container>
+          </header>
+          <main>
+            <div className="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
+              <Routes>
+                <Route path="/" element={<EventList />} />
+                <Route path="/create" element={<EventForm />} />
+                <Route path="/events/:slug" element={<RSVPForm />} />
+              </Routes>
+            </div>
+          </main>
+        </div>
       </Router>
     </ThemeProvider>
   );
-}
+};
 
 export default App; 

frontend/src/components/RSVPForm.tsx

@@ -0,0 +1,158 @@
+import React, { useState } from 'react';
+import { useParams } from 'react-router-dom';
+import axios from 'axios';
+
+interface RSVPFormData {
+  name: string;
+  attending: boolean;
+  bringing_guests: boolean;
+  guest_count: number;
+  guest_names: string;
+  items_bringing: string;
+}
+
+const RSVPForm: React.FC = () => {
+  const { slug } = useParams<{ slug: string }>();
+  const [formData, setFormData] = useState<RSVPFormData>({
+    name: '',
+    attending: false,
+    bringing_guests: false,
+    guest_count: 0,
+    guest_names: '',
+    items_bringing: ''
+  });
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [success, setSuccess] = useState(false);
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+    const { name, value, type } = e.target;
+    setFormData(prev => ({
+      ...prev,
+      [name]: type === 'checkbox' ? (e.target as HTMLInputElement).checked : value
+    }));
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setIsSubmitting(true);
+    setError(null);
+
+    try {
+      await axios.post(`/api/events/${slug}/rsvp`, formData);
+      setSuccess(true);
+    } catch (err) {
+      setError('Failed to submit RSVP. Please try again.');
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  if (success) {
+    return (
+      <div className="max-w-md mx-auto p-6 bg-white rounded-lg shadow-md">
+        <h2 className="text-2xl font-bold mb-4">Thank You!</h2>
+        <p>Your RSVP has been submitted successfully.</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="max-w-md mx-auto p-6 bg-white rounded-lg shadow-md">
+      <h2 className="text-2xl font-bold mb-4">RSVP Form</h2>
+      {error && <div className="text-red-500 mb-4">{error}</div>}
+      
+      <form onSubmit={handleSubmit}>
+        <div className="mb-4">
+          <label className="block text-gray-700 mb-2">Name</label>
+          <input
+            type="text"
+            name="name"
+            value={formData.name}
+            onChange={handleChange}
+            required
+            className="w-full px-3 py-2 border rounded-md"
+          />
+        </div>
+
+        <div className="mb-4">
+          <label className="flex items-center">
+            <input
+              type="checkbox"
+              name="attending"
+              checked={formData.attending}
+              onChange={handleChange}
+              className="mr-2"
+            />
+            Are you attending?
+          </label>
+        </div>
+
+        {formData.attending && (
+          <>
+            <div className="mb-4">
+              <label className="flex items-center">
+                <input
+                  type="checkbox"
+                  name="bringing_guests"
+                  checked={formData.bringing_guests}
+                  onChange={handleChange}
+                  className="mr-2"
+                />
+                Are you bringing any guests?
+              </label>
+            </div>
+
+            {formData.bringing_guests && (
+              <>
+                <div className="mb-4">
+                  <label className="block text-gray-700 mb-2">Number of Guests</label>
+                  <input
+                    type="number"
+                    name="guest_count"
+                    value={formData.guest_count}
+                    onChange={handleChange}
+                    min="1"
+                    className="w-full px-3 py-2 border rounded-md"
+                  />
+                </div>
+
+                <div className="mb-4">
+                  <label className="block text-gray-700 mb-2">Guest Names</label>
+                  <textarea
+                    name="guest_names"
+                    value={formData.guest_names}
+                    onChange={handleChange}
+                    placeholder="Please list the names of your guests"
+                    className="w-full px-3 py-2 border rounded-md"
+                  />
+                </div>
+              </>
+            )}
+
+            <div className="mb-4">
+              <label className="block text-gray-700 mb-2">What items are you bringing?</label>
+              <textarea
+                name="items_bringing"
+                value={formData.items_bringing}
+                onChange={handleChange}
+                placeholder="List any items you plan to bring to the event"
+                className="w-full px-3 py-2 border rounded-md"
+              />
+            </div>
+          </>
+        )}
+
+        <button
+          type="submit"
+          disabled={isSubmitting}
+          className="w-full bg-blue-500 text-white py-2 px-4 rounded-md hover:bg-blue-600 disabled:bg-blue-300"
+        >
+          {isSubmitting ? 'Submitting...' : 'Submit RSVP'}
+        </button>
+      </form>
+    </div>
+  );
+};
+
+export default RSVPForm; 

src/index.ts

@@ -30,7 +30,21 @@ async function initializeDatabase() {
         description TEXT,
         date TEXT NOT NULL,
         location TEXT,
-        created_at TEXT DEFAULT CURRENT_TIMESTAMP
+        created_at TEXT DEFAULT CURRENT_TIMESTAMP,
+        slug TEXT UNIQUE
+      );
+
+      CREATE TABLE IF NOT EXISTS rsvps (
+        id INTEGER PRIMARY KEY AUTOINCREMENT,
+        event_id INTEGER,
+        name TEXT NOT NULL,
+        attending BOOLEAN NOT NULL,
+        bringing_guests BOOLEAN,
+        guest_count INTEGER,
+        guest_names TEXT,
+        items_bringing TEXT,
+        created_at TEXT DEFAULT CURRENT_TIMESTAMP,
+        FOREIGN KEY (event_id) REFERENCES events(id)
       )
     `);
     console.log('Database initialized successfully');
@@ -39,6 +53,13 @@ async function initializeDatabase() {
   }
 }
 
+// Helper function to create slug from title
+function createSlug(title: string): string {
+  return title.toLowerCase()
+    .replace(/[^a-z0-9]+/g, '-')
+    .replace(/(^-|-$)/g, '');
+}
+
 // Serve static files from the frontend build directory
 app.use(express.static(path.join(__dirname, '../frontend/build')));
 
@@ -60,13 +81,14 @@ app.get('/api/events', async (req, res) => {
 app.post('/api/events', async (req, res) => {
   try {
     const { title, description, date, location } = req.body;
-    console.log('Creating event with data:', { title, description, date, location });
+    const slug = createSlug(title);
+    console.log('Creating event with data:', { title, description, date, location, slug });
     const result = await db.run(
-      'INSERT INTO events (title, description, date, location) VALUES (?, ?, ?, ?)',
+      'INSERT INTO events (title, description, date, location, slug) VALUES (?, ?, ?, ?, ?)',
-      [title, description, date, location]
+      [title, description, date, location, slug]
     );
     console.log('Event created:', result);
-    res.status(201).json(result);
+    res.status(201).json({ ...result, slug });
   } catch (error) {
     console.error('Error creating event:', error);
     res.status(500).json({ 
@@ -76,6 +98,48 @@ app.post('/api/events', async (req, res) => {
   }
 });
 
+app.get('/api/events/:slug', async (req, res) => {
+  try {
+    const { slug } = req.params;
+    const event = await db.get('SELECT * FROM events WHERE slug = ?', slug);
+    if (!event) {
+      return res.status(404).json({ error: 'Event not found' });
+    }
+    res.json(event);
+  } catch (error) {
+    console.error('Error fetching event:', error);
+    res.status(500).json({ 
+      error: 'Internal server error',
+      details: error instanceof Error ? error.message : 'Unknown error'
+    });
+  }
+});
+
+app.post('/api/events/:slug/rsvp', async (req, res) => {
+  try {
+    const { slug } = req.params;
+    const { name, attending, bringing_guests, guest_count, guest_names, items_bringing } = req.body;
+    
+    const event = await db.get('SELECT id FROM events WHERE slug = ?', slug);
+    if (!event) {
+      return res.status(404).json({ error: 'Event not found' });
+    }
+
+    const result = await db.run(
+      'INSERT INTO rsvps (event_id, name, attending, bringing_guests, guest_count, guest_names, items_bringing) VALUES (?, ?, ?, ?, ?, ?, ?)',
+      [event.id, name, attending, bringing_guests, guest_count, guest_names, items_bringing]
+    );
+    
+    res.status(201).json(result);
+  } catch (error) {
+    console.error('Error creating RSVP:', error);
+    res.status(500).json({ 
+      error: 'Internal server error',
+      details: error instanceof Error ? error.message : 'Unknown error'
+    });
+  }
+});
+
 // Serve the React app for all other routes
 app.get('*', (req, res) => {
   res.sendFile(path.join(__dirname, '../frontend/build/index.html'));