refactor: move from next js to vite and tanstack router

apps/ui/src/components/views/settings-view/api-keys/hooks/use-api-key-management.ts

@@ -0,0 +1,190 @@
+import { useState, useEffect } from "react";
+import { useAppStore } from "@/store/app-store";
+import { getElectronAPI } from "@/lib/electron";
+import type { ProviderConfigParams } from "@/config/api-providers";
+
+interface TestResult {
+  success: boolean;
+  message: string;
+}
+
+interface ApiKeyStatus {
+  hasAnthropicKey: boolean;
+  hasGoogleKey: boolean;
+}
+
+/**
+ * Custom hook for managing API key state and operations
+ * Handles input values, visibility toggles, connection testing, and saving
+ */
+export function useApiKeyManagement() {
+  const { apiKeys, setApiKeys } = useAppStore();
+
+  // API key values
+  const [anthropicKey, setAnthropicKey] = useState(apiKeys.anthropic);
+  const [googleKey, setGoogleKey] = useState(apiKeys.google);
+
+  // Visibility toggles
+  const [showAnthropicKey, setShowAnthropicKey] = useState(false);
+  const [showGoogleKey, setShowGoogleKey] = useState(false);
+
+  // Test connection states
+  const [testingConnection, setTestingConnection] = useState(false);
+  const [testResult, setTestResult] = useState<TestResult | null>(null);
+  const [testingGeminiConnection, setTestingGeminiConnection] = useState(false);
+  const [geminiTestResult, setGeminiTestResult] = useState<TestResult | null>(
+    null
+  );
+
+  // API key status from environment
+  const [apiKeyStatus, setApiKeyStatus] = useState<ApiKeyStatus | null>(null);
+
+  // Save state
+  const [saved, setSaved] = useState(false);
+
+  // Sync local state with store
+  useEffect(() => {
+    setAnthropicKey(apiKeys.anthropic);
+    setGoogleKey(apiKeys.google);
+  }, [apiKeys]);
+
+  // Check API key status from environment on mount
+  useEffect(() => {
+    const checkApiKeyStatus = async () => {
+      const api = getElectronAPI();
+      if (api?.setup?.getApiKeys) {
+        try {
+          const status = await api.setup.getApiKeys();
+          if (status.success) {
+            setApiKeyStatus({
+              hasAnthropicKey: status.hasAnthropicKey,
+              hasGoogleKey: status.hasGoogleKey,
+            });
+          }
+        } catch (error) {
+          console.error("Failed to check API key status:", error);
+        }
+      }
+    };
+    checkApiKeyStatus();
+  }, []);
+
+  // Test Anthropic/Claude connection
+  const handleTestAnthropicConnection = async () => {
+    setTestingConnection(true);
+    setTestResult(null);
+
+    try {
+      const response = await fetch("/api/claude/test", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({ apiKey: anthropicKey }),
+      });
+
+      const data = await response.json();
+
+      if (response.ok && data.success) {
+        setTestResult({
+          success: true,
+          message: data.message || "Connection successful! Claude responded.",
+        });
+      } else {
+        setTestResult({
+          success: false,
+          message: data.error || "Failed to connect to Claude API.",
+        });
+      }
+    } catch {
+      setTestResult({
+        success: false,
+        message: "Network error. Please check your connection.",
+      });
+    } finally {
+      setTestingConnection(false);
+    }
+  };
+
+  // Test Google/Gemini connection
+  const handleTestGeminiConnection = async () => {
+    setTestingGeminiConnection(true);
+    setGeminiTestResult(null);
+
+    try {
+      const response = await fetch("/api/gemini/test", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({ apiKey: googleKey }),
+      });
+
+      const data = await response.json();
+
+      if (response.ok && data.success) {
+        setGeminiTestResult({
+          success: true,
+          message: data.message || "Connection successful! Gemini responded.",
+        });
+      } else {
+        setGeminiTestResult({
+          success: false,
+          message: data.error || "Failed to connect to Gemini API.",
+        });
+      }
+    } catch {
+      setGeminiTestResult({
+        success: false,
+        message: "Network error. Please check your connection.",
+      });
+    } finally {
+      setTestingGeminiConnection(false);
+    }
+  };
+
+  // Save API keys
+  const handleSave = () => {
+    setApiKeys({
+      anthropic: anthropicKey,
+      google: googleKey,
+    });
+    setSaved(true);
+    setTimeout(() => setSaved(false), 2000);
+  };
+
+  // Build provider config params for buildProviderConfigs
+  const providerConfigParams: ProviderConfigParams = {
+    apiKeys,
+    anthropic: {
+      value: anthropicKey,
+      setValue: setAnthropicKey,
+      show: showAnthropicKey,
+      setShow: setShowAnthropicKey,
+      testing: testingConnection,
+      onTest: handleTestAnthropicConnection,
+      result: testResult,
+    },
+    google: {
+      value: googleKey,
+      setValue: setGoogleKey,
+      show: showGoogleKey,
+      setShow: setShowGoogleKey,
+      testing: testingGeminiConnection,
+      onTest: handleTestGeminiConnection,
+      result: geminiTestResult,
+    },
+  };
+
+  return {
+    // Provider config params for buildProviderConfigs
+    providerConfigParams,
+
+    // API key status from environment
+    apiKeyStatus,
+
+    // Save handler and state
+    handleSave,
+    saved,
+  };
+}