feat: edit a task in place

Fixing a typo meant deleting the task and typing it again, which also cost
you its position in the list. Click the text to edit it. Enter saves,
Escape cancels, clicking away saves.

The rename rule lives in tasks.js and is tested. It refuses blank input
rather than treating it as a delete, since selecting all and hitting enter
by accident should give you your task back, and it returns the original
array untouched when nothing changed so an idle edit does not write to
storage.

The interesting part was what editing collides with. Keystrokes are
stopped from reaching the row, or Delete would remove the task you are
typing into and Alt+Arrow would reorder it mid-edit. A drag cannot start
from inside the field, and the click a drag leaves behind is swallowed, or
dropping a row would open it for editing. Switching day, deferring a task
and the midnight rollover all close an open editor, so it cannot be left
hanging over a row that is no longer there.
This commit is contained in:
Aculix Technologies
2026-08-16 03:28:48 +05:30
parent 38af47aeb6
commit 02c8d6f6b0
5 changed files with 165 additions and 2 deletions
+18
View File
@@ -39,3 +39,21 @@ export function reorderTask(tasks, from, to) {
export function clearCompleted(tasks) {
return tasks.filter((task) => !task.completed)
}
/**
* Rewrites a task's text in place, keeping its id, position and completion.
*
* Blank input is refused rather than treated as a delete. Someone who selects
* all and hits enter by accident should get their task back, not lose it, and
* an empty row would be unreadable anyway. Returning the original array when
* nothing changed also keeps a pointless write out of storage.
*/
export function renameTask(tasks, id, text) {
const trimmed = text.trim()
if (!trimmed) return tasks
const current = tasks.find((task) => task.id === id)
if (!current || current.text === trimmed) return tasks
return tasks.map((task) => (task.id === id ? { ...task, text: trimmed } : task))
}
+55 -1
View File
@@ -1,5 +1,5 @@
import { describe, it, expect } from 'vitest'
import { addTask, toggleTask, deleteTask, reorderTask, clearCompleted } from './tasks.js'
import { addTask, toggleTask, deleteTask, reorderTask, clearCompleted, renameTask } from './tasks.js'
const task = (id, completed = false) => ({ id, text: id, completed })
@@ -126,3 +126,57 @@ describe('clearCompleted', () => {
expect(clearCompleted([task('a', true)])).toEqual([])
})
})
describe('renameTask', () => {
const task = (id, text = id, completed = false) => ({ id, text, completed, createdAt: 1 })
it('replaces the text', () => {
expect(renameTask([task('a', 'old')], 'a', 'new')[0].text).toBe('new')
})
it('trims what it is given', () => {
expect(renameTask([task('a', 'old')], 'a', ' spaced ')[0].text).toBe('spaced')
})
it('refuses to blank a task', () => {
const before = [task('a', 'keep me')]
expect(renameTask(before, 'a', '')).toBe(before)
expect(renameTask(before, 'a', ' ')).toBe(before)
})
it('keeps completion, id and creation time', () => {
const before = [{ id: 'a', text: 'old', completed: true, createdAt: 99 }]
expect(renameTask(before, 'a', 'new')[0]).toEqual({ id: 'a', text: 'new', completed: true, createdAt: 99 })
})
it('leaves the other tasks alone', () => {
const result = renameTask([task('a'), task('b'), task('c')], 'b', 'changed')
expect(result.map(t => t.text)).toEqual(['a', 'changed', 'c'])
})
it('keeps the task in place', () => {
const result = renameTask([task('a'), task('b')], 'a', 'changed')
expect(result.map(t => t.id)).toEqual(['a', 'b'])
})
it('ignores an unknown id', () => {
const before = [task('a')]
expect(renameTask(before, 'zzz', 'nope')).toBe(before)
})
it('is a no-op when the text has not changed', () => {
const before = [task('a', 'same')]
expect(renameTask(before, 'a', 'same')).toBe(before)
})
it('handles emoji and non-latin text', () => {
expect(renameTask([task('a')], 'a', '買い物 🛒')[0].text).toBe('買い物 🛒')
expect(renameTask([task('a')], 'a', 'اشتر الحليب')[0].text).toBe('اشتر الحليب')
})
it('does not mutate the input array', () => {
const before = [task('a', 'old')]
renameTask(before, 'a', 'new')
expect(before[0].text).toBe('old')
})
})