tm_panel/src/components/Tables/customers/useCustomerListPresenter.ts

"use client";

import { ConfirmationModalProps } from "@/components/ui/ConfirmationModal";
import {
  useAssignCompany,
  useCustomersInfiniteQuery,
  useDeleteCustomerQuery,
} from "@/hooks/queries";
import useDebounce from "@/hooks/useDebounce";
import { TAssignCustomerToCompanyCredentials, TCustomer } from "@/lib/api";
import { usePathname, useRouter } from "next/navigation";
import { ChangeEvent, useEffect, useRef, useState } from "react";
import { useInView } from "react-intersection-observer";
import { z } from "zod";

const useCustomerListPresenter = () => {
  const deleteModal = useRef<HTMLDialogElement | null>(null);
  const [isAssignCompanyModalOpen, setIsAssignCompanyModalOpen] =
    useState(false);
  const { inView } = useInView({ threshold: 0.5 });
  const [selectedCompanies, setSelectedCompanies] =
    useState<TAssignCustomerToCompanyCredentials | null>(null);
  const [currentCustomer, setCurrentCustomer] = useState<TCustomer | null>(
    null,
  );
  const [modalConfig, setModalConfig] = useState<
    Partial<ConfirmationModalProps>
  >({});
  const [isModalOpen, setIsModalOpen] = useState(false);
  const pathName = usePathname();
  const [search, setSearch] = useState("");
  const [params, setParams] = useState<Record<string, any>>({
    sort: "created_at",
  });
  const router = useRouter();
  const debouncedSearch = useDebounce(search, 1000);
  const {
    data,
    error,
    isPending,
    isError,
    fetchNextPage,
    hasNextPage,
    isFetchingNextPage,
  } = useCustomersInfiniteQuery(params);
  useEffect(() => {
    if (inView && hasNextPage && data && data.pages.length < 5) {
      fetchNextPage();
    }
  }, [inView, hasNextPage, data, fetchNextPage]);
  const { mutate: deleteCustomer } = useDeleteCustomerQuery(() =>
    setIsModalOpen(false),
  );
  const { mutate: assignSelectedCompanies } = useAssignCompany(
    currentCustomer?.id ?? "",
    () => {
      setIsAssignCompanyModalOpen(false);
    },
  );
  useEffect(() => {
    const result = z.string().safeParse(debouncedSearch);
    if (result.success) {
      setParams((prevParams) => ({
        ...prevParams,
      }));
    }
  }, [debouncedSearch]);
  const handleFilterChange = (e: ChangeEvent<HTMLInputElement>) => {
    setSearch(e.target.value);
  };
  const columns = [
    "full name",
    "email",
    "created at",
    "type",
    "status",
    "company",
    "actions",
  ];
  const onConfirmDelete = () => {
    if (currentCustomer) {
      deleteCustomer(currentCustomer.id);
    }
  };
  const customers = data?.pages.flatMap((page) => page.data.customers) ?? [];
  return {
    hasNextPage,
    fetchNextPage,
    allCustomers: customers,
    currentCustomer,
    deleteCustomer,
    deleteModal,
    error,
    handleFilterChange,
    isError,
    isFetchingNextPage,
    columns,
    data,
    isPending,
    search,
    setCurrentCustomer,
    selectedCompanies,
    setSelectedCompanies,
    onConfirmDelete,
    setIsAssignCompanyModalOpen,
    isAssignCompanyModalOpen,
    assignSelectedCompanies,
    pathName,
    router,
    modalConfig,
    setModalConfig,
    isModalOpen,
    setIsModalOpen,
  };
};

export default useCustomerListPresenter;