From 81c78fa072a069776c77b3a615ac54f81aa2a45b Mon Sep 17 00:00:00 2001 From: Louis Knight-Webb Date: Tue, 17 Jun 2025 20:25:52 -0400 Subject: [PATCH] Improve tasks --- frontend/src/pages/project-tasks.tsx | 294 +++++++++++++++------------ 1 file changed, 161 insertions(+), 133 deletions(-) diff --git a/frontend/src/pages/project-tasks.tsx b/frontend/src/pages/project-tasks.tsx index 76609e58..d95c0240 100644 --- a/frontend/src/pages/project-tasks.tsx +++ b/frontend/src/pages/project-tasks.tsx @@ -1,217 +1,245 @@ -import { useState, useEffect } from 'react' -import { useParams, useNavigate } from 'react-router-dom' -import { Button } from '@/components/ui/button' -import { Card, CardContent } from '@/components/ui/card' -import { ArrowLeft, Plus } from 'lucide-react' -import { makeRequest } from '@/lib/api' -import { TaskCreateDialog } from '@/components/tasks/TaskCreateDialog' -import { TaskEditDialog } from '@/components/tasks/TaskEditDialog' +import { useState, useEffect } from "react"; +import { useParams, useNavigate } from "react-router-dom"; +import { Button } from "@/components/ui/button"; +import { Card, CardContent } from "@/components/ui/card"; +import { ArrowLeft, Plus } from "lucide-react"; +import { makeRequest } from "@/lib/api"; +import { TaskCreateDialog } from "@/components/tasks/TaskCreateDialog"; +import { TaskEditDialog } from "@/components/tasks/TaskEditDialog"; -import { TaskKanbanBoard } from '@/components/tasks/TaskKanbanBoard' -import type { TaskStatus, TaskWithAttemptStatus } from 'shared/types' -import type { DragEndEvent } from '@/components/ui/shadcn-io/kanban' +import { TaskKanbanBoard } from "@/components/tasks/TaskKanbanBoard"; +import type { TaskStatus, TaskWithAttemptStatus } from "shared/types"; +import type { DragEndEvent } from "@/components/ui/shadcn-io/kanban"; -type Task = TaskWithAttemptStatus +type Task = TaskWithAttemptStatus; interface Project { - id: string - name: string - owner_id: string - created_at: string - updated_at: string + id: string; + name: string; + owner_id: string; + created_at: string; + updated_at: string; } interface ApiResponse { - success: boolean - data: T | null - message: string | null + success: boolean; + data: T | null; + message: string | null; } - - - - export function ProjectTasks() { - const { projectId } = useParams<{ projectId: string }>() - const navigate = useNavigate() - const [tasks, setTasks] = useState([]) - const [project, setProject] = useState(null) - const [loading, setLoading] = useState(true) - const [error, setError] = useState(null) - const [isCreateDialogOpen, setIsCreateDialogOpen] = useState(false) - const [editingTask, setEditingTask] = useState(null) - const [isEditDialogOpen, setIsEditDialogOpen] = useState(false) - - + const { projectId } = useParams<{ projectId: string }>(); + const navigate = useNavigate(); + const [tasks, setTasks] = useState([]); + const [project, setProject] = useState(null); + const [loading, setLoading] = useState(true); + const [error, setError] = useState(null); + const [isCreateDialogOpen, setIsCreateDialogOpen] = useState(false); + const [editingTask, setEditingTask] = useState(null); + const [isEditDialogOpen, setIsEditDialogOpen] = useState(false); useEffect(() => { if (projectId) { - fetchProject() - fetchTasks() + fetchProject(); + fetchTasks(); + + // Set up polling to refresh tasks every 5 seconds + const interval = setInterval(() => { + fetchTasks(true); // Skip loading spinner for polling + }, 2000); + + // Cleanup interval on unmount + return () => clearInterval(interval); } - }, [projectId]) + }, [projectId]); const fetchProject = async () => { try { - const response = await makeRequest(`/api/projects/${projectId}`) - + const response = await makeRequest(`/api/projects/${projectId}`); + if (response.ok) { - const result: ApiResponse = await response.json() + const result: ApiResponse = await response.json(); if (result.success && result.data) { - setProject(result.data) + setProject(result.data); } } else if (response.status === 404) { - setError('Project not found') - navigate('/projects') + setError("Project not found"); + navigate("/projects"); } } catch (err) { - setError('Failed to load project') + setError("Failed to load project"); } - } + }; - const fetchTasks = async () => { + const fetchTasks = async (skipLoading = false) => { try { - setLoading(true) - const response = await makeRequest(`/api/projects/${projectId}/tasks`) - + if (!skipLoading) { + setLoading(true); + } + const response = await makeRequest(`/api/projects/${projectId}/tasks`); + if (response.ok) { - const result: ApiResponse = await response.json() + const result: ApiResponse = await response.json(); if (result.success && result.data) { - setTasks(result.data) + // Only update if data has actually changed + setTasks(prevTasks => { + const newTasks = result.data!; + if (JSON.stringify(prevTasks) === JSON.stringify(newTasks)) { + return prevTasks; // Return same reference to prevent re-render + } + return newTasks; + }); } } else { - setError('Failed to load tasks') + setError("Failed to load tasks"); } } catch (err) { - setError('Failed to load tasks') + setError("Failed to load tasks"); } finally { - setLoading(false) + if (!skipLoading) { + setLoading(false); + } } - } + }; const handleCreateTask = async (title: string, description: string) => { try { const response = await makeRequest(`/api/projects/${projectId}/tasks`, { - method: 'POST', + method: "POST", body: JSON.stringify({ project_id: projectId, title, - description: description || null - }) - }) + description: description || null, + }), + }); if (response.ok) { - await fetchTasks() + await fetchTasks(); } else { - setError('Failed to create task') + setError("Failed to create task"); } } catch (err) { - setError('Failed to create task') + setError("Failed to create task"); } - } + }; - const handleUpdateTask = async (title: string, description: string, status: TaskStatus) => { - if (!editingTask) return + const handleUpdateTask = async ( + title: string, + description: string, + status: TaskStatus + ) => { + if (!editingTask) return; try { - const response = await makeRequest(`/api/projects/${projectId}/tasks/${editingTask.id}`, { - method: 'PUT', - body: JSON.stringify({ - title, - description: description || null, - status - }) - }) + const response = await makeRequest( + `/api/projects/${projectId}/tasks/${editingTask.id}`, + { + method: "PUT", + body: JSON.stringify({ + title, + description: description || null, + status, + }), + } + ); if (response.ok) { - await fetchTasks() - setEditingTask(null) + await fetchTasks(); + setEditingTask(null); } else { - setError('Failed to update task') + setError("Failed to update task"); } } catch (err) { - setError('Failed to update task') + setError("Failed to update task"); } - } + }; const handleDeleteTask = async (taskId: string) => { - if (!confirm('Are you sure you want to delete this task?')) return + if (!confirm("Are you sure you want to delete this task?")) return; try { - const response = await makeRequest(`/api/projects/${projectId}/tasks/${taskId}`, { - method: 'DELETE', - }) + const response = await makeRequest( + `/api/projects/${projectId}/tasks/${taskId}`, + { + method: "DELETE", + } + ); if (response.ok) { - await fetchTasks() + await fetchTasks(); } else { - setError('Failed to delete task') + setError("Failed to delete task"); } } catch (err) { - setError('Failed to delete task') + setError("Failed to delete task"); } - } + }; const handleEditTask = (task: Task) => { - setEditingTask(task) - setIsEditDialogOpen(true) - } + setEditingTask(task); + setIsEditDialogOpen(true); + }; const handleViewTaskDetails = (task: Task) => { - navigate(`/projects/${projectId}/tasks/${task.id}`) - } + navigate(`/projects/${projectId}/tasks/${task.id}`); + }; const handleDragEnd = async (event: DragEndEvent) => { - const { active, over } = event - - if (!over || !active.data.current) return - - const taskId = active.id as string - const newStatus = over.id as Task['status'] - const task = tasks.find(t => t.id === taskId) - - if (!task || task.status === newStatus) return + const { active, over } = event; + + if (!over || !active.data.current) return; + + const taskId = active.id as string; + const newStatus = over.id as Task["status"]; + const task = tasks.find((t) => t.id === taskId); + + if (!task || task.status === newStatus) return; // Optimistically update the UI immediately - const previousStatus = task.status - setTasks(prev => prev.map(t => - t.id === taskId ? { ...t, status: newStatus } : t - )) + const previousStatus = task.status; + setTasks((prev) => + prev.map((t) => (t.id === taskId ? { ...t, status: newStatus } : t)) + ); try { - const response = await makeRequest(`/api/projects/${projectId}/tasks/${taskId}`, { - method: 'PUT', - body: JSON.stringify({ - title: task.title, - description: task.description, - status: newStatus - }) - }) + const response = await makeRequest( + `/api/projects/${projectId}/tasks/${taskId}`, + { + method: "PUT", + body: JSON.stringify({ + title: task.title, + description: task.description, + status: newStatus, + }), + } + ); if (!response.ok) { // Revert the optimistic update if the API call failed - setTasks(prev => prev.map(t => - t.id === taskId ? { ...t, status: previousStatus } : t - )) - setError('Failed to update task status') + setTasks((prev) => + prev.map((t) => + t.id === taskId ? { ...t, status: previousStatus } : t + ) + ); + setError("Failed to update task status"); } } catch (err) { // Revert the optimistic update if the API call failed - setTasks(prev => prev.map(t => - t.id === taskId ? { ...t, status: previousStatus } : t - )) - setError('Failed to update task status') + setTasks((prev) => + prev.map((t) => + t.id === taskId ? { ...t, status: previousStatus } : t + ) + ); + setError("Failed to update task status"); } - } - - + }; if (loading) { - return
Loading tasks...
+ return
Loading tasks...
; } if (error) { - return
{error}
+ return
{error}
; } return ( @@ -222,7 +250,7 @@ export function ProjectTasks() {

- {project?.name || 'Project'} Tasks + {project?.name || "Project"} Tasks

Manage tasks for this project

- +