From badbe9b43cff04ca3917477ef7f6f68427b0f83a Mon Sep 17 00:00:00 2001
From: nicolaschapur <95246792+nicolaschapur@users.noreply.github.com>
Date: Mon, 17 Jun 2024 14:14:00 -0300
Subject: [PATCH] [NC]: Get updated storage recordings fix (#54)

* [NC]: Adds recursive function to get updated storage recordings

* [NC]: Adds dependency fix

* [NC]: Adds dependency fix

* [NC]: Adds dependency fix

* [NC]: correct error handling

* [NC]: biome fixes
---
 .../content/Popup/CreateDemo/DemoItem.tsx     |  8 +++--
 .../content/Popup/CreateDemo/index.tsx        | 29 ++++++++++++++-----
 2 files changed, 27 insertions(+), 10 deletions(-)

diff --git a/apps/mocksi-lite/content/Popup/CreateDemo/DemoItem.tsx b/apps/mocksi-lite/content/Popup/CreateDemo/DemoItem.tsx
index 660e3f2c..77bbd420 100644
--- a/apps/mocksi-lite/content/Popup/CreateDemo/DemoItem.tsx
+++ b/apps/mocksi-lite/content/Popup/CreateDemo/DemoItem.tsx
@@ -26,9 +26,11 @@ const DemoItem = ({
 
 	return (
 		<div className={"flex justify-between w-full px-6"}>
-			<div>
-				<TextField variant={"title"}>{demo_name}</TextField>
-				<TextField>{customer_name}</TextField>
+			<div className={"w-[200px]"}>
+				<TextField variant={"title"} className={"truncate"}>
+					{demo_name}
+				</TextField>
+				<TextField className={"truncate"}>{customer_name}</TextField>
 			</div>
 			<div className={"flex gap-3"}>
 				<Button
diff --git a/apps/mocksi-lite/content/Popup/CreateDemo/index.tsx b/apps/mocksi-lite/content/Popup/CreateDemo/index.tsx
index 9087ed1f..08f5144b 100644
--- a/apps/mocksi-lite/content/Popup/CreateDemo/index.tsx
+++ b/apps/mocksi-lite/content/Popup/CreateDemo/index.tsx
@@ -18,15 +18,30 @@ const CreateDemo = ({
 	setState,
 }: CreateDemoProps) => {
 	const [recordings, setRecordings] = useState<Recording[]>([]);
+
+	const getRecordings = async () => {
+		let continueFetching = true;
+		while (continueFetching) {
+			try {
+				const results = await chrome.storage.local.get(["recordings"]);
+				const newRecordings = JSON.parse(results.recordings ?? "{}");
+				if (newRecordings.length !== recordings.length) {
+					setRecordings(newRecordings);
+					continueFetching = false; // Stop the loop if recordings have been updated
+				}
+			} catch (error) {
+				continueFetching = false; // Stop the loop in case of an error
+				console.error("Failed to fetch recordings:", error);
+			}
+		}
+	};
+
+	// biome-ignore lint/correctness/useExhaustiveDependencies:
 	useEffect(() => {
-		try {
-			chrome.storage.local.get(["recordings"], (results) =>
-				setRecordings(JSON.parse(results.recordings) ?? []),
-			);
-		} catch (error) {
-			console.error("Error retrieving recordings from storage:", error);
+		if (!createForm) {
+			getRecordings();
 		}
-	}, []);
+	}, [createForm]);
 
 	const handleCancelClick = (recordings?: Recording[]) => {
 		if (recordings) {