Use Services

1// React binding of the services store (wix/bookings/services-store.ts) — the listing state lives
2// there, framework-free; this hook subscribes to one instance per mounted listing and exposes its
3// state and actions under one name. SSR-friendly: pass server-fetched data as `initial*` (Astro
4// frontmatter / server component) and no client fetch happens for the first paint; a SPA passes
5// nothing. Astro islands and React SPAs use this; a static page, Vue, or Svelte uses the store directly.
6import { useEffect, useRef, useSyncExternalStore } from "react";
7import { createServicesStore, type ServicesState, type ServicesStore, type ServicesStoreOptions } from "../../wix/bookings/services-store";
8
9export type UseServicesOptions = ServicesStoreOptions;
10
11export type UseServices = ServicesState & Pick<ServicesStore, "setActiveCategoryId" | "setActiveLocationId" | "loadMore">;
12
13export function useServices(options: UseServicesOptions = {}): UseServices {
14  const ref = useRef<ServicesStore | null>(null);
15  if (!ref.current) ref.current = createServicesStore(options);
16  const store = ref.current;
17  useEffect(() => {
18    store.start();
19    return () => store.stop();
20  }, [store]);
21  const state = useSyncExternalStore(store.subscribe, store.getState, store.getState);
22  return { ...state, setActiveCategoryId: store.setActiveCategoryId, setActiveLocationId: store.setActiveLocationId, loadMore: store.loadMore };
23}