@critical-path/react 0.13.11 → 0.14.1

package/dist/hooks.js

@@ -1,3 +1,4 @@
+'use client';
 import { useState, useEffect, useCallback, useMemo, useRef } from 'react';
 import { resolveStatusDefinition, isTempTaskId } from '@critical-path/core';
 import { registerWebMcpTools } from '@critical-path/mcp/web';
@@ -7,22 +8,32 @@ export function useWorkflows() {
     const [workflows, setWorkflows] = useState([]);
     const [loading, setLoading] = useState(true);
     const [error, setError] = useState(null);
-    const fetchWorkflows = useCallback(async () => {
+    const fetchWorkflows = useCallback(async (signal) => {
+        const api = signal ? client.with({ signal }) : client;
         try {
             setLoading(true);
-            const data = await client.getWorkflows();
+            const data = await api.getWorkflows();
+            if (signal?.aborted)
+                return;
             setWorkflows(data);
             setError(null);
         }
         catch (err) {
+            if (signal?.aborted)
+                return;
             setError(err instanceof Error ? err : new Error(String(err)));
         }
         finally {
-            setLoading(false);
+            if (!signal?.aborted)
+                setLoading(false);
         }
     }, [client]);
     useEffect(() => {
-        fetchWorkflows();
+        // Abort the in-flight request when inputs change or the component unmounts, so a slow
+        // response for old inputs can never overwrite newer data.
+        const controller = new AbortController();
+        fetchWorkflows(controller.signal);
+        return () => controller.abort();
     }, [fetchWorkflows]);
     const createWorkflow = async (input) => {
         try {
@@ -59,57 +70,77 @@ export function useWorkflows() {
             throw errorObj;
         }
     };
-    return { workflows, loading, error, refresh: fetchWorkflows, createWorkflow, updateWorkflow, deleteWorkflow };
+    return { workflows, loading, error, refresh: () => fetchWorkflows(), createWorkflow, updateWorkflow, deleteWorkflow };
 }
 export function useTaskTransitions(taskId) {
     const client = useCriticalPathClient();
     const [allowedTransitions, setAllowedTransitions] = useState([]);
     const [loading, setLoading] = useState(false);
     const [error, setError] = useState(null);
-    const fetchTransitions = useCallback(async () => {
+    const fetchTransitions = useCallback(async (signal) => {
+        const api = signal ? client.with({ signal }) : client;
         if (!taskId) {
             setAllowedTransitions([]);
             return;
         }
         try {
             setLoading(true);
-            const data = await client.getAllowedTaskTransitions(taskId);
+            const data = await api.getAllowedTaskTransitions(taskId);
+            if (signal?.aborted)
+                return;
             setAllowedTransitions(data);
             setError(null);
         }
         catch (err) {
+            if (signal?.aborted)
+                return;
             setError(err instanceof Error ? err : new Error(String(err)));
         }
         finally {
-            setLoading(false);
+            if (!signal?.aborted)
+                setLoading(false);
         }
     }, [client, taskId]);
     useEffect(() => {
-        fetchTransitions();
+        // Abort the in-flight request when inputs change or the component unmounts, so a slow
+        // response for old inputs can never overwrite newer data.
+        const controller = new AbortController();
+        fetchTransitions(controller.signal);
+        return () => controller.abort();
     }, [fetchTransitions]);
-    return { allowedTransitions, loading, error, refresh: fetchTransitions };
+    return { allowedTransitions, loading, error, refresh: () => fetchTransitions() };
 }
 export function useProjects() {
     const client = useCriticalPathClient();
     const [projects, setProjects] = useState([]);
     const [loading, setLoading] = useState(true);
     const [error, setError] = useState(null);
-    const fetchProjects = useCallback(async () => {
+    const fetchProjects = useCallback(async (signal) => {
+        const api = signal ? client.with({ signal }) : client;
         try {
             setLoading(true);
-            const data = await client.getProjects();
+            const data = await api.getProjects();
+            if (signal?.aborted)
+                return;
             setProjects(data);
             setError(null);
         }
         catch (err) {
+            if (signal?.aborted)
+                return;
             setError(err instanceof Error ? err : new Error(String(err)));
         }
         finally {
-            setLoading(false);
+            if (!signal?.aborted)
+                setLoading(false);
         }
     }, [client]);
     useEffect(() => {
-        fetchProjects();
+        // Abort the in-flight request when inputs change or the component unmounts, so a slow
+        // response for old inputs can never overwrite newer data.
+        const controller = new AbortController();
+        fetchProjects(controller.signal);
+        return () => controller.abort();
     }, [fetchProjects]);
     const createProject = async (input) => {
         const tempId = `temp_${Date.now()}_${Math.random().toString(36).substring(2, 7)}`;
@@ -133,31 +164,41 @@ export function useProjects() {
             throw errorObj;
         }
     };
-    return { projects, loading, error, refresh: fetchProjects, createProject };
+    return { projects, loading, error, refresh: () => fetchProjects(), createProject };
 }
 export function useTasks(projectId) {
     const client = useCriticalPathClient();
     const [tasks, setTasks] = useState([]);
     const [loading, setLoading] = useState(true);
     const [error, setError] = useState(null);
-    const fetchTasks = useCallback(async () => {
+    const fetchTasks = useCallback(async (signal) => {
+        const api = signal ? client.with({ signal }) : client;
         try {
             setLoading(true);
-            const data = await client.getTasks(projectId);
+            const data = await api.getTasks(projectId);
+            if (signal?.aborted)
+                return;
             setTasks(data);
             setError(null);
         }
         catch (err) {
+            if (signal?.aborted)
+                return;
             setError(err instanceof Error ? err : new Error(String(err)));
         }
         finally {
-            setLoading(false);
+            if (!signal?.aborted)
+                setLoading(false);
         }
     }, [client, projectId]);
     const pendingCreationsRef = useRef(new Map());
     const tempToRealIdMapRef = useRef(new Map());
     useEffect(() => {
-        fetchTasks();
+        // Abort the in-flight request when inputs change or the component unmounts, so a slow
+        // response for old inputs can never overwrite newer data.
+        const controller = new AbortController();
+        fetchTasks(controller.signal);
+        return () => controller.abort();
     }, [fetchTasks]);
     const createTask = async (input) => {
         const tempId = `temp_${Date.now()}_${Math.random().toString(36).substring(2, 7)}`;
@@ -298,7 +339,7 @@ export function useTasks(projectId) {
             throw errorObj;
         }
     };
-    return { tasks, loading, error, refresh: fetchTasks, createTask, updateTask, updateTaskStatus, deleteTask };
+    return { tasks, loading, error, refresh: () => fetchTasks(), createTask, updateTask, updateTaskStatus, deleteTask };
 }
 export function useKanban(projectId, options) {
     const { tasks, loading, error, refresh, updateTaskStatus, createTask } = useTasks(projectId);
@@ -353,7 +394,8 @@ export function useComments(taskId) {
     const [comments, setComments] = useState([]);
     const [loading, setLoading] = useState(true);
     const [error, setError] = useState(null);
-    const fetchComments = useCallback(async () => {
+    const fetchComments = useCallback(async (signal) => {
+        const api = signal ? client.with({ signal }) : client;
         if (!taskId) {
             setComments([]);
             setLoading(false);
@@ -361,19 +403,28 @@ export function useComments(taskId) {
         }
         try {
             setLoading(true);
-            const data = await client.getComments(taskId);
+            const data = await api.getComments(taskId);
+            if (signal?.aborted)
+                return;
             setComments(data);
             setError(null);
         }
         catch (err) {
+            if (signal?.aborted)
+                return;
             setError(err instanceof Error ? err : new Error(String(err)));
         }
         finally {
-            setLoading(false);
+            if (!signal?.aborted)
+                setLoading(false);
         }
     }, [client, taskId]);
     useEffect(() => {
-        fetchComments();
+        // Abort the in-flight request when inputs change or the component unmounts, so a slow
+        // response for old inputs can never overwrite newer data.
+        const controller = new AbortController();
+        fetchComments(controller.signal);
+        return () => controller.abort();
     }, [fetchComments]);
     const addComment = async (input) => {
         try {
@@ -461,7 +512,7 @@ export function useComments(taskId) {
         threads,
         loading,
         error,
-        refresh: fetchComments,
+        refresh: () => fetchComments(),
         addComment,
         updateComment,
         deleteComment,
@@ -475,22 +526,32 @@ export function useAttachments(filter) {
     const [loading, setLoading] = useState(true);
     const [error, setError] = useState(null);
     const filterKey = JSON.stringify(filter || {});
-    const fetchAttachments = useCallback(async () => {
+    const fetchAttachments = useCallback(async (signal) => {
+        const api = signal ? client.with({ signal }) : client;
         try {
             setLoading(true);
-            const data = await client.getAttachments(filter);
+            const data = await api.getAttachments(filter);
+            if (signal?.aborted)
+                return;
             setAttachments(data);
             setError(null);
         }
         catch (err) {
+            if (signal?.aborted)
+                return;
             setError(err instanceof Error ? err : new Error(String(err)));
         }
         finally {
-            setLoading(false);
+            if (!signal?.aborted)
+                setLoading(false);
         }
     }, [client, filterKey]);
     useEffect(() => {
-        fetchAttachments();
+        // Abort the in-flight request when inputs change or the component unmounts, so a slow
+        // response for old inputs can never overwrite newer data.
+        const controller = new AbortController();
+        fetchAttachments(controller.signal);
+        return () => controller.abort();
     }, [fetchAttachments]);
     const createAttachment = async (input) => {
         try {
@@ -519,7 +580,7 @@ export function useAttachments(filter) {
         attachments,
         loading,
         error,
-        refresh: fetchAttachments,
+        refresh: () => fetchAttachments(),
         createAttachment,
         deleteAttachment
     };
@@ -529,7 +590,8 @@ export function useDeliverables(projectId) {
     const [deliverables, setDeliverables] = useState([]);
     const [loading, setLoading] = useState(true);
     const [error, setError] = useState(null);
-    const fetchDeliverables = useCallback(async () => {
+    const fetchDeliverables = useCallback(async (signal) => {
+        const api = signal ? client.with({ signal }) : client;
         if (!projectId) {
             setDeliverables([]);
             setLoading(false);
@@ -537,19 +599,28 @@ export function useDeliverables(projectId) {
         }
         try {
             setLoading(true);
-            const data = await client.getDeliverables(projectId);
+            const data = await api.getDeliverables(projectId);
+            if (signal?.aborted)
+                return;
             setDeliverables(data);
             setError(null);
         }
         catch (err) {
+            if (signal?.aborted)
+                return;
             setError(err instanceof Error ? err : new Error(String(err)));
         }
         finally {
-            setLoading(false);
+            if (!signal?.aborted)
+                setLoading(false);
         }
     }, [client, projectId]);
     useEffect(() => {
-        fetchDeliverables();
+        // Abort the in-flight request when inputs change or the component unmounts, so a slow
+        // response for old inputs can never overwrite newer data.
+        const controller = new AbortController();
+        fetchDeliverables(controller.signal);
+        return () => controller.abort();
     }, [fetchDeliverables]);
     const createDeliverable = async (input) => {
         try {
@@ -590,7 +661,7 @@ export function useDeliverables(projectId) {
         deliverables,
         loading,
         error,
-        refresh: fetchDeliverables,
+        refresh: () => fetchDeliverables(),
         createDeliverable,
         updateDeliverable,
         deleteDeliverable
@@ -601,7 +672,8 @@ export function useDeliverableSummary(deliverableId) {
     const [summary, setSummary] = useState(null);
     const [loading, setLoading] = useState(true);
     const [error, setError] = useState(null);
-    const fetchSummary = useCallback(async () => {
+    const fetchSummary = useCallback(async (signal) => {
+        const api = signal ? client.with({ signal }) : client;
         if (!deliverableId) {
             setSummary(null);
             setLoading(false);
@@ -609,25 +681,34 @@ export function useDeliverableSummary(deliverableId) {
         }
         try {
             setLoading(true);
-            const data = await client.getDeliverableSummary(deliverableId);
+            const data = await api.getDeliverableSummary(deliverableId);
+            if (signal?.aborted)
+                return;
             setSummary(data);
             setError(null);
         }
         catch (err) {
+            if (signal?.aborted)
+                return;
             setError(err instanceof Error ? err : new Error(String(err)));
         }
         finally {
-            setLoading(false);
+            if (!signal?.aborted)
+                setLoading(false);
         }
     }, [client, deliverableId]);
     useEffect(() => {
-        fetchSummary();
+        // Abort the in-flight request when inputs change or the component unmounts, so a slow
+        // response for old inputs can never overwrite newer data.
+        const controller = new AbortController();
+        fetchSummary(controller.signal);
+        return () => controller.abort();
     }, [fetchSummary]);
     return {
         summary,
         loading,
         error,
-        refresh: fetchSummary
+        refresh: () => fetchSummary()
     };
 }
 export function useWebMCP(options = {}) {
@@ -675,7 +756,8 @@ export function useTaskActivity(taskId) {
     const [attachments, setAttachments] = useState([]);
     const [loading, setLoading] = useState(false);
     const [error, setError] = useState(null);
-    const fetchActivity = useCallback(async () => {
+    const fetchActivity = useCallback(async (signal) => {
+        const api = signal ? client.with({ signal }) : client;
         if (!taskId) {
             setComments([]);
             setAttachments([]);
@@ -685,22 +767,31 @@ export function useTaskActivity(taskId) {
         try {
             setLoading(true);
             const [fetchedComments, fetchedAttachments] = await Promise.all([
-                client.getComments(taskId),
-                client.getAttachments({ taskId })
+                api.getComments(taskId),
+                api.getAttachments({ taskId })
             ]);
+            if (signal?.aborted)
+                return;
             setComments(fetchedComments);
             setAttachments(fetchedAttachments);
             setError(null);
         }
         catch (err) {
+            if (signal?.aborted)
+                return;
             setError(err instanceof Error ? err : new Error(String(err)));
         }
         finally {
-            setLoading(false);
+            if (!signal?.aborted)
+                setLoading(false);
         }
     }, [client, taskId]);
     useEffect(() => {
-        fetchActivity();
+        // Abort the in-flight request when inputs change or the component unmounts, so a slow
+        // response for old inputs can never overwrite newer data.
+        const controller = new AbortController();
+        fetchActivity(controller.signal);
+        return () => controller.abort();
     }, [fetchActivity]);
     const threads = useMemo(() => {
         const map = new Map();
@@ -841,7 +932,7 @@ export function useTaskActivity(taskId) {
         standaloneAttachments,
         loading,
         error,
-        refresh: fetchActivity,
+        refresh: () => fetchActivity(),
         addComment,
         addAttachment,
         deleteComment,
@@ -855,7 +946,8 @@ export function useCriticalPath(projectId) {
     const [analysis, setAnalysis] = useState(null);
     const [loading, setLoading] = useState(true);
     const [error, setError] = useState(null);
-    const fetchCriticalPath = useCallback(async () => {
+    const fetchCriticalPath = useCallback(async (signal) => {
+        const api = signal ? client.with({ signal }) : client;
         if (!projectId) {
             setAnalysis(null);
             setLoading(false);
@@ -863,25 +955,34 @@ export function useCriticalPath(projectId) {
         }
         try {
             setLoading(true);
-            const data = await client.calculateCriticalPath(projectId);
+            const data = await api.calculateCriticalPath(projectId);
+            if (signal?.aborted)
+                return;
             setAnalysis(data);
             setError(null);
         }
         catch (err) {
+            if (signal?.aborted)
+                return;
             setError(err instanceof Error ? err : new Error(String(err)));
         }
         finally {
-            setLoading(false);
+            if (!signal?.aborted)
+                setLoading(false);
         }
     }, [client, projectId]);
     useEffect(() => {
-        fetchCriticalPath();
+        // Abort the in-flight request when inputs change or the component unmounts, so a slow
+        // response for old inputs can never overwrite newer data.
+        const controller = new AbortController();
+        fetchCriticalPath(controller.signal);
+        return () => controller.abort();
     }, [fetchCriticalPath]);
     return {
         analysis,
         loading,
         error,
-        refresh: fetchCriticalPath
+        refresh: () => fetchCriticalPath()
     };
 }
 export function useTimelineLadder(projectId, initialOptions = {}) {
@@ -890,7 +991,8 @@ export function useTimelineLadder(projectId, initialOptions = {}) {
     const [ladder, setLadder] = useState(null);
     const [loading, setLoading] = useState(true);
     const [error, setError] = useState(null);
-    const fetchLadder = useCallback(async () => {
+    const fetchLadder = useCallback(async (signal) => {
+        const api = signal ? client.with({ signal }) : client;
         if (!projectId) {
             setLadder(null);
             setLoading(false);
@@ -898,22 +1000,31 @@ export function useTimelineLadder(projectId, initialOptions = {}) {
         }
         try {
             setLoading(true);
-            const data = await client.getTimelineLadder(projectId, {
+            const data = await api.getTimelineLadder(projectId, {
                 ...initialOptions,
                 level
             });
+            if (signal?.aborted)
+                return;
             setLadder(data);
             setError(null);
         }
         catch (err) {
+            if (signal?.aborted)
+                return;
             setError(err instanceof Error ? err : new Error(String(err)));
         }
         finally {
-            setLoading(false);
+            if (!signal?.aborted)
+                setLoading(false);
         }
     }, [client, projectId, level, initialOptions.containerId, initialOptions.iterationId]);
     useEffect(() => {
-        fetchLadder();
+        // Abort the in-flight request when inputs change or the component unmounts, so a slow
+        // response for old inputs can never overwrite newer data.
+        const controller = new AbortController();
+        fetchLadder(controller.signal);
+        return () => controller.abort();
     }, [fetchLadder]);
     return {
         ladder,
@@ -924,7 +1035,7 @@ export function useTimelineLadder(projectId, initialOptions = {}) {
         concrete: ladder?.concrete ?? null,
         loading,
         error,
-        refresh: fetchLadder
+        refresh: () => fetchLadder()
     };
 }
 export function useTaskLadder(taskId) {
@@ -932,7 +1043,8 @@ export function useTaskLadder(taskId) {
     const [taskLadder, setTaskLadder] = useState(null);
     const [loading, setLoading] = useState(true);
     const [error, setError] = useState(null);
-    const fetchTaskLadder = useCallback(async () => {
+    const fetchTaskLadder = useCallback(async (signal) => {
+        const api = signal ? client.with({ signal }) : client;
         if (!taskId) {
             setTaskLadder(null);
             setLoading(false);
@@ -940,19 +1052,28 @@ export function useTaskLadder(taskId) {
         }
         try {
             setLoading(true);
-            const data = await client.getTaskLadder(taskId);
+            const data = await api.getTaskLadder(taskId);
+            if (signal?.aborted)
+                return;
             setTaskLadder(data);
             setError(null);
         }
         catch (err) {
+            if (signal?.aborted)
+                return;
             setError(err instanceof Error ? err : new Error(String(err)));
         }
         finally {
-            setLoading(false);
+            if (!signal?.aborted)
+                setLoading(false);
         }
     }, [client, taskId]);
     useEffect(() => {
-        fetchTaskLadder();
+        // Abort the in-flight request when inputs change or the component unmounts, so a slow
+        // response for old inputs can never overwrite newer data.
+        const controller = new AbortController();
+        fetchTaskLadder(controller.signal);
+        return () => controller.abort();
     }, [fetchTaskLadder]);
     return {
         taskLadder,
@@ -962,7 +1083,7 @@ export function useTaskLadder(taskId) {
         metrics: taskLadder?.metrics ?? null,
         loading,
         error,
-        refresh: fetchTaskLadder
+        refresh: () => fetchTaskLadder()
     };
 }
 export function useTaskMetrics(taskId) {
@@ -971,7 +1092,8 @@ export function useTaskMetrics(taskId) {
     const [history, setHistory] = useState(null);
     const [loading, setLoading] = useState(true);
     const [error, setError] = useState(null);
-    const fetchMetrics = useCallback(async () => {
+    const fetchMetrics = useCallback(async (signal) => {
+        const api = signal ? client.with({ signal }) : client;
         if (!taskId) {
             setMetrics(null);
             setHistory(null);
@@ -981,22 +1103,31 @@ export function useTaskMetrics(taskId) {
         try {
             setLoading(true);
             const [m, h] = await Promise.all([
-                client.getTaskMetrics(taskId),
-                client.getTaskProgressHistory(taskId)
+                api.getTaskMetrics(taskId),
+                api.getTaskProgressHistory(taskId)
             ]);
+            if (signal?.aborted)
+                return;
             setMetrics(m);
             setHistory(h);
             setError(null);
         }
         catch (err) {
+            if (signal?.aborted)
+                return;
             setError(err instanceof Error ? err : new Error(String(err)));
         }
         finally {
-            setLoading(false);
+            if (!signal?.aborted)
+                setLoading(false);
         }
     }, [client, taskId]);
     useEffect(() => {
-        fetchMetrics();
+        // Abort the in-flight request when inputs change or the component unmounts, so a slow
+        // response for old inputs can never overwrite newer data.
+        const controller = new AbortController();
+        fetchMetrics(controller.signal);
+        return () => controller.abort();
     }, [fetchMetrics]);
     return {
         metrics,
@@ -1008,7 +1139,7 @@ export function useTaskMetrics(taskId) {
         curveProfile: history?.curveProfile ?? null,
         loading,
         error,
-        refresh: fetchMetrics
+        refresh: () => fetchMetrics()
     };
 }
 export function useWorkloadDistribution(projectId, initialOptions = {}) {
@@ -1019,23 +1150,29 @@ export function useWorkloadDistribution(projectId, initialOptions = {}) {
     const [workload, setWorkload] = useState(null);
     const [loading, setLoading] = useState(true);
     const [error, setError] = useState(null);
-    const fetchWorkload = useCallback(async () => {
+    const fetchWorkload = useCallback(async (signal) => {
+        const api = signal ? client.with({ signal }) : client;
         try {
             setLoading(true);
-            const data = await client.getWorkloadDistribution(projectId, {
+            const data = await api.getWorkloadDistribution(projectId, {
                 ...initialOptions,
                 interval,
                 groupBy,
                 metric
             });
+            if (signal?.aborted)
+                return;
             setWorkload(data);
             setError(null);
         }
         catch (err) {
+            if (signal?.aborted)
+                return;
             setError(err instanceof Error ? err : new Error(String(err)));
         }
         finally {
-            setLoading(false);
+            if (!signal?.aborted)
+                setLoading(false);
         }
     }, [
         client,
@@ -1048,7 +1185,11 @@ export function useWorkloadDistribution(projectId, initialOptions = {}) {
         initialOptions.defaultWeeklyCapacityHours
     ]);
     useEffect(() => {
-        fetchWorkload();
+        // Abort the in-flight request when inputs change or the component unmounts, so a slow
+        // response for old inputs can never overwrite newer data.
+        const controller = new AbortController();
+        fetchWorkload(controller.signal);
+        return () => controller.abort();
     }, [fetchWorkload]);
     return {
         workload,
@@ -1066,7 +1207,7 @@ export function useWorkloadDistribution(projectId, initialOptions = {}) {
         averageUtilization: workload?.averageUtilization,
         loading,
         error,
-        refresh: fetchWorkload
+        refresh: () => fetchWorkload()
     };
 }
 //# sourceMappingURL=hooks.js.map