mahdium/CatsOfMastodonGo-Admin
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Improvements to queue

Browse Source
This commit is contained in:
Mohammad Mahdi
2025-07-29 19:26:40 +03:30
parent ebfe34faf0
commit 790b3d45b3
2 changed files with 121 additions and 103 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/favicon.ico
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 7.5 KiB

224
src/components/AdminDashboard.tsx
View File

@@ -29,19 +29,26 @@ const AdminDashboard = ({ token, onLogout }: AdminDashboardProps) => {
// Get current media item // Get current media item
const currentMedia = mediaQueue.length > 0 ? mediaQueue[0] : null; const currentMedia = mediaQueue.length > 0 ? mediaQueue[0] : null;
// Preload images
useEffect(() => { useEffect(() => {
if (mediaQueue.length > 0) { // only preload if there are items after the current one
// Preload next images (up to 2) mediaQueue.slice(1, 5).forEach(media => {
mediaQueue.slice(1, 3).forEach(media => { if (!media.preview_url) return;
if (media.preview_url) {
const img = new Image(); const img = new Image();
img.src = media.preview_url; img.onload = () => {
} // successful preload — nothing to do
}); };
} img.onerror = () => {
// this media is broken even before we show it: remove it now
setMediaQueue(queue =>
queue.filter(item => item.id !== media.id)
);
};
img.src = media.preview_url;
});
}, [mediaQueue]); }, [mediaQueue]);
const fetchMedia = async () => { const fetchMedia = async () => {
setIsLoading(true); setIsLoading(true);
try { try {
@@ -94,10 +101,10 @@ const AdminDashboard = ({ token, onLogout }: AdminDashboardProps) => {
// Fill the queue with initial media items // Fill the queue with initial media items
const fillMediaQueue = async () => { const fillMediaQueue = async () => {
// If queue is already being filled or has items, don't fetch more // If queue is already being filled or has items, don't fetch more
if (isLoading || mediaQueue.length >= 3) return; if (isLoading || mediaQueue.length >= 5) return;
// Determine how many more items we need // Determine how many more items we need
const itemsNeeded = 3 - mediaQueue.length; const itemsNeeded = 5 - mediaQueue.length;
// Fetch the items one by one // Fetch the items one by one
for (let i = 0; i < itemsNeeded; i++) { for (let i = 0; i < itemsNeeded; i++) {
@@ -110,6 +117,7 @@ const AdminDashboard = ({ token, onLogout }: AdminDashboardProps) => {
fillMediaQueue(); fillMediaQueue();
}, [mediaQueue.length]); }, [mediaQueue.length]);
const handleAction = async (action: 'approve' | 'reject') => { const handleAction = async (action: 'approve' | 'reject') => {
if (!currentMedia) return; if (!currentMedia) return;
@@ -170,102 +178,112 @@ const AdminDashboard = ({ token, onLogout }: AdminDashboardProps) => {
return ( return (
<div className="min-h-screen bg-gradient-to-br from-slate-50 to-slate-100"> <div className="min-h-screen bg-gradient-to-br from-slate-50 to-slate-100">
{/* Header */} {/* Header */}
<div className="bg-white shadow-sm border-b"> <div className="bg-white shadow-sm border-b">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="flex justify-between items-center h-16"> <div className="flex justify-between items-center h-16">
<h1 className="text-xl font-semibold text-slate-800">Admin Dashboard</h1> <h1 className="text-xl font-semibold text-slate-800">Admin Dashboard</h1>
<Button <Button
variant="outline" variant="outline"
onClick={onLogout} onClick={onLogout}
className="flex items-center gap-2" className="flex items-center gap-2"
> >
<LogOut className="w-4 h-4" /> <LogOut className="w-4 h-4" />
Logout Logout
</Button> </Button>
</div> </div>
</div>
</div>
{/* Main Content */}
<div className="flex items-center justify-center min-h-[calc(100vh-4rem)] p-8">
<Card className="max-w-2xl w-full shadow-lg">
<CardContent className="p-8">
{isLoading && mediaQueue.length === 0 ? (
<div className="flex flex-col items-center justify-center py-16">
<Loader2 className="w-8 h-8 animate-spin text-slate-600 mb-4" />
<p className="text-slate-600">Loading media...</p>
</div>
) : currentMedia ? (
<div className="space-y-6">
{/* Image */}
<div className="flex justify-center">
<img
src={currentMedia.preview_url}
alt="Media to review"
className="max-w-full max-h-96 rounded-lg shadow-md object-contain"
onError={(e) => {
// Fallback to remote URL if preview fails
const target = e.target as HTMLImageElement;
target.src = currentMedia.remote_url;
}}
/>
</div>
{/* Media Info */}
<div className="text-center text-sm text-slate-600">
<p>Media ID: {currentMedia.id}</p>
<p>Post ID: {currentMedia.PostID}</p>
<p className="text-xs text-slate-400 mt-1">
{mediaQueue.length > 1 ? `${mediaQueue.length - 1} more item(s) pre-loaded` : 'Loading more items...'}
</p>
</div>
{/* Status Message */}
{statusMessage && (
<div className="text-center">
<p className="text-lg font-medium text-slate-700">{statusMessage}</p>
</div> </div>
)} </div>
{/* Action Buttons */} {/* Main Content */}
<div className="flex gap-4 justify-center"> <div className="flex items-center justify-center min-h-[calc(100vh-4rem)] p-8">
<Button <Card className="max-w-2xl w-full shadow-lg">
onClick={() => handleAction('reject')} <CardContent className="p-8">
disabled={isProcessing} {isLoading && mediaQueue.length === 0 ? (
variant="destructive" <div className="flex flex-col items-center justify-center py-16">
className="flex items-center gap-2 px-8 py-3" <Loader2 className="w-8 h-8 animate-spin text-slate-600 mb-4" />
> <p className="text-slate-600">Loading media...</p>
<X className="w-5 h-5" /> </div>
Reject ) : currentMedia ? (
</Button> <div className="space-y-6">
<Button {/* Image */}
onClick={() => handleAction('approve')} <div className="flex justify-center">
disabled={isProcessing} <img
className="flex items-center gap-2 px-8 py-3 bg-green-600 hover:bg-green-700" src={currentMedia.preview_url}
> alt="Media to review"
<Check className="w-5 h-5" /> className="max-w-full max-h-96 … object-contain"
Approve onError={(e) => {
</Button> const imgEl = e.currentTarget;
if (!imgEl.dataset.fallbackTried) {
imgEl.dataset.fallbackTried = 'true';
imgEl.src = currentMedia.remote_url;
} else {
// both preview AND remote have failed — drop it
setMediaQueue(queue =>
queue.filter(item => item.id !== currentMedia.id)
);
}
}}
/>
</div>
{/* Media Info */}
<div className="text-center text-sm text-slate-600">
<p>Media ID: {currentMedia.id}</p>
<p>Post ID: {currentMedia.PostID}</p>
<p className="text-xs text-slate-400 mt-1">
{mediaQueue.length > 1 ? `${mediaQueue.length - 1} more item(s) pre-loaded` : 'Loading more items...'}
</p>
</div>
{/* Status Message */}
{statusMessage && (
<div className="text-center">
<p className="text-lg font-medium text-slate-700">{statusMessage}</p>
</div>
)}
{/* Action Buttons */}
<div className="flex gap-4 justify-center">
<Button
onClick={() => handleAction('reject')}
disabled={isProcessing}
variant="destructive"
className="flex items-center gap-2 px-8 py-3"
>
<X className="w-5 h-5" />
Reject
</Button>
<Button
onClick={() => handleAction('approve')}
disabled={isProcessing}
className="flex items-center gap-2 px-8 py-3 bg-green-600 hover:bg-green-700"
>
<Check className="w-5 h-5" />
Approve
</Button>
</div>
</div>
) : (
<div className="text-center py-16">
<p className="text-lg text-slate-600">No media available for review</p>
<Button
onClick={fillMediaQueue}
className="mt-4"
variant="outline"
>
Refresh
</Button>
</div>
)}
</CardContent>
</Card>
</div> </div>
</div>
) : (
<div className="text-center py-16">
<p className="text-lg text-slate-600">No media available for review</p>
<Button
onClick={fillMediaQueue}
className="mt-4"
variant="outline"
>
Refresh
</Button>
</div>
)}
</CardContent>
</Card>
</div>
</div> </div>
); );
}; };
export default AdminDashboard; export default AdminDashboard;