Initial commit for new panel

src/components/Tables/customers/useCustomerListPresenter.ts

@@ -0,0 +1,115 @@
+"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 assignToCompanyModal = useRef<HTMLDialogElement | null>(null);
+  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 ?? "",
+    () => {
+      assignToCompanyModal.current?.close();
+    },
+  );
+  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,
+    assignToCompanyModal,
+    assignSelectedCompanies,
+    pathName,
+    router,
+    modalConfig,
+    setModalConfig,
+    isModalOpen,
+    setIsModalOpen,
+  };
+};
+
+export default useCustomerListPresenter;