robin
489b975911
- Rename 'Events' to 'Tastings' in nav - Sessions page: Create, list, delete sessions with sticky header - Buddies page: Add, search, delete buddies with linked/unlinked sections - Both pages match new home view design language
289 lines
14 KiB
TypeScript
289 lines
14 KiB
TypeScript
'use client';
|
|
|
|
import { useRouter } from 'next/navigation';
|
|
import { ArrowLeft, Calendar, Plus, GlassWater, Loader2, ChevronRight, Users, Sparkles, Clock, Trash2 } from 'lucide-react';
|
|
import { useI18n } from '@/i18n/I18nContext';
|
|
import { useEffect, useState } from 'react';
|
|
import { createClient } from '@/lib/supabase/client';
|
|
import Link from 'next/link';
|
|
import { useSession } from '@/context/SessionContext';
|
|
import { useAuth } from '@/context/AuthContext';
|
|
import { deleteSession } from '@/services/delete-session';
|
|
import AvatarStack from '@/components/AvatarStack';
|
|
|
|
interface Session {
|
|
id: string;
|
|
name: string;
|
|
scheduled_at: string;
|
|
ended_at?: string;
|
|
participant_count?: number;
|
|
whisky_count?: number;
|
|
participants?: string[];
|
|
}
|
|
|
|
export default function SessionsPage() {
|
|
const router = useRouter();
|
|
const { t, locale } = useI18n();
|
|
const supabase = createClient();
|
|
const { activeSession, setActiveSession } = useSession();
|
|
const { user, isLoading: isAuthLoading } = useAuth();
|
|
|
|
const [sessions, setSessions] = useState<Session[]>([]);
|
|
const [isLoading, setIsLoading] = useState(true);
|
|
const [isCreating, setIsCreating] = useState(false);
|
|
const [isDeleting, setIsDeleting] = useState<string | null>(null);
|
|
const [newName, setNewName] = useState('');
|
|
const [showCreateForm, setShowCreateForm] = useState(false);
|
|
|
|
useEffect(() => {
|
|
if (!isAuthLoading && user) {
|
|
fetchSessions();
|
|
}
|
|
}, [user, isAuthLoading]);
|
|
|
|
const fetchSessions = async () => {
|
|
setIsLoading(true);
|
|
const { data, error } = await supabase
|
|
.from('tasting_sessions')
|
|
.select(`
|
|
*,
|
|
session_participants (buddies(name)),
|
|
tastings (count)
|
|
`)
|
|
.order('scheduled_at', { ascending: false });
|
|
|
|
if (error) {
|
|
console.error('Error fetching sessions:', error);
|
|
// Fallback without tastings join
|
|
const { data: fallbackData } = await supabase
|
|
.from('tasting_sessions')
|
|
.select(`*, session_participants (buddies(name))`)
|
|
.order('scheduled_at', { ascending: false });
|
|
|
|
if (fallbackData) {
|
|
setSessions(fallbackData.map(s => {
|
|
const participants = (s.session_participants as any[])?.filter(p => p.buddies).map(p => p.buddies.name) || [];
|
|
return { ...s, participant_count: participants.length, participants, whisky_count: 0 };
|
|
}));
|
|
}
|
|
} else {
|
|
setSessions(data?.map(s => {
|
|
const participants = (s.session_participants as any[])?.filter(p => p.buddies).map(p => p.buddies.name) || [];
|
|
return {
|
|
...s,
|
|
participant_count: participants.length,
|
|
participants,
|
|
whisky_count: (s.tastings as any[])?.[0]?.count || 0
|
|
};
|
|
}) || []);
|
|
}
|
|
setIsLoading(false);
|
|
};
|
|
|
|
const handleCreateSession = async (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
if (!newName.trim()) return;
|
|
|
|
setIsCreating(true);
|
|
const { data, error } = await supabase
|
|
.from('tasting_sessions')
|
|
.insert({ name: newName.trim(), scheduled_at: new Date().toISOString() })
|
|
.select()
|
|
.single();
|
|
|
|
if (!error && data) {
|
|
setSessions(prev => [{ ...data, participant_count: 0, whisky_count: 0 }, ...prev]);
|
|
setNewName('');
|
|
setShowCreateForm(false);
|
|
setActiveSession({ id: data.id, name: data.name });
|
|
}
|
|
setIsCreating(false);
|
|
};
|
|
|
|
const handleDeleteSession = async (id: string) => {
|
|
setIsDeleting(id);
|
|
const result = await deleteSession(id);
|
|
if (result.success) {
|
|
setSessions(prev => prev.filter(s => s.id !== id));
|
|
if (activeSession?.id === id) {
|
|
setActiveSession(null);
|
|
}
|
|
}
|
|
setIsDeleting(null);
|
|
};
|
|
|
|
const formatDate = (date: string) => {
|
|
return new Date(date).toLocaleDateString(locale === 'de' ? 'de-DE' : 'en-US', {
|
|
day: 'numeric',
|
|
month: 'short',
|
|
year: 'numeric'
|
|
});
|
|
};
|
|
|
|
const activeSessions = sessions.filter(s => !s.ended_at);
|
|
const pastSessions = sessions.filter(s => s.ended_at);
|
|
|
|
return (
|
|
<main className="min-h-screen bg-zinc-950 pb-24">
|
|
{/* Header */}
|
|
<div className="sticky top-0 z-20 bg-zinc-950/95 backdrop-blur-md border-b border-zinc-900">
|
|
<div className="max-w-2xl mx-auto px-4 py-4 flex items-center gap-4">
|
|
<button
|
|
onClick={() => router.back()}
|
|
className="p-2 rounded-xl bg-zinc-900 border border-zinc-800 text-zinc-400 hover:text-white hover:border-zinc-700 transition-colors"
|
|
>
|
|
<ArrowLeft size={20} />
|
|
</button>
|
|
<div className="flex-1">
|
|
<h1 className="text-xl font-bold text-white">
|
|
{t('session.title')}
|
|
</h1>
|
|
<p className="text-xs text-zinc-500">
|
|
{sessions.length} Sessions
|
|
</p>
|
|
</div>
|
|
<button
|
|
onClick={() => setShowCreateForm(!showCreateForm)}
|
|
className="p-2.5 bg-orange-600 hover:bg-orange-700 rounded-xl text-white transition-colors"
|
|
>
|
|
<Plus size={20} />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="max-w-2xl mx-auto px-4 pt-6">
|
|
{/* Create Form */}
|
|
{showCreateForm && (
|
|
<form onSubmit={handleCreateSession} className="mb-6 p-4 bg-zinc-900 rounded-2xl border border-zinc-800 animate-in fade-in slide-in-from-top-2">
|
|
<input
|
|
type="text"
|
|
value={newName}
|
|
onChange={(e) => setNewName(e.target.value)}
|
|
placeholder={t('session.sessionName')}
|
|
className="w-full bg-zinc-950 border border-zinc-800 rounded-xl px-4 py-3 text-white placeholder-zinc-600 focus:outline-none focus:border-orange-600 mb-3"
|
|
autoFocus
|
|
/>
|
|
<div className="flex gap-2">
|
|
<button
|
|
type="button"
|
|
onClick={() => setShowCreateForm(false)}
|
|
className="flex-1 py-2 bg-zinc-800 text-zinc-400 rounded-xl text-sm font-bold"
|
|
>
|
|
{t('common.cancel')}
|
|
</button>
|
|
<button
|
|
type="submit"
|
|
disabled={isCreating || !newName.trim()}
|
|
className="flex-1 py-2 bg-orange-600 hover:bg-orange-700 text-white rounded-xl text-sm font-bold disabled:opacity-50 flex items-center justify-center gap-2"
|
|
>
|
|
{isCreating ? <Loader2 size={16} className="animate-spin" /> : <Sparkles size={16} />}
|
|
Start Session
|
|
</button>
|
|
</div>
|
|
</form>
|
|
)}
|
|
|
|
{/* Active Session Banner */}
|
|
{activeSession && (
|
|
<Link href={`/sessions/${activeSession.id}`}>
|
|
<div className="mb-6 p-4 bg-gradient-to-r from-orange-600/20 to-orange-500/10 rounded-2xl border border-orange-600/30 flex items-center gap-4 group hover:border-orange-500/50 transition-colors">
|
|
<div className="relative">
|
|
<div className="w-12 h-12 rounded-xl bg-orange-600/20 flex items-center justify-center">
|
|
<Sparkles size={24} className="text-orange-500" />
|
|
</div>
|
|
<span className="absolute -top-1 -right-1 w-3 h-3 bg-orange-500 rounded-full animate-pulse" />
|
|
</div>
|
|
<div className="flex-1">
|
|
<p className="text-[10px] font-bold uppercase tracking-widest text-orange-500/80">
|
|
Live Session
|
|
</p>
|
|
<p className="text-lg font-bold text-white">
|
|
{activeSession.name}
|
|
</p>
|
|
</div>
|
|
<ChevronRight size={20} className="text-orange-500 group-hover:translate-x-1 transition-transform" />
|
|
</div>
|
|
</Link>
|
|
)}
|
|
|
|
{/* Sessions List */}
|
|
{isLoading ? (
|
|
<div className="flex justify-center py-20">
|
|
<Loader2 size={32} className="animate-spin text-orange-600" />
|
|
</div>
|
|
) : sessions.length === 0 ? (
|
|
<div className="text-center py-20">
|
|
<div className="w-16 h-16 mx-auto rounded-2xl bg-zinc-900 flex items-center justify-center mb-4">
|
|
<Calendar size={32} className="text-zinc-600" />
|
|
</div>
|
|
<p className="text-lg font-bold text-white mb-2">No Sessions Yet</p>
|
|
<p className="text-sm text-zinc-500 max-w-xs mx-auto">
|
|
Start your first tasting session to track what you're drinking.
|
|
</p>
|
|
</div>
|
|
) : (
|
|
<div className="space-y-3">
|
|
{sessions.map(session => (
|
|
<div
|
|
key={session.id}
|
|
className={`p-4 bg-zinc-900 rounded-2xl border transition-all group ${activeSession?.id === session.id
|
|
? 'border-orange-600/50'
|
|
: 'border-zinc-800 hover:border-zinc-700'
|
|
}`}
|
|
>
|
|
<div className="flex items-center gap-4">
|
|
<div className={`w-12 h-12 rounded-xl flex items-center justify-center ${session.ended_at
|
|
? 'bg-zinc-800 text-zinc-500'
|
|
: 'bg-orange-600/20 text-orange-500'
|
|
}`}>
|
|
<GlassWater size={24} />
|
|
</div>
|
|
<div className="flex-1 min-w-0">
|
|
<Link href={`/sessions/${session.id}`}>
|
|
<h3 className="font-bold text-white truncate hover:text-orange-500 transition-colors">
|
|
{session.name}
|
|
</h3>
|
|
</Link>
|
|
<div className="flex items-center gap-3 text-xs text-zinc-500 mt-0.5">
|
|
<span className="flex items-center gap-1">
|
|
<Clock size={12} />
|
|
{formatDate(session.scheduled_at)}
|
|
</span>
|
|
{session.whisky_count ? (
|
|
<span>{session.whisky_count} Whiskys</span>
|
|
) : null}
|
|
</div>
|
|
</div>
|
|
|
|
{session.participants && session.participants.length > 0 && (
|
|
<AvatarStack names={session.participants} maxShow={3} size="sm" />
|
|
)}
|
|
|
|
<div className="flex items-center gap-1">
|
|
<button
|
|
onClick={() => handleDeleteSession(session.id)}
|
|
disabled={isDeleting === session.id}
|
|
className="p-2 text-zinc-600 hover:text-red-500 hover:bg-zinc-800 rounded-lg opacity-0 group-hover:opacity-100 transition-all"
|
|
>
|
|
{isDeleting === session.id ? (
|
|
<Loader2 size={16} className="animate-spin" />
|
|
) : (
|
|
<Trash2 size={16} />
|
|
)}
|
|
</button>
|
|
<Link href={`/sessions/${session.id}`}>
|
|
<button className="p-2 text-zinc-500 hover:text-white hover:bg-zinc-800 rounded-lg transition-colors">
|
|
<ChevronRight size={18} />
|
|
</button>
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</main>
|
|
);
|
|
}
|