fixed tenants and eventpurchaseresource, changed lightbox in gallery

resources/js/guest/pages/PhotoLightbox.tsx

@@ -1,65 +1,133 @@
-import React from 'react';
-import { useLocation, useNavigate, useParams } from 'react-router-dom';
+import React, { useState, useEffect } from 'react';
+import { useParams, useLocation, useNavigate } from 'react-router-dom';
 import { Dialog, DialogContent } from '@/components/ui/dialog';
 import { Button } from '@/components/ui/button';
-import { Heart } from 'lucide-react';
+import { Heart, ChevronLeft, ChevronRight, X } from 'lucide-react';
 import { likePhoto } from '../services/photosApi';
 
-type Photo = { 
-  id: number; 
-  file_path?: string; 
-  thumbnail_path?: string; 
-  likes_count?: number; 
-  created_at?: string; 
-  task_id?: number 
+type Photo = {
+  id: number;
+  file_path?: string;
+  thumbnail_path?: string;
+  likes_count?: number;
+  created_at?: string;
+  task_id?: number;
+  task_title?: string;
 };
 
 type Task = { id: number; title: string };
 
-export default function PhotoLightbox() {
-  const navigate = useNavigate();
-  const location = useLocation();
-  const { photoId } = useParams();
-  
-  const [photo, setPhoto] = React.useState<Photo | null>(null);
-  const [task, setTask] = React.useState<Task | null>(null);
-  const [taskLoading, setTaskLoading] = React.useState(false);
-  const [likes, setLikes] = React.useState<number | null>(null);
-  const [liked, setLiked] = React.useState(false);
+interface Props {
+  photos?: Photo[];
+  currentIndex?: number;
+  onClose?: () => void;
+  onIndexChange?: (index: number) => void;
+  slug?: string;
+}
 
-  // Extract event slug from URL path
-  const getEventSlug = () => {
-    const path = window.location.pathname;
-    const match = path.match(/^\/e\/([^\/]+)\/photo\/[^\/]+$/);
-    return match ? match[1] : null;
+export default function PhotoLightbox({ photos, currentIndex, onClose, onIndexChange, slug }: Props) {
+  const params = useParams();
+  const location = useLocation();
+  const navigate = useNavigate();
+  const photoId = params.photoId;
+  const eventSlug = params.slug || slug;
+
+  const [standalonePhoto, setStandalonePhoto] = useState<Photo | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [task, setTask] = useState<Task | null>(null);
+  const [taskLoading, setTaskLoading] = useState(false);
+  const [likes, setLikes] = useState<number>(0);
+  const [liked, setLiked] = useState(false);
+
+  // Determine mode and photo
+  const isStandalone = !photos || photos.length === 0;
+  const currentPhotos = isStandalone ? (standalonePhoto ? [standalonePhoto] : []) : photos || [];
+  const currentIndexVal = isStandalone ? 0 : (currentIndex || 0);
+  const photo = currentPhotos[currentIndexVal];
+
+  // Fallback onClose for standalone
+  const handleClose = onClose || (() => navigate(-1));
+
+  // Fetch single photo for standalone mode
+  useEffect(() => {
+    if (isStandalone && photoId && !standalonePhoto && eventSlug) {
+      const fetchPhoto = async () => {
+        setLoading(true);
+        setError(null);
+        try {
+          const res = await fetch(`/api/v1/photos/${photoId}`);
+          if (res.ok) {
+            const fetchedPhoto: Photo = await res.json();
+            setStandalonePhoto(fetchedPhoto);
+            // Check state for initial photo
+            if (location.state?.photo) {
+              setStandalonePhoto(location.state.photo);
+            }
+          } else {
+            setError('Foto nicht gefunden');
+          }
+        } catch (err) {
+          setError('Fehler beim Laden des Fotos');
+        } finally {
+          setLoading(false);
+        }
+      };
+
+      fetchPhoto();
+    } else if (!isStandalone) {
+      setLoading(false);
+    }
+  }, [isStandalone, photoId, eventSlug, standalonePhoto, location.state]);
+
+  // Update likes when photo changes
+  React.useEffect(() => {
+    if (photo) {
+      setLikes(photo.likes_count ?? 0);
+      // Check if liked from localStorage
+      try {
+        const raw = localStorage.getItem('liked-photo-ids');
+        const likedIds = raw ? JSON.parse(raw) : [];
+        setLiked(likedIds.includes(photo.id));
+      } catch {
+        setLiked(false);
+      }
+    }
+  }, [photo]);
+
+  const touchRef = React.useRef<HTMLDivElement>(null);
+  const startX = React.useRef(0);
+  const currentX = React.useRef(0);
+
+  const handleTouchStart = (e: React.TouchEvent) => {
+    startX.current = e.touches[0].clientX;
   };
 
-  const slug = getEventSlug();
+  const handleTouchMove = (e: React.TouchEvent) => {
+    if (!touchRef.current) return;
+    currentX.current = e.touches[0].clientX;
+    const deltaX = currentX.current - startX.current;
+    touchRef.current.style.transform = `translateX(${deltaX}px)`;
+  };
 
-  // Load photo if not passed via state
-  React.useEffect(() => {
-    const statePhoto = (location.state as any)?.photo;
-    if (statePhoto) {
-      setPhoto(statePhoto);
-      setLikes(statePhoto.likes_count ?? 0);
-      return;
-    }
+  const handleTouchEnd = () => {
+    if (!touchRef.current) return;
+    const deltaX = currentX.current - startX.current;
+    const threshold = 50; // pixels
 
-    if (!photoId) return;
+    touchRef.current.style.transform = 'translateX(0)';
 
-    (async () => {
-      try {
-        const res = await fetch(`/api/v1/photos/${photoId}`);
-        if (res.ok) {
-          const photoData = await res.json();
-          setPhoto(photoData);
-          setLikes(photoData.likes_count ?? 0);
-        }
-      } catch (error) {
-        console.error('Failed to load photo:', error);
+    if (Math.abs(deltaX) > threshold) {
+      if (deltaX > 0 && currentIndexVal > 0) {
+        // Swipe right - previous
+        onIndexChange?.(currentIndexVal - 1);
+      } else if (deltaX < 0 && currentIndexVal < currentPhotos.length - 1) {
+        // Swipe left - next
+        onIndexChange?.(currentIndexVal + 1);
       }
-    })();
-  }, [photoId, location.state]);
+    }
+  };
+
 
   // Load task info if photo has task_id and slug is available
   React.useEffect(() => {
@@ -79,27 +147,27 @@ export default function PhotoLightbox() {
           const tasks = await res.json();
           const foundTask = tasks.find((t: any) => t.id === taskId);
           if (foundTask) {
-            setTask({ 
-              id: foundTask.id, 
-              title: foundTask.title || `Aufgabe ${taskId}` 
+            setTask({
+              id: foundTask.id,
+              title: foundTask.title || `Aufgabe ${taskId}`
             });
           } else {
-            setTask({ 
-              id: taskId, 
-              title: `Unbekannte Aufgabe ${taskId}` 
+            setTask({
+              id: taskId,
+              title: `Unbekannte Aufgabe ${taskId}`
             });
           }
         } else {
-          setTask({ 
-            id: taskId, 
-            title: `Unbekannte Aufgabe ${taskId}` 
+          setTask({
+            id: taskId,
+            title: `Unbekannte Aufgabe ${taskId}`
           });
         }
       } catch (error) {
         console.error('Failed to load task:', error);
-        setTask({ 
-          id: taskId, 
-          title: `Unbekannte Aufgabe ${taskId}` 
+        setTask({
+          id: taskId,
+          title: `Unbekannte Aufgabe ${taskId}`
         });
       } finally {
         setTaskLoading(false);
@@ -113,6 +181,14 @@ export default function PhotoLightbox() {
     try {
       const count = await likePhoto(photo.id);
       setLikes(count);
+      // Update localStorage
+      try {
+        const raw = localStorage.getItem('liked-photo-ids');
+        const arr: number[] = raw ? JSON.parse(raw) : [];
+        if (!arr.includes(photo.id)) {
+          localStorage.setItem('liked-photo-ids', JSON.stringify([...arr, photo.id]));
+        }
+      } catch {}
     } catch (error) {
       console.error('Like failed:', error);
       setLiked(false);
@@ -120,37 +196,60 @@ export default function PhotoLightbox() {
   }
 
   function onOpenChange(open: boolean) {
-    if (!open) navigate(-1);
-  }
-
-  if (!photo && !photoId) {
-    return null;
+    if (!open) handleClose();
   }
 
   return (
     <Dialog open={true} onOpenChange={onOpenChange}>
-      <DialogContent className="max-w-5xl border-0 bg-black p-0 text-white">
+      <DialogContent hideClose className="max-w-5xl border-0 bg-black p-0 text-white">
         {/* Header with controls */}
         <div className="flex items-center justify-between p-2">
           <div className="flex items-center gap-2">
-            <Button 
-              variant="secondary" 
-              size="sm" 
-              onClick={onLike} 
-              disabled={liked || !photo}
+            <Button
+              variant="secondary"
+              size="sm"
+              onClick={onLike}
+              disabled={liked}
             >
-              <Heart className={`mr-1 h-4 w-4 ${liked ? 'fill-red-400 text-red-400' : ''}`} /> 
-              {likes ?? 0}
+              <Heart className={`mr-1 h-4 w-4 ${liked ? 'fill-red-400 text-red-400' : ''}`} />
+              {likes}
             </Button>
           </div>
-          <Button variant="secondary" size="sm" onClick={() => navigate(-1)}>
-            Schließen
-          </Button>
+          <div className="flex items-center gap-1">
+            {currentIndexVal > 0 && (
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={() => onIndexChange?.(currentIndexVal - 1)}
+                className="h-8 w-8 p-0"
+              >
+                <ChevronLeft className="h-4 w-4" />
+              </Button>
+            )}
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={onClose}
+              className="h-8 w-8 p-0"
+            >
+              <X className="h-4 w-4" />
+            </Button>
+            {currentIndexVal < currentPhotos.length - 1 && (
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={() => onIndexChange?.(currentIndexVal + 1)}
+                className="h-8 w-8 p-0"
+              >
+                <ChevronRight className="h-4 w-4" />
+              </Button>
+            )}
+          </div>
         </div>
 
         {/* Task Info Overlay */}
         {task && (
-          <div className="absolute top-4 left-4 right-4 z-20 bg-black/60 backdrop-blur-sm rounded-xl p-3 border border-white/20 max-w-md">
+          <div className="absolute bottom-4 left-4 right-4 z-20 bg-black/60 backdrop-blur-sm rounded-xl p-3 border border-white/20 max-w-md">
             <div className="text-sm">
               <div className="font-semibold mb-1 text-white">Task: {task.title}</div>
               {taskLoading && (
@@ -161,23 +260,22 @@ export default function PhotoLightbox() {
         )}
 
         {/* Photo Display */}
-        <div className="flex items-center justify-center min-h-[60vh] p-4">
-          {photo ? (
-            <img 
-              src={photo.file_path || photo.thumbnail_path} 
-              alt="Foto" 
-              className="max-h-[80vh] max-w-full object-contain" 
-              onError={(e) => {
-                console.error('Image load error:', e);
-                (e.target as HTMLImageElement).style.display = 'none';
-              }}
-            />
-          ) : (
-            <div className="p-6 text-center">
-              <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-white mx-auto mb-2"></div>
-              <div>Lade Foto...</div>
-            </div>
-          )}
+        <div
+          ref={touchRef}
+          className="flex items-center justify-center min-h-[60vh] p-4 relative overflow-hidden"
+          onTouchStart={handleTouchStart}
+          onTouchMove={handleTouchMove}
+          onTouchEnd={handleTouchEnd}
+        >
+          <img
+            src={photo?.file_path || photo?.thumbnail_path}
+            alt={`Foto ${photo?.id || ''}${photo?.task_title ? ` - ${photo.task_title}` : ''}`}
+            className="max-h-[80vh] max-w-full object-contain transition-transform duration-200"
+            onError={(e) => {
+              console.error('Image load error:', e);
+              (e.target as HTMLImageElement).style.display = 'none';
+            }}
+          />
         </div>
 
         {/* Loading state for task */}