feat: implement buddies and tasting sessions features

2025-12-18 10:56:41 +01:00
parent 314967b31b
commit d07af05b66
9 changed files with 771 additions and 14 deletions
--- a/src/components/SessionList.tsx
+++ b/src/components/SessionList.tsx
@@ -0,0 +1,131 @@
+'use client';
+
+import React, { useState, useEffect } from 'react';
+import { createClientComponentClient } from '@supabase/auth-helpers-nextjs';
+import { Calendar, Plus, GlassWater, Loader2, ChevronRight, Users } from 'lucide-react';
+import Link from 'next/link';
+
+interface Session {
+    id: string;
+    name: string;
+    scheduled_at: string;
+    participant_count?: number;
+}
+
+export default function SessionList() {
+    const supabase = createClientComponentClient();
+    const [sessions, setSessions] = useState<Session[]>([]);
+    const [isLoading, setIsLoading] = useState(true);
+    const [isCreating, setIsCreating] = useState(false);
+    const [newName, setNewName] = useState('');
+
+    useEffect(() => {
+        fetchSessions();
+    }, []);
+
+    const fetchSessions = async () => {
+        const { data, error } = await supabase
+            .from('tasting_sessions')
+            .select(`
+                *,
+                session_participants (count)
+            `)
+            .order('scheduled_at', { ascending: false });
+
+        if (error) {
+            console.error('Error fetching sessions:', error);
+        } else {
+            setSessions(data.map(s => ({
+                ...s,
+                participant_count: s.session_participants[0]?.count || 0
+            })) || []);
+        }
+        setIsLoading(false);
+    };
+
+    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('');
+        }
+        setIsCreating(false);
+    };
+
+    return (
+        <div className="bg-white dark:bg-zinc-900 rounded-3xl p-6 border border-zinc-200 dark:border-zinc-800 shadow-xl">
+            <h3 className="text-xl font-bold mb-6 flex items-center gap-2 text-zinc-800 dark:text-zinc-100 italic">
+                <GlassWater size={24} className="text-amber-600" />
+                Tasting Sessions
+            </h3>
+
+            <form onSubmit={handleCreateSession} className="flex gap-2 mb-6">
+                <input
+                    type="text"
+                    value={newName}
+                    onChange={(e) => setNewName(e.target.value)}
+                    placeholder="Event Name (z.B. Islay Night)..."
+                    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">
+                    Noch keine Sessions geplant.
+                </div>
+            ) : (
+                <div className="space-y-3">
+                    {sessions.map((session) => (
+                        <Link
+                            key={session.id}
+                            href={`/sessions/${session.id}`}
+                            className="flex items-center justify-between p-4 bg-zinc-50 dark:bg-zinc-800/50 rounded-2xl border border-zinc-100 dark:border-zinc-800 group hover:border-amber-500/30 transition-all"
+                        >
+                            <div className="space-y-1">
+                                <div className="font-bold text-zinc-800 dark:text-zinc-100">{session.name}</div>
+                                <div className="flex items-center gap-4 text-[10px] font-black uppercase tracking-widest text-zinc-400">
+                                    <span className="flex items-center gap-1">
+                                        <Calendar size={12} />
+                                        {new Date(session.scheduled_at).toLocaleDateString('de-DE')}
+                                    </span>
+                                    {session.participant_count! > 0 && (
+                                        <span className="flex items-center gap-1">
+                                            <Users size={12} />
+                                            {session.participant_count} Teilnehmer
+                                        </span>
+                                    )}
+                                </div>
+                            </div>
+                            <ChevronRight size={20} className="text-zinc-300 group-hover:text-amber-500 transition-colors" />
+                        </Link>
+                    ))}
+                </div>
+            )}
+        </div>
+    );
+}