94 lines
2.9 KiB
TypeScript
94 lines
2.9 KiB
TypeScript
'use client';
|
|
|
|
import { useEffect, useState } from 'react';
|
|
import { getAvailableDownloads, deleteDownload } from '@/app/actions/get-available-downloads';
|
|
|
|
interface DownloadFile {
|
|
name: string;
|
|
url: string;
|
|
}
|
|
|
|
interface DatasetDownloadsListProps {
|
|
datasetId: number;
|
|
}
|
|
|
|
export default function DatasetDownloadsList({ datasetId }: DatasetDownloadsListProps) {
|
|
const [downloads, setDownloads] = useState<DownloadFile[]>([]);
|
|
const [loading, setLoading] = useState(true);
|
|
const [error, setError] = useState<string | null>(null);
|
|
const [deleting, setDeleting] = useState<string | null>(null);
|
|
|
|
const fetchDownloads = async () => {
|
|
try {
|
|
setError(null);
|
|
const files = await getAvailableDownloads(datasetId);
|
|
setDownloads(files);
|
|
} catch (err) {
|
|
setError(err instanceof Error ? err.message : 'Failed to load downloads');
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
useEffect(() => {
|
|
fetchDownloads();
|
|
}, [datasetId]);
|
|
|
|
const handleDelete = async (fileName: string) => {
|
|
if (!confirm(`Are you sure you want to delete "${fileName}"?`)) {
|
|
return;
|
|
}
|
|
|
|
setDeleting(fileName);
|
|
try {
|
|
await deleteDownload(fileName);
|
|
setDownloads(downloads.filter(d => d.name !== fileName));
|
|
} catch (err) {
|
|
setError(err instanceof Error ? err.message : 'Failed to delete download');
|
|
} finally {
|
|
setDeleting(null);
|
|
}
|
|
};
|
|
|
|
if (loading) {
|
|
return <div className="text-gray-500 text-sm">Loading available downloads...</div>;
|
|
}
|
|
|
|
if (error) {
|
|
return <div className="text-red-500 text-sm">Error: {error}</div>;
|
|
}
|
|
|
|
if (downloads.length === 0) {
|
|
return <div className="text-gray-500 text-sm">No downloads available for this dataset</div>;
|
|
}
|
|
|
|
return (
|
|
<div className="bg-white rounded-lg shadow p-6">
|
|
<h2 className="text-lg font-semibold mb-4">Available Downloads</h2>
|
|
<div className="space-y-2">
|
|
{downloads.map((download) => (
|
|
<div key={download.name} className="flex items-center justify-between p-3 bg-gray-50 rounded hover:bg-gray-100 transition-colors">
|
|
<span className="text-gray-700 text-sm truncate flex-1">{download.name}</span>
|
|
<div className="ml-4 flex gap-2">
|
|
<a
|
|
href={download.url}
|
|
download
|
|
className="px-3 py-1 bg-blue-500 hover:bg-blue-600 text-white text-sm rounded transition-colors whitespace-nowrap"
|
|
>
|
|
Download
|
|
</a>
|
|
<button
|
|
onClick={() => handleDelete(download.name)}
|
|
disabled={deleting === download.name}
|
|
className="px-3 py-1 bg-red-500 hover:bg-red-600 disabled:bg-gray-400 text-white text-sm rounded transition-colors whitespace-nowrap"
|
|
>
|
|
{deleting === download.name ? 'Deleting...' : 'Delete'}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|