77 lines
2.8 KiB
TypeScript
77 lines
2.8 KiB
TypeScript
import { useEffect, useState } from 'react';
|
|
import { Link } from 'react-router-dom';
|
|
|
|
import { DashboardLayout } from '../../components/dashboard/DashboardLayout';
|
|
import { GalleryCard } from '../../components/dashboard/GalleryCard';
|
|
import { deleteGallery, getGalleries } from '../../lib/api';
|
|
import type { GallerySummary } from '../../types/gallery';
|
|
|
|
export default function GalleriesPage() {
|
|
const [galleries, setGalleries] = useState<GallerySummary[]>([]);
|
|
const [loading, setLoading] = useState(true);
|
|
const [error, setError] = useState('');
|
|
|
|
useEffect(() => {
|
|
getGalleries()
|
|
.then(setGalleries)
|
|
.catch((reason: unknown) =>
|
|
setError(reason instanceof Error ? reason.message : 'Could not load galleries.'),
|
|
)
|
|
.finally(() => setLoading(false));
|
|
}, []);
|
|
|
|
async function removeGallery(gallery: GallerySummary) {
|
|
if (!window.confirm(`Delete "${gallery.title}"? This cannot be undone.`)) return;
|
|
try {
|
|
await deleteGallery(gallery.id);
|
|
setGalleries((current) => current.filter((item) => item.id !== gallery.id));
|
|
} catch (reason) {
|
|
setError(reason instanceof Error ? reason.message : 'Could not delete gallery.');
|
|
}
|
|
}
|
|
|
|
return (
|
|
<DashboardLayout>
|
|
<div className="studio-page">
|
|
<header className="studio-page__header studio-page__header--compact">
|
|
<div>
|
|
<p className="studio-kicker">Workspace / Galleries</p>
|
|
<h1 className="studio-display">Galleries</h1>
|
|
<p className="studio-page__lede">All delivery records.</p>
|
|
</div>
|
|
<Link className="platform-button platform-button--accent" to="/dashboard/galleries/new">
|
|
<span>New Gallery</span>
|
|
<span aria-hidden="true">+</span>
|
|
</Link>
|
|
</header>
|
|
{error && <p className="studio-alert studio-alert--error">{error}</p>}
|
|
{loading ? (
|
|
<div className="studio-list-loading">
|
|
<span />
|
|
<span />
|
|
<span />
|
|
</div>
|
|
) : galleries.length === 0 ? (
|
|
<div className="studio-empty studio-empty--large">
|
|
<span className="studio-empty__mark">+</span>
|
|
<div>
|
|
<h3>No galleries yet</h3>
|
|
<p>No galleries. Create one to start.</p>
|
|
</div>
|
|
<Link className="platform-button platform-button--dark" to="/dashboard/galleries/new">
|
|
<span>Create Gallery</span>
|
|
<span aria-hidden="true">↗</span>
|
|
</Link>
|
|
</div>
|
|
) : (
|
|
<div className="gallery-grid">
|
|
{galleries.map((gallery) => (
|
|
<GalleryCard key={gallery.id} gallery={gallery} onDelete={removeGallery} />
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</DashboardLayout>
|
|
);
|
|
}
|