@trustless-work/blocks 0.0.1

package/templates/escrows/escrows-by-role/useEscrowsByRole.shared.ts

@@ -0,0 +1,336 @@
+"use client";
+
+import React from "react";
+import { startOfDay, endOfDay, format } from "date-fns";
+import type { DateRange as DayPickerDateRange } from "react-day-picker";
+import { usePathname, useRouter, useSearchParams } from "next/navigation";
+import type { SortingState } from "@tanstack/react-table";
+import { useWalletContext } from "../../wallet-kit/WalletProvider";
+import { useEscrowsByRoleQuery } from "../../tanstak/useEscrowsByRoleQuery";
+import type { GetEscrowsFromIndexerByRoleParams } from "@trustless-work/escrow";
+import { GetEscrowsFromIndexerResponse as Escrow } from "@trustless-work/escrow/types";
+
+export type EscrowOrderBy = "createdAt" | "updatedAt" | "amount";
+export type EscrowOrderDirection = "asc" | "desc";
+export type EscrowType = "single-release" | "multi-release" | "all";
+export type EscrowStatus =
+  | "working"
+  | "pendingRelease"
+  | "released"
+  | "resolved"
+  | "inDispute"
+  | "all";
+export type DateRange = DayPickerDateRange;
+
+export function useEscrowsByRole() {
+  const { walletAddress } = useWalletContext();
+  const router = useRouter();
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+
+  const [page, setPage] = React.useState<number>(1);
+  const [orderBy, setOrderBy] = React.useState<EscrowOrderBy>("createdAt");
+  const [orderDirection, setOrderDirection] =
+    React.useState<EscrowOrderDirection>("desc");
+  const [sorting, setSorting] = React.useState<SortingState>([]);
+  const [title, setTitle] = React.useState<string>("");
+  const [engagementId, setEngagementId] = React.useState<string>("");
+  const [isActive, setIsActive] = React.useState<boolean>(true);
+  const [validateOnChain, setValidateOnChain] = React.useState<boolean>(true);
+  const [type, setType] = React.useState<EscrowType>("all");
+  const [status, setStatus] = React.useState<EscrowStatus>("all");
+  const [minAmount, setMinAmount] = React.useState<string>("");
+  const [maxAmount, setMaxAmount] = React.useState<string>("");
+  const [dateRange, setDateRange] = React.useState<DateRange>({
+    from: undefined,
+    to: undefined,
+  });
+  const [role, setRole] =
+    React.useState<GetEscrowsFromIndexerByRoleParams["role"]>("approver");
+
+  function useDebouncedValue<T>(value: T, delayMs: number) {
+    const [debounced, setDebounced] = React.useState<T>(value);
+    React.useEffect(() => {
+      const id = setTimeout(() => setDebounced(value), delayMs);
+      return () => clearTimeout(id);
+    }, [value, delayMs]);
+    return debounced;
+  }
+
+  const debouncedTitle = useDebouncedValue(title, 400);
+  const debouncedEngagementId = useDebouncedValue(engagementId, 400);
+  const debouncedMinAmount = useDebouncedValue(minAmount, 400);
+  const debouncedMaxAmount = useDebouncedValue(maxAmount, 400);
+
+  React.useEffect(() => {
+    if (!searchParams) return;
+    const qp = new URLSearchParams(searchParams.toString());
+    const qpPage = Number(qp.get("page") || 1);
+    const qpOrderBy = (qp.get("orderBy") as EscrowOrderBy) || "createdAt";
+    const qpOrderDir =
+      (qp.get("orderDirection") as EscrowOrderDirection) || "desc";
+    const qpTitle = qp.get("title") || "";
+    const qpEng = qp.get("engagementId") || "";
+    const qpActive = qp.get("isActive");
+    const qpValidateOnChain = qp.get("validateOnChain");
+    const qpType = (qp.get("type") as EscrowType) || "all";
+    const qpStatus = (qp.get("status") as EscrowStatus) || "all";
+    const qpMin = qp.get("minAmount") || "";
+    const qpMax = qp.get("maxAmount") || "";
+    const qpStart = qp.get("startDate");
+    const qpEnd = qp.get("endDate");
+    const qpRole = qp.get("role");
+
+    setPage(Number.isFinite(qpPage) && qpPage > 0 ? qpPage : 1);
+    setOrderBy(
+      ["createdAt", "updatedAt", "amount"].includes(qpOrderBy)
+        ? qpOrderBy
+        : "createdAt"
+    );
+    setOrderDirection(qpOrderDir === "asc" ? "asc" : "desc");
+    setTitle(qpTitle);
+    setEngagementId(qpEng);
+    setIsActive(qpActive === null ? true : qpActive === "true");
+    setValidateOnChain(
+      qpValidateOnChain === null ? true : qpValidateOnChain === "true"
+    );
+    setType(qpType);
+    setStatus(qpStatus);
+    setMinAmount(qpMin);
+    setMaxAmount(qpMax);
+    setDateRange({
+      from: qpStart ? new Date(qpStart) : undefined,
+      to: qpEnd ? new Date(qpEnd) : undefined,
+    });
+    setRole(
+      (qpRole as GetEscrowsFromIndexerByRoleParams["role"]) || "approver"
+    );
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const debouncedSearchParams = useDebouncedValue(
+    {
+      page,
+      orderBy,
+      orderDirection,
+      title: debouncedTitle,
+      engagementId: debouncedEngagementId,
+      isActive,
+      validateOnChain,
+      type,
+      status,
+      minAmount: debouncedMinAmount,
+      maxAmount: debouncedMaxAmount,
+      startDate: dateRange.from
+        ? startOfDay(dateRange.from).toISOString()
+        : undefined,
+      endDate: dateRange.to ? endOfDay(dateRange.to).toISOString() : undefined,
+      role,
+    },
+    200
+  );
+
+  React.useEffect(() => {
+    if (!pathname) return;
+    const qp = new URLSearchParams();
+    qp.set("page", String(debouncedSearchParams.page ?? 1));
+    qp.set("orderBy", String(debouncedSearchParams.orderBy ?? "createdAt"));
+    qp.set(
+      "orderDirection",
+      String(debouncedSearchParams.orderDirection ?? "desc")
+    );
+    if (debouncedSearchParams.title)
+      qp.set("title", debouncedSearchParams.title);
+    if (debouncedSearchParams.engagementId)
+      qp.set("engagementId", debouncedSearchParams.engagementId);
+    qp.set("isActive", String(debouncedSearchParams.isActive));
+    qp.set("validateOnChain", String(debouncedSearchParams.validateOnChain));
+    if (type && type !== "all") qp.set("type", type);
+    if (status && status !== "all") qp.set("status", status);
+    if (debouncedSearchParams.minAmount)
+      qp.set("minAmount", String(debouncedSearchParams.minAmount));
+    if (debouncedSearchParams.maxAmount)
+      qp.set("maxAmount", String(debouncedSearchParams.maxAmount));
+    if (debouncedSearchParams.startDate)
+      qp.set("startDate", String(debouncedSearchParams.startDate));
+    if (debouncedSearchParams.endDate)
+      qp.set("endDate", String(debouncedSearchParams.endDate));
+    if (debouncedSearchParams.role)
+      qp.set("role", String(debouncedSearchParams.role));
+
+    router.replace(`${pathname}?${qp.toString()}`);
+  }, [
+    pathname,
+    router,
+    debouncedSearchParams.page,
+    debouncedSearchParams.orderBy,
+    debouncedSearchParams.orderDirection,
+    debouncedSearchParams.title,
+    debouncedSearchParams.engagementId,
+    debouncedSearchParams.isActive,
+    debouncedSearchParams.validateOnChain,
+    type,
+    status,
+    debouncedSearchParams.minAmount,
+    debouncedSearchParams.maxAmount,
+    debouncedSearchParams.startDate,
+    debouncedSearchParams.endDate,
+    debouncedSearchParams.role,
+  ]);
+
+  const formattedRangeLabel = React.useMemo(() => {
+    if (!dateRange?.from && !dateRange?.to) return "Date range";
+    const fromStr = dateRange.from
+      ? format(dateRange.from, "LLL dd, yyyy")
+      : "";
+    const toStr = dateRange.to ? format(dateRange.to, "LLL dd, yyyy") : "";
+    return [fromStr, toStr].filter(Boolean).join(" – ") || "Date range";
+  }, [dateRange]);
+
+  const params = React.useMemo(() => {
+    return {
+      roleAddress: walletAddress ?? "",
+      role,
+      page,
+      orderBy,
+      orderDirection,
+      title: debouncedTitle || undefined,
+      engagementId: debouncedEngagementId || undefined,
+      isActive,
+      validateOnChain,
+      type: (type === "all" ? undefined : type) as
+        | undefined
+        | "single-release"
+        | "multi-release",
+      status: (status === "all" ? undefined : status) as
+        | undefined
+        | "working"
+        | "pendingRelease"
+        | "released"
+        | "resolved"
+        | "inDispute",
+      minAmount: debouncedMinAmount ? Number(debouncedMinAmount) : undefined,
+      maxAmount: debouncedMaxAmount ? Number(debouncedMaxAmount) : undefined,
+      startDate: dateRange.from
+        ? startOfDay(dateRange.from).toISOString()
+        : undefined,
+      endDate: dateRange.to ? endOfDay(dateRange.to).toISOString() : undefined,
+      enabled: Boolean(walletAddress && role),
+    };
+  }, [
+    walletAddress,
+    role,
+    page,
+    orderBy,
+    orderDirection,
+    debouncedTitle,
+    debouncedEngagementId,
+    isActive,
+    validateOnChain,
+    type,
+    status,
+    debouncedMinAmount,
+    debouncedMaxAmount,
+    dateRange,
+  ]);
+
+  const query = useEscrowsByRoleQuery(params);
+  const nextPageQuery = useEscrowsByRoleQuery({ ...params, page: page + 1 });
+
+  const didMountValidateRef = React.useRef(false);
+  React.useEffect(() => {
+    if (!didMountValidateRef.current) {
+      didMountValidateRef.current = true;
+      return;
+    }
+    query.refetch();
+    nextPageQuery.refetch();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [validateOnChain]);
+
+  const onClearFilters = React.useCallback(() => {
+    setTitle("");
+    setEngagementId("");
+    setIsActive(true);
+    setValidateOnChain(true);
+    setType("all");
+    setStatus("all");
+    setMinAmount("");
+    setMaxAmount("");
+    setDateRange({ from: undefined, to: undefined });
+    setPage(1);
+    setOrderBy("createdAt");
+    setOrderDirection("desc");
+    setSorting([]);
+    setRole("approver");
+  }, []);
+
+  const handleSortingChange = React.useCallback(
+    (updater: SortingState | ((old: SortingState) => SortingState)) => {
+      setSorting((prev) => {
+        const next =
+          typeof updater === "function"
+            ? (updater as (old: SortingState) => SortingState)(prev)
+            : updater;
+        const first = next[0];
+        if (first) {
+          if (
+            first.id === "amount" ||
+            first.id === "createdAt" ||
+            first.id === "updatedAt"
+          ) {
+            setOrderBy(first.id as EscrowOrderBy);
+            setOrderDirection(first.desc ? "desc" : "asc");
+          }
+        } else {
+          setOrderBy("createdAt");
+          setOrderDirection("desc");
+        }
+        return next;
+      });
+    },
+    []
+  );
+
+  return {
+    walletAddress,
+    data: query.data ?? ([] as Escrow[]),
+    isLoading: query.isLoading,
+    isError: query.isError,
+    isFetching: query.isFetching,
+    refetch: query.refetch,
+    nextData: nextPageQuery.data ?? [],
+    isFetchingNext: nextPageQuery.isFetching,
+    page,
+    setPage,
+    orderBy,
+    setOrderBy,
+    orderDirection,
+    setOrderDirection,
+    sorting,
+    setSorting,
+    title,
+    setTitle,
+    engagementId,
+    setEngagementId,
+    isActive,
+    setIsActive,
+    validateOnChain,
+    setValidateOnChain,
+    type,
+    setType,
+    status,
+    setStatus,
+    minAmount,
+    setMinAmount,
+    maxAmount,
+    setMaxAmount,
+    dateRange,
+    setDateRange,
+    formattedRangeLabel,
+    role,
+    setRole,
+    onClearFilters,
+    handleSortingChange,
+  } as const;
+}