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

fix: resolve collection fetch race condition and improve tasting deletion UI

Browse Source
This commit is contained in:
robin
2025-12-18 11:17:22 +01:00
parent d07af05b66
commit e6974cd060
2 changed files with 32 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
src/app/page.tsx
View File

@@ -12,17 +12,22 @@ export default function Home() {
const supabase = createClientComponentClient();
const [bottles, setBottles] = useState<any[]>([]);
const [isLoading, setIsLoading] = useState(true);
const [user, setUser] = useState<any>(null); // Added user state
const [user, setUser] = useState<any>(null);
const [fetchError, setFetchError] = useState<string | null>(null);
useEffect(() => {
// Check session
const checkUser = async () => {
try {
const { data: { session }, error } = await supabase.auth.getSession();
console.log('Initial session check:', session ? 'User logged in' : 'No session');
if (error) {
console.error('Session retrieval error:', error);
}
setUser(session?.user ?? null);
if (session?.user) {
fetchCollection();
}
} catch (err) {
console.error('Fatal error checking user:', err);
setUser(null);
@@ -34,7 +39,8 @@ export default function Home() {
checkUser();
// Listen for auth changes
const { data: { subscription } } = supabase.auth.onAuthStateChange((_event, session) => {
const { data: { subscription } } = supabase.auth.onAuthStateChange((event, session) => {
console.log('Auth state change:', event, session?.user ? 'User logged in' : 'No user');
setUser(session?.user ?? null);
if (session?.user) {
fetchCollection();
@@ -60,7 +66,12 @@ export default function Home() {
`)
.order('created_at', { ascending: false });
if (error) throw error;
if (error) {
console.error('Supabase fetch error:', error);
throw error;
}
console.log(`Fetched ${data?.length || 0} bottles from Supabase`);
// Process data to get the absolute latest tasting date for each bottle
const processedBottles = (data || []).map(bottle => {
@@ -79,7 +90,8 @@ export default function Home() {
setBottles(processedBottles);
} catch (err) {
console.error('Error fetching collection:', err);
console.error('Detailed fetch error:', err);
setFetchError('Die Sammlung konnte nicht geladen werden. Bitte versuche es später erneut.');
} finally {
setIsLoading(false);
}
@@ -140,6 +152,17 @@ export default function Home() {
<div className="flex justify-center py-12">
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-amber-600"></div>
</div>
) : fetchError ? (
<div className="p-8 bg-red-50 dark:bg-red-900/10 border border-red-200 dark:border-red-900/30 rounded-3xl text-center">
<p className="text-red-600 dark:text-red-400 font-bold mb-2">Hoppla!</p>
<p className="text-red-500/80 text-sm italic">{fetchError}</p>
<button
onClick={fetchCollection}
className="mt-4 px-6 py-2 bg-zinc-900 dark:bg-zinc-100 text-white dark:text-zinc-900 rounded-xl text-xs font-bold uppercase tracking-widest"
>
Erneut versuchen
</button>
</div>
) : (
<BottleGrid bottles={bottles} />
)}

5
src/components/TastingList.tsx
View File

@@ -120,13 +120,16 @@ export default function TastingList({ initialTastings }: TastingListProps) {
<button
onClick={() => handleDelete(note.id, note.bottle_id)}
disabled={!!isDeleting}
className="p-2 text-zinc-400 hover:text-red-500 hover:bg-red-50 dark:hover:bg-red-900/20 rounded-xl transition-all disabled:opacity-50"
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>
</div>