robin/Dramlog-Prod
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: session deletion, improved tasting deletion visibility, and PWA login loop fix

Browse Source
This commit is contained in:
robin
2025-12-18 21:02:44 +01:00
parent a4a9d79c4c
commit a64e8f17a1
8 changed files with 174 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/app/bottles/[id]/page.tsx
View File

@@ -28,6 +28,7 @@ export default async function BottlePage({
}
}
const supabase = createServerComponentClient({ cookies });
const { data: { user } } = await supabase.auth.getUser();
const { data: bottle } = await supabase
.from('bottles')
@@ -187,7 +188,7 @@ export default async function BottlePage({
{/* List */}
<div className="lg:col-span-2">
<TastingList initialTastings={tastings || []} />
<TastingList initialTastings={tastings || []} currentUserId={user?.id} />
</div>
</div>
</section>

23
src/app/page.tsx
View File

@@ -25,16 +25,22 @@ export default function Home() {
const checkUser = async () => {
try {
const { data: { session }, error } = await supabase.auth.getSession();
console.log('Initial session check:', session ? 'User logged in' : 'No session');
console.log('[Auth] Initial session check:', {
hasSession: !!session,
userId: session?.user?.id,
email: session?.user?.email,
error: error?.message
});
if (error) {
console.error('Session retrieval error:', error);
console.error('[Auth] Session retrieval error:', error);
}
setUser(session?.user ?? null);
if (session?.user) {
fetchCollection();
}
} catch (err) {
console.error('Fatal error checking user:', err);
console.error('[Auth] Fatal error checking user:', err);
setUser(null);
} finally {
setIsLoading(false);
@@ -45,10 +51,17 @@ export default function Home() {
// Listen for auth changes
const { data: { subscription } } = supabase.auth.onAuthStateChange((event, session) => {
console.log('Auth state change:', event, session?.user ? 'User logged in' : 'No user');
console.log('[Auth] State change event:', event, {
hasSession: !!session,
userId: session?.user?.id,
email: session?.user?.email
});
setUser(session?.user ?? null);
if (session?.user) {
fetchCollection();
if (event === 'SIGNED_IN' || event === 'INITIAL_SESSION' || event === 'TOKEN_REFRESHED') {
fetchCollection();
}
} else {
setBottles([]);
}

28
src/app/sessions/[id]/page.tsx
View File

@@ -4,6 +4,7 @@ import React, { useState, useEffect } from 'react';
import { createClientComponentClient } from '@supabase/auth-helpers-nextjs';
import { ChevronLeft, Users, Calendar, GlassWater, Plus, Trash2, Loader2, Sparkles, ChevronRight, Play, Square } from 'lucide-react';
import Link from 'next/link';
import { deleteSession } from '@/services/delete-session';
import { useSession } from '@/context/SessionContext';
import { useParams, useRouter } from 'next/navigation';
import { useI18n } from '@/i18n/I18nContext';
@@ -48,6 +49,7 @@ export default function SessionDetailPage() {
const [isLoading, setIsLoading] = useState(true);
const { activeSession, setActiveSession } = useSession();
const [isAddingParticipant, setIsAddingParticipant] = useState(false);
const [isDeleting, setIsDeleting] = useState(false);
useEffect(() => {
fetchSessionData();
@@ -131,6 +133,23 @@ export default function SessionDetailPage() {
}
};
const handleDeleteSession = async () => {
if (!confirm('Möchtest du diese Session wirklich löschen? Alle Verknüpfungen gehen verloren.')) return;
setIsDeleting(true);
const result = await deleteSession(id as string);
if (result.success) {
if (activeSession?.id === id) {
setActiveSession(null);
}
router.push('/');
} else {
alert(result.error);
setIsDeleting(false);
}
};
if (isLoading) {
return (
<div className="min-h-screen flex items-center justify-center bg-zinc-50 dark:bg-black">
@@ -206,6 +225,15 @@ export default function SessionDetailPage() {
Session Stoppen
</button>
)}
<button
onClick={handleDeleteSession}
disabled={isDeleting}
title="Session löschen"
className="p-3 bg-red-50 dark:bg-red-900/10 text-red-600 dark:text-red-400 rounded-2xl hover:bg-red-600 hover:text-white dark:hover:bg-red-600 dark:hover:text-white transition-all border border-red-100 dark:border-red-900/20 disabled:opacity-50"
>
{isDeleting ? <Loader2 size={20} className="animate-spin" /> : <Trash2 size={20} />}
</button>
</div>
</div>
</header>

39
src/components/SessionList.tsx
View File

@@ -2,8 +2,9 @@
import React, { useState, useEffect } from 'react';
import { createClientComponentClient } from '@supabase/auth-helpers-nextjs';
import { Calendar, Plus, GlassWater, Loader2, ChevronRight, Users, Check } from 'lucide-react';
import { Calendar, Plus, GlassWater, Loader2, ChevronRight, Users, Check, Trash2 } from 'lucide-react';
import Link from 'next/link';
import { deleteSession } from '@/services/delete-session';
import { useI18n } from '@/i18n/I18nContext';
import { useSession } from '@/context/SessionContext';
@@ -21,6 +22,7 @@ export default function SessionList() {
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 { activeSession, setActiveSession } = useSession();
@@ -92,6 +94,26 @@ export default function SessionList() {
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">
<h3 className="text-xl font-bold mb-6 flex items-center gap-2 text-zinc-800 dark:text-zinc-100 italic">
@@ -172,6 +194,21 @@ export default function SessionList() {
</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>
))

45
src/components/TastingList.tsx
View File

@@ -24,13 +24,15 @@ interface Tasting {
id: string;
name: string;
};
user_id: string;
}
interface TastingListProps {
initialTastings: Tasting[];
currentUserId?: string;
}
export default function TastingList({ initialTastings }: TastingListProps) {
export default function TastingList({ initialTastings, currentUserId }: TastingListProps) {
const [sortBy, setSortBy] = useState<'date-desc' | 'date-asc' | 'rating-desc' | 'rating-asc'>('date-desc');
const [isDeleting, setIsDeleting] = useState<string | null>(null);
@@ -100,8 +102,8 @@ export default function TastingList({ initialTastings }: TastingListProps) {
key={note.id}
className="bg-white dark:bg-zinc-900 p-6 rounded-3xl border border-zinc-200 dark:border-zinc-800 shadow-sm space-y-4 hover:border-amber-500/30 transition-all hover:shadow-md group"
>
<div className="flex justify-between items-center">
<div className="flex items-center gap-3">
<div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
<div className="flex flex-wrap items-center gap-2 sm:gap-3">
<div className="bg-amber-100 dark:bg-amber-900/30 text-amber-700 dark:text-amber-400 px-3 py-1.5 rounded-2xl text-sm font-black ring-1 ring-amber-500/20 flex items-center gap-1.5">
<Star size={14} fill="currentColor" className="text-amber-500" />
{note.rating}/100
@@ -113,38 +115,41 @@ export default function TastingList({ initialTastings }: TastingListProps) {
{note.is_sample ? 'Sample' : 'Bottle'}
</span>
<div className="text-[10px] text-zinc-500 font-bold bg-zinc-100 dark:bg-zinc-800 px-2 py-1 rounded-lg flex items-center gap-1">
<Clock size={10} />
{new Date(note.created_at).toLocaleTimeString('de-DE', { hour: '2-digit', minute: '2-digit' })}
</div>
{note.tasting_sessions && (
<Link
href={`/sessions/${note.tasting_sessions.id}`}
className="text-[10px] text-zinc-500 font-bold bg-amber-50 dark:bg-amber-900/20 px-2 py-1 rounded-lg flex items-center gap-1 border border-amber-200/50 dark:border-amber-800/50 transition-all hover:bg-amber-100 dark:hover:bg-amber-900/40"
className="text-[10px] text-zinc-500 font-bold bg-amber-50 dark:bg-amber-900/20 px-2 py-1 rounded-lg flex items-center gap-1 border border-amber-200/50 dark:border-amber-800/50 transition-all hover:bg-amber-100 dark:hover:bg-amber-900/40 truncate max-w-[120px] sm:max-w-none"
>
<GlassWater size={10} className="text-amber-600" />
{note.tasting_sessions.name}
</Link>
)}
</div>
<div className="flex items-center gap-4">
<div className="flex items-center justify-between w-full sm:w-auto gap-4">
<div className="text-[10px] text-zinc-400 font-black tracking-widest uppercase flex items-center gap-1">
<Calendar size={12} />
{new Date(note.created_at).toLocaleDateString('de-DE')}
</div>
<button
onClick={() => handleDelete(note.id, note.bottle_id)}
disabled={!!isDeleting}
className="px-3 py-1.5 text-zinc-400 hover:text-red-600 hover:bg-red-50 dark:hover:bg-red-900/20 rounded-xl transition-all disabled:opacity-50 flex items-center gap-2 border border-transparent hover:border-red-200 dark:hover:border-red-900/30 font-black text-[9px] uppercase tracking-widest"
title="Tasting löschen"
>
{isDeleting === note.id ? (
<Loader2 size={14} className="animate-spin" />
) : (
<>
<Trash2 size={14} />
<span className="opacity-0 group-hover:opacity-100 transition-opacity">Löschen</span>
</>
)}
</button>
{(!currentUserId || note.user_id === currentUserId) && (
<button
onClick={() => handleDelete(note.id, note.bottle_id)}
disabled={!!isDeleting}
className="px-3 py-1.5 text-red-600 dark:text-red-400 bg-red-50 dark:bg-red-900/20 rounded-xl transition-all disabled:opacity-50 flex items-center gap-2 border border-red-100 dark:border-red-900/30 font-black text-[10px] uppercase tracking-widest shadow-sm hover:bg-red-600 hover:text-white dark:hover:bg-red-600 dark:hover:text-white"
title="Tasting löschen"
>
{isDeleting === note.id ? (
<Loader2 size={14} className="animate-spin" />
) : (
<>
<Trash2 size={14} fill="currentColor" />
<span>Löschen</span>
</>
)}
</button>
)}
</div>
</div>

5
src/middleware.ts
View File

@@ -16,10 +16,11 @@ export async function middleware(req: NextRequest) {
const { data: { session } } = await supabase.auth.getSession();
if (!isStatic) {
console.log(`[Middleware] Path: ${url.pathname}, Session: ${session ? 'Active' : 'Missing'}, User: ${session?.user?.id || 'N/A'}`);
const status = session ? `User:${session.user.id.slice(0, 8)}` : 'No Session';
console.log(`[MW] ${req.method} ${url.pathname} | ${status}`);
}
} catch (e) {
console.error('Middleware session refresh failed:', e);
console.error('[MW] Auth Error:', e);
}
}

35
src/services/delete-session.ts Normal file
View File

@@ -0,0 +1,35 @@
'use server';
import { createServerActionClient } from '@supabase/auth-helpers-nextjs';
import { cookies } from 'next/headers';
import { revalidatePath } from 'next/cache';
export async function deleteSession(sessionId: string) {
const supabase = createServerActionClient({ cookies });
try {
const { data: { session } } = await supabase.auth.getSession();
if (!session) {
throw new Error('Nicht autorisiert.');
}
const { error: deleteError } = await supabase
.from('tasting_sessions')
.delete()
.eq('id', sessionId)
.eq('user_id', session.user.id);
if (deleteError) throw deleteError;
revalidatePath('/');
revalidatePath(`/sessions/${sessionId}`);
return { success: true };
} catch (error) {
console.error('Delete Session Error:', error);
return {
success: false,
error: error instanceof Error ? error.message : 'Fehler beim Löschen der Session.',
};
}
}