live blog implemented
This commit is contained in:
dimitar committed
1 parent
e8893c1aae
commit
0351726eeb
36 files changed
+7759
-253
No files matched your search
@@ -0,0 +1,268 @@
|
||||
import React, { useState } from 'react';
|
||||
import { useLiveBlog, useDeleteLiveBlogUpdate } from '@/queries/live-blogs';
|
||||
import { UpdatePublisher } from './UpdatePublisher';
|
||||
import { LiveBlogUpdate } from '@/components/features/live-blog/LiveBlogUpdate';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
|
||||
import type { LiveBlogUpdate as ApiLiveBlogUpdate } from '@/lib/api';
|
||||
import {
|
||||
ArrowLeft,
|
||||
Edit,
|
||||
Play,
|
||||
Pause,
|
||||
Square,
|
||||
Archive,
|
||||
Eye,
|
||||
MessageSquare
|
||||
} from 'lucide-react';
|
||||
|
||||
interface LiveBlogManagerProps {
|
||||
slug: string;
|
||||
onBack?: () => void;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export function LiveBlogManager({ slug, onBack, className }: LiveBlogManagerProps) {
|
||||
const [activeTab, setActiveTab] = useState('updates');
|
||||
|
||||
const { data: liveBlog, isLoading, error } = useLiveBlog(slug);
|
||||
const deleteUpdateMutation = useDeleteLiveBlogUpdate();
|
||||
|
||||
const handleDeleteUpdate = async (update: ApiLiveBlogUpdate) => {
|
||||
if (!liveBlog) return;
|
||||
|
||||
if (confirm('Are you sure you want to delete this update? This action cannot be undone.')) {
|
||||
try {
|
||||
await deleteUpdateMutation.mutateAsync({
|
||||
liveBlogId: liveBlog.id,
|
||||
updateId: update.id,
|
||||
});
|
||||
} catch (error) {
|
||||
console.error('Failed to delete update:', error);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const handleEditUpdate = (update: ApiLiveBlogUpdate) => {
|
||||
// The UpdatePublisher component handles editing internally
|
||||
console.log('Editing update:', update);
|
||||
};
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<Card className={className}>
|
||||
<CardContent className="p-6">
|
||||
<div className="animate-pulse space-y-4">
|
||||
<div className="h-8 bg-muted rounded w-3/4"></div>
|
||||
<div className="h-4 bg-muted rounded w-1/2"></div>
|
||||
<div className="h-32 bg-muted rounded"></div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
if (error || !liveBlog) {
|
||||
return (
|
||||
<Card className={className}>
|
||||
<CardContent className="p-6">
|
||||
<div className="text-center text-destructive">
|
||||
<h3 className="text-lg font-semibold mb-2">Failed to load live blog</h3>
|
||||
<p className="text-sm mb-4">
|
||||
{error instanceof Error ? error.message : 'Unknown error occurred'}
|
||||
</p>
|
||||
{onBack && (
|
||||
<Button variant="outline" onClick={onBack}>
|
||||
<ArrowLeft className="w-4 h-4 mr-2" />
|
||||
Back
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
const getStatusColor = (status: string) => {
|
||||
switch (status) {
|
||||
case 'live': return 'bg-green-100 text-green-800 border-green-200';
|
||||
case 'draft': return 'bg-gray-100 text-gray-800 border-gray-200';
|
||||
case 'ended': return 'bg-red-100 text-red-800 border-red-200';
|
||||
case 'archived': return 'bg-blue-100 text-blue-800 border-blue-200';
|
||||
default: return 'bg-gray-100 text-gray-800 border-gray-200';
|
||||
}
|
||||
};
|
||||
|
||||
const getStatusIcon = (status: string) => {
|
||||
switch (status) {
|
||||
case 'live': return <Play className="w-3 h-3" />;
|
||||
case 'draft': return <Edit className="w-3 h-3" />;
|
||||
case 'ended': return <Square className="w-3 h-3" />;
|
||||
case 'archived': return <Archive className="w-3 h-3" />;
|
||||
default: return null;
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={className}>
|
||||
{/* Header */}
|
||||
<Card className="mb-6">
|
||||
<CardHeader>
|
||||
<div className="flex items-start justify-between">
|
||||
<div className="flex-1">
|
||||
<div className="flex items-center gap-3 mb-2">
|
||||
{onBack && (
|
||||
<Button variant="ghost" size="sm" onClick={onBack}>
|
||||
<ArrowLeft className="w-4 h-4" />
|
||||
</Button>
|
||||
)}
|
||||
<CardTitle className="text-2xl">{liveBlog.title}</CardTitle>
|
||||
</div>
|
||||
|
||||
{liveBlog.description && (
|
||||
<p className="text-muted-foreground mb-4">{liveBlog.description}</p>
|
||||
)}
|
||||
|
||||
<div className="flex items-center gap-4 text-sm">
|
||||
<Badge className={getStatusColor(liveBlog.status)} variant="outline">
|
||||
<div className="flex items-center gap-1">
|
||||
{getStatusIcon(liveBlog.status)}
|
||||
{liveBlog.status}
|
||||
</div>
|
||||
</Badge>
|
||||
|
||||
<div className="flex items-center gap-1 text-muted-foreground">
|
||||
<Eye className="w-4 h-4" />
|
||||
{liveBlog.viewCount} views
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-1 text-muted-foreground">
|
||||
<MessageSquare className="w-4 h-4" />
|
||||
{liveBlog.updates?.length || 0} updates
|
||||
</div>
|
||||
|
||||
{liveBlog.author && (
|
||||
<div className="flex items-center gap-2">
|
||||
{liveBlog.author.avatar && (
|
||||
<img
|
||||
src={liveBlog.author.avatar}
|
||||
alt={liveBlog.author.name}
|
||||
className="w-6 h-6 rounded-full"
|
||||
/>
|
||||
)}
|
||||
<span className="text-muted-foreground">{liveBlog.author.name}</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardHeader>
|
||||
</Card>
|
||||
|
||||
{/* Main content */}
|
||||
<Tabs value={activeTab} onValueChange={setActiveTab}>
|
||||
<TabsList className="grid w-full grid-cols-2">
|
||||
<TabsTrigger value="updates">Updates</TabsTrigger>
|
||||
<TabsTrigger value="settings">Settings</TabsTrigger>
|
||||
</TabsList>
|
||||
|
||||
<TabsContent value="updates" className="space-y-6">
|
||||
<UpdatePublisher
|
||||
liveBlogId={liveBlog.id}
|
||||
authorId={liveBlog.authorId || undefined}
|
||||
/>
|
||||
|
||||
{/* Recent updates preview */}
|
||||
{liveBlog.updates && liveBlog.updates.length > 0 && (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="text-lg">All Updates</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-4">
|
||||
{liveBlog.updates.map((update) => (
|
||||
<LiveBlogUpdate
|
||||
key={update.id}
|
||||
update={update}
|
||||
showAdminControls={true}
|
||||
onEdit={handleEditUpdate}
|
||||
onDelete={handleDeleteUpdate}
|
||||
onPinToggle={(update) => {
|
||||
// Handle pin toggle
|
||||
console.log('Toggle pin for update:', update);
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="settings" className="space-y-6">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Live Blog Settings</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-4">
|
||||
<div className="p-4 bg-muted rounded-lg">
|
||||
<h4 className="font-medium mb-2">Status Management</h4>
|
||||
<p className="text-sm text-muted-foreground mb-4">
|
||||
Control the live blog status and visibility
|
||||
</p>
|
||||
<div className="flex gap-2">
|
||||
<Button variant="outline" size="sm">
|
||||
<Play className="w-4 h-4 mr-2" />
|
||||
Go Live
|
||||
</Button>
|
||||
<Button variant="outline" size="sm">
|
||||
<Pause className="w-4 h-4 mr-2" />
|
||||
Pause
|
||||
</Button>
|
||||
<Button variant="outline" size="sm">
|
||||
<Square className="w-4 h-4 mr-2" />
|
||||
End
|
||||
</Button>
|
||||
<Button variant="outline" size="sm">
|
||||
<Archive className="w-4 h-4 mr-2" />
|
||||
Archive
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="p-4 bg-muted rounded-lg">
|
||||
<h4 className="font-medium mb-2">Analytics</h4>
|
||||
<div className="grid grid-cols-2 gap-4 text-sm">
|
||||
<div>
|
||||
<span className="text-muted-foreground">Total Views:</span>
|
||||
<div className="font-medium">{liveBlog.viewCount}</div>
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-muted-foreground">Total Updates:</span>
|
||||
<div className="font-medium">{liveBlog.updates?.length || 0}</div>
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-muted-foreground">Created:</span>
|
||||
<div className="font-medium">
|
||||
{new Date(liveBlog.createdAt).toLocaleDateString()}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-muted-foreground">Last Updated:</span>
|
||||
<div className="font-medium">
|
||||
{new Date(liveBlog.updatedAt).toLocaleDateString()}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in new issue
Block a user