Visual edit in Lovable

src/components/reviews/ReviewForm.tsx

@@ -13,7 +13,6 @@ import { supabase } from '@/integrations/supabase/client';
 import { toast } from '@/hooks/use-toast';
 import { PhotoUpload } from '@/components/upload/PhotoUpload';
 import { StarRating } from './StarRating';
-
 const reviewSchema = z.object({
   rating: z.number().min(0.5).max(5).multipleOf(0.5),
   title: z.string().optional(),
@@ -22,37 +21,40 @@ const reviewSchema = z.object({
   wait_time_minutes: z.number().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({
-export function ReviewForm({ entityType, entityId, entityName, onReviewSubmitted }: ReviewFormProps) {
+  entityType,
-  const { user } = useAuth();
+  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,
-    formState: { errors }
+    formState: {
+      errors
+    }
   } = useForm<ReviewFormData>({
     resolver: zodResolver(reviewSchema)
   });
-
   const handleRatingChange = (selectedRating: number) => {
     setRating(selectedRating);
     setValue('rating', selectedRating);
   };
-
   const onSubmit = async (data: ReviewFormData) => {
     if (!user) {
       toast({
@@ -62,7 +64,6 @@ export function ReviewForm({ entityType, entityId, entityName, onReviewSubmitted
       });
       return;
     }
-
     setSubmitting(true);
     try {
       const reviewData = {
@@ -74,20 +75,20 @@ export function ReviewForm({ entityType, entityId, entityName, onReviewSubmitted
         wait_time_minutes: data.wait_time_minutes || null,
         photos: photos.length > 0 ? photos : null,
         moderation_status: 'pending' as const,
-        ...(entityType === 'park' ? { park_id: entityId } : { ride_id: entityId })
+        ...(entityType === 'park' ? {
+          park_id: entityId
+        } : {
+          ride_id: entityId
+        })
       };
-
+      const {
-      const { error } = await supabase
+        error
-        .from('reviews')
+      } = await supabase.from('reviews').insert([reviewData]);
-        .insert([reviewData]);
-
       if (error) throw error;
-
       toast({
         title: "Review Submitted!",
         description: "Thank you for your review. It will be published after moderation."
       });
-
       reset();
       setRating(0);
       setPhotos([]);
@@ -103,10 +104,8 @@ export function ReviewForm({ entityType, entityId, entityName, onReviewSubmitted
       setSubmitting(false);
     }
   };
-
   if (!user) {
-    return (
+    return <Card>
-      <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>
@@ -117,12 +116,9 @@ export function ReviewForm({ entityType, entityId, entityName, onReviewSubmitted
             Sign In to Review
           </Button>
         </CardContent>
-      </Card>
+      </Card>;
-    );
   }
-
+  return <Card>
-  return (
-    <Card>
       <CardHeader>
         <CardTitle>Write a Review for {entityName}</CardTitle>
       </CardHeader>
@@ -131,86 +127,39 @@ export function ReviewForm({ entityType, entityId, entityName, onReviewSubmitted
           {/* Rating */}
           <div className="space-y-2">
             <Label>Rating *</Label>
-            <StarRating
+            <StarRating rating={rating} onChange={handleRatingChange} interactive={true} showLabel={true} size="lg" />
-              rating={rating}
+            {errors.rating && <p className="text-sm text-destructive">Please select a rating</p>}
-              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
+            <Input id="title" placeholder="Give your review a title" {...register('title')} />
-              id="title"
-              placeholder="Give your review a title"
-              {...register('title')}
-            />
           </div>
 
           {/* Content */}
           <div className="space-y-2">
             <Label htmlFor="content">Your Review *</Label>
-            <Textarea
+            <Textarea id="content" placeholder="Share your experience..." rows={4} {...register('content')} />
-              id="content"
+            {errors.content && <p className="text-sm text-destructive">{errors.content.message}</p>}
-              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 htmlFor="visit_date">Visit Date</Label>
-            <Input
+            <Input id="visit_date" type="date" {...register('visit_date')} />
-              id="visit_date"
-              type="date"
-              {...register('visit_date')}
-            />
           </div>
 
           {/* Wait Time (for rides) */}
-          {entityType === 'ride' && (
+          {entityType === 'ride' && <div className="space-y-2">
-            <div className="space-y-2">
               <Label htmlFor="wait_time">Wait Time (minutes)</Label>
-              <Input
+              <Input id="wait_time" type="number" min="0" placeholder="How long did you wait?" {...register('wait_time_minutes', {
-                id="wait_time"
+            valueAsNumber: true
-                type="number"
+          })} />
-                min="0"
+            </div>}
-                placeholder="How long did you wait?"
-                {...register('wait_time_minutes', { valueAsNumber: true })}
-              />
-            </div>
-          )}
 
           {/* Photo Upload */}
-          <div className="space-y-2">
+          
-            <Label>Photos (Optional)</Label>
-            <PhotoUpload
-              maxFiles={5}
-              onUploadComplete={setPhotos}
-              onError={(error) => {
-                toast({
-                  title: "Upload Error",
-                  description: error,
-                  variant: "destructive"
-                });
-              }}
-              variant="compact"
-              className="max-w-full"
-            />
-            <p className="text-xs text-muted-foreground">
-              Add up to 5 photos to share your experience
-            </p>
-          </div>
 
           <Button type="submit" disabled={submitting} className="w-full">
             <Send className="w-4 h-4 mr-2" />
@@ -218,6 +167,5 @@ export function ReviewForm({ entityType, entityId, entityName, onReviewSubmitted
           </Button>
         </form>
       </CardContent>
-    </Card>
+    </Card>;
-  );
 }