From 8d64ee7f9cd5201eaf22783b274944cdc246253d Mon Sep 17 00:00:00 2001 From: Ida Dittrich Date: Wed, 3 Sep 2025 22:52:44 +0200 Subject: [PATCH] fixed refetching after deleting file --- src/components/Dateien/DateienTable.tsx | 56 ++------------------- src/components/Dateien/dateienInterfaces.ts | 2 + src/components/Dateien/dateienLogic.tsx | 45 ++++++++++++++--- 3 files changed, 45 insertions(+), 58 deletions(-) diff --git a/src/components/Dateien/DateienTable.tsx b/src/components/Dateien/DateienTable.tsx index c65ca9e..c820a8c 100644 --- a/src/components/Dateien/DateienTable.tsx +++ b/src/components/Dateien/DateienTable.tsx @@ -3,7 +3,6 @@ import { useLanguage } from '../../contexts/LanguageContext'; import { Popup, EditForm } from '../Popup'; import styles from './DateienTable.module.css'; import { useDateienLogic } from './dateienLogic.tsx'; -import { useFileOperations, type UserFile } from '../../hooks/useFiles'; import type { DateienTableProps } from './dateienInterfaces'; export function DateienTable({ className = '' }: DateienTableProps) { @@ -21,57 +20,10 @@ export function DateienTable({ className = '' }: DateienTableProps) { editFileFields, handleSaveFile, handleCancelEdit, - refetch + refetch, + handleDelete, + handleDeleteMultiple } = useDateienLogic(); - - // Use file operations for delete functionality - const { handleFileDelete } = useFileOperations(); - - // Handle single file deletion - const handleDeleteSingle = async (file: UserFile) => { - const fileName = file.file_name || file.id; - if (window.confirm(t('files.delete.confirm', 'Are you sure you want to delete "{name}"?').replace('{name}', fileName))) { - const success = await handleFileDelete(file.id, () => { - // Optimistic update - this will be called immediately - refetch(); - }); - - if (!success) { - console.error('Delete failed for file:', file.id); - // Refetch to restore the file in case of failure - refetch(); - } - } - }; - - // Handle multiple file deletion - const handleDeleteMultiple = async (filesToDelete: UserFile[]) => { - const fileCount = filesToDelete.length; - if (window.confirm(t('files.delete.confirmMultiple', 'Are you sure you want to delete {count} files?').replace('{count}', fileCount.toString()))) { - // Start all delete operations simultaneously - const deletePromises = filesToDelete.map(async (file) => { - try { - const success = await handleFileDelete(file.id); - return { fileId: file.id, success }; - } catch (error) { - console.error('Failed to delete file:', file.id, error); - return { fileId: file.id, success: false }; - } - }); - - // Wait for all deletions to complete - const results = await Promise.all(deletePromises); - - // Check if any deletions failed - const failedDeletions = results.filter(result => !result.success); - if (failedDeletions.length > 0) { - console.error('Some file deletions failed:', failedDeletions); - } - - // Refresh the file list regardless of individual failures - refetch(); - } - }; // Show error state if (error) { @@ -100,7 +52,7 @@ export function DateienTable({ className = '' }: DateienTableProps) { pagination={true} pageSize={10} onRowClick={undefined} - onDelete={handleDeleteSingle} + onDelete={handleDelete} onDeleteMultiple={handleDeleteMultiple} actions={actions} className={styles.dateienFormGenerator} diff --git a/src/components/Dateien/dateienInterfaces.ts b/src/components/Dateien/dateienInterfaces.ts index f02df0d..d588e97 100644 --- a/src/components/Dateien/dateienInterfaces.ts +++ b/src/components/Dateien/dateienInterfaces.ts @@ -85,6 +85,8 @@ export interface DateienLogicReturn { handleEditFile: (file: UserFile) => void; handleSaveFile: (updatedFile: UserFile) => Promise; handleCancelEdit: () => void; + handleDelete: (file: UserFile) => Promise; + handleDeleteMultiple: (files: UserFile[]) => Promise; } diff --git a/src/components/Dateien/dateienLogic.tsx b/src/components/Dateien/dateienLogic.tsx index c27d358..bebf2bb 100644 --- a/src/components/Dateien/dateienLogic.tsx +++ b/src/components/Dateien/dateienLogic.tsx @@ -15,7 +15,7 @@ import type { } from './dateienInterfaces'; export function useDateienLogic(): DateienLogicReturn { - const { files, loading, error, refetch } = useUserFiles(); + const { files, loading, error, refetch, removeFileOptimistically } = useUserFiles(); const { handleFileDownload, handleFileDelete, @@ -286,10 +286,10 @@ export function useDateienLogic(): DateienLogicReturn { // Handle file deletion const handleDelete = async (file: UserFile) => { if (window.confirm(t('files.delete.confirm').replace('{name}', file.file_name))) { - const success = await handleFileDelete(file.id, () => { - // Optimistic update - this will be called immediately - refetch(); - }); + // Immediately remove from UI for instant feedback + removeFileOptimistically(file.id); + + const success = await handleFileDelete(file.id); if (!success && deleteError) { console.error('Delete failed:', deleteError); @@ -299,6 +299,37 @@ export function useDateienLogic(): DateienLogicReturn { } }; + // Handle multiple file deletion + const handleDeleteMultiple = async (filesToDelete: UserFile[]) => { + const fileCount = filesToDelete.length; + if (window.confirm(t('files.delete.confirmMultiple', 'Are you sure you want to delete {count} files?').replace('{count}', fileCount.toString()))) { + // Immediately remove all files from UI for instant feedback + filesToDelete.forEach(file => removeFileOptimistically(file.id)); + + // Start all delete operations simultaneously + const deletePromises = filesToDelete.map(async (file) => { + try { + const success = await handleFileDelete(file.id); + return { fileId: file.id, success }; + } catch (error) { + console.error('Failed to delete file:', file.id, error); + return { fileId: file.id, success: false }; + } + }); + + // Wait for all deletions to complete + const results = await Promise.all(deletePromises); + + // Check if any deletions failed + const failedDeletions = results.filter(result => !result.success); + if (failedDeletions.length > 0) { + console.error('Some file deletions failed:', failedDeletions); + // Refetch to restore any files that failed to delete + refetch(); + } + } + }; + // Configure action buttons const actions: TableAction[] = useMemo(() => [ { @@ -352,6 +383,8 @@ export function useDateienLogic(): DateienLogicReturn { editFileFields, handleEditFile, handleSaveFile, - handleCancelEdit + handleCancelEdit, + handleDelete, + handleDeleteMultiple }; }