From 923c270627d24e8ae02ce0431f0a22b58cbb5692 Mon Sep 17 00:00:00 2001
From: Parwat Kunwar <parwatkunwar08@gmail.com>
Date: Sat, 8 Feb 2025 08:04:09 -0400
Subject: [PATCH] Avoid API call for each document while rendering documents
 table (#194)

Use boolean `open` to call ActionMenu.

Though by default `ActionMenu` doesnt get renderred in UI, but the
component is getting called. doing `API` request to individual document
by `id`


![409813050-0348dae3-38f6-4d5e-af15-1457eba123c5](https://github.com/user-attachments/assets/50294270-af53-45dc-8139-9650b001128b)

Using the flag will fix this unwanted API call. And only the document by
`id` api call will happen when a user clicks on the Action button
(DEFAULT BEHAVIOUR)
---
 .../documents/components/DocumentsTableRow.tsx | 18 ++++++++++--------
 1 file changed, 10 insertions(+), 8 deletions(-)

diff --git a/Client/src/app/documents/components/DocumentsTableRow.tsx b/Client/src/app/documents/components/DocumentsTableRow.tsx
index e117754..e952190 100644
--- a/Client/src/app/documents/components/DocumentsTableRow.tsx
+++ b/Client/src/app/documents/components/DocumentsTableRow.tsx
@@ -132,14 +132,16 @@ const DocumentsTableRow = ({ document, onDelete }: Props) => {
 						height={20}
 					/>
 				</IconButton>
-				<ActionMenu
-					open={open}
-					anchorEl={anchorEl}
-					onDelete={onDelete}
-					documentId={document.document_id}
-					onClose={handleMenuClose}
-					onAnalytics={routetoDocument}
-				/>
+				{open && (
+					<ActionMenu
+						open={open}
+						anchorEl={anchorEl}
+						onDelete={onDelete}
+						documentId={document.document_id}
+						onClose={handleMenuClose}
+						onAnalytics={routetoDocument}
+					/>
+				)}
 			</TableCell>
 		</TableRow>
 	);