🐛 Duplicate today journey label after completing

components/pages/Home.tsx

@@ -73,7 +73,6 @@ const Home = () => {
 		<>
 			<ViewProvider>
 				<TodoContextProvider>
-					<MiscMenu />
 					<ViewMenu />
 					<IonPage id="main-content">
 						<Header title="Home" />
@@ -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
@@ -96,12 +95,6 @@ const Home = () => {
 										/>
 									</IonButton>
 								</IonButtons>
-								<IonButtons
-									id="misc-menu-button"
-									slot="start"
-								>
-									<IonMenuButton></IonMenuButton>
-								</IonButtons>
 								<Searchbar />
 							</IonToolbar>
 						</IonFooter>
@@ -253,10 +246,13 @@ export const TodoLists = ({}: {}) => {
 
 	const [present] = useTodoActionSheet()
 
-	const logGroups = useMemo(
-		() => (todos?.log ? groupTodosByCompletedAt(todos.log) : []),
-		[todos?.log],
-	)
+	const [logGroups, todayCompletedTodos] = useMemo(() => {
+		if (!todos?.log) return [[], []]
+		const groups = groupTodosByCompletedAt(todos.log)
+		const todayGroup = groups[groups.length - 1]
+		const logGroups = groups.slice(0, -1)
+		return [logGroups, todayGroup.todos]
+	}, [todos?.log])
 
 	return (
 		<IonContent
@@ -436,6 +432,46 @@ export const TodoLists = ({}: {}) => {
 													})
 												}}
 											>
+												{todayCompletedTodos.map(todo => (
+													<TodoListItem
+														key={todo.id}
+														onSelect={_event => {
+															present(todo)
+														}}
+														onCompletionChange={event => {
+															db.transaction(
+																'rw',
+																db.wayfinderOrder,
+																db.todos,
+																async () => {
+																	const wayfinderOrder = await db.wayfinderOrder
+																		.orderBy('order')
+																		.limit(1)
+																		.keys()
+																	await Promise.all([
+																		db.wayfinderOrder.add({
+																			todoId: todo.id,
+																			order: order(
+																				undefined,
+																				wayfinderOrder[0]?.toString(),
+																			),
+																		}),
+																		db.todos.update(todo.id, {
+																			completedAt: event.detail.checked
+																				? new Date()
+																				: undefined,
+																		}),
+																	])
+																},
+															)
+															setLogLimit(limit => limit - 1)
+														}}
+														starRole={starRoles?.find(
+															starRole => todo.starRole === starRole.id,
+														)}
+														todo={todo}
+													/>
+												))}
 												{todos.wayfinder.map((todo, index) => (
 													<TodoListItem
 														key={todo.id}
@@ -695,7 +731,7 @@ export const ViewMenu = () => {
 		<IonMenu
 			contentId="main-content"
 			id="view-menu"
-			side="end"
+			side="start"
 			type="push"
 		>
 			<IonHeader>

components/todos/groupTodosByCompletedAt.spec.ts

@@ -6,7 +6,12 @@ beforeAll(() => {
 })
 
 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: [],
+			},
 		])
 	})
 

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 }))
 }