Refactor: TanStack-Query-Daten-Layer + useDialog (Phase 3b)
- @tanstack/react-query (v5) als zentraler Daten-Layer; QueryClientProvider in main.tsx (retry 1, kein refetchOnWindowFocus, staleTime 5s). - lib/queries.ts: Domänen-Hooks (useHealth/useSystemStatus/useServices/ useModels/useRouting/useJobs/useTokenStats/useAgentStatus/useUpdates/ useDiscover/useConnect/useMemory) + zentrale Query-Keys (qk) + invalidate. Gleicher Key = eine Anfrage über alle Views (Dedup), einheitliches Polling. - lib/useDialog.tsx: ein Hook für Alert/Confirm/Prompt statt 5x dupliziertem Dialog-State + showAlert/showConfirm. - api.ts: TokenStats + ModelsResp typisiert. - Migriert auf Hooks/useDialog: App, SystemView, AgentView, ConnectView, MemoryView (manuelles useEffect+setInterval entfernt; Mutationen invalidieren gezielt die Query-Keys). Verifiziert: tsc grün, Build grün, alle migrierten Views ohne Konsolenfehler, Live-Daten (CPU/RAM/Dienste) rendern korrekt. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
@@ -1,24 +1,18 @@
|
||||
import { useEffect, useState } from "react"
|
||||
import { useState } from "react"
|
||||
import { Check, Copy, Terminal, Info, Globe, FolderOpen } from "lucide-react"
|
||||
import { api, type ConnectResp } from "@/lib/api"
|
||||
import { useConnect } from "@/lib/queries"
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
export function ConnectView() {
|
||||
const [host, setHost] = useState(localStorage.getItem("mc_host") || "192.168.178.151")
|
||||
const [mcpPath, setMcpPath] = useState(localStorage.getItem("mc_mcp_path") || "")
|
||||
const [data, setData] = useState<ConnectResp | null>(null)
|
||||
const [active, setActive] = useState("cline")
|
||||
const [copied, setCopied] = useState(false)
|
||||
const [error, setError] = useState("")
|
||||
|
||||
useEffect(() => {
|
||||
const params = new URLSearchParams()
|
||||
params.set("host", host)
|
||||
if (mcpPath) params.set("mcp_path", mcpPath)
|
||||
api<ConnectResp>(`/api/connect?${params}`)
|
||||
.then(setData)
|
||||
.catch((e) => setError(String(e)))
|
||||
}, [host, mcpPath])
|
||||
const params = new URLSearchParams({ host })
|
||||
if (mcpPath) params.set("mcp_path", mcpPath)
|
||||
const { data, error: dataErr } = useConnect(params.toString())
|
||||
const error = dataErr ? String(dataErr) : ""
|
||||
|
||||
function saveHost(v: string) {
|
||||
setHost(v)
|
||||
|
||||
Reference in New Issue
Block a user