mirror of
https://github.com/pacnpal/thrilltrack-explorer.git
synced 2025-12-23 06:51:13 -05:00
410 lines
14 KiB
TypeScript
410 lines
14 KiB
TypeScript
import React, { useState } from 'react';
|
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
|
|
import { Input } from '@/components/ui/input';
|
|
import { Label } from '@/components/ui/label';
|
|
import { Textarea } from '@/components/ui/textarea';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Badge } from '@/components/ui/badge';
|
|
import { Separator } from '@/components/ui/separator';
|
|
import { Progress } from '@/components/ui/progress';
|
|
import { UppyPhotoUpload } from './UppyPhotoUpload';
|
|
import { PhotoCaptionEditor, PhotoWithCaption } from './PhotoCaptionEditor';
|
|
import { supabase } from '@/integrations/supabase/client';
|
|
import { useAuth } from '@/hooks/useAuth';
|
|
import { useToast } from '@/hooks/use-toast';
|
|
import { Camera, CheckCircle, AlertCircle, Info } from 'lucide-react';
|
|
import { UppyPhotoSubmissionUploadProps } from '@/types/submissions';
|
|
|
|
export function UppyPhotoSubmissionUpload({
|
|
onSubmissionComplete,
|
|
entityId,
|
|
entityType,
|
|
parentId,
|
|
// Legacy props (deprecated)
|
|
parkId,
|
|
rideId,
|
|
}: UppyPhotoSubmissionUploadProps) {
|
|
// Support legacy props
|
|
const finalEntityId = entityId || rideId || parkId || '';
|
|
const finalEntityType = entityType || (rideId ? 'ride' : parkId ? 'park' : 'ride');
|
|
const finalParentId = parentId || (rideId ? parkId : undefined);
|
|
const [title, setTitle] = useState('');
|
|
const [photos, setPhotos] = useState<PhotoWithCaption[]>([]);
|
|
const [isSubmitting, setIsSubmitting] = useState(false);
|
|
const [uploadProgress, setUploadProgress] = useState<{ current: number; total: number } | null>(null);
|
|
const { user } = useAuth();
|
|
const { toast } = useToast();
|
|
|
|
const handleFilesSelected = (files: File[]) => {
|
|
// Convert files to photo objects with object URLs for preview
|
|
const newPhotos: PhotoWithCaption[] = files.map((file, index) => ({
|
|
url: URL.createObjectURL(file), // Object URL for preview
|
|
file, // Store the file for later upload
|
|
caption: '',
|
|
order: photos.length + index,
|
|
uploadStatus: 'pending' as const,
|
|
}));
|
|
setPhotos(prev => [...prev, ...newPhotos]);
|
|
};
|
|
|
|
const handlePhotosChange = (updatedPhotos: PhotoWithCaption[]) => {
|
|
setPhotos(updatedPhotos);
|
|
};
|
|
|
|
const handleRemovePhoto = (index: number) => {
|
|
setPhotos(prev => {
|
|
const photo = prev[index];
|
|
// Revoke object URL if it exists
|
|
if (photo.file && photo.url.startsWith('blob:')) {
|
|
URL.revokeObjectURL(photo.url);
|
|
}
|
|
return prev.filter((_, i) => i !== index);
|
|
});
|
|
};
|
|
|
|
const handleSubmit = async () => {
|
|
if (!user) {
|
|
toast({
|
|
variant: 'destructive',
|
|
title: 'Authentication Required',
|
|
description: 'Please sign in to submit photos.',
|
|
});
|
|
return;
|
|
}
|
|
|
|
if (photos.length === 0) {
|
|
toast({
|
|
variant: 'destructive',
|
|
title: 'No Photos',
|
|
description: 'Please upload at least one photo before submitting.',
|
|
});
|
|
return;
|
|
}
|
|
|
|
|
|
setIsSubmitting(true);
|
|
|
|
try {
|
|
// Upload all photos that haven't been uploaded yet
|
|
const uploadedPhotos: PhotoWithCaption[] = [];
|
|
const photosToUpload = photos.filter(p => p.file);
|
|
|
|
if (photosToUpload.length > 0) {
|
|
setUploadProgress({ current: 0, total: photosToUpload.length });
|
|
|
|
for (let i = 0; i < photosToUpload.length; i++) {
|
|
const photo = photosToUpload[i];
|
|
setUploadProgress({ current: i + 1, total: photosToUpload.length });
|
|
|
|
// Update status
|
|
setPhotos(prev => prev.map(p =>
|
|
p === photo ? { ...p, uploadStatus: 'uploading' as const } : p
|
|
));
|
|
|
|
try {
|
|
// Get upload URL from edge function
|
|
const { data: uploadData, error: uploadError } = await supabase.functions.invoke('upload-image', {
|
|
body: { metadata: { requireSignedURLs: false }, variant: 'public' }
|
|
});
|
|
|
|
if (uploadError) throw uploadError;
|
|
|
|
const { uploadURL, id: cloudflareId } = uploadData;
|
|
|
|
// Upload file to Cloudflare
|
|
const formData = new FormData();
|
|
formData.append('file', photo.file);
|
|
|
|
const uploadResponse = await fetch(uploadURL, {
|
|
method: 'POST',
|
|
body: formData,
|
|
});
|
|
|
|
if (!uploadResponse.ok) {
|
|
throw new Error('Failed to upload to Cloudflare');
|
|
}
|
|
|
|
// Poll for processing completion
|
|
let attempts = 0;
|
|
const maxAttempts = 30;
|
|
let cloudflareUrl = '';
|
|
|
|
while (attempts < maxAttempts) {
|
|
const { data: { session } } = await supabase.auth.getSession();
|
|
const statusResponse = await fetch(
|
|
`https://ydvtmnrszybqnbcqbdcy.supabase.co/functions/v1/upload-image?id=${cloudflareId}`,
|
|
{
|
|
headers: {
|
|
'Authorization': `Bearer ${session?.access_token || ''}`,
|
|
'apikey': 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6InlkdnRtbnJzenlicW5iY3FiZGN5Iiwicm9sZSI6ImFub24iLCJpYXQiOjE3NTgzMjYzNTYsImV4cCI6MjA3MzkwMjM1Nn0.DM3oyapd_omP5ZzIlrT0H9qBsiQBxBRgw2tYuqgXKX4',
|
|
}
|
|
}
|
|
);
|
|
|
|
if (statusResponse.ok) {
|
|
const status = await statusResponse.json();
|
|
if (status.uploaded && status.urls) {
|
|
cloudflareUrl = status.urls.public;
|
|
break;
|
|
}
|
|
}
|
|
|
|
await new Promise(resolve => setTimeout(resolve, 1000));
|
|
attempts++;
|
|
}
|
|
|
|
if (!cloudflareUrl) {
|
|
throw new Error('Upload processing timeout');
|
|
}
|
|
|
|
// Revoke object URL
|
|
URL.revokeObjectURL(photo.url);
|
|
|
|
uploadedPhotos.push({
|
|
...photo,
|
|
url: cloudflareUrl,
|
|
uploadStatus: 'uploaded' as const,
|
|
});
|
|
|
|
// Update status
|
|
setPhotos(prev => prev.map(p =>
|
|
p === photo ? { ...p, url: cloudflareUrl, uploadStatus: 'uploaded' as const } : p
|
|
));
|
|
|
|
} catch (error) {
|
|
console.error('Upload error:', error);
|
|
setPhotos(prev => prev.map(p =>
|
|
p === photo ? { ...p, uploadStatus: 'failed' as const } : p
|
|
));
|
|
throw new Error(`Failed to upload ${photo.title || 'photo'}: ${error instanceof Error ? error.message : 'Unknown error'}`);
|
|
}
|
|
}
|
|
}
|
|
|
|
setUploadProgress(null);
|
|
|
|
// Submit to database with Cloudflare URLs
|
|
const submissionData = {
|
|
user_id: user.id,
|
|
submission_type: 'photo',
|
|
content: {
|
|
title: title.trim() || undefined,
|
|
photos: photos.map((photo, index) => ({
|
|
url: photo.uploadStatus === 'uploaded' ? photo.url : uploadedPhotos.find(p => p.order === photo.order)?.url || photo.url,
|
|
caption: photo.caption.trim(),
|
|
title: photo.title?.trim(),
|
|
date: photo.date?.toISOString(),
|
|
order: index,
|
|
// Include file metadata for moderation queue
|
|
filename: photo.file?.name,
|
|
size: photo.file?.size,
|
|
type: photo.file?.type,
|
|
})),
|
|
// NEW STRUCTURE: Generic entity references
|
|
context: finalEntityType,
|
|
entity_id: finalEntityId,
|
|
// Legacy structure for backwards compatibility
|
|
...(finalEntityType === 'ride' && { ride_id: finalEntityId }),
|
|
...(finalEntityType === 'park' && { park_id: finalEntityId }),
|
|
...(finalParentId && finalEntityType === 'ride' && { park_id: finalParentId }),
|
|
...(['manufacturer', 'operator', 'designer', 'property_owner'].includes(finalEntityType) && { company_id: finalEntityId }),
|
|
},
|
|
};
|
|
|
|
// Debug logging for verification
|
|
console.log('Photo Submission Data:', {
|
|
entity_id: finalEntityId,
|
|
context: finalEntityType,
|
|
parent_id: finalParentId,
|
|
photo_count: photos.length,
|
|
submission_data: submissionData
|
|
});
|
|
|
|
const { error } = await supabase
|
|
.from('content_submissions')
|
|
.insert(submissionData);
|
|
|
|
if (error) {
|
|
throw error;
|
|
}
|
|
|
|
toast({
|
|
title: 'Submission Successful',
|
|
description: 'Your photos have been submitted for review. Thank you for contributing!',
|
|
});
|
|
|
|
// Cleanup and reset form
|
|
photos.forEach(photo => {
|
|
if (photo.url.startsWith('blob:')) {
|
|
URL.revokeObjectURL(photo.url);
|
|
}
|
|
});
|
|
|
|
setTitle('');
|
|
setPhotos([]);
|
|
onSubmissionComplete?.();
|
|
} catch (error) {
|
|
console.error('Submission error:', error);
|
|
toast({
|
|
variant: 'destructive',
|
|
title: 'Submission Failed',
|
|
description: error instanceof Error ? error.message : 'There was an error submitting your photos. Please try again.',
|
|
});
|
|
} finally {
|
|
setIsSubmitting(false);
|
|
setUploadProgress(null);
|
|
}
|
|
};
|
|
|
|
// Cleanup on unmount
|
|
React.useEffect(() => {
|
|
return () => {
|
|
photos.forEach(photo => {
|
|
if (photo.url.startsWith('blob:')) {
|
|
URL.revokeObjectURL(photo.url);
|
|
}
|
|
});
|
|
};
|
|
}, []);
|
|
|
|
const metadata = {
|
|
submissionType: 'photo',
|
|
entityId: finalEntityId,
|
|
entityType: finalEntityType,
|
|
parentId: finalParentId,
|
|
// Legacy support
|
|
parkId: finalEntityType === 'park' ? finalEntityId : finalParentId,
|
|
rideId: finalEntityType === 'ride' ? finalEntityId : undefined,
|
|
userId: user?.id,
|
|
};
|
|
|
|
return (
|
|
<Card className="w-full max-w-2xl mx-auto shadow-lg border-accent/20 bg-accent/5">
|
|
<CardHeader className="text-center space-y-4">
|
|
<div className="mx-auto w-16 h-16 bg-accent/10 border-2 border-accent/30 rounded-full flex items-center justify-center">
|
|
<Camera className="w-8 h-8 text-accent" />
|
|
</div>
|
|
<div>
|
|
<CardTitle className="text-2xl text-accent">
|
|
Submit Photos
|
|
</CardTitle>
|
|
<CardDescription className="text-base mt-2">
|
|
Share your photos with the community. All submissions will be reviewed before being published.
|
|
</CardDescription>
|
|
</div>
|
|
</CardHeader>
|
|
|
|
<CardContent className="space-y-6">
|
|
<div className="bg-muted/50 rounded-lg p-4 border border-border">
|
|
<div className="flex items-start gap-3">
|
|
<Info className="w-5 h-5 text-accent mt-0.5 flex-shrink-0" />
|
|
<div className="space-y-2 text-sm">
|
|
<p className="font-medium">Submission Guidelines:</p>
|
|
<ul className="space-y-1 text-muted-foreground">
|
|
<li>• Photos should be clear and well-lit</li>
|
|
<li>• Maximum 10 images per submission</li>
|
|
<li>• Each image up to 25MB in size</li>
|
|
<li>• Review process takes 24-48 hours</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<Separator />
|
|
|
|
<div className="space-y-2">
|
|
<Label htmlFor="title" className="text-base font-medium">
|
|
Title <span className="text-muted-foreground">(optional)</span>
|
|
</Label>
|
|
<Input
|
|
id="title"
|
|
value={title}
|
|
onChange={(e) => setTitle(e.target.value)}
|
|
placeholder="Give your photos a descriptive title (optional)"
|
|
maxLength={100}
|
|
disabled={isSubmitting}
|
|
className="transition-all duration-200 focus:ring-2 focus:ring-primary/20"
|
|
/>
|
|
<p className="text-sm text-muted-foreground">
|
|
{title.length}/100 characters
|
|
</p>
|
|
</div>
|
|
|
|
<div className="space-y-3">
|
|
<div className="flex items-center justify-between">
|
|
<Label className="text-base font-medium">Photos *</Label>
|
|
{photos.length > 0 && (
|
|
<Badge variant="secondary" className="text-xs">
|
|
{photos.length} photo{photos.length !== 1 ? 's' : ''} selected
|
|
</Badge>
|
|
)}
|
|
</div>
|
|
<UppyPhotoUpload
|
|
onFilesSelected={handleFilesSelected}
|
|
deferUpload={true}
|
|
maxFiles={10}
|
|
maxSizeMB={25}
|
|
metadata={metadata}
|
|
variant="public"
|
|
showPreview={false}
|
|
size="default"
|
|
enableDragDrop={true}
|
|
disabled={isSubmitting}
|
|
/>
|
|
</div>
|
|
|
|
{photos.length > 0 && (
|
|
<>
|
|
<Separator />
|
|
<PhotoCaptionEditor
|
|
photos={photos}
|
|
onPhotosChange={handlePhotosChange}
|
|
onRemovePhoto={handleRemovePhoto}
|
|
maxCaptionLength={200}
|
|
/>
|
|
</>
|
|
)}
|
|
|
|
<Separator />
|
|
|
|
<div className="space-y-4">
|
|
{uploadProgress && (
|
|
<div className="space-y-2">
|
|
<div className="flex items-center justify-between text-sm">
|
|
<span className="font-medium">Uploading photos...</span>
|
|
<span className="text-muted-foreground">
|
|
{uploadProgress.current} of {uploadProgress.total}
|
|
</span>
|
|
</div>
|
|
<Progress value={(uploadProgress.current / uploadProgress.total) * 100} />
|
|
</div>
|
|
)}
|
|
|
|
<Button
|
|
onClick={handleSubmit}
|
|
disabled={isSubmitting || photos.length === 0}
|
|
className="w-full h-12 text-base font-medium bg-accent hover:bg-accent/90 text-accent-foreground"
|
|
size="lg"
|
|
>
|
|
{isSubmitting ? (
|
|
<div className="flex items-center gap-2">
|
|
<div className="w-4 h-4 border-2 border-primary-foreground/30 border-t-primary-foreground rounded-full animate-spin" />
|
|
{uploadProgress ? `Uploading ${uploadProgress.current}/${uploadProgress.total}...` : 'Submitting...'}
|
|
</div>
|
|
) : (
|
|
<div className="flex items-center gap-2">
|
|
<CheckCircle className="w-5 h-5" />
|
|
Submit {photos.length} Photo{photos.length !== 1 ? 's' : ''}
|
|
</div>
|
|
)}
|
|
</Button>
|
|
|
|
<div className="flex items-center justify-center gap-2 text-sm text-muted-foreground">
|
|
<AlertCircle className="w-4 h-4" />
|
|
<span>Your submission will be reviewed and published within 24-48 hours</span>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
} |