Add comprehensive Issue management functionality with drag-and-drop Kanban board. Changes: - Created Issue API client (issues.ts) with CRUD operations - Implemented React Query hooks for Issue data management - Added IssueCard component with drag-and-drop support using @dnd-kit - Created KanbanColumn component with droppable zones - Built CreateIssueDialog with form validation using zod - Implemented Kanban page at /projects/[id]/kanban with DnD status changes - Added missing UI components (textarea, select, skeleton) - Enhanced API client with helper methods (get, post, put, patch, delete) - Installed dependencies: @dnd-kit/core, @dnd-kit/sortable, @dnd-kit/utilities, @radix-ui/react-select, sonner - Fixed SignalR ConnectionManager TypeScript error - Preserved legacy KanbanBoard component for backward compatibility Features: - Drag and drop issues between Backlog, Todo, InProgress, and Done columns - Real-time status updates via API - Issue creation with type (Story, Task, Bug, Epic) and priority - Visual feedback with priority colors and type icons - Toast notifications for user actions 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
164 lines
4.5 KiB
TypeScript
164 lines
4.5 KiB
TypeScript
import axios, { AxiosError, InternalAxiosRequestConfig } from 'axios';
|
|
import { API_BASE_URL } from './config';
|
|
|
|
// Create axios instance
|
|
export const apiClient = axios.create({
|
|
baseURL: API_BASE_URL,
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
},
|
|
});
|
|
|
|
// Token management
|
|
const TOKEN_KEY = 'colaflow_access_token';
|
|
const REFRESH_TOKEN_KEY = 'colaflow_refresh_token';
|
|
|
|
export const tokenManager = {
|
|
getAccessToken: () => {
|
|
if (typeof window === 'undefined') return null;
|
|
return localStorage.getItem(TOKEN_KEY);
|
|
},
|
|
|
|
setAccessToken: (token: string) => {
|
|
if (typeof window === 'undefined') return;
|
|
localStorage.setItem(TOKEN_KEY, token);
|
|
},
|
|
|
|
getRefreshToken: () => {
|
|
if (typeof window === 'undefined') return null;
|
|
return localStorage.getItem(REFRESH_TOKEN_KEY);
|
|
},
|
|
|
|
setRefreshToken: (token: string) => {
|
|
if (typeof window === 'undefined') return;
|
|
localStorage.setItem(REFRESH_TOKEN_KEY, token);
|
|
},
|
|
|
|
clearTokens: () => {
|
|
if (typeof window === 'undefined') return;
|
|
localStorage.removeItem(TOKEN_KEY);
|
|
localStorage.removeItem(REFRESH_TOKEN_KEY);
|
|
},
|
|
};
|
|
|
|
// Request interceptor: automatically add Access Token
|
|
apiClient.interceptors.request.use(
|
|
(config: InternalAxiosRequestConfig) => {
|
|
const token = tokenManager.getAccessToken();
|
|
if (token) {
|
|
config.headers.Authorization = `Bearer ${token}`;
|
|
}
|
|
return config;
|
|
},
|
|
(error) => Promise.reject(error)
|
|
);
|
|
|
|
// Response interceptor: automatically refresh Token
|
|
let isRefreshing = false;
|
|
let failedQueue: Array<{
|
|
resolve: (value?: unknown) => void;
|
|
reject: (reason?: unknown) => void;
|
|
}> = [];
|
|
|
|
const processQueue = (error: unknown, token: string | null = null) => {
|
|
failedQueue.forEach((prom) => {
|
|
if (error) {
|
|
prom.reject(error);
|
|
} else {
|
|
prom.resolve(token);
|
|
}
|
|
});
|
|
|
|
failedQueue = [];
|
|
};
|
|
|
|
apiClient.interceptors.response.use(
|
|
(response) => response,
|
|
async (error: AxiosError) => {
|
|
const originalRequest = error.config as InternalAxiosRequestConfig & {
|
|
_retry?: boolean;
|
|
};
|
|
|
|
// If 401 and not a refresh token request, try to refresh token
|
|
if (error.response?.status === 401 && !originalRequest._retry) {
|
|
if (isRefreshing) {
|
|
// If already refreshing, queue this request
|
|
return new Promise((resolve, reject) => {
|
|
failedQueue.push({ resolve, reject });
|
|
}).then((token) => {
|
|
originalRequest.headers.Authorization = `Bearer ${token}`;
|
|
return apiClient(originalRequest);
|
|
});
|
|
}
|
|
|
|
originalRequest._retry = true;
|
|
isRefreshing = true;
|
|
|
|
const refreshToken = tokenManager.getRefreshToken();
|
|
|
|
if (!refreshToken) {
|
|
tokenManager.clearTokens();
|
|
if (typeof window !== 'undefined') {
|
|
window.location.href = '/login';
|
|
}
|
|
return Promise.reject(error);
|
|
}
|
|
|
|
try {
|
|
const { data } = await axios.post(`${API_BASE_URL}/api/auth/refresh`, {
|
|
refreshToken,
|
|
});
|
|
|
|
tokenManager.setAccessToken(data.accessToken);
|
|
tokenManager.setRefreshToken(data.refreshToken);
|
|
|
|
apiClient.defaults.headers.common.Authorization = `Bearer ${data.accessToken}`;
|
|
originalRequest.headers.Authorization = `Bearer ${data.accessToken}`;
|
|
|
|
processQueue(null, data.accessToken);
|
|
|
|
return apiClient(originalRequest);
|
|
} catch (refreshError) {
|
|
processQueue(refreshError, null);
|
|
tokenManager.clearTokens();
|
|
if (typeof window !== 'undefined') {
|
|
window.location.href = '/login';
|
|
}
|
|
return Promise.reject(refreshError);
|
|
} finally {
|
|
isRefreshing = false;
|
|
}
|
|
}
|
|
|
|
return Promise.reject(error);
|
|
}
|
|
);
|
|
|
|
// API helper functions
|
|
export const api = {
|
|
get: async <T>(url: string, config?: any): Promise<T> => {
|
|
const response = await apiClient.get(url, config);
|
|
return response.data;
|
|
},
|
|
|
|
post: async <T>(url: string, data?: any, config?: any): Promise<T> => {
|
|
const response = await apiClient.post(url, data, config);
|
|
return response.data;
|
|
},
|
|
|
|
put: async <T>(url: string, data?: any, config?: any): Promise<T> => {
|
|
const response = await apiClient.put(url, data, config);
|
|
return response.data;
|
|
},
|
|
|
|
patch: async <T>(url: string, data?: any, config?: any): Promise<T> => {
|
|
const response = await apiClient.patch(url, data, config);
|
|
return response.data;
|
|
},
|
|
|
|
delete: async <T>(url: string, config?: any): Promise<T> => {
|
|
const response = await apiClient.delete(url, config);
|
|
return response.data;
|
|
},
|
|
};
|