ColaFlow/docs/plans/sprint_1_story_2_task_1.md

Task 5: Create API Client Services

Task ID: TASK-005 | Story: STORY-002 | Sprint: Sprint 1 Estimated Hours: 4h | Assignee: Frontend Developer 2 | Priority: P0 | Status: Not Started

Task Description

Create TypeScript API client services for Epic/Story/Task with CRUD operations, authentication, and error handling.

Implementation

File Structure

src/api/
├── clients/
│   ├── EpicApiClient.ts
│   ├── StoryApiClient.ts
│   └── TaskApiClient.ts
├── types.ts
└── axiosInstance.ts

Example: EpicApiClient.ts

import { axiosInstance } from '../axiosInstance';
import { Epic, CreateEpicDto, UpdateEpicDto } from '../types';

export class EpicApiClient {
  async getAll(projectId: string): Promise<Epic[]> {
    const { data } = await axiosInstance.get(`/epics?projectId=${projectId}`);
    return data;
  }

  async getById(id: string): Promise<Epic> {
    const { data } = await axiosInstance.get(`/epics/${id}`);
    return data;
  }

  async create(dto: CreateEpicDto): Promise<Epic> {
    const { data } = await axiosInstance.post('/epics', dto);
    return data;
  }

  async update(id: string, dto: UpdateEpicDto): Promise<Epic> {
    const { data } = await axiosInstance.put(`/epics/${id}`, dto);
    return data;
  }

  async delete(id: string): Promise<void> {
    await axiosInstance.delete(`/epics/${id}`);
  }
}

export const epicApiClient = new EpicApiClient();

Acceptance Criteria

• EpicApiClient with 5 CRUD methods
• StoryApiClient with 5 CRUD methods
• TaskApiClient with 5 CRUD methods
• JWT authentication in Axios interceptor
• Error handling and TypeScript types

Deliverables

1. 3 API client classes
2. TypeScript types/interfaces
3. Axios instance with auth
4. Unit tests (15+ tests)

Status: Not Started | Created: 2025-11-04