Skip to content

Commit

Permalink
🐛 Duplicate today journey label after completing
Browse files Browse the repository at this point in the history
  • Loading branch information
@homostellaris
homostellaris committed Dec 3, 2024
1 parent b851d8b commit 35e7add
Show file tree
Hide file tree
Showing 3 changed files with 138 additions and 124 deletions.
225 changes: 103 additions & 122 deletions components/pages/Home.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -73,7 +73,6 @@ const Home = () => {
<>
<ViewProvider>
<TodoContextProvider>
<MiscMenu />
<ViewMenu />
<IonPage id="main-content">
<Header title="Home" />
Expand All @@ -83,11 +82,11 @@ const Home = () => {
translucent
>
<IonToolbar>
<IonButtons slot="primary">
<IonButtons slot="start">
<IonButton
id="view-menu-button"
onClick={() => {
menuController.toggle('end')
menuController.toggle('start')
}}
>
<IonIcon
Expand All @@ -96,12 +95,6 @@ const Home = () => {
/>
</IonButton>
</IonButtons>
<IonButtons
id="misc-menu-button"
slot="start"
>
<IonMenuButton></IonMenuButton>
</IonButtons>
<Searchbar />
</IonToolbar>
</IonFooter>
Expand Down Expand Up @@ -383,120 +376,107 @@ export const TodoLists = ({}: {}) => {
</IonItemGroup>
))}
<IonItemGroup>
<JourneyLabel>
<TimeInfo
datetime={new Date().toISOString().split('T')[0]}
label="Today"
key="today"
/>
</JourneyLabel>
<div className="-mt-8">
<IonReorderGroup
disabled={false}
onIonItemReorder={async event => {
// 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,
<IonReorderGroup
disabled={false}
onIonItemReorder={async event => {
// 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) => (
<TodoListItem
key={todo.id}
data-id={todo.id}
data-next-todo={index === 0}
onCompletionChange={async event => {
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) => (
<TodoListItem
key={todo.id}
data-id={todo.id}
data-next-todo={index === 0}
onCompletionChange={async event => {
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 }}
>
<IonReorder slot="end"></IonReorder>
</TodoListItem>
))}
</IonReorderGroup>
</div>
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 }}
>
<IonReorder slot="end"></IonReorder>
</TodoListItem>
))}
</IonReorderGroup>
</IonItemGroup>
</IonList>
<Icebox todos={todos.icebox} />
Expand Down Expand Up @@ -695,7 +675,7 @@ export const ViewMenu = () => {
<IonMenu
contentId="main-content"
id="view-menu"
side="end"
side="start"
type="push"
>
<IonHeader>
Expand Down Expand Up @@ -923,6 +903,7 @@ export const Searchbar = () => {

return (
<IonSearchbar
// className="max-w-80"
ref={searchbarRef}
debounce={100}
/* Binding to the capture phase allows the searchbar to complete its native behaviour of clearing the input.
Expand Down
35 changes: 34 additions & 1 deletion components/todos/groupTodosByCompletedAt.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,12 @@ beforeAll(() => {
})

test('no completed todos', () => {
expect(groupTodosByCompletedAt([])).toEqual([])
expect(groupTodosByCompletedAt([])).toEqual([
{
label: 'Today',
todos: [],
},
])
})

describe('one completed todo', () => {
Expand Down Expand Up @@ -53,6 +58,10 @@ describe('one completed todo', () => {
},
],
},
{
label: 'Today',
todos: [],
},
])
})

Expand All @@ -77,6 +86,10 @@ describe('one completed todo', () => {
},
],
},
{
label: 'Today',
todos: [],
},
])

const mondayStart = new Date('2019-12-30T00:00:00.000Z')
Expand All @@ -99,6 +112,10 @@ describe('one completed todo', () => {
},
],
},
{
label: 'Today',
todos: [],
},
])
})

Expand All @@ -122,6 +139,10 @@ describe('one completed todo', () => {
},
],
},
{
label: 'Today',
todos: [],
},
])

expect(
Expand All @@ -143,6 +164,10 @@ describe('one completed todo', () => {
},
],
},
{
label: 'Today',
todos: [],
},
])
})
})
Expand Down Expand Up @@ -231,6 +256,10 @@ describe('multiple completed todos', () => {
},
],
},
{
label: 'Today',
todos: [],
},
])
})

Expand Down Expand Up @@ -317,6 +346,10 @@ describe('multiple completed todos', () => {
},
],
},
{
label: 'Today',
todos: [],
},
])
})

Expand Down
2 changes: 1 addition & 1 deletion components/todos/groupTodosByCompletedAt.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 }))
}

0 comments on commit 35e7add

Please sign in to comment.