Logan
331 lines
11 KiB
TypeScript
331 lines
11 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect, useState } from "react";
|
|
import { useRouter } from "next/navigation";
|
|
import { useAuth } from "@/components/AuthProvider";
|
|
import { useTrips } from "@/lib/useTrips";
|
|
import { c2api } from "@/lib/c2api";
|
|
import type { TripRecord } from "@/lib/types";
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// Discord link banner
|
|
// ---------------------------------------------------------------------------
|
|
|
|
function DiscordLinkBanner() {
|
|
const [status, setStatus] = useState<{ linked: boolean; discord_username?: string } | null>(null);
|
|
const [code, setCode] = useState<string | null>(null);
|
|
const [codeExpiry, setCodeExpiry] = useState<number | null>(null); // minutes
|
|
const [generating, setGenerating] = useState(false);
|
|
const [unlinking, setUnlinking] = useState(false);
|
|
|
|
useEffect(() => {
|
|
c2api.getLinkStatus().then(setStatus).catch(() => {});
|
|
}, []);
|
|
|
|
async function generateCode() {
|
|
setGenerating(true);
|
|
try {
|
|
const res = await c2api.generateLinkCode();
|
|
if (res.already_linked) {
|
|
setStatus((prev) => prev ? { ...prev, linked: true } : prev);
|
|
} else if (res.code) {
|
|
setCode(res.code);
|
|
setCodeExpiry(res.expires_minutes ?? 15);
|
|
}
|
|
} finally {
|
|
setGenerating(false);
|
|
}
|
|
}
|
|
|
|
async function unlink() {
|
|
setUnlinking(true);
|
|
try {
|
|
await c2api.unlinkDiscord();
|
|
setStatus({ linked: false });
|
|
setCode(null);
|
|
} finally {
|
|
setUnlinking(false);
|
|
}
|
|
}
|
|
|
|
if (status === null) return null; // still loading
|
|
|
|
if (status.linked) {
|
|
return (
|
|
<div className="flex items-center justify-between bg-gray-900 border border-gray-800 rounded-xl px-4 py-3 text-sm">
|
|
<span className="text-gray-400">
|
|
Discord linked{status.discord_username ? ` as @${status.discord_username}` : ""}.
|
|
</span>
|
|
<button
|
|
onClick={unlink}
|
|
disabled={unlinking}
|
|
className="text-xs text-gray-600 hover:text-gray-400 transition-colors disabled:opacity-50"
|
|
>
|
|
{unlinking ? "Unlinking…" : "Unlink"}
|
|
</button>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="bg-gray-900 border border-amber-800/40 rounded-xl px-4 py-3 space-y-2">
|
|
<div className="flex items-center justify-between gap-4">
|
|
<div>
|
|
<p className="text-sm text-white font-medium">Link your Discord account</p>
|
|
<p className="text-xs text-gray-400 mt-0.5">
|
|
Required to access private trips from Discord or the web.
|
|
</p>
|
|
</div>
|
|
{!code && (
|
|
<button
|
|
onClick={generateCode}
|
|
disabled={generating}
|
|
className="shrink-0 bg-indigo-600 hover:bg-indigo-500 disabled:opacity-50 text-white text-xs rounded-lg px-3 py-1.5 transition-colors"
|
|
>
|
|
{generating ? "Generating…" : "Get link code"}
|
|
</button>
|
|
)}
|
|
</div>
|
|
{code && (
|
|
<div className="flex items-center gap-3 bg-gray-800 rounded-lg px-3 py-2">
|
|
<span className="font-mono text-lg tracking-[0.3em] text-white select-all">{code}</span>
|
|
<span className="text-gray-500 text-xs">—</span>
|
|
<span className="text-gray-400 text-xs">Run <span className="font-mono text-gray-300">/link {code}</span> in Discord. Expires in {codeExpiry}m.</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function fmtDate(iso: string) {
|
|
return new Date(`${iso}T12:00:00`).toLocaleDateString("en-US", {
|
|
month: "short",
|
|
day: "numeric",
|
|
year: "numeric",
|
|
});
|
|
}
|
|
|
|
function TripCard({ trip, isAdmin, onDelete }: {
|
|
trip: TripRecord;
|
|
isAdmin: boolean;
|
|
onDelete: (id: string) => void;
|
|
}) {
|
|
const router = useRouter();
|
|
const today = new Date().toISOString().slice(0, 10);
|
|
const upcoming = trip.start_date >= today;
|
|
const attendeeCount = Object.keys(trip.attendees ?? {}).length;
|
|
|
|
return (
|
|
<div
|
|
className="bg-gray-900 border border-gray-800 rounded-xl p-5 cursor-pointer hover:border-gray-700 transition-colors"
|
|
onClick={() => router.push(`/trips/${trip.trip_id}`)}
|
|
>
|
|
<div className="flex items-start justify-between gap-4">
|
|
<div className="min-w-0">
|
|
<div className="flex items-center gap-2 mb-1">
|
|
<span className={`text-xs font-mono px-2 py-0.5 rounded-full ${
|
|
upcoming ? "bg-indigo-900 text-indigo-300" : "bg-gray-800 text-gray-500"
|
|
}`}>
|
|
{upcoming ? "Upcoming" : "Past"}
|
|
</span>
|
|
</div>
|
|
<h3 className="text-white font-semibold text-sm leading-snug">{trip.name}</h3>
|
|
<p className="text-gray-400 text-xs mt-1">{trip.location}</p>
|
|
<p className="text-gray-500 text-xs font-mono mt-1">
|
|
{fmtDate(trip.start_date)} — {fmtDate(trip.end_date)}
|
|
</p>
|
|
{attendeeCount > 0 && (
|
|
<p className="text-gray-500 text-xs mt-1">
|
|
{attendeeCount} going
|
|
</p>
|
|
)}
|
|
</div>
|
|
{isAdmin && (
|
|
<button
|
|
onClick={(e) => { e.stopPropagation(); onDelete(trip.trip_id); }}
|
|
className="text-xs text-red-500 hover:text-red-400 transition-colors shrink-0"
|
|
>
|
|
Delete
|
|
</button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function CreateModal({ onClose, onCreate }: {
|
|
onClose: () => void;
|
|
onCreate: (body: object) => Promise<void>;
|
|
}) {
|
|
const [name, setName] = useState("");
|
|
const [location, setLocation] = useState("");
|
|
const [start, setStart] = useState("");
|
|
const [end, setEnd] = useState("");
|
|
const [mapsLink, setMapsLink] = useState("");
|
|
const [saving, setSaving] = useState(false);
|
|
const [error, setError] = useState<string | null>(null);
|
|
|
|
async function handleSubmit(e: React.FormEvent) {
|
|
e.preventDefault();
|
|
if (end < start) { setError("End date must be on or after start date."); return; }
|
|
setSaving(true);
|
|
setError(null);
|
|
try {
|
|
await onCreate({
|
|
name,
|
|
location,
|
|
start_date: start,
|
|
end_date: end,
|
|
maps_link: mapsLink || null,
|
|
});
|
|
onClose();
|
|
} catch {
|
|
setError("Failed to create trip.");
|
|
} finally {
|
|
setSaving(false);
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div className="fixed inset-0 bg-black/60 flex items-center justify-center z-50">
|
|
<form
|
|
onSubmit={handleSubmit}
|
|
className="bg-gray-900 border border-gray-700 rounded-xl p-6 w-full max-w-md space-y-4"
|
|
>
|
|
<h2 className="text-white font-bold">New Trip</h2>
|
|
|
|
<div>
|
|
<label className="text-xs text-gray-400 block mb-1">Name</label>
|
|
<input
|
|
required value={name} onChange={(e) => setName(e.target.value)}
|
|
placeholder="Road trip to Nashville"
|
|
className="w-full bg-gray-800 border border-gray-700 rounded-lg px-3 py-2 text-white text-sm focus:outline-none focus:border-indigo-500"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="text-xs text-gray-400 block mb-1">Location</label>
|
|
<input
|
|
required value={location} onChange={(e) => setLocation(e.target.value)}
|
|
placeholder="Nashville, TN"
|
|
className="w-full bg-gray-800 border border-gray-700 rounded-lg px-3 py-2 text-white text-sm focus:outline-none focus:border-indigo-500"
|
|
/>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-2 gap-3">
|
|
<div>
|
|
<label className="text-xs text-gray-400 block mb-1">Start date</label>
|
|
<input
|
|
required type="date" value={start} onChange={(e) => setStart(e.target.value)}
|
|
className="w-full bg-gray-800 border border-gray-700 rounded-lg px-3 py-2 text-white text-sm focus:outline-none focus:border-indigo-500"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="text-xs text-gray-400 block mb-1">End date</label>
|
|
<input
|
|
required type="date" value={end} onChange={(e) => setEnd(e.target.value)}
|
|
min={start}
|
|
className="w-full bg-gray-800 border border-gray-700 rounded-lg px-3 py-2 text-white text-sm focus:outline-none focus:border-indigo-500"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="text-xs text-gray-400 block mb-1">Google Maps link (optional)</label>
|
|
<input
|
|
type="url" value={mapsLink} onChange={(e) => setMapsLink(e.target.value)}
|
|
placeholder="https://maps.google.com/…"
|
|
className="w-full bg-gray-800 border border-gray-700 rounded-lg px-3 py-2 text-white text-sm focus:outline-none focus:border-indigo-500"
|
|
/>
|
|
</div>
|
|
|
|
{error && <p className="text-red-400 text-xs">{error}</p>}
|
|
|
|
<div className="flex gap-3 justify-end">
|
|
<button type="button" onClick={onClose} className="text-sm text-gray-400 hover:text-gray-200 px-4 py-2">
|
|
Cancel
|
|
</button>
|
|
<button
|
|
type="submit" disabled={saving}
|
|
className="bg-indigo-600 hover:bg-indigo-500 disabled:opacity-50 text-white text-sm rounded-lg px-4 py-2"
|
|
>
|
|
{saving ? "Creating…" : "Create Trip"}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default function TripsPage() {
|
|
const { isAdmin } = useAuth();
|
|
const { trips, loading } = useTrips();
|
|
const [showCreate, setShowCreate] = useState(false);
|
|
|
|
const today = new Date().toISOString().slice(0, 10);
|
|
const upcoming = trips.filter((t) => t.end_date >= today);
|
|
const past = trips.filter((t) => t.end_date < today);
|
|
|
|
async function handleDelete(id: string) {
|
|
try { await c2api.deleteTrip(id); }
|
|
catch (e) { console.error(e); }
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-8">
|
|
<DiscordLinkBanner />
|
|
|
|
<div className="flex items-center justify-between">
|
|
<h1 className="text-white text-xl font-bold font-mono">Trips</h1>
|
|
{isAdmin && (
|
|
<button
|
|
onClick={() => setShowCreate(true)}
|
|
className="bg-indigo-600 hover:bg-indigo-500 text-white text-sm rounded-lg px-4 py-2 transition-colors"
|
|
>
|
|
+ New Trip
|
|
</button>
|
|
)}
|
|
</div>
|
|
|
|
{loading ? (
|
|
<p className="text-gray-500 text-sm font-mono">Loading…</p>
|
|
) : (
|
|
<>
|
|
{upcoming.length > 0 && (
|
|
<section>
|
|
<h2 className="text-sm font-mono text-gray-400 uppercase tracking-wider mb-3">Upcoming</h2>
|
|
<div className="space-y-3">
|
|
{upcoming.map((t) => (
|
|
<TripCard key={t.trip_id} trip={t} isAdmin={isAdmin} onDelete={handleDelete} />
|
|
))}
|
|
</div>
|
|
</section>
|
|
)}
|
|
|
|
{past.length > 0 && (
|
|
<section>
|
|
<h2 className="text-sm font-mono text-gray-400 uppercase tracking-wider mb-3">Past</h2>
|
|
<div className="space-y-3">
|
|
{past.map((t) => (
|
|
<TripCard key={t.trip_id} trip={t} isAdmin={isAdmin} onDelete={handleDelete} />
|
|
))}
|
|
</div>
|
|
</section>
|
|
)}
|
|
|
|
{trips.length === 0 && (
|
|
<p className="text-gray-600 text-sm font-mono">No trips yet.</p>
|
|
)}
|
|
</>
|
|
)}
|
|
|
|
{showCreate && (
|
|
<CreateModal
|
|
onClose={() => setShowCreate(false)}
|
|
onCreate={async (body) => { await c2api.createTrip(body); }}
|
|
/>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|