made files and toast appear just once, use new queries
This commit is contained in:
Lucas Oliveira
parent
41e4ecefdb
commit
aa61ba265c
2 changed files with 733 additions and 811 deletions
File diff suppressed because it is too large
Load diff
|
|
@ -7,33 +7,18 @@ import {
|
|||
useCallback,
|
||||
useContext,
|
||||
useEffect,
|
||||
useRef,
|
||||
useState,
|
||||
} from "react";
|
||||
import { toast } from "sonner";
|
||||
import { useCancelTaskMutation } from "@/app/api/mutations/useCancelTaskMutation";
|
||||
import {
|
||||
type Task,
|
||||
useGetTasksQuery,
|
||||
} from "@/app/api/queries/useGetTasksQuery";
|
||||
import { useAuth } from "@/contexts/auth-context";
|
||||
|
||||
export interface Task {
|
||||
task_id: string;
|
||||
status:
|
||||
| "pending"
|
||||
| "running"
|
||||
| "processing"
|
||||
| "completed"
|
||||
| "failed"
|
||||
| "error";
|
||||
total_files?: number;
|
||||
processed_files?: number;
|
||||
successful_files?: number;
|
||||
failed_files?: number;
|
||||
running_files?: number;
|
||||
pending_files?: number;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
duration_seconds?: number;
|
||||
result?: Record<string, unknown>;
|
||||
error?: string;
|
||||
files?: Record<string, Record<string, unknown>>;
|
||||
}
|
||||
// Task interface is now imported from useGetTasksQuery
|
||||
|
||||
export interface TaskFile {
|
||||
filename: string;
|
||||
|
|
@ -58,20 +43,45 @@ interface TaskContextType {
|
|||
isFetching: boolean;
|
||||
isMenuOpen: boolean;
|
||||
toggleMenu: () => void;
|
||||
// React Query states
|
||||
isLoading: boolean;
|
||||
error: Error | null;
|
||||
}
|
||||
|
||||
const TaskContext = createContext<TaskContextType | undefined>(undefined);
|
||||
|
||||
export function TaskProvider({ children }: { children: React.ReactNode }) {
|
||||
const [tasks, setTasks] = useState<Task[]>([]);
|
||||
const [files, setFiles] = useState<TaskFile[]>([]);
|
||||
const [isPolling, setIsPolling] = useState(false);
|
||||
const [isFetching, setIsFetching] = useState(false);
|
||||
const [isMenuOpen, setIsMenuOpen] = useState(false);
|
||||
const previousTasksRef = useRef<Task[]>([]);
|
||||
const { isAuthenticated, isNoAuthMode } = useAuth();
|
||||
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
// Use React Query hooks
|
||||
const {
|
||||
data: tasks = [],
|
||||
isLoading,
|
||||
error,
|
||||
refetch: refetchTasks,
|
||||
isFetching,
|
||||
} = useGetTasksQuery({
|
||||
enabled: isAuthenticated || isNoAuthMode,
|
||||
});
|
||||
|
||||
const cancelTaskMutation = useCancelTaskMutation({
|
||||
onSuccess: () => {
|
||||
toast.success("Task cancelled", {
|
||||
description: "Task has been cancelled successfully",
|
||||
});
|
||||
},
|
||||
onError: (error) => {
|
||||
toast.error("Failed to cancel task", {
|
||||
description: error.message,
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
const refetchSearch = useCallback(() => {
|
||||
queryClient.invalidateQueries({
|
||||
queryKey: ["search"],
|
||||
|
|
@ -99,252 +109,171 @@ export function TaskProvider({ children }: { children: React.ReactNode }) {
|
|||
[],
|
||||
);
|
||||
|
||||
const fetchTasks = useCallback(async () => {
|
||||
if (!isAuthenticated && !isNoAuthMode) return;
|
||||
|
||||
setIsFetching(true);
|
||||
try {
|
||||
const response = await fetch("/api/tasks");
|
||||
if (response.ok) {
|
||||
const data = await response.json();
|
||||
const newTasks = data.tasks || [];
|
||||
|
||||
// Update tasks and check for status changes in the same state update
|
||||
setTasks((prevTasks) => {
|
||||
// Check for newly completed tasks to show toasts
|
||||
if (prevTasks.length > 0) {
|
||||
newTasks.forEach((newTask: Task) => {
|
||||
const oldTask = prevTasks.find(
|
||||
(t) => t.task_id === newTask.task_id,
|
||||
);
|
||||
|
||||
// Update or add files from task.files if available
|
||||
if (newTask.files && typeof newTask.files === "object") {
|
||||
const taskFileEntries = Object.entries(newTask.files);
|
||||
const now = new Date().toISOString();
|
||||
|
||||
taskFileEntries.forEach(([filePath, fileInfo]) => {
|
||||
if (typeof fileInfo === "object" && fileInfo) {
|
||||
const fileName = filePath.split("/").pop() || filePath;
|
||||
const fileStatus = fileInfo.status as string;
|
||||
|
||||
// Map backend file status to our TaskFile status
|
||||
let mappedStatus: TaskFile["status"];
|
||||
switch (fileStatus) {
|
||||
case "pending":
|
||||
case "running":
|
||||
mappedStatus = "processing";
|
||||
break;
|
||||
case "completed":
|
||||
mappedStatus = "active";
|
||||
break;
|
||||
case "failed":
|
||||
mappedStatus = "failed";
|
||||
break;
|
||||
default:
|
||||
mappedStatus = "processing";
|
||||
}
|
||||
|
||||
setFiles((prevFiles) => {
|
||||
const existingFileIndex = prevFiles.findIndex(
|
||||
(f) =>
|
||||
f.source_url === filePath &&
|
||||
f.task_id === newTask.task_id,
|
||||
);
|
||||
|
||||
// Detect connector type based on file path or other indicators
|
||||
let connectorType = "local";
|
||||
if (filePath.includes("/") && !filePath.startsWith("/")) {
|
||||
// Likely S3 key format (bucket/path/file.ext)
|
||||
connectorType = "s3";
|
||||
}
|
||||
|
||||
const fileEntry: TaskFile = {
|
||||
filename: fileName,
|
||||
mimetype: "", // We don't have this info from the task
|
||||
source_url: filePath,
|
||||
size: 0, // We don't have this info from the task
|
||||
connector_type: connectorType,
|
||||
status: mappedStatus,
|
||||
task_id: newTask.task_id,
|
||||
created_at:
|
||||
typeof fileInfo.created_at === "string"
|
||||
? fileInfo.created_at
|
||||
: now,
|
||||
updated_at:
|
||||
typeof fileInfo.updated_at === "string"
|
||||
? fileInfo.updated_at
|
||||
: now,
|
||||
};
|
||||
|
||||
if (existingFileIndex >= 0) {
|
||||
// Update existing file
|
||||
const updatedFiles = [...prevFiles];
|
||||
updatedFiles[existingFileIndex] = fileEntry;
|
||||
return updatedFiles;
|
||||
} else {
|
||||
// Add new file
|
||||
return [...prevFiles, fileEntry];
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
if (
|
||||
oldTask &&
|
||||
oldTask.status !== "completed" &&
|
||||
newTask.status === "completed"
|
||||
) {
|
||||
// Task just completed - show success toast
|
||||
toast.success("Task completed successfully", {
|
||||
description: `Task ${newTask.task_id} has finished processing.`,
|
||||
action: {
|
||||
label: "View",
|
||||
onClick: () => console.log("View task", newTask.task_id),
|
||||
},
|
||||
});
|
||||
refetchSearch();
|
||||
// Dispatch knowledge updated event for all knowledge-related pages
|
||||
console.log(
|
||||
"Task completed successfully, dispatching knowledgeUpdated event",
|
||||
);
|
||||
window.dispatchEvent(new CustomEvent("knowledgeUpdated"));
|
||||
|
||||
// Remove files for this completed task from the files list
|
||||
setFiles((prevFiles) =>
|
||||
prevFiles.filter((file) => file.task_id !== newTask.task_id),
|
||||
);
|
||||
} else if (
|
||||
oldTask &&
|
||||
oldTask.status !== "failed" &&
|
||||
oldTask.status !== "error" &&
|
||||
(newTask.status === "failed" || newTask.status === "error")
|
||||
) {
|
||||
// Task just failed - show error toast
|
||||
toast.error("Task failed", {
|
||||
description: `Task ${newTask.task_id} failed: ${
|
||||
newTask.error || "Unknown error"
|
||||
}`,
|
||||
});
|
||||
|
||||
// Files will be updated to failed status by the file parsing logic above
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
return newTasks;
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Failed to fetch tasks:", error);
|
||||
} finally {
|
||||
setIsFetching(false);
|
||||
// Handle task status changes and file updates
|
||||
useEffect(() => {
|
||||
if (tasks.length === 0) {
|
||||
// Store current tasks as previous for next comparison
|
||||
previousTasksRef.current = tasks;
|
||||
return;
|
||||
}
|
||||
}, [isAuthenticated, isNoAuthMode, refetchSearch]); // Removed 'tasks' from dependencies to prevent infinite loop!
|
||||
console.log(tasks, previousTasksRef.current);
|
||||
|
||||
const addTask = useCallback((taskId: string) => {
|
||||
// Immediately start aggressive polling for the new task
|
||||
let pollAttempts = 0;
|
||||
const maxPollAttempts = 30; // Poll for up to 30 seconds
|
||||
// Check for task status changes by comparing with previous tasks
|
||||
tasks.forEach((currentTask) => {
|
||||
const previousTask = previousTasksRef.current.find(
|
||||
(prev) => prev.task_id === currentTask.task_id,
|
||||
);
|
||||
|
||||
const aggressivePoll = async () => {
|
||||
try {
|
||||
const response = await fetch("/api/tasks");
|
||||
if (response.ok) {
|
||||
const data = await response.json();
|
||||
const newTasks = data.tasks || [];
|
||||
const foundTask = newTasks.find(
|
||||
(task: Task) => task.task_id === taskId,
|
||||
);
|
||||
// Only show toasts if we have previous data and status has changed
|
||||
if (((previousTask && previousTask.status !== currentTask.status) || (!previousTask && previousTasksRef.current.length !== 0))) {
|
||||
console.log("task status changed", currentTask.status);
|
||||
// Process files from failed task and add them to files list
|
||||
if (currentTask.files && typeof currentTask.files === "object") {
|
||||
console.log("processing files", currentTask.files);
|
||||
const taskFileEntries = Object.entries(currentTask.files);
|
||||
const now = new Date().toISOString();
|
||||
|
||||
if (foundTask) {
|
||||
// Task found! Update the tasks state
|
||||
setTasks((prevTasks) => {
|
||||
// Check if task is already in the list
|
||||
const exists = prevTasks.some((t) => t.task_id === taskId);
|
||||
if (!exists) {
|
||||
return [...prevTasks, foundTask];
|
||||
taskFileEntries.forEach(([filePath, fileInfo]) => {
|
||||
if (typeof fileInfo === "object" && fileInfo) {
|
||||
const fileName = filePath.split("/").pop() || filePath;
|
||||
const fileStatus = fileInfo.status as string;
|
||||
|
||||
// Map backend file status to our TaskFile status
|
||||
let mappedStatus: TaskFile["status"];
|
||||
switch (fileStatus) {
|
||||
case "pending":
|
||||
case "running":
|
||||
mappedStatus = "processing";
|
||||
break;
|
||||
case "completed":
|
||||
mappedStatus = "active";
|
||||
break;
|
||||
case "failed":
|
||||
mappedStatus = "failed";
|
||||
break;
|
||||
default:
|
||||
mappedStatus = "processing";
|
||||
}
|
||||
// Update existing task
|
||||
return prevTasks.map((t) =>
|
||||
t.task_id === taskId ? foundTask : t,
|
||||
);
|
||||
});
|
||||
return; // Stop polling, we found it
|
||||
}
|
||||
|
||||
setFiles((prevFiles) => {
|
||||
const existingFileIndex = prevFiles.findIndex(
|
||||
(f) =>
|
||||
f.source_url === filePath &&
|
||||
f.task_id === currentTask.task_id,
|
||||
);
|
||||
|
||||
// Detect connector type based on file path or other indicators
|
||||
let connectorType = "local";
|
||||
if (filePath.includes("/") && !filePath.startsWith("/")) {
|
||||
// Likely S3 key format (bucket/path/file.ext)
|
||||
connectorType = "s3";
|
||||
}
|
||||
|
||||
const fileEntry: TaskFile = {
|
||||
filename: fileName,
|
||||
mimetype: "", // We don't have this info from the task
|
||||
source_url: filePath,
|
||||
size: 0, // We don't have this info from the task
|
||||
connector_type: connectorType,
|
||||
status: mappedStatus,
|
||||
task_id: currentTask.task_id,
|
||||
created_at:
|
||||
typeof fileInfo.created_at === "string"
|
||||
? fileInfo.created_at
|
||||
: now,
|
||||
updated_at:
|
||||
typeof fileInfo.updated_at === "string"
|
||||
? fileInfo.updated_at
|
||||
: now,
|
||||
};
|
||||
|
||||
if (existingFileIndex >= 0) {
|
||||
// Update existing file
|
||||
const updatedFiles = [...prevFiles];
|
||||
updatedFiles[existingFileIndex] = fileEntry;
|
||||
return updatedFiles;
|
||||
} else {
|
||||
// Add new file
|
||||
return [...prevFiles, fileEntry];
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
if (
|
||||
previousTask && previousTask.status !== "completed" &&
|
||||
currentTask.status === "completed"
|
||||
) {
|
||||
// Task just completed - show success toast
|
||||
toast.success("Task completed successfully", {
|
||||
description: `Task ${currentTask.task_id} has finished processing.`,
|
||||
action: {
|
||||
label: "View",
|
||||
onClick: () => console.log("View task", currentTask.task_id),
|
||||
},
|
||||
});
|
||||
refetchSearch();
|
||||
// Remove files for this completed task from the files list
|
||||
// setFiles((prevFiles) =>
|
||||
// prevFiles.filter((file) => file.task_id !== currentTask.task_id),
|
||||
// );
|
||||
} else if (
|
||||
previousTask && previousTask.status !== "failed" &&
|
||||
previousTask.status !== "error" &&
|
||||
(currentTask.status === "failed" || currentTask.status === "error")
|
||||
) {
|
||||
// Task just failed - show error toast
|
||||
toast.error("Task failed", {
|
||||
description: `Task ${currentTask.task_id} failed: ${
|
||||
currentTask.error || "Unknown error"
|
||||
}`,
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Aggressive polling failed:", error);
|
||||
}
|
||||
});
|
||||
|
||||
pollAttempts++;
|
||||
if (pollAttempts < maxPollAttempts) {
|
||||
// Continue polling every 1 second for new tasks
|
||||
setTimeout(aggressivePoll, 1000);
|
||||
}
|
||||
};
|
||||
// Store current tasks as previous for next comparison
|
||||
previousTasksRef.current = tasks;
|
||||
}, [tasks, refetchSearch]);
|
||||
|
||||
// Start aggressive polling after a short delay to allow backend to process
|
||||
setTimeout(aggressivePoll, 500);
|
||||
}, []);
|
||||
const addTask = useCallback(
|
||||
(_taskId: string) => {
|
||||
// React Query will automatically handle polling when tasks are active
|
||||
// Just trigger a refetch to get the latest data
|
||||
refetchTasks();
|
||||
},
|
||||
[refetchTasks],
|
||||
);
|
||||
|
||||
const refreshTasks = useCallback(async () => {
|
||||
await fetchTasks();
|
||||
}, [fetchTasks]);
|
||||
await refetchTasks();
|
||||
}, [refetchTasks]);
|
||||
|
||||
const removeTask = useCallback((taskId: string) => {
|
||||
setTasks((prev) => prev.filter((task) => task.task_id !== taskId));
|
||||
const removeTask = useCallback((_taskId: string) => {
|
||||
// This is now handled by React Query automatically
|
||||
// Tasks will be removed from the list when they're no longer returned by the API
|
||||
}, []);
|
||||
|
||||
const cancelTask = useCallback(
|
||||
async (taskId: string) => {
|
||||
try {
|
||||
const response = await fetch(`/api/tasks/${taskId}/cancel`, {
|
||||
method: "POST",
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
// Immediately refresh tasks to show the updated status
|
||||
await fetchTasks();
|
||||
toast.success("Task cancelled", {
|
||||
description: `Task ${taskId.substring(0, 8)}... has been cancelled`,
|
||||
});
|
||||
} else {
|
||||
const errorData = await response.json().catch(() => ({}));
|
||||
throw new Error(errorData.error || "Failed to cancel task");
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Failed to cancel task:", error);
|
||||
toast.error("Failed to cancel task", {
|
||||
description: error instanceof Error ? error.message : "Unknown error",
|
||||
});
|
||||
}
|
||||
cancelTaskMutation.mutate({ taskId });
|
||||
},
|
||||
[fetchTasks],
|
||||
[cancelTaskMutation],
|
||||
);
|
||||
|
||||
const toggleMenu = useCallback(() => {
|
||||
setIsMenuOpen((prev) => !prev);
|
||||
}, []);
|
||||
|
||||
// Periodic polling for task updates
|
||||
useEffect(() => {
|
||||
if (!isAuthenticated && !isNoAuthMode) return;
|
||||
|
||||
setIsPolling(true);
|
||||
|
||||
// Initial fetch
|
||||
fetchTasks();
|
||||
|
||||
// Set up polling interval - every 3 seconds (more responsive for active tasks)
|
||||
const interval = setInterval(fetchTasks, 3000);
|
||||
|
||||
return () => {
|
||||
clearInterval(interval);
|
||||
setIsPolling(false);
|
||||
};
|
||||
}, [isAuthenticated, isNoAuthMode, fetchTasks]);
|
||||
// Determine if we're polling based on React Query's refetch interval
|
||||
const isPolling =
|
||||
isFetching &&
|
||||
tasks.some(
|
||||
(task) =>
|
||||
task.status === "pending" ||
|
||||
task.status === "running" ||
|
||||
task.status === "processing",
|
||||
);
|
||||
|
||||
const value: TaskContextType = {
|
||||
tasks,
|
||||
|
|
@ -358,6 +287,8 @@ export function TaskProvider({ children }: { children: React.ReactNode }) {
|
|||
isFetching,
|
||||
isMenuOpen,
|
||||
toggleMenu,
|
||||
isLoading,
|
||||
error,
|
||||
};
|
||||
|
||||
return <TaskContext.Provider value={value}>{children}</TaskContext.Provider>;
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue