122 lines
3.8 KiB
TypeScript
122 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 StatusLabel {
|
|
id: string;
|
|
name: string;
|
|
statusType: string;
|
|
class: string;
|
|
}
|
|
|
|
interface Project {
|
|
id: string;
|
|
name: string;
|
|
labels: StatusLabel[];
|
|
}
|
|
|
|
export function Flow() {
|
|
const [projects, setProjects] = useState<Project[]>([]);
|
|
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 fetchProjects = async (isRefresh = false) => {
|
|
try {
|
|
if (isRefresh) {
|
|
setRefreshing(true);
|
|
}
|
|
const response = await fetch('/api/leantime/status-labels');
|
|
|
|
if (response.status === 429) {
|
|
const retryAfter = parseInt(response.headers.get('retry-after') || '60');
|
|
const timeout = setTimeout(() => fetchProjects(), retryAfter * 1000);
|
|
setRetryTimeout(timeout);
|
|
setError(`Rate limit exceeded. Retrying in ${retryAfter} seconds...`);
|
|
return;
|
|
}
|
|
|
|
if (!response.ok) {
|
|
throw new Error('Failed to fetch projects');
|
|
}
|
|
|
|
const data = await response.json();
|
|
if (data.projects && Array.isArray(data.projects)) {
|
|
setProjects(data.projects);
|
|
} else {
|
|
setProjects([]);
|
|
}
|
|
setError(null);
|
|
} catch (err) {
|
|
console.error('Error fetching projects:', err);
|
|
setError('Failed to fetch projects');
|
|
} finally {
|
|
setLoading(false);
|
|
setRefreshing(false);
|
|
}
|
|
};
|
|
|
|
useEffect(() => {
|
|
fetchProjects();
|
|
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">Flow</CardTitle>
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
onClick={() => fetchProjects(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>
|
|
) : projects.length === 0 ? (
|
|
<div className="text-center text-sm text-gray-500">No projects found</div>
|
|
) : (
|
|
<div className="space-y-6">
|
|
{projects.map((project) => (
|
|
<div key={project.id} className="space-y-2">
|
|
<h3 className="font-medium text-gray-900">{project.name}</h3>
|
|
<div className="space-y-1">
|
|
{project.labels.map((label) => (
|
|
<div
|
|
key={label.id}
|
|
className="flex items-center justify-between p-2 rounded-lg bg-white shadow-sm"
|
|
>
|
|
<span className="text-sm font-medium text-gray-700">
|
|
{label.name}
|
|
</span>
|
|
<span className={`px-2 py-1 rounded-full text-xs font-medium ${label.class}`}>
|
|
{label.statusType}
|
|
</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
} |