diff --git a/components/pages/Home.tsx b/components/pages/Home.tsx index 6d584f8..9c288f0 100644 --- a/components/pages/Home.tsx +++ b/components/pages/Home.tsx @@ -73,7 +73,6 @@ const Home = () => { <> -
@@ -83,11 +82,11 @@ const Home = () => { translucent > - + { - menuController.toggle('end') + menuController.toggle('start') }} > { /> - - - @@ -383,120 +376,107 @@ export const TodoLists = ({}: {}) => { ))} - - - -
- { - // We don't use this to reorder for us because it results in a flash of 'unordered' content. - // Instead we re-order right away, calculate the new order ourselves, and update the DB. - event.detail.complete() - - const wayfinderTodos = await db.wayfinderOrder - .orderBy('order') - .toArray() - /* If the todo moves down then all the todos after its target location must be nudged up - * If the todo moves up then all the todos - */ - // TODO: Could make this easier with IDs in the DOM - const fromTodo = todos.wayfinder[event.detail.from] - const toTodo = todos.wayfinder[event.detail.to] - const unfilteredFromIndex = wayfinderTodos.findIndex( - ({ todoId }) => todoId === fromTodo.id, - ) - const unfilteredToIndex = wayfinderTodos.findIndex( - ({ todoId }) => todoId === toTodo.id, - ) - - const [startIndex, endIndex] = - calculateReorderIndices( - unfilteredFromIndex, - unfilteredToIndex, + { + // We don't use this to reorder for us because it results in a flash of 'unordered' content. + // Instead we re-order right away, calculate the new order ourselves, and update the DB. + event.detail.complete() + + const wayfinderTodos = await db.wayfinderOrder + .orderBy('order') + .toArray() + /* If the todo moves down then all the todos after its target location must be nudged up + * If the todo moves up then all the todos + */ + // TODO: Could make this easier with IDs in the DOM + const fromTodo = todos.wayfinder[event.detail.from] + const toTodo = todos.wayfinder[event.detail.to] + const unfilteredFromIndex = wayfinderTodos.findIndex( + ({ todoId }) => todoId === fromTodo.id, + ) + const unfilteredToIndex = wayfinderTodos.findIndex( + ({ todoId }) => todoId === toTodo.id, + ) + + const [startIndex, endIndex] = calculateReorderIndices( + unfilteredFromIndex, + unfilteredToIndex, + ) + const start = wayfinderTodos[startIndex]?.order + const end = wayfinderTodos[endIndex]?.order + const newOrder = order(start, end) + + console.debug('Re-ordering', { + unfilteredFromIndex, + unfilteredToIndex, + start, + end, + newOrder, + }) + + await db.wayfinderOrder.update(fromTodo.id, { + order: newOrder, + }) + }} + > + {todos.wayfinder.map((todo, index) => ( + { + db.transaction( + 'rw', + db.wayfinderOrder, + db.todos, + async () => { + await Promise.all([ + db.wayfinderOrder.delete(todo.id), + db.todos.update(todo.id, { + completedAt: event.detail.checked + ? new Date() + : undefined, + }), + ]) + }, ) - const start = wayfinderTodos[startIndex]?.order - const end = wayfinderTodos[endIndex]?.order - const newOrder = order(start, end) - - console.debug('Re-ordering', { - unfilteredFromIndex, - unfilteredToIndex, - start, - end, - newOrder, - }) - - await db.wayfinderOrder.update(fromTodo.id, { - order: newOrder, - }) - }} - > - {todos.wayfinder.map((todo, index) => ( - { - db.transaction( - 'rw', - db.wayfinderOrder, - db.todos, - async () => { - await Promise.all([ - db.wayfinderOrder.delete(todo.id), - db.todos.update(todo.id, { - completedAt: event.detail.checked - ? new Date() - : undefined, - }), - ]) - }, - ) - setLogLimit(limit => limit + 1) - }} - onSelect={event => { - // Prevent the action sheet from opening when reordering - if (event.target['localName'] === 'ion-item') - return - - present(todo, { - buttons: [ - { - text: 'Move to icebox', - data: { - action: 'icebox', - }, - handler: async () => { - db.transaction( - 'rw', - db.wayfinderOrder, - async () => { - await db.wayfinderOrder.delete( - todo.id, - ) - }, - ) - }, + setLogLimit(limit => limit + 1) + }} + onSelect={event => { + // Prevent the action sheet from opening when reordering + if (event.target['localName'] === 'ion-item') return + + present(todo, { + buttons: [ + { + text: 'Move to icebox', + data: { + action: 'icebox', }, - ], - }) - }} - ref={index === 0 ? (nextTodoRef as any) : undefined} - starRole={starRoles?.find( - starRole => todo.starRole === starRole.id, - )} - todo={{ ...todo }} - > - - - ))} - -
+ handler: async () => { + db.transaction( + 'rw', + db.wayfinderOrder, + async () => { + await db.wayfinderOrder.delete(todo.id) + }, + ) + }, + }, + ], + }) + }} + ref={index === 0 ? (nextTodoRef as any) : undefined} + starRole={starRoles?.find( + starRole => todo.starRole === starRole.id, + )} + todo={{ ...todo }} + > + + + ))} +
@@ -695,7 +675,7 @@ export const ViewMenu = () => { @@ -923,6 +903,7 @@ export const Searchbar = () => { return ( { }) test('no completed todos', () => { - expect(groupTodosByCompletedAt([])).toEqual([]) + expect(groupTodosByCompletedAt([])).toEqual([ + { + label: 'Today', + todos: [], + }, + ]) }) describe('one completed todo', () => { @@ -53,6 +58,10 @@ describe('one completed todo', () => { }, ], }, + { + label: 'Today', + todos: [], + }, ]) }) @@ -77,6 +86,10 @@ describe('one completed todo', () => { }, ], }, + { + label: 'Today', + todos: [], + }, ]) const mondayStart = new Date('2019-12-30T00:00:00.000Z') @@ -99,6 +112,10 @@ describe('one completed todo', () => { }, ], }, + { + label: 'Today', + todos: [], + }, ]) }) @@ -122,6 +139,10 @@ describe('one completed todo', () => { }, ], }, + { + label: 'Today', + todos: [], + }, ]) expect( @@ -143,6 +164,10 @@ describe('one completed todo', () => { }, ], }, + { + label: 'Today', + todos: [], + }, ]) }) }) @@ -231,6 +256,10 @@ describe('multiple completed todos', () => { }, ], }, + { + label: 'Today', + todos: [], + }, ]) }) @@ -317,6 +346,10 @@ describe('multiple completed todos', () => { }, ], }, + { + label: 'Today', + todos: [], + }, ]) }) diff --git a/components/todos/groupTodosByCompletedAt.ts b/components/todos/groupTodosByCompletedAt.ts index 159f207..7d7296c 100644 --- a/components/todos/groupTodosByCompletedAt.ts +++ b/components/todos/groupTodosByCompletedAt.ts @@ -80,6 +80,6 @@ export function groupTodosByCompletedAt(completedTodos: Todo[]) { const indexB = groupMeta.findIndex(meta => meta.label === b[0]) return indexA - indexB }) - .filter(([, todos]) => todos.length > 0) + .filter(([label, todos]) => todos.length > 0 || label === 'Today') // Always include today because want to show the marker even when there are no todos yet completed .map(([label, todos]) => ({ label, todos })) }