mirror of
https://github.com/pacnpal/thrilltrack-explorer.git
synced 2025-12-22 23:11:13 -05:00
Refactor code structure and remove redundant changes
This commit is contained in:
pacnpal
212
src-old/components/reviews/ReviewForm.tsx
Normal file
212
src-old/components/reviews/ReviewForm.tsx
Normal file
@@ -0,0 +1,212 @@
|
||||
import { useState } from 'react';
|
||||
import { useForm } from 'react-hook-form';
|
||||
import { zodResolver } from '@hookform/resolvers/zod';
|
||||
import * as z from 'zod';
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Textarea } from '@/components/ui/textarea';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Label } from '@/components/ui/label';
|
||||
import { DatePicker } from '@/components/ui/date-picker';
|
||||
import { Star, Send } from 'lucide-react';
|
||||
import { useAuth } from '@/hooks/useAuth';
|
||||
import { supabase } from '@/lib/supabaseClient';
|
||||
import { toast } from '@/hooks/use-toast';
|
||||
import { PhotoUpload } from '@/components/upload/PhotoUpload';
|
||||
import { StarRating } from './StarRating';
|
||||
import { toDateOnly, parseDateOnly } from '@/lib/dateUtils';
|
||||
import { getErrorMessage, handleNonCriticalError } from '@/lib/errorHandler';
|
||||
const reviewSchema = z.object({
|
||||
rating: z.number().min(0.5).max(5).multipleOf(0.5),
|
||||
title: z.string().optional(),
|
||||
content: z.string().min(10, 'Review must be at least 10 characters long'),
|
||||
visit_date: z.string().optional(),
|
||||
wait_time_minutes: z.number().positive().optional(),
|
||||
photos: z.array(z.string()).optional()
|
||||
});
|
||||
type ReviewFormData = z.infer<typeof reviewSchema>;
|
||||
interface ReviewFormProps {
|
||||
entityType: 'park' | 'ride';
|
||||
entityId: string;
|
||||
entityName: string;
|
||||
onReviewSubmitted: () => void;
|
||||
}
|
||||
export function ReviewForm({
|
||||
entityType,
|
||||
entityId,
|
||||
entityName,
|
||||
onReviewSubmitted
|
||||
}: ReviewFormProps) {
|
||||
const {
|
||||
user
|
||||
} = useAuth();
|
||||
const [rating, setRating] = useState(0);
|
||||
const [submitting, setSubmitting] = useState(false);
|
||||
const [photos, setPhotos] = useState<string[]>([]);
|
||||
const {
|
||||
register,
|
||||
handleSubmit,
|
||||
reset,
|
||||
setValue,
|
||||
watch,
|
||||
formState: {
|
||||
errors
|
||||
}
|
||||
} = useForm<ReviewFormData>({
|
||||
resolver: zodResolver(reviewSchema)
|
||||
});
|
||||
const handleRatingChange = (selectedRating: number) => {
|
||||
setRating(selectedRating);
|
||||
setValue('rating', selectedRating);
|
||||
};
|
||||
const onSubmit = async (data: ReviewFormData) => {
|
||||
if (!user) {
|
||||
toast({
|
||||
title: "Authentication Required",
|
||||
description: "Please sign in to submit a review.",
|
||||
variant: "destructive"
|
||||
});
|
||||
return;
|
||||
}
|
||||
setSubmitting(true);
|
||||
try {
|
||||
// Insert review first
|
||||
const reviewData = {
|
||||
user_id: user.id,
|
||||
rating: data.rating,
|
||||
title: data.title || null,
|
||||
content: data.content,
|
||||
visit_date: data.visit_date || null,
|
||||
wait_time_minutes: data.wait_time_minutes || null,
|
||||
moderation_status: 'pending' as const,
|
||||
...(entityType === 'park' ? {
|
||||
park_id: entityId
|
||||
} : {
|
||||
ride_id: entityId
|
||||
})
|
||||
};
|
||||
|
||||
const { data: review, error: reviewError } = await supabase
|
||||
.from('reviews')
|
||||
.insert([reviewData])
|
||||
.select()
|
||||
.single();
|
||||
|
||||
if (reviewError) throw reviewError;
|
||||
|
||||
// Insert photos into review_photos table if any
|
||||
if (photos.length > 0 && review) {
|
||||
const photoRecords = photos.map((url, index) => ({
|
||||
review_id: review.id,
|
||||
cloudflare_image_id: url.split('/').slice(-2, -1)[0] || '', // Extract ID from URL
|
||||
cloudflare_image_url: url,
|
||||
order_index: index,
|
||||
}));
|
||||
|
||||
const { error: photosError } = await supabase
|
||||
.from('review_photos')
|
||||
.insert(photoRecords);
|
||||
|
||||
if (photosError) {
|
||||
handleNonCriticalError(photosError, {
|
||||
action: 'Insert review photos',
|
||||
userId: user?.id,
|
||||
metadata: { reviewId: review.id, photoCount: photos.length }
|
||||
});
|
||||
// Don't throw - review is already created
|
||||
}
|
||||
}
|
||||
|
||||
toast({
|
||||
title: "Review Submitted!",
|
||||
description: "Thank you for your review. It will be published after moderation."
|
||||
});
|
||||
reset();
|
||||
setRating(0);
|
||||
setPhotos([]);
|
||||
onReviewSubmitted();
|
||||
} catch (error: unknown) {
|
||||
toast({
|
||||
title: "Error",
|
||||
description: getErrorMessage(error),
|
||||
variant: "destructive"
|
||||
});
|
||||
} finally {
|
||||
setSubmitting(false);
|
||||
}
|
||||
};
|
||||
if (!user) {
|
||||
return <Card>
|
||||
<CardContent className="p-6 text-center">
|
||||
<Star className="w-12 h-12 text-muted-foreground mx-auto mb-4" />
|
||||
<h3 className="text-lg font-semibold mb-2">Share Your Experience</h3>
|
||||
<p className="text-muted-foreground mb-4">
|
||||
Sign in to write a review for {entityName}
|
||||
</p>
|
||||
<Button onClick={() => window.location.href = '/auth'}>
|
||||
Sign In to Review
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>;
|
||||
}
|
||||
return <Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Write a Review for {entityName}</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<form onSubmit={handleSubmit(onSubmit)} className="space-y-6">
|
||||
{/* Rating */}
|
||||
<div className="space-y-2">
|
||||
<Label>Rating *</Label>
|
||||
<StarRating rating={rating} onChange={handleRatingChange} interactive={true} showLabel={true} size="lg" />
|
||||
{errors.rating && <p className="text-sm text-destructive">Please select a rating</p>}
|
||||
</div>
|
||||
|
||||
{/* Title */}
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="title">Review Title</Label>
|
||||
<Input id="title" placeholder="Give your review a title" {...register('title')} />
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="content">Your Review *</Label>
|
||||
<Textarea id="content" placeholder="Share your experience..." rows={4} {...register('content')} />
|
||||
{errors.content && <p className="text-sm text-destructive">{errors.content.message}</p>}
|
||||
</div>
|
||||
|
||||
{/* Visit Date */}
|
||||
<div className="space-y-2">
|
||||
<Label>Visit Date</Label>
|
||||
<DatePicker
|
||||
date={watch('visit_date') ? parseDateOnly(watch('visit_date') || '') : undefined}
|
||||
onSelect={(date) => setValue('visit_date', date ? toDateOnly(date) : '')}
|
||||
placeholder="When did you visit?"
|
||||
disableFuture={true}
|
||||
fromYear={1950}
|
||||
/>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
Select the date of your visit to help others understand when this experience occurred.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Wait Time (for rides) */}
|
||||
{entityType === 'ride' && <div className="space-y-2">
|
||||
<Label htmlFor="wait_time">Wait Time (minutes)</Label>
|
||||
<Input id="wait_time" type="number" min="0" placeholder="How long did you wait?" {...register('wait_time_minutes', {
|
||||
valueAsNumber: true,
|
||||
setValueAs: (v) => v === '' || isNaN(v) ? undefined : v
|
||||
})} />
|
||||
</div>}
|
||||
|
||||
{/* Photo Upload */}
|
||||
|
||||
|
||||
<Button type="submit" loading={submitting} loadingText="Submitting..." className="w-full">
|
||||
<Send className="w-4 h-4 mr-2" />
|
||||
Submit Review
|
||||
</Button>
|
||||
</form>
|
||||
</CardContent>
|
||||
</Card>;
|
||||
}
|
||||
Reference in New Issue
Block a user