Use Events List

1// useEventsList — all listing logic, no markup: load the category menu + upcoming count, list
2// events (all or filtered by category), and page with offset "load more". The data shapes here are
3// the bug-prone part — keep them verbatim; the Events page only renders what this returns.
4//   • queryEvents / listEventsByCategory return { events, total, offset, nextOffset } — an OBJECT,
5//     not a bare array; nextOffset is null when there are no more pages.
6//   • queryEventCategories returns { categories, total }; render category.name,
7//     key/filter by category.id, count = counts.assignedEventsCount.
8//   • total === 0 → the whole catalog is empty; show the "publish events" empty state.
9import { useState, useEffect } from "react";
10import {
11  queryEvents, listEventsByCategory, queryEventCategories, countUpcomingEvents,
12} from "@/rest/wix-events-browse";
13
14export function useEventsList({ pageSize = 24 } = {}) {
15  const [events, setEvents] = useState([]);
16  const [nextOffset, setNextOffset] = useState(null); // offset for the next page; null when no more
17  const [categories, setCategories] = useState([]);   // category menu
18  const [active, setActive] = useState(null);          // selected category id, or null for "all"
19  const [total, setTotal] = useState(null);            // upcoming count across the whole catalog
20  const [loading, setLoading] = useState(true);
21
22  useEffect(() => {
23    countUpcomingEvents().then(setTotal);
24    queryEventCategories().then(({ categories }) => setCategories(categories));
25  }, []);
26
27  useEffect(() => {
28    setLoading(true);
29    const load = active
30      ? listEventsByCategory(active, { limit: pageSize })
31      : queryEvents({ limit: pageSize });
32    load.then(({ events, nextOffset }) => {
33      setEvents(events);
34      setNextOffset(nextOffset);
35      setLoading(false);
36    });
37  }, [active, pageSize]);
38
39  const loadMore = () => {
40    if (nextOffset === null) return;
41    const load = active
42      ? listEventsByCategory(active, { limit: pageSize, offset: nextOffset })
43      : queryEvents({ limit: pageSize, offset: nextOffset });
44    load.then(({ events: more, nextOffset: next }) => {
45      setEvents((e) => [...e, ...more]);
46      setNextOffset(next);
47    });
48  };
49
50  return {
51    events, categories, active, setActive,
52    total, loading, hasMore: nextOffset !== null, loadMore,
53  };
54}