feat: update task sorting to maintain current page context

- Modified `loadAufgaben` to accept sort parameter and update state
- Updated all `loadAufgaben` calls to pass current sort value
- Changed sort change handler to reload current page instead of resetting to page 1
- Removed redundant sort state update in handler
- Database file updated with test data changes

This improves UX by maintaining pagination context when changing sort order rather than always resetting to the first page.
This commit is contained in:
Andreas Binczyk 2026-06-04 20:11:17 +02:00
parent 2738ea1243
commit e2a3532e8c
2 changed files with 10 additions and 10 deletions

View file

@ -32,10 +32,11 @@ export default function TodoApp() {
}); });
// Lade Aufgaben vom Server mit Paginierung und Sortierung // Lade Aufgaben vom Server mit Paginierung und Sortierung
const loadAufgaben = async (page: number = 1) => { const loadAufgaben = async (page: number = 1, sort: SortOption = sortierung) => {
try { try {
setIsLoading(true); setIsLoading(true);
const response = await fetch(`/api/tasks?page=${page}&limit=10&sort=${sortierung}`); setSortierung(sort);
const response = await fetch(`/api/tasks?page=${page}&limit=10&sort=${sort}`);
if (response.ok) { if (response.ok) {
const data = await response.json(); const data = await response.json();
setAufgaben(data.aufgaben); setAufgaben(data.aufgaben);
@ -50,7 +51,7 @@ export default function TodoApp() {
// Initial laden // Initial laden
useEffect(() => { useEffect(() => {
loadAufgaben(1); loadAufgaben(1, sortierung);
}, []); }, []);
// Aufgaben werden bereits serverseitig sortiert, keine clientseitige Sortierung nötig // Aufgaben werden bereits serverseitig sortiert, keine clientseitige Sortierung nötig
@ -71,7 +72,7 @@ export default function TodoApp() {
if (response.ok) { if (response.ok) {
setNeueAufgabe(''); setNeueAufgabe('');
// Zur ersten Seite zurück, wenn neue Aufgabe hinzugefügt wird // Zur ersten Seite zurück, wenn neue Aufgabe hinzugefügt wird
await loadAufgaben(1); await loadAufgaben(1, sortierung);
} }
} catch (error) { } catch (error) {
console.error('Fehler beim Hinzufügen:', error); console.error('Fehler beim Hinzufügen:', error);
@ -87,8 +88,8 @@ export default function TodoApp() {
}); });
if (response.ok) { if (response.ok) {
// Aktuelle Seite neu laden oder zur vorherigen, wenn leer // Aktuelle Seite neu laden
await loadAufgaben(pagination.page); await loadAufgaben(pagination.page, sortierung);
} }
} catch (error) { } catch (error) {
console.error('Fehler beim Löschen:', error); console.error('Fehler beim Löschen:', error);
@ -103,18 +104,17 @@ export default function TodoApp() {
}); });
if (response.ok) { if (response.ok) {
await loadAufgaben(pagination.page); await loadAufgaben(pagination.page, sortierung);
} }
} catch (error) { } catch (error) {
console.error('Fehler beim Aktualisieren:', error); console.error('Fehler beim Aktualisieren:', error);
} }
}; };
// Sortierung ändern und Aufgaben neu laden // Sortierung ändern und Aufgaben auf aktueller Seite neu laden
const handleSortierungAendern = async (e: React.ChangeEvent<HTMLSelectElement>) => { const handleSortierungAendern = async (e: React.ChangeEvent<HTMLSelectElement>) => {
const neueSortierung = e.target.value as SortOption; const neueSortierung = e.target.value as SortOption;
setSortierung(neueSortierung); await loadAufgaben(pagination.page, neueSortierung);
await loadAufgaben(1);
}; };
return ( return (

BIN
todo.db

Binary file not shown.