48 lines
1.9 KiB
TypeScript
48 lines
1.9 KiB
TypeScript
import React from 'react';
|
|
import { useSearchParams } from 'react-router-dom';
|
|
import { deletePhoto, featurePhoto, getEventPhotos, unfeaturePhoto } from '../api';
|
|
import { Button } from '@/components/ui/button';
|
|
|
|
export default function EventPhotosPage() {
|
|
const [sp] = useSearchParams();
|
|
const id = Number(sp.get('id'));
|
|
const [rows, setRows] = React.useState<any[]>([]);
|
|
const [loading, setLoading] = React.useState(true);
|
|
|
|
async function load() {
|
|
setLoading(true);
|
|
try { setRows(await getEventPhotos(id)); } finally { setLoading(false); }
|
|
}
|
|
React.useEffect(() => { load(); }, [id]);
|
|
|
|
async function onFeature(p: any) { await featurePhoto(p.id); load(); }
|
|
async function onUnfeature(p: any) { await unfeaturePhoto(p.id); load(); }
|
|
async function onDelete(p: any) { await deletePhoto(p.id); load(); }
|
|
|
|
return (
|
|
<div className="mx-auto max-w-5xl p-4">
|
|
<h1 className="mb-3 text-lg font-semibold">Fotos moderieren</h1>
|
|
{loading && <div>Lade…</div>}
|
|
<div className="grid grid-cols-2 gap-3 sm:grid-cols-3 md:grid-cols-4">
|
|
{rows.map((p) => (
|
|
<div key={p.id} className="rounded border p-2">
|
|
<img src={p.thumbnail_path || p.file_path} className="mb-2 aspect-square w-full rounded object-cover" />
|
|
<div className="flex items-center justify-between text-sm">
|
|
<span>❤ {p.likes_count}</span>
|
|
<div className="flex gap-1">
|
|
{p.is_featured ? (
|
|
<Button size="sm" variant="secondary" onClick={() => onUnfeature(p)}>Unfeature</Button>
|
|
) : (
|
|
<Button size="sm" variant="secondary" onClick={() => onFeature(p)}>Feature</Button>
|
|
)}
|
|
<Button size="sm" variant="destructive" onClick={() => onDelete(p)}>Löschen</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|