pacnpal/thrilltrack-explorer
1
0
Fork 0
mirror of https://github.com/pacnpal/thrilltrack-explorer.git synced 2025-12-24 04:51:13 -05:00
Code Issues Packages Projects Releases Wiki Activity

Refactor: Make photo upload reusable

Browse Source
This commit is contained in:
gpt-engineer-app[bot]
2025-09-29 19:34:54 +00:00
parent 4ea5da9f10
commit 63fb0a61aa
6 changed files with 308 additions and 178 deletions
Download Patch File Download Diff File Expand all files Collapse all files

171
src/components/rides/RidePhotoGallery.tsx
View File

@@ -1,166 +1,5 @@
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';
interface RidePhoto {
id: string;
url: string;
caption?: string;
title?: string;
user_id: string;
created_at: string;
}
interface RidePhotoGalleryProps {
rideId: string;
rideName: string;
parkId?: string;
}
export function RidePhotoGallery({ rideId, rideName, parkId }: RidePhotoGalleryProps) {
const { user } = useAuth();
const navigate = useNavigate();
const [photos, setPhotos] = useState<RidePhoto[]>([]);
const [showUpload, setShowUpload] = useState(false);
const [loading, setLoading] = useState(true);
useEffect(() => {
fetchPhotos();
}, [rideId]);
const fetchPhotos = async () => {
try {
// For now, we'll show a placeholder since approved photos would come from content_submissions
// In a real implementation, you'd fetch approved photo submissions
setPhotos([]); // Placeholder - no photos yet
} 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 {rideName}</h3>
<Button variant="ghost" onClick={() => setShowUpload(false)}>
Back to Gallery
</Button>
</div>
<UppyPhotoSubmissionUpload
rideId={rideId}
parkId={parkId}
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 {rideName}
</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 || 'Ride 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 {rideName}!
</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>
);
}
/**
* @deprecated Use EntityPhotoGallery directly or import from RidePhotoGalleryWrapper
* This file is kept for backwards compatibility
*/
export { RidePhotoGallery } from './RidePhotoGalleryWrapper';

22
src/components/rides/RidePhotoGalleryWrapper.tsx Normal file
View File

@@ -0,0 +1,22 @@
import { EntityPhotoGallery } from '@/components/upload/EntityPhotoGallery';
interface RidePhotoGalleryProps {
rideId: string;
rideName: string;
parkId?: string;
}
/**
* Backwards-compatible wrapper for RidePhotoGallery
* Uses the generic EntityPhotoGallery component internally
*/
export function RidePhotoGallery({ rideId, rideName, parkId }: RidePhotoGalleryProps) {
return (
<EntityPhotoGallery
entityId={rideId}
entityType="ride"
entityName={rideName}
parentId={parkId}
/>
);
}