feat: add undo toasts for task and note deletions
- Capture deleted item before DELETE call - Show sonner toast with Undo action button - On Undo, POST to recreate the item with original data - Applied to tasks-list-view, task-detail-panel, and notes page
This commit is contained in:
@@ -226,6 +226,7 @@ export default function NotesPage() {
|
|||||||
}
|
}
|
||||||
++saveVersion.current;
|
++saveVersion.current;
|
||||||
setDeleting(true);
|
setDeleting(true);
|
||||||
|
const deletedNote = { ...noteToDelete };
|
||||||
try {
|
try {
|
||||||
const response = await fetch(`/api/domains/${domainId}/notes/${noteToDelete.id}`, { method: 'DELETE' });
|
const response = await fetch(`/api/domains/${domainId}/notes/${noteToDelete.id}`, { method: 'DELETE' });
|
||||||
if (!response.ok) throw new Error('Unable to delete note.');
|
if (!response.ok) throw new Error('Unable to delete note.');
|
||||||
@@ -234,7 +235,30 @@ export default function NotesPage() {
|
|||||||
selected?.id === noteToDelete.id ? notes.find((note) => note.id !== noteToDelete.id) || null : selected
|
selected?.id === noteToDelete.id ? notes.find((note) => note.id !== noteToDelete.id) || null : selected
|
||||||
);
|
);
|
||||||
setNoteToDelete(null);
|
setNoteToDelete(null);
|
||||||
toast.success('Note deleted');
|
toast.success('Note deleted', {
|
||||||
|
action: {
|
||||||
|
label: 'Undo',
|
||||||
|
onClick: async () => {
|
||||||
|
try {
|
||||||
|
const res = await fetch(`/api/domains/${domainId}/notes`, {
|
||||||
|
method: 'POST',
|
||||||
|
headers: { 'Content-Type': 'application/json' },
|
||||||
|
body: JSON.stringify({
|
||||||
|
title: deletedNote.title,
|
||||||
|
content: deletedNote.content,
|
||||||
|
}),
|
||||||
|
});
|
||||||
|
if (!res.ok) throw new Error();
|
||||||
|
const restored = await res.json();
|
||||||
|
setNotes((current) => [restored, ...current]);
|
||||||
|
setSelectedNote(restored);
|
||||||
|
toast.success('Note restored');
|
||||||
|
} catch {
|
||||||
|
toast.error('Unable to restore note');
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error('Failed to delete note:', error);
|
console.error('Failed to delete note:', error);
|
||||||
toast.error('Unable to delete note');
|
toast.error('Unable to delete note');
|
||||||
|
|||||||
@@ -148,6 +148,7 @@ export function TaskDetailPanel({
|
|||||||
async function handleDelete() {
|
async function handleDelete() {
|
||||||
if (!task || !domainId) return;
|
if (!task || !domainId) return;
|
||||||
setDeleting(true);
|
setDeleting(true);
|
||||||
|
const deletedTask = { ...task };
|
||||||
try {
|
try {
|
||||||
const response = await fetch(`/api/domains/${domainId}/tasks/${task.id}`, {
|
const response = await fetch(`/api/domains/${domainId}/tasks/${task.id}`, {
|
||||||
method: 'DELETE',
|
method: 'DELETE',
|
||||||
@@ -156,7 +157,34 @@ export function TaskDetailPanel({
|
|||||||
onUpdate();
|
onUpdate();
|
||||||
setDeleteOpen(false);
|
setDeleteOpen(false);
|
||||||
onOpenChange(false);
|
onOpenChange(false);
|
||||||
toast.success('Task deleted');
|
toast.success('Task deleted', {
|
||||||
|
action: {
|
||||||
|
label: 'Undo',
|
||||||
|
onClick: async () => {
|
||||||
|
try {
|
||||||
|
await fetch(`/api/domains/${domainId}/tasks`, {
|
||||||
|
method: 'POST',
|
||||||
|
headers: { 'Content-Type': 'application/json' },
|
||||||
|
body: JSON.stringify({
|
||||||
|
title: deletedTask.title,
|
||||||
|
description: deletedTask.description,
|
||||||
|
status: deletedTask.status,
|
||||||
|
priority: deletedTask.priority,
|
||||||
|
dueDate: deletedTask.dueDate,
|
||||||
|
estimatedMinutes: deletedTask.estimatedMinutes,
|
||||||
|
projectId: deletedTask.projectId,
|
||||||
|
sectionId: deletedTask.sectionId,
|
||||||
|
parentId: deletedTask.parentId,
|
||||||
|
}),
|
||||||
|
});
|
||||||
|
onUpdate();
|
||||||
|
toast.success('Task restored');
|
||||||
|
} catch {
|
||||||
|
toast.error('Unable to restore task');
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error('Failed to delete task:', error);
|
console.error('Failed to delete task:', error);
|
||||||
toast.error('Unable to delete task');
|
toast.error('Unable to delete task');
|
||||||
|
|||||||
@@ -284,12 +284,38 @@ export function TasksListView({
|
|||||||
onClick={async () => {
|
onClick={async () => {
|
||||||
if (!deleteId || !domainId) return;
|
if (!deleteId || !domainId) return;
|
||||||
setDeleting(true);
|
setDeleting(true);
|
||||||
|
const deletedTask = tasks.find(t => t.id === deleteId);
|
||||||
try {
|
try {
|
||||||
const res = await fetch(`/api/domains/${domainId}/tasks/${deleteId}`, { method: 'DELETE' });
|
const res = await fetch(`/api/domains/${domainId}/tasks/${deleteId}`, { method: 'DELETE' });
|
||||||
if (!res.ok) throw new Error();
|
if (!res.ok) throw new Error();
|
||||||
toast.success('Task deleted');
|
|
||||||
setDeleteId(null);
|
setDeleteId(null);
|
||||||
fetchTasks();
|
fetchTasks();
|
||||||
|
toast.success('Task deleted', {
|
||||||
|
action: {
|
||||||
|
label: 'Undo',
|
||||||
|
onClick: async () => {
|
||||||
|
if (!deletedTask) return;
|
||||||
|
try {
|
||||||
|
await fetch(`/api/domains/${domainId}/tasks`, {
|
||||||
|
method: 'POST',
|
||||||
|
headers: { 'Content-Type': 'application/json' },
|
||||||
|
body: JSON.stringify({
|
||||||
|
title: deletedTask.title,
|
||||||
|
description: deletedTask.description,
|
||||||
|
status: deletedTask.status,
|
||||||
|
priority: deletedTask.priority,
|
||||||
|
dueDate: deletedTask.dueDate,
|
||||||
|
projectId: deletedTask.projectId,
|
||||||
|
}),
|
||||||
|
});
|
||||||
|
fetchTasks();
|
||||||
|
toast.success('Task restored');
|
||||||
|
} catch {
|
||||||
|
toast.error('Unable to restore task');
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
} catch {
|
} catch {
|
||||||
toast.error('Unable to delete task');
|
toast.error('Unable to delete task');
|
||||||
} finally {
|
} finally {
|
||||||
|
|||||||
Reference in New Issue
Block a user