272 lines
14 KiB
TypeScript
272 lines
14 KiB
TypeScript
'use client';
|
|
|
|
import React, { useState, useEffect } from 'react';
|
|
import { createClientComponentClient } from '@supabase/auth-helpers-nextjs';
|
|
import { Calendar, Plus, GlassWater, Loader2, ChevronRight, Users, Check, Trash2, ChevronDown, ChevronUp } from 'lucide-react';
|
|
import Link from 'next/link';
|
|
import AvatarStack from './AvatarStack';
|
|
import { deleteSession } from '@/services/delete-session';
|
|
import { useI18n } from '@/i18n/I18nContext';
|
|
import { useSession } from '@/context/SessionContext';
|
|
|
|
interface Session {
|
|
id: string;
|
|
name: string;
|
|
scheduled_at: string;
|
|
participant_count?: number;
|
|
whisky_count?: number;
|
|
participants?: string[];
|
|
}
|
|
|
|
export default function SessionList() {
|
|
const { t, locale } = useI18n();
|
|
const supabase = createClientComponentClient();
|
|
const [sessions, setSessions] = useState<Session[]>([]);
|
|
const [isLoading, setIsLoading] = useState(true);
|
|
const [isCreating, setIsCreating] = useState(false);
|
|
const [isDeleting, setIsDeleting] = useState<string | null>(null);
|
|
const [isCollapsed, setIsCollapsed] = useState(() => {
|
|
if (typeof window !== 'undefined') {
|
|
return localStorage.getItem('whisky-sessions-collapsed') === 'true';
|
|
}
|
|
return false;
|
|
});
|
|
const [newName, setNewName] = useState('');
|
|
const { activeSession, setActiveSession } = useSession();
|
|
|
|
useEffect(() => {
|
|
fetchSessions();
|
|
}, []);
|
|
|
|
const fetchSessions = async () => {
|
|
const { data, error } = await supabase
|
|
.from('tasting_sessions')
|
|
.select(`
|
|
*,
|
|
session_participants (
|
|
count,
|
|
buddies (name)
|
|
),
|
|
tastings (count)
|
|
`)
|
|
.order('scheduled_at', { ascending: false });
|
|
|
|
if (error) {
|
|
console.error('Error fetching sessions:', error);
|
|
// Fallback: try without tastings join if relationship is missing
|
|
const { data: fallbackData, error: fallbackError } = await supabase
|
|
.from('tasting_sessions')
|
|
.select(`
|
|
*,
|
|
session_participants (count)
|
|
`)
|
|
.order('scheduled_at', { ascending: false });
|
|
|
|
if (fallbackError) {
|
|
console.error('Error fetching sessions fallback:', fallbackError);
|
|
} else {
|
|
setSessions(fallbackData.map(s => ({
|
|
...s,
|
|
participant_count: s.session_participants[0]?.count || 0,
|
|
participants: (s.session_participants as any[])?.filter(p => p.buddies).map(p => p.buddies.name) || [],
|
|
whisky_count: 0
|
|
})) || []);
|
|
}
|
|
} else {
|
|
setSessions(data.map(s => ({
|
|
...s,
|
|
participant_count: s.session_participants[0]?.count || 0,
|
|
participants: (s.session_participants as any[])?.filter(p => p.buddies).map(p => p.buddies.name) || [],
|
|
whisky_count: s.tastings[0]?.count || 0
|
|
})) || []);
|
|
}
|
|
setIsLoading(false);
|
|
};
|
|
|
|
const handleToggleCollapse = () => {
|
|
const nextState = !isCollapsed;
|
|
setIsCollapsed(nextState);
|
|
localStorage.setItem('whisky-sessions-collapsed', String(nextState));
|
|
};
|
|
|
|
const handleCreateSession = async (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
if (!newName.trim()) return;
|
|
|
|
setIsCreating(true);
|
|
const { data: { user } } = await supabase.auth.getUser();
|
|
if (!user) return;
|
|
|
|
const { data, error } = await supabase
|
|
.from('tasting_sessions')
|
|
.insert([{ name: newName.trim(), user_id: user.id }])
|
|
.select()
|
|
.single();
|
|
|
|
if (error) {
|
|
console.error('Error creating session:', error);
|
|
} else {
|
|
setSessions(prev => [data, ...prev]);
|
|
setNewName('');
|
|
setActiveSession({ id: data.id, name: data.name });
|
|
}
|
|
setIsCreating(false);
|
|
};
|
|
|
|
const handleDeleteSession = async (e: React.MouseEvent, sessionId: string) => {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
|
|
if (!confirm('Möchtest du diese Session wirklich löschen? Alle Verknüpfungen gehen verloren.')) return;
|
|
|
|
setIsDeleting(sessionId);
|
|
const result = await deleteSession(sessionId);
|
|
|
|
if (result.success) {
|
|
setSessions(prev => prev.filter(s => s.id !== sessionId));
|
|
if (activeSession?.id === sessionId) {
|
|
setActiveSession(null);
|
|
}
|
|
} else {
|
|
alert(result.error);
|
|
}
|
|
setIsDeleting(null);
|
|
};
|
|
|
|
return (
|
|
<div className="bg-white dark:bg-zinc-900 rounded-3xl p-6 border border-zinc-200 dark:border-zinc-800 shadow-xl transition-all duration-300">
|
|
<div className="flex items-center justify-between mb-6">
|
|
<h3 className="text-xl font-bold flex items-center gap-2 text-zinc-800 dark:text-zinc-100 italic">
|
|
<Calendar size={24} className="text-amber-600" />
|
|
{t('session.title')}
|
|
{!isCollapsed && sessions.length > 0 && (
|
|
<span className="text-sm font-normal text-zinc-400 not-italic ml-2">({sessions.length})</span>
|
|
)}
|
|
</h3>
|
|
<button
|
|
onClick={handleToggleCollapse}
|
|
className="p-2 hover:bg-zinc-100 dark:hover:bg-zinc-800 rounded-xl transition-colors text-zinc-400 hover:text-amber-600"
|
|
title={isCollapsed ? 'Aufklappen' : 'Einklappen'}
|
|
>
|
|
{isCollapsed ? <ChevronDown size={20} /> : <ChevronUp size={20} />}
|
|
</button>
|
|
</div>
|
|
|
|
{!isCollapsed && (
|
|
<>
|
|
<form onSubmit={handleCreateSession} className="flex gap-2 mb-6">
|
|
<input
|
|
type="text"
|
|
value={newName}
|
|
onChange={(e) => setNewName(e.target.value)}
|
|
placeholder={t('session.sessionName')}
|
|
className="flex-1 bg-zinc-50 dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 rounded-xl px-4 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-amber-500/50"
|
|
/>
|
|
<button
|
|
type="submit"
|
|
disabled={isCreating || !newName.trim()}
|
|
className="bg-amber-600 hover:bg-amber-700 text-white p-2 rounded-xl transition-all disabled:opacity-50"
|
|
>
|
|
{isCreating ? <Loader2 size={20} className="animate-spin" /> : <Plus size={20} />}
|
|
</button>
|
|
</form>
|
|
|
|
{isLoading ? (
|
|
<div className="flex justify-center py-8 text-zinc-400">
|
|
<Loader2 size={24} className="animate-spin" />
|
|
</div>
|
|
) : sessions.length === 0 ? (
|
|
<div className="text-center py-8 text-zinc-500 text-sm">
|
|
{t('session.noSessions')}
|
|
</div>
|
|
) : (
|
|
<div className="space-y-3">
|
|
{sessions.map((session) => (
|
|
<div
|
|
key={session.id}
|
|
className={`flex items-center justify-between p-4 rounded-2xl border group transition-all ${activeSession?.id === session.id
|
|
? 'bg-amber-600 border-amber-600 shadow-lg shadow-amber-600/20'
|
|
: 'bg-zinc-50 dark:bg-zinc-800/50 border-zinc-100 dark:border-zinc-800 hover:border-amber-500/30'
|
|
}`}
|
|
>
|
|
<Link href={`/sessions/${session.id}`} className="flex-1 space-y-1 min-w-0">
|
|
<div className={`font-bold truncate ${activeSession?.id === session.id ? 'text-white' : 'text-zinc-800 dark:text-zinc-100'}`}>
|
|
{session.name}
|
|
</div>
|
|
<div className={`flex items-center gap-4 text-[10px] font-black uppercase tracking-widest ${activeSession?.id === session.id ? 'text-white/80' : 'text-zinc-400'}`}>
|
|
<span className="flex items-center gap-1">
|
|
<Calendar size={12} />
|
|
{new Date(session.scheduled_at).toLocaleDateString(locale === 'de' ? 'de-DE' : 'en-US')}
|
|
</span>
|
|
{session.whisky_count! > 0 && (
|
|
<span className="flex items-center gap-1">
|
|
<GlassWater size={12} />
|
|
{session.whisky_count} Whiskys
|
|
</span>
|
|
)}
|
|
</div>
|
|
{session.participants && session.participants.length > 0 && (
|
|
<div className="pt-1">
|
|
<AvatarStack names={session.participants} limit={5} />
|
|
</div>
|
|
)}
|
|
</Link>
|
|
<div className="flex items-center gap-2">
|
|
{activeSession?.id !== session.id ? (
|
|
<button
|
|
onClick={() => setActiveSession({ id: session.id, name: session.name })}
|
|
className="p-2 bg-white dark:bg-zinc-700 text-amber-600 rounded-xl shadow-sm border border-zinc-200 dark:border-zinc-600 hover:scale-110 transition-transform"
|
|
title="Start Session"
|
|
>
|
|
<GlassWater size={18} />
|
|
</button>
|
|
) : (
|
|
<div className="p-2 bg-white/20 text-white rounded-xl">
|
|
<Check size={18} />
|
|
</div>
|
|
)}
|
|
<ChevronRight size={20} className={activeSession?.id === session.id ? 'text-white/50' : 'text-zinc-300'} />
|
|
<button
|
|
onClick={(e) => handleDeleteSession(e, session.id)}
|
|
disabled={!!isDeleting}
|
|
className={`p-2 rounded-xl transition-all ${activeSession?.id === session.id
|
|
? 'text-white/40 hover:text-white hover:bg-white/10'
|
|
: 'text-zinc-300 hover:text-red-500 hover:bg-red-50 dark:hover:bg-red-900/10'
|
|
}`}
|
|
title="Session löschen"
|
|
>
|
|
{isDeleting === session.id ? (
|
|
<Loader2 size={18} className="animate-spin" />
|
|
) : (
|
|
<Trash2 size={18} />
|
|
)}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</>
|
|
)}
|
|
|
|
{isCollapsed && sessions.length > 0 && (
|
|
<div className="flex items-center gap-2 animate-in fade-in slide-in-from-top-1">
|
|
<div className="flex -space-x-1.5 overflow-hidden">
|
|
{sessions.slice(0, 3).map((s, i) => (
|
|
<div key={s.id} className="w-7 h-7 rounded-lg bg-amber-50 dark:bg-amber-900/20 border border-amber-200/50 dark:border-amber-800/50 flex items-center justify-center text-[10px] font-black text-amber-600 dark:text-amber-500 shadow-sm">
|
|
{s.name[0].toUpperCase()}
|
|
</div>
|
|
))}
|
|
{sessions.length > 3 && (
|
|
<div className="w-7 h-7 rounded-lg bg-zinc-100 dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 flex items-center justify-center text-[8px] font-black text-zinc-500 shadow-sm">
|
|
+{sessions.length - 3}
|
|
</div>
|
|
)}
|
|
</div>
|
|
<span className="text-[10px] text-zinc-400 font-black uppercase tracking-widest ml-1">{sessions.length} Sessions</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|