119 lines
3.8 KiB
TypeScript
119 lines
3.8 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect, useState } from "react";
|
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
|
import { Button } from "@/components/ui/button";
|
|
import { RefreshCw } from "lucide-react";
|
|
|
|
interface Task {
|
|
id: string;
|
|
headline: string;
|
|
projectName: string;
|
|
projectId: number;
|
|
status: string;
|
|
dueDate: string | null;
|
|
milestone: string | null;
|
|
details: string | null;
|
|
}
|
|
|
|
export function Flow() {
|
|
const [tasks, setTasks] = useState<Task[]>([]);
|
|
const [error, setError] = useState<string | null>(null);
|
|
const [loading, setLoading] = useState(true);
|
|
const [refreshing, setRefreshing] = useState(false);
|
|
const [retryTimeout, setRetryTimeout] = useState<NodeJS.Timeout | null>(null);
|
|
|
|
const fetchTasks = async (isRefresh = false) => {
|
|
try {
|
|
if (isRefresh) {
|
|
setRefreshing(true);
|
|
}
|
|
const response = await fetch('/api/leantime/tasks');
|
|
|
|
if (response.status === 429) {
|
|
const retryAfter = parseInt(response.headers.get('retry-after') || '60');
|
|
const timeout = setTimeout(() => fetchTasks(), retryAfter * 1000);
|
|
setRetryTimeout(timeout);
|
|
setError(`Rate limit exceeded. Retrying in ${retryAfter} seconds...`);
|
|
return;
|
|
}
|
|
|
|
if (!response.ok) {
|
|
throw new Error('Failed to fetch tasks');
|
|
}
|
|
|
|
const data = await response.json();
|
|
if (data.tasks && Array.isArray(data.tasks)) {
|
|
setTasks(data.tasks);
|
|
} else {
|
|
setTasks([]);
|
|
}
|
|
setError(null);
|
|
} catch (err) {
|
|
console.error('Error fetching tasks:', err);
|
|
setError('Failed to fetch tasks');
|
|
} finally {
|
|
setLoading(false);
|
|
setRefreshing(false);
|
|
}
|
|
};
|
|
|
|
useEffect(() => {
|
|
fetchTasks();
|
|
return () => {
|
|
if (retryTimeout) {
|
|
clearTimeout(retryTimeout);
|
|
}
|
|
};
|
|
}, []);
|
|
|
|
return (
|
|
<Card className="transition-transform duration-500 ease-in-out transform hover:scale-105">
|
|
<CardHeader className="flex flex-row items-center justify-between pb-2">
|
|
<CardTitle className="text-lg font-medium">Tasks</CardTitle>
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
onClick={() => fetchTasks(true)}
|
|
disabled={refreshing || !!retryTimeout}
|
|
className={refreshing ? 'animate-spin' : ''}
|
|
>
|
|
<RefreshCw className="h-4 w-4" />
|
|
</Button>
|
|
</CardHeader>
|
|
<CardContent>
|
|
{loading ? (
|
|
<div className="flex items-center justify-center py-4">
|
|
<div className="h-4 w-4 animate-spin rounded-full border-2 border-primary border-t-transparent" />
|
|
</div>
|
|
) : error ? (
|
|
<div className="text-center text-sm text-red-500">{error}</div>
|
|
) : tasks.length === 0 ? (
|
|
<div className="text-center text-sm text-gray-500">No tasks found</div>
|
|
) : (
|
|
<div className="space-y-6">
|
|
{tasks.map((task) => (
|
|
<div key={task.id} className="space-y-2">
|
|
<h3 className="font-medium text-gray-900">{task.projectName}</h3>
|
|
<div className="space-y-1">
|
|
<div className="flex items-center justify-between p-2 rounded-lg bg-white shadow-sm">
|
|
<span className="text-sm font-medium text-gray-700">
|
|
{task.headline}
|
|
</span>
|
|
<span className={`px-2 py-1 rounded-full text-xs font-medium ${
|
|
task.status === 'NEW' ? 'bg-blue-100 text-blue-800' :
|
|
task.status === 'INPROGRESS' ? 'bg-yellow-100 text-yellow-800' :
|
|
'bg-green-100 text-green-800'
|
|
}`}>
|
|
{task.status}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
} |