43 lines
1.5 KiB
TypeScript
43 lines
1.5 KiB
TypeScript
import { useEffect, useRef, useState } from 'react';
|
|
|
|
type Photo = { id: number; file_path?: string; thumbnail_path?: string; created_at?: string };
|
|
|
|
export function usePollGalleryDelta(slug: string) {
|
|
const [photos, setPhotos] = useState<Photo[]>([]);
|
|
const [loading, setLoading] = useState(true);
|
|
const [newCount, setNewCount] = useState(0);
|
|
const latestAt = useRef<string | null>(null);
|
|
const timer = useRef<number | null>(null);
|
|
|
|
async function fetchDelta() {
|
|
const qs = latestAt.current ? `?since=${encodeURIComponent(latestAt.current)}` : '';
|
|
const res = await fetch(`/api/v1/events/${encodeURIComponent(slug)}/photos${qs}`, {
|
|
headers: { 'Cache-Control': 'no-store' },
|
|
});
|
|
if (res.status === 304) return;
|
|
const json = await res.json();
|
|
if (Array.isArray(json.data)) {
|
|
const added = json.data.length;
|
|
const merged = latestAt.current ? [...json.data, ...photos] : json.data;
|
|
if (added > 0 && latestAt.current) setNewCount((c) => c + added);
|
|
setPhotos(merged);
|
|
}
|
|
if (json.latest_photo_at) latestAt.current = json.latest_photo_at;
|
|
setLoading(false);
|
|
}
|
|
|
|
useEffect(() => {
|
|
setLoading(true);
|
|
latestAt.current = null;
|
|
setPhotos([]);
|
|
fetchDelta();
|
|
timer.current = window.setInterval(fetchDelta, 30_000);
|
|
return () => {
|
|
if (timer.current) window.clearInterval(timer.current);
|
|
};
|
|
}, [slug]);
|
|
|
|
function acknowledgeNew() { setNewCount(0); }
|
|
return { loading, photos, newCount, acknowledgeNew };
|
|
}
|