Use Services

1// useServices — the services-list data, no markup: load one page of visitor-visible services and
2// page with the returned offset. queryServices returns an OBJECT ({ services, total, nextOffset }),
3// NOT a bare array — destructure it (calling .map on the object throws). `total === 0` is the
4// empty-state signal; `services === null` means still loading.
5import { useState, useEffect, useCallback } from "react";
6import { queryServices } from "@/rest/wix-bookings-services";
7
8export function useServices({ limit = 24 } = {}) {
9  const [services, setServices] = useState(null);
10  const [total, setTotal] = useState(null);
11  const [nextOffset, setNextOffset] = useState(null);
12
13  useEffect(() => {
14    queryServices({ limit }).then(({ services, total, nextOffset }) => {
15      setServices(services);
16      setTotal(total);
17      setNextOffset(nextOffset);
18    });
19  }, [limit]);
20
21  const loadMore = useCallback(() => {
22    if (nextOffset == null) return;                        // null on the last page
23    queryServices({ limit, offset: nextOffset }).then(({ services: more, nextOffset: next }) => {
24      setServices((s) => [...(s || []), ...more]);
25      setNextOffset(next);
26    });
27  }, [limit, nextOffset]);
28
29  return { services, total, nextOffset, loadMore };
30}