Delete in TODO app always deletes the first item

[ALRubinger]

This is not on main, but on upstream branch issue-47/update-sdk:

I deleted 4:

[bobbilee19]

@kirahsapong weird, what's this issue I wonder

[chris-tbd]

I just looked over the delete code, did you step through and verify it's getting the right todoRecordId passed in and deleting the right todo? https://github.com/TBD54566975/incubating-web5-labs/blob/main/todo-app/src/App.vue

[ALRubinger]

@chris-tbd:

Note: this is on upstream branch issue-47/update-sdk, not main.

If todo.dWebMessage.recordId is the right way to get the ID, I think so? Here's the relevant code where it loops over TODOs:

<div v-if="(todos.length > 0)" class="border-gray-200 border-t border-x mt-16 rounded-lg shadow-md sm:max-w-xl sm:mx-auto sm:w-full">
          <div v-for="todo in todos" :key="todo.dWebMessage.recordId" class="border-b border-gray-200 flex items-center p-4">
            <div @click="toggleTodoComplete(todo.dWebMessage.recordId)" class="cursor-pointer">
              <CheckCircleIcon class="h-8 text-gray-200 w-8" :class="{ 'text-green-500': todo.data.completed }" />
            </div>
            <div class="font-light ml-3 text-gray-500 text-xl">
              {{ todo.data.description }}
            </div>
            <!-- Delete Todo goes here later -->
            <div class="ml-auto">
              <div @click="deleteTodo(todo.dWebMessage.recordId)" class="cursor-pointer">
                <TrashIcon class="h-8 text-gray-200 w-8" :class="'text-red-500'" />
              </div>
            </div>
          </div>
        </div>

[kirahsapong]

This commit should resolve it! The todo item wasn't able to get the recordId properly

[ALRubinger]

Rebased as c929cc3063cabb960dbc254ddb8268abd1aef2c9; works great!