Skip to content

Commit

Permalink
🐛 Reordering corrupting important list order
Browse files Browse the repository at this point in the history
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.
  • Loading branch information
homostellaris committed Jul 30, 2024
1 parent 79892d2 commit 1337728
Showing 1 changed file with 15 additions and 12 deletions.
27 changes: 15 additions & 12 deletions components/pages/Home.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,6 @@ import {
IonToast,
IonToggle,
IonToolbar,
ItemReorderEventDetail,
} from '@ionic/react'
import { useLiveQuery, useObservable } from 'dexie-react-hooks'
import {
Expand All @@ -45,7 +44,6 @@ import {
documentText,
filterSharp,
logOutSharp,
power,
rocketSharp,
} from 'ionicons/icons'
import _ from 'lodash'
Expand All @@ -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'
Expand Down Expand Up @@ -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"
Expand All @@ -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',
Expand Down Expand Up @@ -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)
}

Expand Down

0 comments on commit 1337728

Please sign in to comment.