From 59095f5ff3d27178ca768a480a46d4e9f005500b Mon Sep 17 00:00:00 2001
From: jatin009v <jatingupta009v@gmail.com>
Date: Fri, 25 Oct 2024 19:16:21 +0530
Subject: [PATCH] Error Handling: Always check if the response is OK (i.e.,
 response.status is 200) before trying to parse response.json(). Otherwise, it
 might throw an error.

Type Inference for variant: Specifying a type for variant could help clarify that it's optional and ensure type-safety.

Button Styling: Ensuring accessibility and consistent styling by applying appropriate roles and ARIA attributes, especially on interactive elements.
---
 components/apiKey/api-dialog.tsx | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/components/apiKey/api-dialog.tsx b/components/apiKey/api-dialog.tsx
index 0bfa9b37..818fe3d6 100644
--- a/components/apiKey/api-dialog.tsx
+++ b/components/apiKey/api-dialog.tsx
@@ -19,7 +19,7 @@ export function ApiKeyDialog({
   className = "",
 }: {
   project_id: string;
-  variant?: any;
+  variant?: string;
   className?: string;
 }) {
   const [busy, setBusy] = useState<boolean>(false);
@@ -52,6 +52,7 @@ export function ApiKeyDialog({
                 {apiKey}
               </p>
               <button
+                aria-label="Copy API Key"
                 className="bg-primary-foreground rounded-md"
                 onClick={() => {
                   navigator.clipboard.writeText(apiKey);
@@ -77,6 +78,9 @@ export function ApiKeyDialog({
                     },
                   }
                 );
+                if (!response.ok) {
+                  throw new Error("Failed to generate API key");
+                }
                 const result = await response.json();
                 setApiKey(result.data.apiKey);
                 toast("Copy your API Key!", {
@@ -93,7 +97,7 @@ export function ApiKeyDialog({
             }}
             disabled={busy}
           >
-            Generate API Key
+            {busy ? "Generating..." : "Generate API Key"}
           </Button>
         </DialogFooter>
       </DialogContent>