\n\n i);\n\n useEffect(() => {\n loadEvents();\n }, []);\n\n async function loadEvents() {\n const response = await fetch(\"/api/events\");\n const data = await response.json();\n setEvents(data);\n }\n\n function getDayClass(index) {\n return \\`day-bg-\\${index}\\`;\n }\n\n async function createEvent(date, hour) {\n if (!userName) return;\n\n const newEvent = {\n id: Date.now().toString(),\n title: \"New Event\",\n date,\n hour,\n author: userName,\n };\n\n await fetch(\"/api/events\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify(newEvent),\n });\n\n setEvents([...events, newEvent]);\n }\n\n async function updateEvent(eventId, updates) {\n const event = events.find(e => e.id === eventId);\n if (!event) return;\n\n const updatedEvent = { ...event, ...updates };\n\n await fetch(\"/api/events\", {\n method: \"PUT\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify(updatedEvent),\n });\n\n setEvents(events.map(ev => ev.id === eventId ? updatedEvent : ev));\n }\n\n function handleDragStart(e, event) {\n setDragging(event);\n e.dataTransfer.effectAllowed = \"move\";\n }\n\n function handleDragOver(e) {\n e.preventDefault();\n e.dataTransfer.dropEffect = \"move\";\n }\n\n function handleDrop(e, date, hour) {\n e.preventDefault();\n if (!dragging) return;\n\n updateEvent(dragging.id, { date, hour });\n setDragging(null);\n }\n\n function handleNameSubmit(e) {\n e.preventDefault();\n if (tempName.trim()) {\n setUserName(tempName);\n setShowNameModal(false);\n }\n }\n\n function handleTitleUpdate(eventId, newTitle) {\n updateEvent(eventId, { title: newTitle });\n setEditingEvent(null);\n }\n\n if (showNameModal) {\n return (\n

Welcome!

\n );\n }\n\n return (\n

Calendar - Nov 8-12, 2024

👤 {userName}

\n\n

\n {hours.map((hour) => (\n \n {hour.toString().padStart(2, \"0\")}:00\n

\n ))}\n

\n\n {dates.map((dateInfo, index) => (\n

{dateInfo.day}

\n {dateInfo.date.split(\"-\")[2]}\n

\n {hours.map((hour) => (\n createEvent(dateInfo.date, hour)}\n onDragOver={handleDragOver}\n onDrop={(e) => handleDrop(e, dateInfo.date, hour)}\n >\n {events\n .filter((ev) => ev.date === dateInfo.date && ev.hour === hour)\n .map((event) => (\n handleDragStart(e, event)}\n className=\"event-block\"\n onClick={(e) => e.stopPropagation()}\n >\n {editingEvent === event.id ? (\n handleTitleUpdate(event.id, e.target.value)}\n onKeyDown={(e) => {\n if (e.key === \"Enter\") {\n handleTitleUpdate(event.id, e.currentTarget.value);\n }\n }}\n className=\"w-full bg-white text-black px-1 rounded text-xs\"\n autoFocus\n onClick={(e) => e.stopPropagation()}\n />\n ) : (\n setEditingEvent(event.id)}\n className=\"text-xs font-semibold\"\n >\n {event.title}\n

\n )}\n

by {event.author}

\n ))}\n

\n \n ))}\n \n \n \n );\n }\n\n const root = createRoot(document.getElementById('app'));\n root.render(React.createElement(Calendar));\n `,\n }}\n />\n \n \n );\n}\n\n// Main export\nexport default async function (req: Request): Promise {\n const url = new URL(req.url);\n\n // Handle API routes\n if (url.pathname.startsWith(\"/api/\")) {\n return handleAPI(req);\n }\n\n // Render the React app to HTML\n const html = \"\" + renderToString();\n\n return new Response(html, {\n headers: { \"Content-Type\": \"text/html\" },\n });\n}","deleted","label",[98],"permalink","https://www.val.town/x/mackey/montreal-calendar/code/main.tsx","extension","actionData","errors"]