mirror of
https://github.com/pacnpal/thrilltrack-explorer.git
synced 2025-12-23 05:51:23 -05:00
Refactor: Make photo upload reusable
This commit is contained in:
gpt-engineer-app[bot]
196
src/components/upload/EntityPhotoGallery.tsx
Normal file
196
src/components/upload/EntityPhotoGallery.tsx
Normal file
@@ -0,0 +1,196 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
import { Camera, Upload, LogIn } from 'lucide-react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Card, CardContent } from '@/components/ui/card';
|
||||
import { useAuth } from '@/hooks/useAuth';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { UppyPhotoSubmissionUpload } from '@/components/upload/UppyPhotoSubmissionUpload';
|
||||
import { supabase } from '@/integrations/supabase/client';
|
||||
import { EntityPhotoGalleryProps } from '@/types/submissions';
|
||||
|
||||
interface Photo {
|
||||
id: string;
|
||||
url: string;
|
||||
caption?: string;
|
||||
title?: string;
|
||||
user_id: string;
|
||||
created_at: string;
|
||||
}
|
||||
|
||||
export function EntityPhotoGallery({
|
||||
entityId,
|
||||
entityType,
|
||||
entityName,
|
||||
parentId
|
||||
}: EntityPhotoGalleryProps) {
|
||||
const { user } = useAuth();
|
||||
const navigate = useNavigate();
|
||||
const [photos, setPhotos] = useState<Photo[]>([]);
|
||||
const [showUpload, setShowUpload] = useState(false);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
fetchPhotos();
|
||||
}, [entityId, entityType]);
|
||||
|
||||
const fetchPhotos = async () => {
|
||||
try {
|
||||
// Fetch approved photo submissions for this entity
|
||||
// Support both new (entity_id) and legacy (park_id/ride_id) formats
|
||||
const { data: submissions, error } = await supabase
|
||||
.from('content_submissions')
|
||||
.select('id, content, created_at, user_id')
|
||||
.eq('status', 'approved')
|
||||
.eq('submission_type', 'photo')
|
||||
.or(`content->entity_id.eq.${entityId},content->park_id.eq.${entityId},content->ride_id.eq.${entityId},content->company_id.eq.${entityId}`)
|
||||
.order('created_at', { ascending: false })
|
||||
.limit(50);
|
||||
|
||||
if (error) throw error;
|
||||
|
||||
// Extract photos from submissions
|
||||
const extractedPhotos: Photo[] = [];
|
||||
submissions?.forEach((submission) => {
|
||||
const content = submission.content as any;
|
||||
if (content.photos && Array.isArray(content.photos)) {
|
||||
content.photos.forEach((photo: any) => {
|
||||
extractedPhotos.push({
|
||||
id: `${submission.id}-${photo.order}`,
|
||||
url: photo.url,
|
||||
caption: photo.caption,
|
||||
title: photo.title,
|
||||
user_id: submission.user_id,
|
||||
created_at: submission.created_at,
|
||||
});
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
setPhotos(extractedPhotos);
|
||||
} catch (error) {
|
||||
console.error('Error fetching photos:', error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleUploadClick = () => {
|
||||
if (!user) {
|
||||
navigate('/auth');
|
||||
return;
|
||||
}
|
||||
setShowUpload(true);
|
||||
};
|
||||
|
||||
const handleSubmissionComplete = () => {
|
||||
setShowUpload(false);
|
||||
fetchPhotos(); // Refresh photos after submission
|
||||
};
|
||||
|
||||
if (showUpload) {
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<h3 className="text-lg font-semibold">Upload Photos for {entityName}</h3>
|
||||
<Button variant="ghost" onClick={() => setShowUpload(false)}>
|
||||
Back to Gallery
|
||||
</Button>
|
||||
</div>
|
||||
<UppyPhotoSubmissionUpload
|
||||
entityId={entityId}
|
||||
entityType={entityType}
|
||||
parentId={parentId}
|
||||
onSubmissionComplete={handleSubmissionComplete}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="flex items-center justify-center py-12">
|
||||
<div className="animate-pulse flex items-center gap-3">
|
||||
<Camera className="w-8 h-8 text-muted-foreground" />
|
||||
<span className="text-muted-foreground">Loading photos...</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{/* Upload Button */}
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold">Photo Gallery</h3>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Share your photos of {entityName}
|
||||
</p>
|
||||
</div>
|
||||
<Button onClick={handleUploadClick} className="gap-2">
|
||||
{user ? (
|
||||
<>
|
||||
<Upload className="w-4 h-4" />
|
||||
Upload Photos
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<LogIn className="w-4 h-4" />
|
||||
Sign in to Upload
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Photo Grid */}
|
||||
{photos.length > 0 ? (
|
||||
<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
|
||||
{photos.map((photo) => (
|
||||
<Card key={photo.id} className="overflow-hidden">
|
||||
<CardContent className="p-0">
|
||||
<img
|
||||
src={photo.url}
|
||||
alt={photo.title || photo.caption || `${entityName} photo`}
|
||||
className="w-full h-48 object-cover hover:scale-105 transition-transform cursor-pointer"
|
||||
/>
|
||||
{(photo.title || photo.caption) && (
|
||||
<div className="p-3">
|
||||
{photo.title && (
|
||||
<h4 className="font-medium text-sm truncate">{photo.title}</h4>
|
||||
)}
|
||||
{photo.caption && (
|
||||
<p className="text-xs text-muted-foreground truncate mt-1">
|
||||
{photo.caption}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<div className="text-center py-12">
|
||||
<Camera className="w-16 h-16 text-muted-foreground mx-auto mb-4" />
|
||||
<h3 className="text-xl font-semibold mb-2">No Photos Yet</h3>
|
||||
<p className="text-muted-foreground mb-4">
|
||||
Be the first to share photos of {entityName}!
|
||||
</p>
|
||||
<Button onClick={handleUploadClick} className="gap-2">
|
||||
{user ? (
|
||||
<>
|
||||
<Upload className="w-4 h-4" />
|
||||
Upload First Photo
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<LogIn className="w-4 h-4" />
|
||||
Sign in to Upload
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user