// views-other.jsx — Detail, Add Event, Calendar, Saved const { useState: useStateO, useMemo: useMemoO, useEffect: useEffectO } = React; /* =================== DETAIL =================== */ function DetailView({ ev, onBack, onOpen, saved, onSave, rsvped, onRsvp, onShare }) { if (!ev) return null; const cat = window.SLE.CATEGORIES[ev.category]; const isGoing = rsvped.has(ev.id); const going = ev.going + (isGoing ? 1 : 0); const similar = window.SLE.EVENTS.filter((e) => e.category === ev.category && e.id !== ev.id).slice(0, 3); const InfoRow = ({ icon, label, value }) => (
{icon}
{label}
{value}
); return (
{/* header band */}
{cat.label}

{ev.title}

e.stopPropagation()}>
{/* left */}

{ev.blurb}

About this event

{ev.about}

{ev.tags.map((t) => {t})}
{ev.organizer[0]}
Organized by
{ev.organizer}
{ev.organizerType}
{/* right sticky card */}
{similar.length > 0 && (

More {cat.short.toLowerCase()} events

{similar.map((e) => )}
)}
); } /* =================== ADD EVENT =================== */ function AddEventView({ onBack, onCreated }) { const empty = { title: "", category: "music", date: "", startTime: "", endTime: "", venue: "", city: "", country: "United Kingdom", address: "", organizer: "", free: true, price: "", currency: "£", blurb: "", tags: "" }; const [f, setF] = useStateO(empty); const [errs, setErrs] = useStateO({}); const [done, setDone] = useStateO(null); const set = (k, v) => setF((s) => ({ ...s, [k]: v })); const validate = () => { const e = {}; ["title", "date", "startTime", "venue", "city", "organizer", "blurb"].forEach((k) => { if (!String(f[k]).trim()) e[k] = "Required"; }); if (!f.free && (!f.price || Number(f.price) <= 0)) e.price = "Enter a price"; if (f.blurb && f.blurb.trim().length < 20) e.blurb = "A little more detail, please (20+ chars)"; setErrs(e); return Object.keys(e).length === 0; }; const submit = (e) => { e.preventDefault(); if (!validate()) { const first = document.querySelector(".input.err, .textarea.err, .select.err"); if (first) first.focus(); return; } const ev = { id: "user-" + Date.now(), title: f.title.trim(), category: f.category, date: f.date, startTime: f.startTime, endTime: f.endTime || f.startTime, venue: f.venue.trim(), city: f.city.trim(), country: f.country, address: f.address.trim() || f.city.trim(), organizer: f.organizer.trim(), organizerType: "Community member", price: f.free ? 0 : Number(f.price), currency: f.currency, going: 1, capacity: 100, featured: false, tags: f.tags.split(",").map((t) => t.trim()).filter(Boolean).slice(0, 5), blurb: f.blurb.trim(), about: f.blurb.trim(), }; window.SLE.EVENTS.unshift(ev); setDone(ev); window.scrollTo({ top: 0 }); }; const cats = Object.values(window.SLE.CATEGORIES); if (done) { return (

Your event is live!

“{done.title}” has been added to the community calendar. Share it with your people to get the RSVPs rolling.

onCreated(done.id)} saved={new Set()} onSave={() => {}} />
); } const Field = ({ k, label, children, hint, req }) => (
{children} {errs[k] ? {errs[k]} : hint ? {hint} : null}
); return (
List your event

Add an event

Tell the community what’s happening. It takes about two minutes.

set("title", e.target.value)} placeholder="e.g. Bubu Nights: Freetown to London" />
{cats.map((c) => ( ))}
set("date", e.target.value)} /> set("startTime", e.target.value)} /> set("endTime", e.target.value)} />
set("venue", e.target.value)} placeholder="Venue name" /> set("city", e.target.value)} placeholder="e.g. London" />
set("address", e.target.value)} placeholder="Street address" /> set("organizer", e.target.value)} placeholder="You or your group" />
{!f.free && (
set("price", e.target.value)} placeholder="Amount" /> {errs.price && {errs.price}}
)}