import React, { useState, useEffect } from "https://esm.sh/react";
import { createRoot } from "https://esm.sh/react-dom/client";
const locations = [
{ id: 1, name: "Au camping", emoji: "⛺" },
{ id: 2, name: "Chez Ben", emoji: "🏢" },
{ id: 3, name: "Au Château", emoji: "🏰" },
{ id: 4, name: "Sur Saturne", emoji: "🪐" },
];
function App() {
const [votes, setVotes] = useState({});
const [selectedLocation, setSelectedLocation] = useState(null);
const [showCelebration, setShowCelebration] = useState(false);
useEffect(() => {
fetchVotes();
}, []);
const fetchVotes = async () => {
try {
const response = await fetch("/votes");
const data = await response.json();
console.log("Fetched votes:", data);
setVotes(data);
} catch (error) {
console.error("Error fetching votes:", error);
}
};
const handleVote = async (locationId) => {
console.log("Voting for location:", locationId);
try {
const response = await fetch("/vote", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ locationId }),
});
if (response.ok) {
const result = await response.json();
console.log("Vote result:", result);
setVotes(prevVotes => ({
...prevVotes,
[locationId]: result.newCount
}));
if (selectedLocation === locationId) {
setSelectedLocation(null);
} else {
setSelectedLocation(locationId);
setShowCelebration(true);
setTimeout(() => setShowCelebration(false), 2000);
}
} else {
console.error("Vote failed:", await response.text());
}
} catch (error) {
console.error("Error voting:", error);
}
};
return (
<div className="container">
<div className="image-frame"></div>
<div className="content">
<h1>Side School Seminar</h1>
<h2>Choose the location:</h2>
<div className="locations">
{locations.map((location) => (
<button
key={location.id}
onClick={() => handleVote(location.id)}
className={location.id === selectedLocation ? "selected" : ""}
>
<span className="emoji">{location.emoji}</span>
<span className="name">{location.name}</span>
<span className="votes">{votes[location.id] || 0} votes</span>
</button>
))}
</div>
{selectedLocation !== null && <p>Thank you for voting! Click your choice again to cancel.</p>}
</div>
{showCelebration && <div className="celebration">🎉🎊🥳</div>}
</div>
);
}
function client() {