mirror of
https://github.com/pacnpal/thrilltrack-explorer.git
synced 2025-12-22 09:11:13 -05:00
feat: Implement complete plan for "coming soon" placeholders
This commit is contained in:
gpt-engineer-app[bot]
321
src/components/profile/UserReviewsList.tsx
Normal file
321
src/components/profile/UserReviewsList.tsx
Normal file
@@ -0,0 +1,321 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
|
||||
import { Star, Calendar, MapPin, Edit, Trash2, ThumbsUp } from 'lucide-react';
|
||||
import { supabase } from '@/integrations/supabase/client';
|
||||
import { StarRating } from '@/components/reviews/StarRating';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { toast } from 'sonner';
|
||||
import { getErrorMessage } from '@/lib/errorHandler';
|
||||
|
||||
interface ReviewWithEntity {
|
||||
id: string;
|
||||
rating: number;
|
||||
title: string | null;
|
||||
content: string | null;
|
||||
visit_date: string | null;
|
||||
wait_time_minutes: number | null;
|
||||
helpful_votes: number;
|
||||
moderation_status: string;
|
||||
created_at: string;
|
||||
parks?: {
|
||||
id: string;
|
||||
name: string;
|
||||
slug: string;
|
||||
} | null;
|
||||
rides?: {
|
||||
id: string;
|
||||
name: string;
|
||||
slug: string;
|
||||
parks?: {
|
||||
name: string;
|
||||
slug: string;
|
||||
} | null;
|
||||
} | null;
|
||||
}
|
||||
|
||||
interface UserReviewsListProps {
|
||||
userId: string;
|
||||
reviewCount: number;
|
||||
}
|
||||
|
||||
export function UserReviewsList({ userId, reviewCount }: UserReviewsListProps) {
|
||||
const [reviews, setReviews] = useState<ReviewWithEntity[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [filter, setFilter] = useState<'all' | 'parks' | 'rides'>('all');
|
||||
const [sortBy, setSortBy] = useState<'date' | 'rating'>('date');
|
||||
|
||||
useEffect(() => {
|
||||
fetchReviews();
|
||||
}, [userId, filter, sortBy]);
|
||||
|
||||
const fetchReviews = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
let query = supabase
|
||||
.from('reviews')
|
||||
.select(`
|
||||
id,
|
||||
rating,
|
||||
title,
|
||||
content,
|
||||
visit_date,
|
||||
wait_time_minutes,
|
||||
helpful_votes,
|
||||
moderation_status,
|
||||
created_at,
|
||||
parks:park_id (id, name, slug),
|
||||
rides:ride_id (
|
||||
id,
|
||||
name,
|
||||
slug,
|
||||
parks:park_id (name, slug)
|
||||
)
|
||||
`)
|
||||
.eq('user_id', userId);
|
||||
|
||||
if (filter === 'parks') {
|
||||
query = query.not('park_id', 'is', null);
|
||||
} else if (filter === 'rides') {
|
||||
query = query.not('ride_id', 'is', null);
|
||||
}
|
||||
|
||||
if (sortBy === 'date') {
|
||||
query = query.order('created_at', { ascending: false });
|
||||
} else {
|
||||
query = query.order('rating', { ascending: false });
|
||||
}
|
||||
|
||||
const { data, error } = await query;
|
||||
|
||||
if (error) throw error;
|
||||
setReviews(data || []);
|
||||
} catch (error) {
|
||||
console.error('Error fetching reviews:', error);
|
||||
toast.error(getErrorMessage(error));
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const formatDate = (dateString: string) => {
|
||||
return new Date(dateString).toLocaleDateString('en-US', {
|
||||
year: 'numeric',
|
||||
month: 'long',
|
||||
day: 'numeric'
|
||||
});
|
||||
};
|
||||
|
||||
const getStatusBadge = (status: string) => {
|
||||
switch (status) {
|
||||
case 'approved':
|
||||
return <Badge variant="default">Approved</Badge>;
|
||||
case 'pending':
|
||||
return <Badge variant="secondary">Pending Review</Badge>;
|
||||
case 'rejected':
|
||||
return <Badge variant="destructive">Rejected</Badge>;
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
{Array.from({ length: 3 }, (_, i) => (
|
||||
<Card key={i} className="animate-pulse">
|
||||
<CardContent className="p-6">
|
||||
<div className="space-y-3">
|
||||
<div className="h-4 bg-muted rounded w-1/4"></div>
|
||||
<div className="h-4 bg-muted rounded w-1/6"></div>
|
||||
<div className="h-20 bg-muted rounded"></div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (reviewCount === 0) {
|
||||
return (
|
||||
<Card>
|
||||
<CardContent className="py-12">
|
||||
<div className="text-center">
|
||||
<Star className="w-16 h-16 text-muted-foreground mx-auto mb-4" />
|
||||
<h3 className="text-xl font-semibold mb-2">No Reviews Yet</h3>
|
||||
<p className="text-muted-foreground mb-4">
|
||||
Start sharing your park and ride experiences
|
||||
</p>
|
||||
<div className="flex gap-2 justify-center">
|
||||
<Button asChild>
|
||||
<Link to="/parks">Browse Parks</Link>
|
||||
</Button>
|
||||
<Button variant="outline" asChild>
|
||||
<Link to="/rides">Browse Rides</Link>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
const stats = {
|
||||
total: reviews.length,
|
||||
parks: reviews.filter(r => r.parks).length,
|
||||
rides: reviews.filter(r => r.rides).length,
|
||||
avgRating: reviews.length > 0
|
||||
? (reviews.reduce((sum, r) => sum + r.rating, 0) / reviews.length).toFixed(1)
|
||||
: '0'
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{/* Statistics */}
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
|
||||
<Card>
|
||||
<CardContent className="pt-6">
|
||||
<div className="text-2xl font-bold">{stats.total}</div>
|
||||
<div className="text-sm text-muted-foreground">Total Reviews</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card>
|
||||
<CardContent className="pt-6">
|
||||
<div className="text-2xl font-bold">{stats.parks}</div>
|
||||
<div className="text-sm text-muted-foreground">Park Reviews</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card>
|
||||
<CardContent className="pt-6">
|
||||
<div className="text-2xl font-bold">{stats.rides}</div>
|
||||
<div className="text-sm text-muted-foreground">Ride Reviews</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card>
|
||||
<CardContent className="pt-6">
|
||||
<div className="text-2xl font-bold flex items-center gap-1">
|
||||
<Star className="w-5 h-5 fill-primary text-primary" />
|
||||
{stats.avgRating}
|
||||
</div>
|
||||
<div className="text-sm text-muted-foreground">Avg Rating</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Filters */}
|
||||
<div className="flex gap-4">
|
||||
<Select value={filter} onValueChange={(value) => setFilter(value as typeof filter)}>
|
||||
<SelectTrigger className="w-[180px]">
|
||||
<SelectValue placeholder="Filter by type" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="all">All Reviews</SelectItem>
|
||||
<SelectItem value="parks">Parks Only</SelectItem>
|
||||
<SelectItem value="rides">Rides Only</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
|
||||
<Select value={sortBy} onValueChange={(value) => setSortBy(value as typeof sortBy)}>
|
||||
<SelectTrigger className="w-[180px]">
|
||||
<SelectValue placeholder="Sort by" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="date">Most Recent</SelectItem>
|
||||
<SelectItem value="rating">Highest Rated</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
{/* Reviews List */}
|
||||
<div className="space-y-4">
|
||||
{reviews.map((review) => {
|
||||
const entityName = review.parks?.name || review.rides?.name || 'Unknown';
|
||||
const entitySlug = review.parks?.slug || review.rides?.slug || '';
|
||||
const entityType = review.parks ? 'park' : 'ride';
|
||||
const entityPath = review.parks
|
||||
? `/parks/${entitySlug}`
|
||||
: review.rides
|
||||
? `/parks/${review.rides.parks?.slug}/rides/${entitySlug}`
|
||||
: '#';
|
||||
|
||||
return (
|
||||
<Card key={review.id}>
|
||||
<CardContent className="p-6">
|
||||
<div className="space-y-3">
|
||||
{/* Header */}
|
||||
<div className="flex items-start justify-between">
|
||||
<div className="flex-1">
|
||||
<div className="flex items-center gap-2 mb-1">
|
||||
<Link
|
||||
to={entityPath}
|
||||
className="font-semibold hover:underline"
|
||||
>
|
||||
{entityName}
|
||||
</Link>
|
||||
<Badge variant="outline">
|
||||
{entityType === 'park' ? 'Park' : 'Ride'}
|
||||
</Badge>
|
||||
{getStatusBadge(review.moderation_status)}
|
||||
</div>
|
||||
{review.rides?.parks && (
|
||||
<Link
|
||||
to={`/parks/${review.rides.parks.slug}`}
|
||||
className="text-sm text-muted-foreground hover:underline"
|
||||
>
|
||||
at {review.rides.parks.name}
|
||||
</Link>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex items-center gap-1">
|
||||
<StarRating rating={review.rating} size="sm" />
|
||||
<span className="ml-1 text-sm font-medium">
|
||||
{review.rating}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Title */}
|
||||
{review.title && (
|
||||
<h4 className="font-medium">{review.title}</h4>
|
||||
)}
|
||||
|
||||
{/* Content */}
|
||||
{review.content && (
|
||||
<p className="text-muted-foreground leading-relaxed">
|
||||
{review.content}
|
||||
</p>
|
||||
)}
|
||||
|
||||
{/* Metadata */}
|
||||
<div className="flex items-center gap-4 text-sm text-muted-foreground">
|
||||
<div className="flex items-center gap-1">
|
||||
<Calendar className="w-3 h-3" />
|
||||
{formatDate(review.created_at)}
|
||||
</div>
|
||||
{review.visit_date && (
|
||||
<div className="flex items-center gap-1">
|
||||
<MapPin className="w-3 h-3" />
|
||||
Visited {formatDate(review.visit_date)}
|
||||
</div>
|
||||
)}
|
||||
{review.wait_time_minutes && (
|
||||
<span>Wait: {review.wait_time_minutes} min</span>
|
||||
)}
|
||||
<div className="flex items-center gap-1">
|
||||
<ThumbsUp className="w-3 h-3" />
|
||||
{review.helpful_votes} helpful
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user