shoc-frontend-new/src/pages/calendar/list/useEvents.js

import { useState, useEffect, useCallback, useMemo } from "react";
import { fetchEventsPaged } from "../api";

const useEvents = () => {
  const [rows, setRows] = useState([]);
  const [search, setSearch] = useState("");
  const [page, setPage] = useState(1);
  const [pageSize, setPageSize] = useState(12);
  const [totalCount, setTotalCount] = useState(0);
  const [loading, setLoading] = useState(true);
  const [err, setErr] = useState("");

  const reload = useCallback(() => {
    setLoading(true);
    setErr("");
    fetchEventsPaged({ search, page, pageSize })
      .then(({ rows, totalCount }) => {
        setRows(rows);
        setTotalCount(totalCount);
      })
      .catch((e) => setErr(e.message || "Failed to load"))
      .finally(() => setLoading(false));
  }, [search, page, pageSize]);

  useEffect(() => {
    reload();
  }, [reload]);

  return useMemo(
    () => ({
      rows,
      search,
      setSearch,
      page,
      setPage,
      pageSize,
      setPageSize,
      totalCount,
      loading,
      err,
      reload,
    }),
    [rows, search, page, pageSize, totalCount, loading, err, reload]
  );
};

export default useEvents;