fixed create key click twice bug (#5095)

* fixed create key click twice bug

* clean up

Author: chitalian

web/components/templates/quickstart/quickstartPage.tsx

@@ -17,13 +17,12 @@ import {
   Loader,
   Mail,
   MessageSquare,
-  MoveUpRight,
   Send,
   UserPlus,
   Zap,
 } from "lucide-react";
 import Link from "next/link";
-import { useEffect, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 import { useOrgOnboarding } from "../../../services/hooks/useOrgOnboarding";
 import { useOrg } from "../../layout/org/organizationContext";
 import { QuickstartStepCard } from "../../onboarding/QuickstartStep";
@@ -59,10 +58,9 @@ const QuickstartPage = () => {
   const { setNotification } = useNotification();
   const { addKey } = useKeys();
   const [quickstartKey, setQuickstartKey] = useLocalStorage<string | undefined>(
-    `${org?.currentOrg?.id}_quickstartKey`,
+    "quickstartKey",
     undefined,
   );
-  const [isCreatingKey, setIsCreatingKey] = useState(false);
   const [isProviderSheetOpen, setIsProviderSheetOpen] = useState(false);
   const [isPaymentModalOpen, setIsPaymentModalOpen] = useState(false);
   const [isHelixDialogOpen, setIsHelixDialogOpen] = useState(false);
@@ -103,27 +101,29 @@ const QuickstartPage = () => {
     });
   }, []);
 
-  const handleCreateKey = async () => {
+  const handleCreateKey = useCallback(async () => {
     try {
       let isEu = false;
       if (typeof window !== "undefined") {
         isEu = window.location.hostname.includes("eu.");
       }
-      setIsCreatingKey(true);
-      const { apiKey } = await addKey.mutateAsync({
-        permission: "rw",
-        keyName: "Quickstart",
-        isEu,
-      });
-      if (apiKey) {
-        setQuickstartKey(apiKey);
-      }
+
+      addKey.mutateAsync(
+        {
+          permission: "rw",
+          keyName: "Quickstart",
+          isEu,
+        },
+        {
+          onSuccess: (key) => {
+            setQuickstartKey(key.apiKey);
+          },
+        },
+      );
     } catch (error) {
       console.error("Failed to create API key:", error);
-    } finally {
-      setIsCreatingKey(false);
     }
-  };
+  }, [addKey, setQuickstartKey]);
 
   const handleHelixSubmit = (message: string) => {
     const helpMessage = {
@@ -312,13 +312,16 @@ const QuickstartPage = () => {
                   </div>
 
                   {/* BYOK Option - Simple text link */}
-                  <div className="flex items-center justify-start pl-4 pt-4 pb-2">
+                  <div className="flex items-center justify-start pb-2 pt-4">
                     <button
                       onClick={() => setIsProviderSheetOpen(true)}
                       className="group flex items-center gap-1 text-sm text-muted-foreground transition-colors hover:text-foreground"
                     >
                       <span>or use your own provider keys</span>
-                      <ArrowRight size={14} className="transition-transform group-hover:translate-x-0.5" />
+                      <ArrowRight
+                        size={14}
+                        className="transition-transform group-hover:translate-x-0.5"
+                      />
                       {hasProviderKeys && (
                         <span className="ml-1 inline-flex items-center gap-1 rounded-full bg-green-100 px-2 py-0.5 text-xs font-medium text-green-700 dark:bg-green-900 dark:text-green-300">
                           <Zap size={10} />
@@ -354,11 +357,11 @@ const QuickstartPage = () => {
                     <div className="flex flex-col gap-2">
                       <Button
                         onClick={handleCreateKey}
-                        disabled={isCreatingKey}
+                        disabled={addKey.isPending}
                         className="w-fit"
                         variant="outline"
                       >
-                        {isCreatingKey ? "Creating..." : "Create API Key"}
+                        {addKey.isPending ? "Creating..." : "Create API Key"}
                       </Button>
                     </div>
                   )}
@@ -588,7 +591,10 @@ const QuickstartPage = () => {
           <SheetHeader>
             <SheetTitle>Add Provider Keys</SheetTitle>
             <SheetDescription>
-              Add your own provider API keys (BYOK). When "Enable for AI Gateway" is toggled on, requests will attempt to use these keys first, then automatically fall back to Helicone credits if they fail.
+              Add your own provider API keys (BYOK). When "Enable for AI
+              Gateway" is toggled on, requests will attempt to use these keys
+              first, then automatically fall back to Helicone credits if they
+              fail.
             </SheetDescription>
           </SheetHeader>
           <div className="mt-6">

web/services/hooks/localStorage.tsx

@@ -8,20 +8,26 @@ export function useLocalStorage<T>(
   onNothingStored?: (_setStored: (_t: T) => void) => void,
 ): [T, (_t: T) => void] {
   const org = useOrg();
-
   const orgId = org?.currentOrg?.id ?? "";
-  const orgKey = `${orgId}_${key}`; // Updated key to include orgId
+  const orgKey = `${orgId}_${key}`;
   const [storedValue, setStoredValue] = useState<T>(initialValue);
 
   const setValue = useCallback(
     (value: T) => {
       try {
-        const valueToStore =
-          value instanceof Function ? value(storedValue) : value;
-        setStoredValue(valueToStore);
-        if (typeof window !== "undefined") {
-          window.localStorage.setItem(orgKey, JSON.stringify(valueToStore)); // Use orgKey
-        }
+        setStoredValue((prevValue) => {
+          const valueToStore =
+            value instanceof Function ? value(prevValue) : value;
+          // Only save to localStorage if we have a valid orgId and the value is not undefined
+          if (
+            typeof window !== "undefined" &&
+            orgId &&
+            valueToStore !== undefined
+          ) {
+            window.localStorage.setItem(orgKey, JSON.stringify(valueToStore));
+          }
+          return valueToStore;
+        });
       } catch (error) {
         logger.error(
           {
@@ -32,13 +38,19 @@ export function useLocalStorage<T>(
         );
       }
     },
-    [orgKey, storedValue], // Updated dependency to orgKey
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [key, orgKey, orgId],
   );
 
   useEffect(() => {
+    // Only try to read from localStorage if we have a valid orgId
+    if (!orgId) {
+      return;
+    }
+
     try {
       const item =
-        typeof window !== "undefined" && window.localStorage.getItem(orgKey); // Use orgKey
+        typeof window !== "undefined" && window.localStorage.getItem(orgKey);
       if (!item) {
         throw new Error("No item stored");
       }
@@ -50,7 +62,7 @@ export function useLocalStorage<T>(
       onNothingStored && onNothingStored(setValue);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [orgKey, onNothingStored, setValue]); // Updated dependency to orgKey
+  }, [key, orgKey, onNothingStored, setValue, orgId]);
 
   return [storedValue, setValue];
 }