HotDog tutorial: Issues deleting favourite dogs

[Groctel]

Hi!

First of all, I'm liking Dioxus very much. I've been following the HotDog tutorial until the favs page without issues. However, I've had trouble making the delete button work for extra points. I'm sure that this is a fault in my mental model of how this should work, so I'm going to explain myself as best as I can here. The final code is working, but I'm concerned that I may be doing things unnecessarily complex, so I want to ask first before continuing.

If you keep reading, here be dragons, for the night is dark and full of errors!

Quick context

These are the backed::list_dogs and backend::delete_dog functions:

#[server]
pub async fn delete_dog(id: usize) -> Result<(), ServerFnError> {
    DB.with(|f| f.execute("DELETE FROM dogs WHERE id = (?1)", &[&id]))?;
    Ok(())
}

#[server]
pub async fn list_dogs() -> Result<Vec<(usize, String)>, ServerFnError> {
    let dogs = DB.with(|f| {
        f.prepare("SELECT id, url FROM dogs ORDER BY id DESC LIMIT 10")
            .unwrap()
            .query_map([], |row| Ok((row.get(0)?, row.get(1)?)))
            .unwrap()
            .map(|r| r.unwrap())
            .collect()
    });

    Ok(dogs)
}

What I tried first

My first attempt looked like this:

use crate::backend;
use dioxus::{logger::tracing, prelude::*};

#[component]
pub fn Favs() -> Element {
    let mut favs = use_resource(backend::list_dogs); // Assign the resource here
    favs.suspend()?; // Suspend it later because suspend() returns an read-only signal

    rsx! {
        div { id: "favorites",
            div { id: "favorites-container",
                for (id, url) in favs.cloned().unwrap().unwrap() {
                    div {
                        key: id,
                        class: "favorite-dog",
                        img { src: url }
                        button { id: "delete-dog",
                            onclick: move |_| async move { // Doesn't work :'-(
                                tracing::info!("Deleting dog {id}");
                                backend::delete_dog(id).await.unwrap();
                                favs.resume();
                            },
                            "❌"
                        }
                    }
                } //    \O_
            } //     ,/\/
        } //           /
    } //               \
} //                   `

The issue with this code is that onlick is not always run when clicking the button. In fact, it only worked once, to my surprise. This code doesn't even print the "Deleting dog {id}" message, which makes me think that there's a violation of the rules of hooks here? I don't see how, but I don't see where.

Why does this not work? What am I doing wrong? The next section shows a very different but working code. I'd still like to know why this code is incorrect.

Using the resource with read_unchecked

I got this idea from the reference. The example in the reference works as it should, and I had to adapt it a bit for my use case, as the async closure would read from the favs_lock temporary if its value isn't cloned. Here's the code:

#[component]
pub fn Favs() -> Element {
    let mut favs_future = use_resource(async || backend::list_dogs().await);
    let favs_lock = &*favs_future.read_unchecked();

    match favs_lock {
        Some(Ok(favs)) => {
            rsx! {
                div { id: "favorites",
                    div { id: "favorites-container",
                        for (id, src) in favs.clone() { // Required to outlive favs_lock temporary
                            div {
                                key: id,
                                class: "favorite-dog",
                                img { src: src.clone() }
                                button { id: "delete-dog",
                                    onclick: move |_| async move {
                                        tracing::info!("{id}");
                                        backend::delete_dog(id).await.unwrap();
                                        favs_future.restart();
                                    },
                                    "❌"
                                }
                            }
                        } //  ,
                    } //     /
                } //      `\_\
            } //              \
        }, //                /O\
        Some(Err(e)) => rsx! { "{e}" },
        None => rsx! { },
    }
}

This code does work! However, it seems to me unnecessarily complex for such a simple task. Not that the code is too complex, but that I'm cloning the vector for every time. Isn't there a way to use the resource directly?

Again, thank you very much for your work in the framework. I'm looking forward to writing serious production code with it once I understand it well :-)