From e9d9891d75fb6d921286a1d00d9771c006170dd7 Mon Sep 17 00:00:00 2001
From: anovazzi1 <otavio2204@gmail.com>
Date: Fri, 10 Nov 2023 20:02:51 -0300
Subject: [PATCH] fix(StorePage/index.tsx): fix key prop in MarketCardComponent
 to use unique identifier from item instead of index to avoid rendering issues
 feat(StorePage/index.tsx): add conditional check to getSavedComponents() if
 hasApiKey is true to only fetch saved components when API key is available

---
 src/frontend/src/pages/StorePage/index.tsx | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/frontend/src/pages/StorePage/index.tsx b/src/frontend/src/pages/StorePage/index.tsx
index 7e0d19d1d..304a025a0 100644
--- a/src/frontend/src/pages/StorePage/index.tsx
+++ b/src/frontend/src/pages/StorePage/index.tsx
@@ -49,6 +49,9 @@ export default function StorePage(): JSX.Element {
 
   useEffect(() => {
     handleGetComponents();
+    if (hasApiKey) {
+      getSavedComponents();
+    }
   }, [
     searchText,
     tabActive,
@@ -266,11 +269,11 @@ export default function StorePage(): JSX.Element {
 
             <div className="grid w-full gap-4 md:grid-cols-2 lg:grid-cols-3">
               {!loading || searchData.length !== 0 ? (
-                searchData.map((item, idx) => {
+                searchData.map((item) => {
                   return (
                     <>
                       <MarketCardComponent
-                        key={idx}
+                        key={item.id}
                         data={item}
                         authorized={!loadingSaved}
                         disabled={loading}