\n \n

\n );\n}\n\n// Rest of the code remains the same as in the previous version (unchanged)\nfunction RSVPForm({ guestName, onSubmitRSVP }) {\n const [availability, setAvailability] = useState('');\n const [additionalGuests, setAdditionalGuests] = useState(0);\n\n const handleSubmit = async (e) => {\n e.preventDefault();\n const rsvpData = { \n name: guestName, \n availability, \n additionalGuests,\n submittedAt: new Date().toISOString() \n };\n\n try {\n const response = await fetch('/submit-rsvp', {\n method: 'POST',\n headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify(rsvpData)\n });\n\n if (response.ok) {\n onSubmitRSVP(rsvpData);\n }\n } catch (error) {\n console.error('Error submitting RSVP:', error);\n }\n };\n\n return (\n

🤵👰 Taiwo & Olamide's Wedding 💍

July 5th, 2024 | #TOforever

Hello {guestName}, are you available?

\n \n setAvailability('yes')}\n required\n />\n Yes, I'll be there! 🎉\n \n \n setAvailability('no')}\n required\n />\n Unfortunately, I can't make it 😔\n \n

\n\n {availability === 'yes' && (\n

\n \n How many additional guests are you bringing?\n \n \n

\n )}\n\n \n

\n );\n}\n\nfunction ConfirmationMessage({ rsvpData }) {\n return (\n

Thank You, {rsvpData.name}! 💕

\n {rsvpData.availability === 'yes' \n ? `We're excited you can join us! You've registered ${rsvpData.additionalGuests > 0 \n ? `with ${rsvpData.additionalGuests} additional guest${rsvpData.additionalGuests > 1 ? 's' : ''}.` \n : 'solo.'}`\n : \"We'll miss you at the wedding.\"}\n

❤️ Taiwo & Olamide

\n );\n}\n\nfunction App() {\n const [guestName, setGuestName] = useState(localStorage.getItem('guestName') || '');\n const [rsvpSubmitted, setRsvpSubmitted] = useState(false);\n const [submittedRSVP, setSubmittedRSVP] = useState(null);\n\n const handleRSVPSubmit = (rsvpData) => {\n setRsvpSubmitted(true);\n setSubmittedRSVP(rsvpData);\n };\n\n if (!guestName) {\n return ;\n }\n\n return (\n

\n {!rsvpSubmitted ? (\n \n ) : (\n \n )}\n

\n );\n}\n\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\nif (typeof document !== \"undefined\") { client(); }\n\nexport default async function server(request: Request): Promise {\n const { sqlite } = await import(\"https://esm.town/v/stevekrouse/sqlite\");\n const KEY = \"weddingRSVPTOForever\";\n const SCHEMA_VERSION = 2; // Incremented to force table recreation\n\n try {\n // Drop the existing table if it exists to recreate with new schema\n await sqlite.execute(`\n DROP TABLE IF EXISTS ${KEY}_rsvps_1\n `);\n\n // Create new table with explicit column definitions\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS ${KEY}_rsvps_${SCHEMA_VERSION} (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n name TEXT NOT NULL,\n availability TEXT NOT NULL,\n additional_guests INTEGER DEFAULT 0,\n submitted_at DATETIME DEFAULT CURRENT_TIMESTAMP\n )\n `);\n } catch (error) {\n console.error(\"Database initialization error:\", error);\n return new Response(`Database error: ${error.message}`, { status: 500 });\n }\n\n if (request.method === 'POST' && new URL(request.url).pathname === '/submit-rsvp') {\n const rsvpData = await request.json();\n try {\n await sqlite.execute(\n `INSERT INTO ${KEY}_rsvps_${SCHEMA_VERSION} (name, availability, additional_guests) VALUES (?, ?, ?)`, \n [rsvpData.name, rsvpData.availability, rsvpData.additionalGuests]\n );\n return new Response(JSON.stringify({ success: true }), { \n headers: { 'Content-Type': 'application/json' } \n });\n } catch (error) {\n console.error(\"RSVP submission error:\", error);\n return new Response(`RSVP submission error: ${error.message}`, { status: 500 });\n }\n }\n\n return new Response(`\n \n \n Taiwo & Olamide's Wedding RSVP\n \n \n \n \n

\n \n \n \n \n `, {\n headers: { 'Content-Type': 'text/html' }\n });\n}\n\nconst css = `\nbody {\n font-family: 'Palatino Linotype', serif;\n margin: 0;\n padding: 0;\n background-color: #f9f1e7;\n color: #333;\n line-height: 1.6;\n}\n`;\n\nconst modalStyle = {\n position: 'fixed', \n top: 0, \n left: 0, \n width: '100%', \n height: '100%', \n backgroundColor: 'rgba(0,0,0,0.7)', \n display: 'flex', \n justifyContent: 'center', \n alignItems: 'center',\n zIndex: 1000\n};\n\nconst modalFormStyle = {\n backgroundColor: 'white', \n padding: '2rem', \n borderRadius: '8px', \n textAlign: 'center',\n boxShadow: '0 4px 6px rgba(0,0,0,0.1)',\n maxWidth: '400px',\n width: '90%'\n};\n\nconst containerStyle = {\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n minHeight: '100vh',\n padding: '20px',\n backgroundColor: '#f9f1e7'\n};\n\nconst appStyle = {\n textAlign: 'center',\n maxWidth: '600px',\n margin: '0 auto',\n padding: '20px'\n};\n\nconst formStyle = {\n backgroundColor: 'white',\n borderRadius: '15px',\n padding: '30px',\n boxShadow: '0 10px 25px rgba(0,0,0,0.1)',\n border: '2px solid #e4c1b5'\n};\n\nconst inputStyle = {\n width: '100%',\n padding: '10px',\n margin: '10px 0',\n border: '1px solid #ddd',\n borderRadius: '5px'\n};\n\nconst buttonStyle = {\n backgroundColor: '#e4c1b5',\n color: 'white',\n border: 'none',\n padding: '10px 20px',\n borderRadius: '5px',\n cursor: 'pointer',\n fontWeight: 'bold',\n transition: 'background-color 0.3s'\n};\n\nconst submitButtonStyle = {\n ...buttonStyle,\n width: '100%',\n marginTop: '20px',\n backgroundColor: '#c48b7f'\n};\n\nconst questionStyle = {\n margin: '20px 0'\n};\n\nconst radioGroupStyle = {\n display: 'flex',\n flexDirection: 'column',\n gap: '10px',\n alignItems: 'center'\n};\n\nconst radioLabelStyle = {\n display: 'flex',\n alignItems: 'center',\n gap: '10px',\n cursor: 'pointer'\n};\n\nconst additionalGuestStyle = {\n marginTop: '20px'\n};\n\nconst confirmationStyle = {\n backgroundColor: 'white',\n borderRadius: '15px',\n padding: '30px',\n boxShadow: '0 10px 25px rgba(0,0,0,0.1)',\n textAlign: 'center',\n border: '2px solid #e4c1b5'\n};","deleted","label",[99],"permalink","https://www.val.town/x/Mrigbalode/weddingRSVPTOForever/code/main.tsx","extension","actionData","errors"]