diff options
Diffstat (limited to 'makima/frontend/src/hooks')
| -rw-r--r-- | makima/frontend/src/hooks/useDirectiveDetail.ts | 125 | ||||
| -rw-r--r-- | makima/frontend/src/hooks/useDirectives.ts | 298 |
2 files changed, 0 insertions, 423 deletions
diff --git a/makima/frontend/src/hooks/useDirectiveDetail.ts b/makima/frontend/src/hooks/useDirectiveDetail.ts deleted file mode 100644 index 1167242..0000000 --- a/makima/frontend/src/hooks/useDirectiveDetail.ts +++ /dev/null @@ -1,125 +0,0 @@ -import { useState, useCallback, useEffect } from "react"; -import { - getDirective, - getDirectiveGraph, - startDirective, - pauseDirective, - resumeDirective, - stopDirective, - type DirectiveWithProgress, - type DirectiveGraphResponse, - type StartDirectiveResponse, -} from "../lib/api"; - -interface UseDirectiveDetailResult { - directive: DirectiveWithProgress | null; - graph: DirectiveGraphResponse | null; - loading: boolean; - error: string | null; - refresh: () => Promise<void>; - start: () => Promise<StartDirectiveResponse | null>; - pause: () => Promise<boolean>; - resume: () => Promise<boolean>; - stop: () => Promise<boolean>; -} - -export function useDirectiveDetail(directiveId: string | undefined): UseDirectiveDetailResult { - const [directive, setDirective] = useState<DirectiveWithProgress | null>(null); - const [graph, setGraph] = useState<DirectiveGraphResponse | null>(null); - const [loading, setLoading] = useState(false); - const [error, setError] = useState<string | null>(null); - - const fetchDetail = useCallback(async () => { - if (!directiveId) { - setDirective(null); - setGraph(null); - return; - } - - setLoading(true); - setError(null); - try { - const [d, g] = await Promise.all([ - getDirective(directiveId), - getDirectiveGraph(directiveId).catch(() => null), - ]); - setDirective(d); - setGraph(g); - } catch (err) { - console.error("Failed to fetch directive detail:", err); - setError(err instanceof Error ? err.message : "Failed to fetch directive"); - setDirective(null); - setGraph(null); - } finally { - setLoading(false); - } - }, [directiveId]); - - useEffect(() => { - fetchDetail(); - }, [fetchDetail]); - - const start = useCallback(async (): Promise<StartDirectiveResponse | null> => { - if (!directiveId) return null; - try { - const response = await startDirective(directiveId); - await fetchDetail(); - return response; - } catch (err) { - console.error("Failed to start directive:", err); - setError(err instanceof Error ? err.message : "Failed to start directive"); - return null; - } - }, [directiveId, fetchDetail]); - - const pause = useCallback(async (): Promise<boolean> => { - if (!directiveId) return false; - try { - await pauseDirective(directiveId); - await fetchDetail(); - return true; - } catch (err) { - console.error("Failed to pause directive:", err); - setError(err instanceof Error ? err.message : "Failed to pause directive"); - return false; - } - }, [directiveId, fetchDetail]); - - const resume = useCallback(async (): Promise<boolean> => { - if (!directiveId) return false; - try { - await resumeDirective(directiveId); - await fetchDetail(); - return true; - } catch (err) { - console.error("Failed to resume directive:", err); - setError(err instanceof Error ? err.message : "Failed to resume directive"); - return false; - } - }, [directiveId, fetchDetail]); - - const stop = useCallback(async (): Promise<boolean> => { - if (!directiveId) return false; - try { - await stopDirective(directiveId); - await fetchDetail(); - return true; - } catch (err) { - console.error("Failed to stop directive:", err); - setError(err instanceof Error ? err.message : "Failed to stop directive"); - return false; - } - }, [directiveId, fetchDetail]); - - return { - directive, - graph, - loading, - error, - refresh: fetchDetail, - start, - pause, - resume, - stop, - }; -} diff --git a/makima/frontend/src/hooks/useDirectives.ts b/makima/frontend/src/hooks/useDirectives.ts deleted file mode 100644 index 7ae24a5..0000000 --- a/makima/frontend/src/hooks/useDirectives.ts +++ /dev/null @@ -1,298 +0,0 @@ -import { useState, useCallback, useEffect, useRef } from "react"; -import { - listDirectives, - getDirective, - createDirective, - updateDirective, - archiveDirective, - startDirective, - pauseDirective, - resumeDirective, - stopDirective, - getDirectiveGraph, - subscribeToDirectiveEvents, - type DirectiveSummary, - type DirectiveWithProgress, - type DirectiveGraphResponse, - type DirectiveStatus, - type DirectiveEvent, - type CreateDirectiveRequest, - type UpdateDirectiveRequest, - type StartDirectiveResponse, -} from "../lib/api"; - -interface UseDirectivesResult { - directives: DirectiveSummary[]; - loading: boolean; - error: string | null; - refresh: () => Promise<void>; - createNewDirective: (req: CreateDirectiveRequest) => Promise<DirectiveWithProgress | null>; - updateExistingDirective: ( - directiveId: string, - req: UpdateDirectiveRequest - ) => Promise<DirectiveWithProgress | null>; - archiveExistingDirective: (directiveId: string) => Promise<boolean>; - getDirectiveById: (directiveId: string) => Promise<DirectiveWithProgress | null>; - getGraph: (directiveId: string) => Promise<DirectiveGraphResponse | null>; - start: (directiveId: string) => Promise<StartDirectiveResponse | null>; - pause: (directiveId: string) => Promise<boolean>; - resume: (directiveId: string) => Promise<boolean>; - stop: (directiveId: string) => Promise<boolean>; -} - -export function useDirectives(statusFilter?: DirectiveStatus): UseDirectivesResult { - const [directives, setDirectives] = useState<DirectiveSummary[]>([]); - const [loading, setLoading] = useState(true); - const [error, setError] = useState<string | null>(null); - - const fetchDirectives = useCallback(async () => { - setLoading(true); - setError(null); - try { - const response = await listDirectives(statusFilter); - setDirectives(response.directives ?? []); - } catch (err) { - console.error("Failed to fetch directives:", err); - setError(err instanceof Error ? err.message : "Failed to fetch directives"); - } finally { - setLoading(false); - } - }, [statusFilter]); - - useEffect(() => { - fetchDirectives(); - }, [fetchDirectives]); - - const createNewDirective = useCallback( - async (req: CreateDirectiveRequest): Promise<DirectiveWithProgress | null> => { - try { - const directive = await createDirective(req); - // Refresh the list - await fetchDirectives(); - // Return the full directive with progress - return await getDirective(directive.id); - } catch (err) { - console.error("Failed to create directive:", err); - setError(err instanceof Error ? err.message : "Failed to create directive"); - return null; - } - }, - [fetchDirectives] - ); - - const updateExistingDirective = useCallback( - async ( - directiveId: string, - req: UpdateDirectiveRequest - ): Promise<DirectiveWithProgress | null> => { - try { - await updateDirective(directiveId, req); - // Refresh the list - await fetchDirectives(); - // Return the updated directive - return await getDirective(directiveId); - } catch (err) { - console.error("Failed to update directive:", err); - setError(err instanceof Error ? err.message : "Failed to update directive"); - return null; - } - }, - [fetchDirectives] - ); - - const archiveExistingDirective = useCallback( - async (directiveId: string): Promise<boolean> => { - try { - await archiveDirective(directiveId); - // Refresh the list - await fetchDirectives(); - return true; - } catch (err) { - console.error("Failed to archive directive:", err); - setError(err instanceof Error ? err.message : "Failed to archive directive"); - return false; - } - }, - [fetchDirectives] - ); - - const getDirectiveById = useCallback( - async (directiveId: string): Promise<DirectiveWithProgress | null> => { - try { - return await getDirective(directiveId); - } catch (err) { - console.error("Failed to get directive:", err); - setError(err instanceof Error ? err.message : "Failed to get directive"); - return null; - } - }, - [] - ); - - const getGraph = useCallback( - async (directiveId: string): Promise<DirectiveGraphResponse | null> => { - try { - return await getDirectiveGraph(directiveId); - } catch (err) { - console.error("Failed to get directive graph:", err); - setError(err instanceof Error ? err.message : "Failed to get directive graph"); - return null; - } - }, - [] - ); - - const start = useCallback( - async (directiveId: string): Promise<StartDirectiveResponse | null> => { - try { - const response = await startDirective(directiveId); - await fetchDirectives(); - return response; - } catch (err) { - console.error("Failed to start directive:", err); - setError(err instanceof Error ? err.message : "Failed to start directive"); - return null; - } - }, - [fetchDirectives] - ); - - const pause = useCallback( - async (directiveId: string): Promise<boolean> => { - try { - await pauseDirective(directiveId); - await fetchDirectives(); - return true; - } catch (err) { - console.error("Failed to pause directive:", err); - setError(err instanceof Error ? err.message : "Failed to pause directive"); - return false; - } - }, - [fetchDirectives] - ); - - const resume = useCallback( - async (directiveId: string): Promise<boolean> => { - try { - await resumeDirective(directiveId); - await fetchDirectives(); - return true; - } catch (err) { - console.error("Failed to resume directive:", err); - setError(err instanceof Error ? err.message : "Failed to resume directive"); - return false; - } - }, - [fetchDirectives] - ); - - const stop = useCallback( - async (directiveId: string): Promise<boolean> => { - try { - await stopDirective(directiveId); - await fetchDirectives(); - return true; - } catch (err) { - console.error("Failed to stop directive:", err); - setError(err instanceof Error ? err.message : "Failed to stop directive"); - return false; - } - }, - [fetchDirectives] - ); - - return { - directives, - loading, - error, - refresh: fetchDirectives, - createNewDirective, - updateExistingDirective, - archiveExistingDirective, - getDirectiveById, - getGraph, - start, - pause, - resume, - stop, - }; -} - -/** Hook for subscribing to real-time directive events via SSE */ -export function useDirectiveEventSubscription( - directiveId: string | null, - onEvent?: (event: DirectiveEvent) => void -): { - events: DirectiveEvent[]; - isConnected: boolean; - error: string | null; -} { - const [events, setEvents] = useState<DirectiveEvent[]>([]); - const [isConnected, setIsConnected] = useState(false); - const [error, setError] = useState<string | null>(null); - const cleanupRef = useRef<(() => void) | null>(null); - - useEffect(() => { - // Clean up any existing subscription - if (cleanupRef.current) { - cleanupRef.current(); - cleanupRef.current = null; - } - - if (!directiveId) { - setIsConnected(false); - setEvents([]); - return; - } - - // Subscribe to events - let mounted = true; - - const setupSubscription = async () => { - try { - const cleanup = await subscribeToDirectiveEvents( - directiveId, - (event) => { - if (mounted) { - setEvents((prev) => [...prev, event]); - onEvent?.(event); - } - }, - (err) => { - if (mounted) { - setError(err.message); - setIsConnected(false); - } - } - ); - - if (mounted) { - cleanupRef.current = cleanup; - setIsConnected(true); - setError(null); - } else { - // Component unmounted during setup, clean up immediately - cleanup(); - } - } catch (err) { - if (mounted) { - setError(err instanceof Error ? err.message : "Failed to subscribe to events"); - setIsConnected(false); - } - } - }; - - setupSubscription(); - - return () => { - mounted = false; - if (cleanupRef.current) { - cleanupRef.current(); - cleanupRef.current = null; - } - }; - }, [directiveId, onEvent]); - - return { events, isConnected, error }; -} |
