feat(frontend): Implement Phase 1 - ProjectManagement API Client & Hooks

Add complete API integration for ProjectManagement module:
- Epics, Stories, Tasks API clients
- React Query hooks for all entities
- Updated type definitions to match backend API
- API test page for connection verification

Changes:
- Update lib/api/config.ts: Add all ProjectManagement endpoints
- Update types/project.ts: Match backend API models (Epic, Story, Task)
- Create lib/api/pm.ts: API clients for Epics, Stories, Tasks
- Create lib/hooks/use-epics.ts: React Query hooks for Epic CRUD
- Create lib/hooks/use-stories.ts: React Query hooks for Story CRUD
- Create lib/hooks/use-tasks.ts: React Query hooks for Task CRUD
- Create app/(dashboard)/api-test/page.tsx: API connection test page

Features:
- Full CRUD operations for Epics, Stories, Tasks
- Status change and assignment operations
- Optimistic updates for better UX
- Error handling with toast notifications
- Query invalidation for cache consistency

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Yaojia Wang
2025-11-04 20:58:59 +01:00
parent de697d436b
commit e52c8300de
7 changed files with 901 additions and 39 deletions

163
lib/hooks/use-tasks.ts Normal file
View File

@@ -0,0 +1,163 @@
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
import { tasksApi } from '@/lib/api/pm';
import type { Task, CreateTaskDto, UpdateTaskDto, WorkItemStatus } from '@/types/project';
import { toast } from 'sonner';
// ==================== Query Hooks ====================
export function useTasks(storyId?: string) {
return useQuery<Task[]>({
queryKey: ['tasks', storyId],
queryFn: async () => {
console.log('[useTasks] Fetching tasks...', { storyId });
try {
const result = await tasksApi.list(storyId);
console.log('[useTasks] Fetch successful:', result);
return result;
} catch (error) {
console.error('[useTasks] Fetch failed:', error);
throw error;
}
},
staleTime: 5 * 60 * 1000, // 5 minutes
retry: 1,
});
}
export function useTask(id: string) {
return useQuery<Task>({
queryKey: ['tasks', id],
queryFn: () => tasksApi.get(id),
enabled: !!id,
});
}
// ==================== Mutation Hooks ====================
export function useCreateTask() {
const queryClient = useQueryClient();
return useMutation({
mutationFn: (data: CreateTaskDto) => tasksApi.create(data),
onSuccess: (newTask) => {
// Invalidate all task queries
queryClient.invalidateQueries({ queryKey: ['tasks'] });
// Also invalidate story details
queryClient.invalidateQueries({ queryKey: ['stories', newTask.storyId] });
toast.success('Task created successfully!');
},
onError: (error: any) => {
console.error('[useCreateTask] Error:', error);
toast.error(error.response?.data?.detail || 'Failed to create task');
},
});
}
export function useUpdateTask() {
const queryClient = useQueryClient();
return useMutation({
mutationFn: ({ id, data }: { id: string; data: UpdateTaskDto }) =>
tasksApi.update(id, data),
onMutate: async ({ id, data }) => {
await queryClient.cancelQueries({ queryKey: ['tasks', id] });
const previousTask = queryClient.getQueryData<Task>(['tasks', id]);
queryClient.setQueryData<Task>(['tasks', id], (old) => ({
...old!,
...data,
}));
return { previousTask };
},
onError: (error: any, variables, context) => {
console.error('[useUpdateTask] Error:', error);
if (context?.previousTask) {
queryClient.setQueryData(['tasks', variables.id], context.previousTask);
}
toast.error(error.response?.data?.detail || 'Failed to update task');
},
onSuccess: () => {
toast.success('Task updated successfully!');
},
onSettled: (_, __, variables) => {
queryClient.invalidateQueries({ queryKey: ['tasks', variables.id] });
queryClient.invalidateQueries({ queryKey: ['tasks'] });
},
});
}
export function useDeleteTask() {
const queryClient = useQueryClient();
return useMutation({
mutationFn: (id: string) => tasksApi.delete(id),
onSuccess: (_, id) => {
queryClient.invalidateQueries({ queryKey: ['tasks'] });
queryClient.removeQueries({ queryKey: ['tasks', id] });
toast.success('Task deleted successfully!');
},
onError: (error: any) => {
console.error('[useDeleteTask] Error:', error);
toast.error(error.response?.data?.detail || 'Failed to delete task');
},
});
}
export function useChangeTaskStatus() {
const queryClient = useQueryClient();
return useMutation({
mutationFn: ({ id, status }: { id: string; status: WorkItemStatus }) =>
tasksApi.changeStatus(id, status),
onMutate: async ({ id, status }) => {
await queryClient.cancelQueries({ queryKey: ['tasks', id] });
const previousTask = queryClient.getQueryData<Task>(['tasks', id]);
queryClient.setQueryData<Task>(['tasks', id], (old) => ({
...old!,
status,
}));
return { previousTask };
},
onError: (error: any, variables, context) => {
console.error('[useChangeTaskStatus] Error:', error);
if (context?.previousTask) {
queryClient.setQueryData(['tasks', variables.id], context.previousTask);
}
toast.error(error.response?.data?.detail || 'Failed to change task status');
},
onSuccess: () => {
toast.success('Task status changed successfully!');
},
onSettled: (_, __, variables) => {
queryClient.invalidateQueries({ queryKey: ['tasks', variables.id] });
queryClient.invalidateQueries({ queryKey: ['tasks'] });
},
});
}
export function useAssignTask() {
const queryClient = useQueryClient();
return useMutation({
mutationFn: ({ id, assigneeId }: { id: string; assigneeId: string }) =>
tasksApi.assign(id, assigneeId),
onSuccess: (_, variables) => {
queryClient.invalidateQueries({ queryKey: ['tasks', variables.id] });
queryClient.invalidateQueries({ queryKey: ['tasks'] });
toast.success('Task assigned successfully!');
},
onError: (error: any) => {
console.error('[useAssignTask] Error:', error);
toast.error(error.response?.data?.detail || 'Failed to assign task');
},
});
}