/** @jsxImportSource https://esm.sh/react */ import React, { useState, useEffect, useRef } from "https://esm.sh/react"; import { createRoot } from "https://esm.sh/react-dom/client"; import Chart from "https://esm.sh/chart.js/auto"; function App() { const [polls, setPolls] = useState([]); const [newPollQuestion, setNewPollQuestion] = useState(""); const [newPollOptions, setNewPollOptions] = useState(["", ""]); const chartRefs = useRef({}); useEffect(() => { fetchPolls(); }, []); useEffect(() => { polls.forEach((poll) => { if (chartRefs.current[poll.id]) { updateChart(poll); } else { createChart(poll); } }); }, [polls]); const fetchPolls = async () => { const response = await fetch("/polls"); const data = await response.json(); setPolls(data); }; const handleCreatePoll = async (e) => { e.preventDefault(); const response = await fetch("/polls", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ question: newPollQuestion, options: newPollOptions.filter(option => option.trim() !== "") }), }); if (response.ok) { setNewPollQuestion(""); setNewPollOptions(["", ""]); fetchPolls(); } }; const handleVote = async (pollId, optionIndex) => { const response = await fetch(`/polls/${pollId}/vote`, { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ optionIndex }), }); if (response.ok) { fetchPolls(); } }; const createChart = (poll) => { const ctx = document.getElementById(`chart-${poll.id}`).getContext('2d'); const newChart = new Chart(ctx, { type: 'bar', data: { labels: poll.options.map(option => option.text), datasets: [{ data: poll.options.map(option => option.votes), backgroundColor: ['#E57373', '#64B5F6', '#81C784', '#FFD54F', '#BA68C8'], }] }, options: { responsive: true, plugins: { legend: { display: false }, title: { display: false } }, scales: { y: { beginAtZero: true, ticks: { precision: 0 } } } } }); chartRefs.current[poll.id] = newChart; }; const updateChart = (poll) => { const chart = chartRefs.current[poll.id]; chart.data.labels = poll.options.map(option => option.text); chart.data.datasets[0].data = poll.options.map(option => option.votes); chart.update(); }; return (

U.S. Election Debate Poll App

Active Polls

{polls.map((poll) => (

{poll.question}

{option.text} ({option.votes} votes)

))}

View Source

); } function client() { createRoot(document.getElementById("root")).render(); } if (typeof document !== "undefined") { client(); } export default async function server(request: Request): Promise { const { sqlite } = await import("https://esm.town/v/stevekrouse/sqlite"); const SCHEMA_VERSION = 1 const KEY = new URL(import.meta.url).pathname.split("/").at(-1); await sqlite.execute(` CREATE TABLE IF NOT EXISTS ${KEY}_polls_${SCHEMA_VERSION} ( id INTEGER PRIMARY KEY AUTOINCREMENT, question TEXT NOT NULL, options TEXT NOT NULL, votes TEXT NOT NULL ) `); const url = new URL(request.url); const path = url.pathname; if (path === "/polls" && request.method === "GET") { const result = await sqlite.execute(`SELECT * FROM ${KEY}_polls_${SCHEMA_VERSION}`); const polls = result.rows.map(row => ({ id: row.id, question: row.question, options: JSON.parse(row.options).map((option, index) => ({ text: option, votes: JSON.parse(row.votes)[index] })) })); return new Response(JSON.stringify(polls), { headers: { "Content-Type": "application/json" } }); } if (path === "/polls" && request.method === "POST") { const { question, options } = await request.json(); const votes = new Array(options.length).fill(0); await sqlite.execute(` INSERT INTO ${KEY}_polls_${SCHEMA_VERSION} (question, options, votes) VALUES (?, ?, ?) `, [question, JSON.stringify(options), JSON.stringify(votes)]); return new Response(null, { status: 201 }); } if (path.startsWith("/polls/") && path.endsWith("/vote") && request.method === "POST") { const pollId = parseInt(path.split("/")[2]); const { optionIndex } = await request.json(); const result = await sqlite.execute(`SELECT votes FROM ${KEY}_polls_${SCHEMA_VERSION} WHERE id = ?`, [pollId]); if (result.rows.length === 0) { return new Response("Poll not found", { status: 404 }); } const votes = JSON.parse(result.rows[0].votes); votes[optionIndex]++; await sqlite.execute(`UPDATE ${KEY}_polls_${SCHEMA_VERSION} SET votes = ? WHERE id = ?`, [JSON.stringify(votes), pollId]); return new Response(null, { status: 200 }); } return new Response(` U.S. Election Debate Poll App

`, { headers: { "content-type": "text/html", }, }); } const css = ` body { font-family: 'Arial', sans-serif; line-height: 1.6; margin: 0; padding: 0; background-color: #f0f0f0; color: #333; } .container { width: 80%; margin: auto; overflow: hidden; padding: 20px; } h1, h2, h3 { color: #002868; } .create-poll { background: #fff; padding: 20px; margin-bottom: 20px; border-radius: 5px; box-shadow: 0 0 10px rgba(0,0,0,0.1); border: 2px solid #002868; } .create-poll input[type="text"] { width: 100%; padding: 10px; margin-bottom: 10px; border: 1px solid #002868; } .create-poll button { display: inline-block; background: #002868; color: #fff; padding: 10px 20px; border: none; cursor: pointer; margin-right: 10px; } .create-poll button:hover { background: #001f4d; } .polls { background: #fff; padding: 20px; border-radius: 5px; box-shadow: 0 0 10px rgba(0,0,0,0.1); border: 2px solid #002868; } .poll { border-bottom: 1px solid #ccc; padding-bottom: 20px; margin-bottom: 20px; } .poll:last-child { border-bottom: none; padding-bottom: 0; margin-bottom: 0; } .poll ul { list-style-type: none; padding: 0; } .poll li { margin-bottom: 10px; } .poll button { background: #bf0a30; color: white; border: none; padding: 5px 10px; cursor: pointer; margin-left: 10px; } .poll button:hover { background: #8c0000; } .view-source { display: inline-block; margin-top: 20px; color: #002868; text-decoration: none; } .view-source:hover { text-decoration: underline; } .chart-container { width: 100%; max-width: 600px; margin: 20px auto; } `;

U.S. Election Debate Poll App

Create a New Poll

Active Polls

{poll.question}

laur3n