mirror of
https://github.com/pacnpal/thrilltrack-explorer.git
synced 2025-12-20 21:11:12 -05:00
Add moderation queue tables
This commit is contained in:
gpt-engineer-app[bot]
291
src/components/moderation/ModerationQueue.tsx
Normal file
291
src/components/moderation/ModerationQueue.tsx
Normal file
@@ -0,0 +1,291 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
import { CheckCircle, XCircle, Eye, Calendar, User } from 'lucide-react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Card, CardContent, CardHeader } from '@/components/ui/card';
|
||||
import { Textarea } from '@/components/ui/textarea';
|
||||
import { Label } from '@/components/ui/label';
|
||||
import { supabase } from '@/integrations/supabase/client';
|
||||
import { useToast } from '@/hooks/use-toast';
|
||||
import { format } from 'date-fns';
|
||||
|
||||
interface ModerationItem {
|
||||
id: string;
|
||||
type: 'review' | 'content_submission';
|
||||
content: any;
|
||||
created_at: string;
|
||||
user_id: string;
|
||||
status: string;
|
||||
user_profile?: {
|
||||
username: string;
|
||||
display_name?: string;
|
||||
};
|
||||
}
|
||||
|
||||
export function ModerationQueue() {
|
||||
const [items, setItems] = useState<ModerationItem[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [actionLoading, setActionLoading] = useState<string | null>(null);
|
||||
const [notes, setNotes] = useState<Record<string, string>>({});
|
||||
const { toast } = useToast();
|
||||
|
||||
const fetchItems = async () => {
|
||||
try {
|
||||
// Fetch pending reviews with profile data
|
||||
const { data: reviews, error: reviewsError } = await supabase
|
||||
.from('reviews')
|
||||
.select(`
|
||||
id,
|
||||
title,
|
||||
content,
|
||||
rating,
|
||||
created_at,
|
||||
user_id,
|
||||
moderation_status
|
||||
`)
|
||||
.in('moderation_status', ['pending', 'flagged'])
|
||||
.order('created_at', { ascending: true });
|
||||
|
||||
if (reviewsError) throw reviewsError;
|
||||
|
||||
// Fetch pending content submissions
|
||||
const { data: submissions, error: submissionsError } = await supabase
|
||||
.from('content_submissions')
|
||||
.select(`
|
||||
id,
|
||||
content,
|
||||
submission_type,
|
||||
created_at,
|
||||
user_id,
|
||||
status
|
||||
`)
|
||||
.eq('status', 'pending')
|
||||
.order('created_at', { ascending: true });
|
||||
|
||||
if (submissionsError) throw submissionsError;
|
||||
|
||||
// Get unique user IDs to fetch profiles
|
||||
const userIds = [
|
||||
...(reviews || []).map(r => r.user_id),
|
||||
...(submissions || []).map(s => s.user_id)
|
||||
];
|
||||
|
||||
// Fetch profiles for all users
|
||||
const { data: profiles } = await supabase
|
||||
.from('profiles')
|
||||
.select('user_id, username, display_name')
|
||||
.in('user_id', userIds);
|
||||
|
||||
const profileMap = new Map(profiles?.map(p => [p.user_id, p]) || []);
|
||||
|
||||
// Combine and format items
|
||||
const formattedItems: ModerationItem[] = [
|
||||
...(reviews || []).map(review => ({
|
||||
id: review.id,
|
||||
type: 'review' as const,
|
||||
content: review,
|
||||
created_at: review.created_at,
|
||||
user_id: review.user_id,
|
||||
status: review.moderation_status,
|
||||
user_profile: profileMap.get(review.user_id),
|
||||
})),
|
||||
...(submissions || []).map(submission => ({
|
||||
id: submission.id,
|
||||
type: 'content_submission' as const,
|
||||
content: submission,
|
||||
created_at: submission.created_at,
|
||||
user_id: submission.user_id,
|
||||
status: submission.status,
|
||||
user_profile: profileMap.get(submission.user_id),
|
||||
})),
|
||||
];
|
||||
|
||||
// Sort by creation date
|
||||
formattedItems.sort((a, b) => new Date(a.created_at).getTime() - new Date(b.created_at).getTime());
|
||||
|
||||
setItems(formattedItems);
|
||||
} catch (error) {
|
||||
console.error('Error fetching moderation items:', error);
|
||||
toast({
|
||||
title: "Error",
|
||||
description: "Failed to load moderation queue",
|
||||
variant: "destructive",
|
||||
});
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
fetchItems();
|
||||
}, []);
|
||||
|
||||
const handleModerationAction = async (
|
||||
item: ModerationItem,
|
||||
action: 'approved' | 'rejected',
|
||||
moderatorNotes?: string
|
||||
) => {
|
||||
setActionLoading(item.id);
|
||||
try {
|
||||
const table = item.type === 'review' ? 'reviews' : 'content_submissions';
|
||||
const statusField = item.type === 'review' ? 'moderation_status' : 'status';
|
||||
|
||||
const updateData: any = {
|
||||
[statusField]: action,
|
||||
[`moderated_at`]: new Date().toISOString(),
|
||||
};
|
||||
|
||||
if (moderatorNotes) {
|
||||
updateData.reviewer_notes = moderatorNotes;
|
||||
}
|
||||
|
||||
const { error } = await supabase
|
||||
.from(table)
|
||||
.update(updateData)
|
||||
.eq('id', item.id);
|
||||
|
||||
if (error) throw error;
|
||||
|
||||
toast({
|
||||
title: `Content ${action}`,
|
||||
description: `The ${item.type} has been ${action}`,
|
||||
});
|
||||
|
||||
// Remove item from queue
|
||||
setItems(prev => prev.filter(i => i.id !== item.id));
|
||||
|
||||
// Clear notes
|
||||
setNotes(prev => {
|
||||
const newNotes = { ...prev };
|
||||
delete newNotes[item.id];
|
||||
return newNotes;
|
||||
});
|
||||
} catch (error) {
|
||||
console.error('Error moderating content:', error);
|
||||
toast({
|
||||
title: "Error",
|
||||
description: `Failed to ${action} content`,
|
||||
variant: "destructive",
|
||||
});
|
||||
} finally {
|
||||
setActionLoading(null);
|
||||
}
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="flex items-center justify-center p-8">
|
||||
<div className="animate-spin rounded-full h-6 w-6 border-b-2 border-primary"></div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (items.length === 0) {
|
||||
return (
|
||||
<div className="text-center py-8">
|
||||
<CheckCircle className="w-12 h-12 text-muted-foreground mx-auto mb-4" />
|
||||
<h3 className="text-lg font-semibold mb-2">Queue is empty</h3>
|
||||
<p className="text-muted-foreground">
|
||||
No pending items require moderation at this time.
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{items.map((item) => (
|
||||
<Card key={item.id} className="border-l-4 border-l-amber-500">
|
||||
<CardHeader className="pb-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-3">
|
||||
<Badge variant={item.status === 'flagged' ? 'destructive' : 'secondary'}>
|
||||
{item.type === 'review' ? 'Review' : 'Submission'}
|
||||
</Badge>
|
||||
{item.status === 'flagged' && (
|
||||
<Badge variant="destructive">Flagged</Badge>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex items-center gap-2 text-sm text-muted-foreground">
|
||||
<Calendar className="w-4 h-4" />
|
||||
{format(new Date(item.created_at), 'MMM d, yyyy HH:mm')}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{item.user_profile && (
|
||||
<div className="flex items-center gap-2 text-sm">
|
||||
<User className="w-4 h-4 text-muted-foreground" />
|
||||
<span className="font-medium">
|
||||
{item.user_profile.display_name || item.user_profile.username}
|
||||
</span>
|
||||
{item.user_profile.display_name && (
|
||||
<span className="text-muted-foreground">
|
||||
@{item.user_profile.username}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</CardHeader>
|
||||
|
||||
<CardContent className="space-y-4">
|
||||
<div className="bg-muted/50 p-4 rounded-lg">
|
||||
{item.type === 'review' ? (
|
||||
<div>
|
||||
{item.content.title && (
|
||||
<h4 className="font-semibold mb-2">{item.content.title}</h4>
|
||||
)}
|
||||
{item.content.content && (
|
||||
<p className="text-sm mb-2">{item.content.content}</p>
|
||||
)}
|
||||
<div className="flex items-center gap-2 text-sm text-muted-foreground">
|
||||
<span>Rating: {item.content.rating}/5</span>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div>
|
||||
<div className="text-sm text-muted-foreground mb-2">
|
||||
Type: {item.content.submission_type}
|
||||
</div>
|
||||
<pre className="text-sm whitespace-pre-wrap">
|
||||
{JSON.stringify(item.content.content, null, 2)}
|
||||
</pre>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={`notes-${item.id}`}>Moderation Notes (optional)</Label>
|
||||
<Textarea
|
||||
id={`notes-${item.id}`}
|
||||
placeholder="Add notes about your moderation decision..."
|
||||
value={notes[item.id] || ''}
|
||||
onChange={(e) => setNotes(prev => ({ ...prev, [item.id]: e.target.value }))}
|
||||
rows={2}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-2 pt-2">
|
||||
<Button
|
||||
onClick={() => handleModerationAction(item, 'approved', notes[item.id])}
|
||||
disabled={actionLoading === item.id}
|
||||
className="flex-1"
|
||||
>
|
||||
<CheckCircle className="w-4 h-4 mr-2" />
|
||||
Approve
|
||||
</Button>
|
||||
<Button
|
||||
variant="destructive"
|
||||
onClick={() => handleModerationAction(item, 'rejected', notes[item.id])}
|
||||
disabled={actionLoading === item.id}
|
||||
className="flex-1"
|
||||
>
|
||||
<XCircle className="w-4 h-4 mr-2" />
|
||||
Reject
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user