From f829ec735c8eca363b10ed6648bcc7f74a2bdec5 Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Fri, 17 Nov 2023 10:45:05 -0300
Subject: [PATCH] Fix API key management and heart and add buttons

---
 src/frontend/src/components/cardComponent/index.tsx | 8 +++++---
 src/frontend/src/contexts/storeContext.tsx          | 2 +-
 src/frontend/src/modals/StoreApiKeyModal/index.tsx  | 3 +--
 src/frontend/src/pages/StorePage/index.tsx          | 2 +-
 4 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/src/frontend/src/components/cardComponent/index.tsx b/src/frontend/src/components/cardComponent/index.tsx
index 867d58b53..8ae0df35f 100644
--- a/src/frontend/src/components/cardComponent/index.tsx
+++ b/src/frontend/src/components/cardComponent/index.tsx
@@ -251,7 +251,7 @@ export default function CollectionCardComponent({
                   content={authorized ? "Like" : "Please review your API key."}
                 >
                   <Button
-                    disabled={loadingLike || !authorized}
+                    disabled={loadingLike}
                     variant="ghost"
                     size="xs"
                     className={
@@ -282,11 +282,13 @@ export default function CollectionCardComponent({
                   }
                 >
                   <Button
+                    disabled={loading}
                     variant="ghost"
                     size="xs"
                     className={
                       "whitespace-nowrap" +
-                      (!authorized ? " cursor-not-allowed" : "")
+                      (!authorized ? " cursor-not-allowed" : "") +
+                      (!loading ? " p-0.5" : "")
                     }
                     onClick={() => {
                       if (loading || !authorized) {
@@ -298,7 +300,7 @@ export default function CollectionCardComponent({
                     <IconComponent
                       name={loading ? "Loader2" : "Plus"}
                       className={classNames(
-                        loading ? "h-5 w-5 animate-spin" : "h-6 w-6 p-0.5",
+                        loading ? "h-5 w-5 animate-spin" : "h-6 w-6",
                         !authorized ? " text-ring" : ""
                       )}
                     />
diff --git a/src/frontend/src/contexts/storeContext.tsx b/src/frontend/src/contexts/storeContext.tsx
index 5449f8a83..d1078de04 100644
--- a/src/frontend/src/contexts/storeContext.tsx
+++ b/src/frontend/src/contexts/storeContext.tsx
@@ -53,7 +53,7 @@ export function StoreProvider({ children }) {
 
   useEffect(() => {
     fetchApiData();
-  }, [storeChecked, validApiKey, apiKey]);
+  }, [storeChecked, apiKey]);
 
   return (
     <StoreContext.Provider
diff --git a/src/frontend/src/modals/StoreApiKeyModal/index.tsx b/src/frontend/src/modals/StoreApiKeyModal/index.tsx
index 04cd2065f..8684a191d 100644
--- a/src/frontend/src/modals/StoreApiKeyModal/index.tsx
+++ b/src/frontend/src/modals/StoreApiKeyModal/index.tsx
@@ -14,7 +14,7 @@ export default function StoreApiKeyModal({ children }: StoreApiKeyType) {
   const [open, setOpen] = useState(false);
   const { setSuccessData, setErrorData } = useContext(alertContext);
   const { storeApiKey } = useContext(AuthContext);
-  const { hasApiKey, setHasApiKey, validApiKey } = useContext(StoreContext);
+  const { hasApiKey, validApiKey } = useContext(StoreContext);
   const [apiKeyValue, setApiKeyValue] = useState("");
 
   const handleSaveKey = () => {
@@ -25,7 +25,6 @@ export default function StoreApiKeyModal({ children }: StoreApiKeyType) {
             title: "Success! Your API Key has been saved.",
           });
           storeApiKey(apiKeyValue);
-          setHasApiKey(true);
           setOpen(false);
         },
         (error) => {
diff --git a/src/frontend/src/pages/StorePage/index.tsx b/src/frontend/src/pages/StorePage/index.tsx
index 447ea4369..cdd52a9b8 100644
--- a/src/frontend/src/pages/StorePage/index.tsx
+++ b/src/frontend/src/pages/StorePage/index.tsx
@@ -90,7 +90,7 @@ export default function StorePage(): JSX.Element {
   }
 
   function handleGetComponents() {
-    if (!hasApiKey) return;
+    if (!hasApiKey || loadingApiKey) return;
     setLoading(true);
     getStoreComponents({
       page: pageIndex,