From 1d11f8316cadf6e02b5a23b9aea3c3885a2ed464 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mih=C3=A1ly=20H=C3=B3bor?= Date: Sat, 4 Apr 2026 01:06:18 +0200 Subject: [PATCH] Fix the issue where the chore reappears after completion then becomes hidden again. --- src/views/Chores/hooks/useChoreActions.js | 42 +++++++++++++++++++++-- 1 file changed, 40 insertions(+), 2 deletions(-) diff --git a/src/views/Chores/hooks/useChoreActions.js b/src/views/Chores/hooks/useChoreActions.js index 437d8de..a8e0088 100644 --- a/src/views/Chores/hooks/useChoreActions.js +++ b/src/views/Chores/hooks/useChoreActions.js @@ -154,6 +154,18 @@ export const useChoreActions = ({ async (action, chore, extraData = {}) => { switch (action) { case 'complete': + // 1. Instantly hide the chore from the UI and Cache + setChores(prev => prev.filter(c => c.id !== chore.id)) + setFilteredChores(prev => prev.filter(c => c.id !== chore.id)) + + queryClient.setQueriesData({ queryKey: ['chores'] }, oldData => { + if (!oldData || !oldData.res) return oldData; + return { + ...oldData, + res: oldData.res.filter(c => c.id !== chore.id), + } + }); + try { const response = await MarkChoreComplete( chore.id, @@ -162,10 +174,36 @@ export const useChoreActions = ({ null, ) if (response.ok) { - const data = await response.json() - updateChoreInState(data.res, 'completed') + // 2. Show the success notification with Undo + showSuccess({ + message: 'Task completed', + undoAction: async () => { + try { + const undoResponse = await UndoChoreAction(chore.id) + if (undoResponse.ok) { + refetchChores() + showUndo({ + title: 'Undo Successful', + message: 'Task completion has been undone.', + }) + } else throw new Error('Failed to undo') + } catch (error) { + showError({ + title: 'Undo Failed', + message: 'Unable to undo the action. Please try again.', + }) + } + }, + }) + + // 3. Fetch the fresh active list from the server silently + // (This brings in the next occurrence if recurring, without showing the completed one) + queryClient.invalidateQueries({ queryKey: ['chores'] }) + } else { + refetchChores() // Network failed, revert to truth } } catch (error) { + refetchChores() // Network failed, revert to truth if (error?.queued) { showError({ title: 'Update Failed',