127 lines
4.4 KiB
TypeScript
127 lines
4.4 KiB
TypeScript
import { FaFile, FaDownload, FaTrash } from "react-icons/fa";
|
|
import styles from "./DateienItem.module.css";
|
|
import { useState } from "react";
|
|
import { useFileOperations } from "../../hooks/useFiles";
|
|
|
|
type DateienItemProps = {
|
|
file: {
|
|
id: number;
|
|
file_name: string;
|
|
action: string;
|
|
created_at: string;
|
|
size?: number;
|
|
};
|
|
onDelete?: () => void;
|
|
};
|
|
|
|
/**
|
|
* Formats a file size in bytes to a human-readable string (KB, MB, etc.)
|
|
*/
|
|
const formatFileSize = (bytes?: number): string => {
|
|
if (bytes === undefined || bytes === null) return 'Unbekannte Größe';
|
|
|
|
if (bytes === 0) return '0 Bytes';
|
|
|
|
const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
|
|
const i = Math.floor(Math.log(bytes) / Math.log(1024));
|
|
|
|
if (i === 0) return `${bytes} ${sizes[i]}`;
|
|
|
|
return `${(bytes / Math.pow(1024, i)).toFixed(1)} ${sizes[i]}`;
|
|
};
|
|
|
|
const DateienItem = ({ file, onDelete }: DateienItemProps) => {
|
|
const { downloadingFiles, deletingFiles, handleFileDownload, handleFileDelete } = useFileOperations();
|
|
const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
|
|
const isDownloading = downloadingFiles.has(file.id);
|
|
const isDeleting = deletingFiles.has(file.id);
|
|
|
|
// Format the date properly
|
|
const formatDate = (dateString: string) => {
|
|
try {
|
|
const date = new Date(dateString);
|
|
// Check if date is valid
|
|
if (isNaN(date.getTime())) {
|
|
return 'Unbekanntes Datum';
|
|
}
|
|
|
|
return date.toLocaleDateString('de-DE', {
|
|
day: '2-digit',
|
|
month: '2-digit',
|
|
year: 'numeric'
|
|
});
|
|
} catch (e) {
|
|
console.error('Error formatting date:', e);
|
|
return 'Unbekanntes Datum';
|
|
}
|
|
};
|
|
|
|
const handleDeleteClick = async () => {
|
|
if (showDeleteConfirm) {
|
|
const success = await handleFileDelete(file.id);
|
|
if (success && onDelete) {
|
|
onDelete();
|
|
}
|
|
setShowDeleteConfirm(false);
|
|
} else {
|
|
setShowDeleteConfirm(true);
|
|
}
|
|
};
|
|
|
|
const handleCancelDelete = () => {
|
|
setShowDeleteConfirm(false);
|
|
};
|
|
|
|
return (
|
|
<li>
|
|
{/* 1st column: Name with icon */}
|
|
<div className={styles.fileName}>
|
|
<FaFile className={styles.icon} />
|
|
<span>{file.file_name}</span>
|
|
</div>
|
|
|
|
{/* 2nd column: Type */}
|
|
<div className={styles.fileType}>
|
|
{file.action}
|
|
</div>
|
|
|
|
{/* 3rd column: Size */}
|
|
<div className={styles.fileSize}>
|
|
{formatFileSize(file.size)}
|
|
</div>
|
|
|
|
{/* 4th column: Date and action buttons */}
|
|
<div className={styles.fileDateWithActions}>
|
|
<span className={styles.fileDate}>
|
|
{formatDate(file.created_at)}
|
|
</span>
|
|
|
|
<div className={styles.actionButtons}>
|
|
<button
|
|
className={`${styles.downloadButton} ${isDownloading ? styles.downloading : ''}`}
|
|
onClick={() => handleFileDownload(file.id, file.file_name)}
|
|
disabled={isDownloading || isDeleting}
|
|
title="Download file"
|
|
>
|
|
<FaDownload className={styles.actionIcon} />
|
|
{isDownloading && <span className={styles.actionText}>Downloading...</span>}
|
|
</button>
|
|
<button
|
|
className={`${styles.deleteButton} ${isDeleting ? styles.deleting : ''} ${showDeleteConfirm ? styles.confirm : ''}`}
|
|
onClick={handleDeleteClick}
|
|
disabled={isDownloading || isDeleting}
|
|
title={showDeleteConfirm ? "Click again to confirm deletion" : "Delete file"}
|
|
onBlur={handleCancelDelete}
|
|
>
|
|
<FaTrash className={styles.actionIcon} />
|
|
{isDeleting && <span className={styles.actionText}>Deleting...</span>}
|
|
{showDeleteConfirm && <span className={styles.actionText}>Click to confirm</span>}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
);
|
|
};
|
|
|
|
export default DateienItem;
|
|
|