fix: infinite loop when checking cli status

This commit is contained in:
Kacper
2025-12-11 21:20:34 +01:00
parent c8a9ae64b6
commit 13de3131b7
2 changed files with 43 additions and 12 deletions

View File

@@ -65,22 +65,40 @@ export function ClaudeSetupStep({
const [apiKey, setApiKey] = useState(""); const [apiKey, setApiKey] = useState("");
const [showTokenModal, setShowTokenModal] = useState(false); const [showTokenModal, setShowTokenModal] = useState(false);
// Memoize API functions to prevent infinite loops
const statusApi = useCallback(
() => getElectronAPI().setup?.getClaudeStatus() || Promise.reject(),
[]
);
const installApi = useCallback(
() => getElectronAPI().setup?.installClaude() || Promise.reject(),
[]
);
const getStoreState = useCallback(
() => useSetupStore.getState().claudeCliStatus,
[]
);
// Use custom hooks // Use custom hooks
const { isChecking, checkStatus } = useCliStatus({ const { isChecking, checkStatus } = useCliStatus({
cliType: "claude", cliType: "claude",
statusApi: () => statusApi,
getElectronAPI().setup?.getClaudeStatus() || Promise.reject(),
setCliStatus: setClaudeCliStatus, setCliStatus: setClaudeCliStatus,
setAuthStatus: setClaudeAuthStatus, setAuthStatus: setClaudeAuthStatus,
}); });
const onInstallSuccess = useCallback(() => {
checkStatus();
}, [checkStatus]);
const { isInstalling, installProgress, install } = useCliInstallation({ const { isInstalling, installProgress, install } = useCliInstallation({
cliType: "claude", cliType: "claude",
installApi: () => installApi,
getElectronAPI().setup?.installClaude() || Promise.reject(),
onProgressEvent: getElectronAPI().setup?.onInstallProgress, onProgressEvent: getElectronAPI().setup?.onInstallProgress,
onSuccess: checkStatus, onSuccess: onInstallSuccess,
getStoreState: () => useSetupStore.getState().claudeCliStatus, getStoreState,
}); });
const { isSaving: isSavingOAuth, saveToken: saveOAuthToken } = useTokenSave({ const { isSaving: isSavingOAuth, saveToken: saveOAuthToken } = useTokenSave({

View File

@@ -1,6 +1,6 @@
"use client"; "use client";
import { useState, useEffect } from "react"; import { useState, useEffect, useCallback } from "react";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input"; import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label"; import { Label } from "@/components/ui/label";
@@ -58,21 +58,34 @@ export function CodexSetupStep({
const [showApiKeyInput, setShowApiKeyInput] = useState(false); const [showApiKeyInput, setShowApiKeyInput] = useState(false);
const [apiKey, setApiKey] = useState(""); const [apiKey, setApiKey] = useState("");
// Memoize API functions to prevent infinite loops
const statusApi = useCallback(
() => getElectronAPI().setup?.getCodexStatus() || Promise.reject(),
[]
);
const installApi = useCallback(
() => getElectronAPI().setup?.installCodex() || Promise.reject(),
[]
);
// Use custom hooks // Use custom hooks
const { isChecking, checkStatus } = useCliStatus({ const { isChecking, checkStatus } = useCliStatus({
cliType: "codex", cliType: "codex",
statusApi: () => statusApi,
getElectronAPI().setup?.getCodexStatus() || Promise.reject(),
setCliStatus: setCodexCliStatus, setCliStatus: setCodexCliStatus,
setAuthStatus: setCodexAuthStatus, setAuthStatus: setCodexAuthStatus,
}); });
const onInstallSuccess = useCallback(() => {
checkStatus();
}, [checkStatus]);
const { isInstalling, installProgress, install } = useCliInstallation({ const { isInstalling, installProgress, install } = useCliInstallation({
cliType: "codex", cliType: "codex",
installApi: () => installApi,
getElectronAPI().setup?.installCodex() || Promise.reject(),
onProgressEvent: getElectronAPI().setup?.onInstallProgress, onProgressEvent: getElectronAPI().setup?.onInstallProgress,
onSuccess: checkStatus, onSuccess: onInstallSuccess,
}); });
const { isSaving: isSavingKey, saveToken: saveApiKeyToken } = useTokenSave({ const { isSaving: isSavingKey, saveToken: saveApiKeyToken } = useTokenSave({