Merge pull request #115 from brolag/feature/code-cleanup

Feature/code cleanup

.gitignore

@@ -35,3 +35,7 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+# instructions
+instructions/
+instructions/*

src/@types/escrow.entity.ts

@@ -1,4 +1,4 @@
-import { CreatedAt, UpdatedAt } from "./dates.entity";
+import type { CreatedAt, UpdatedAt } from "./dates.entity";
 
 export type MilestoneStatus = "completed" | "approved" | "pending";
 
@@ -87,3 +87,8 @@ export type EditMilestonesPayload = {
   escrow: EscrowPayload;
   signer: string;
 };
+
+export interface BalanceItem {
+  address: string;
+  balance: number;
+}

src/components/modules/escrow/hooks/my-escrows.hook.ts

@@ -2,7 +2,7 @@ import {
   useGlobalAuthenticationStore,
   useGlobalBoundedStore,
 } from "@/core/store/data";
-import { useState, useEffect, useMemo } from "react";
+import { useState, useEffect, useMemo, useRef, useCallback } from "react";
 
 interface useMyEscrowsProps {
   type: string;
@@ -19,6 +19,9 @@ const useMyEscrows = ({ type }: useMyEscrowsProps) => {
   const [expandedRows, setExpandedRows] = useState<string[]>([]);
   const [currentPage, setCurrentPage] = useState(1);
   const [itemsPerPage, setItemsPerPage] = useState(15);
+  const [isLoading, setIsLoading] = useState(false);
+  const fetchingRef = useRef(false);
+  const lastFetchKey = useRef("");
 
   const totalPages = Math.ceil(totalEscrows / itemsPerPage);
 
@@ -31,15 +34,40 @@ const useMyEscrows = ({ type }: useMyEscrowsProps) => {
     );
   }, [escrows, currentPage, itemsPerPage]);
 
+  const memoizedFetchEscrows = useCallback(async () => {
+    if (!address || fetchingRef.current) return;
+    const fetchKey = `${address}-${type}`;
+    if (fetchKey === lastFetchKey.current) return;
+    try {
+      fetchingRef.current = true;
+      lastFetchKey.current = fetchKey;
+      setIsLoading(true);
+      await fetchAllEscrows({ address, type });
+    } catch (error) {
+      console.error("[MyEscrows] Error fetching escrows:", error);
+    } finally {
+      setIsLoading(false);
+      fetchingRef.current = false;
+    }
+  }, [address, type, fetchAllEscrows]);
+
   useEffect(() => {
-    const fetchEscrows = async () => {
-      if (address) {
-        fetchAllEscrows({ address, type });
-      }
+    let timeoutId: NodeJS.Timeout;
+
+    const debouncedFetch = () => {
+      clearTimeout(timeoutId);
+      timeoutId = setTimeout(() => {
+        memoizedFetchEscrows();
+      }, 100);
     };
 
-    fetchEscrows();
-  }, []);
+    debouncedFetch();
+
+    return () => {
+      clearTimeout(timeoutId);
+      fetchingRef.current = false;
+    };
+  }, [memoizedFetchEscrows]);
 
   const toggleRowExpansion = (rowId: string) => {
     setExpandedRows((prev) =>
@@ -66,6 +94,7 @@ const useMyEscrows = ({ type }: useMyEscrowsProps) => {
     itemsPerPageOptions,
     toggleRowExpansion,
     expandedRows,
+    isLoading,
   };
 };
 

src/components/modules/escrow/services/escrow.service.ts

@@ -0,0 +1,75 @@
+import type {
+  Escrow,
+  EscrowPayload,
+  BalanceItem,
+} from "@/@types/escrow.entity";
+import {
+  getAllEscrowsByUser,
+  updateEscrow,
+  addEscrow,
+} from "../server/escrow.firebase";
+import { getBalance } from "./get-balance.service";
+
+export const fetchAllEscrows = async ({
+  address,
+  type = "approver",
+}: {
+  address: string;
+  type: string;
+}): Promise<Escrow[]> => {
+  const escrowsByUser = await getAllEscrowsByUser({ address, type });
+  const contractIds = escrowsByUser.data.map(
+    (escrow: Escrow) => escrow.contractId,
+  );
+
+  if (!Array.isArray(contractIds)) {
+    throw new Error("contractIds is not a valid array.");
+  }
+
+  const response = await getBalance(address, contractIds);
+  const balances = response.data as BalanceItem[];
+
+  return Promise.all(
+    escrowsByUser.data.map(async (escrow: Escrow) => {
+      const matchedBalance = balances.find(
+        (item) => item.address === escrow.contractId,
+      );
+
+      const plainBalance = matchedBalance ? matchedBalance.balance : 0;
+      const currentBalance = escrow.balance ? Number(escrow.balance) : 0;
+
+      if (currentBalance !== plainBalance) {
+        await updateEscrow({
+          escrowId: escrow.id,
+          payload: { balance: String(plainBalance) },
+        });
+        escrow.balance = String(plainBalance);
+      }
+
+      return escrow;
+    }),
+  );
+};
+
+export const addNewEscrow = async (
+  payload: EscrowPayload,
+  address: string,
+  contractId: string,
+): Promise<Escrow | undefined> => {
+  const response = await addEscrow({ payload, address, contractId });
+  return response?.data;
+};
+
+export const updateExistingEscrow = async ({
+  escrowId,
+  payload,
+}: {
+  escrowId: string;
+  payload: Partial<EscrowPayload>;
+}): Promise<Escrow | undefined> => {
+  const response = await updateEscrow({
+    escrowId,
+    payload: { ...payload, balance: String(payload.balance || 0) },
+  });
+  return response?.data;
+};

src/components/modules/escrow/ui/dialogs/EditMilestonesDialog.tsx

@@ -68,8 +68,11 @@ const EditMilestonesDialog = ({
                     <TooltipInfo content="Key stages or deliverables for the escrow." />
                   </FormLabel>
                   {milestones.map((milestone, index) => (
-                    <>
-                      <div key={index} className="flex items-center space-x-4">
+                    <div
+                      key={`milestone-${index}`}
+                      className="flex flex-col gap-4"
+                    >
+                      <div className="flex items-center space-x-4">
                         {milestone.flag ? (
                           <Badge className="uppercase max-w-24">Approved</Badge>
                         ) : (
@@ -117,7 +120,7 @@ const EditMilestonesDialog = ({
                           Add Item
                         </Button>
                       )}
-                    </>
+                    </div>
                   ))}
                 </div>
               </div>