From 13377287ef6184fea8b3b67c2282715a31da83d7 Mon Sep 17 00:00:00 2001
From: Daniel Metcalfe <mrdanielmetcalfe@gmail.com>
Date: Tue, 30 Jul 2024 21:12:36 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20Reordering=20corrupting=20import?=
 =?UTF-8?q?ant=20list=20order?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

When re-ordering the updated order was based on the
currently rendered todos. This meant that when
a subset of star roles were active the updated
order would only include those and therefore lose
all the other important todos from other star
roles.

The fix was to lookup the index of the todo in the
complete important list order and update based on
those indices rather than the ones emitted on the
event based on the currently rendered todos.
---
 components/pages/Home.tsx | 27 +++++++++++++++------------
 1 file changed, 15 insertions(+), 12 deletions(-)

diff --git a/components/pages/Home.tsx b/components/pages/Home.tsx
index 110d5cc..c51272e 100644
--- a/components/pages/Home.tsx
+++ b/components/pages/Home.tsx
@@ -34,7 +34,6 @@ import {
 	IonToast,
 	IonToggle,
 	IonToolbar,
-	ItemReorderEventDetail,
 } from '@ionic/react'
 import { useLiveQuery, useObservable } from 'dexie-react-hooks'
 import {
@@ -45,7 +44,6 @@ import {
 	documentText,
 	filterSharp,
 	logOutSharp,
-	power,
 	rocketSharp,
 } from 'ionicons/icons'
 import _ from 'lodash'
@@ -57,7 +55,7 @@ import {
 	useRef,
 	useState,
 } from 'react'
-import { Todo, db } from '../db'
+import { db, Todo } from '../db'
 import NoteProviders from '../notes/providers'
 import useSettings from '../settings/useSettings'
 import { SelectedTodoProvider } from '../todos/SelectedTodo'
@@ -555,20 +553,21 @@ export const Log = ({ limit }: { limit: number }) => {
 
 export const Important = () => {
 	const { inActiveStarRoles, query } = useView()
+	const importantList = useLiveQuery(() => db.lists.get('#important'))
 	const todos = useLiveQuery(async () => {
 		console.debug('re-running important query')
-		const importantList = await db.lists.get('#important')
-		return (await db.todos.bulkGet(importantList?.order || [])).filter(
+		if (importantList === undefined) return
+		return (await db.todos.bulkGet(importantList!.order)).filter(
 			todo => matchesQuery(query, todo!) && inActiveStarRoles(todo!),
 		) as Todo[]
-	}, [inActiveStarRoles, query])
+	}, [importantList, inActiveStarRoles, query])
 
 	const [present] = useTodoActionSheet()
 
 	return (
 		<>
 			<h1>Important</h1>
-			{todos === undefined ? (
+			{importantList === undefined || todos === undefined ? (
 				<IonSpinner
 					className="w-20 h-20"
 					name="dots"
@@ -582,11 +581,16 @@ export const Important = () => {
 							// Instead we re-order right away, calculate the new order ourselves, and update the DB.
 							event.detail.complete()
 
-							const todoIds = [...todos.map(i => i.id)]
+							const fromIndex = importantList.order.indexOf(
+								todos[event.detail.from].id,
+							)
+							const toIndex = importantList.order.indexOf(
+								todos[event.detail.to].id,
+							)
 							const reorderedTodoIds = moveItemInArray(
-								todoIds,
-								event.detail.from,
-								event.detail.to,
+								importantList.order,
+								fromIndex,
+								toIndex,
 							)
 							await db.lists.put({
 								type: '#important',
@@ -845,7 +849,6 @@ const byDate = (a: any, b: any) => {
 
 function matchesQuery(query: string, todo: Todo) {
 	if (!query) return true
-	console.log({ todo })
 	return todo?.title.toLowerCase().includes(query)
 }