create_resource get and and_then won't work inside event handler?

[amiyatulu]

    let file_handle = move |e: Event| {
        set_spinner(true);
        let input: HtmlInputElement = event_target(&e);
        let file_data = input.files().unwrap().get(0);
        gloo::console::log!(format! {"{:?}", file_data});
        set_file_option(file_data);
        async_source.and_then(|data|{
            gloo::console::log!(format!("mystring {}", data));
            // set_cid(data.to_string()); 
        });
    };

file_data is printed, where as it doesn't print gloo::console::log!(format!("mystring {}", data));

async fn get_cid(
    file_data: Option<File>,
) -> Result<String, ErrorString> {
    if let Some(file) = file_data.clone() {
        let file_type = file.type_();
        let file_name = file.name();
        gloo::console::log!(format! {"{:?}", file_name});
            let cid = data_call(DEFAULT_IPFS_PROVIDER, file, file_name).await;
            gloo::console::log!(format! {"{:?}", cid});
            Ok(cid)
        } else {
            Err(ErrorString("Unsupported file type".to_string()))
        }
    } else {
        Err(ErrorString("No file data provided".to_string()))
    }
}

let (file_option, set_file_option) = create_signal(None);
 let async_source = create_resource(
        move || {
            (
                file_option(),
            )
        },
        |(file_data)| async move {
            get_cid_ipfs(
                file_data,
            )
            .await
        },
    );

[ekanna]

Here is my working code snippet for you!

pub async fn get_file_contents(ev: Event) -> String {
    let elem = ev.target().unwrap().unchecked_into::<HtmlInputElement>();
    let files = elem.files().unwrap();
    let file = files.get(0).unwrap();
    log!("files: {:?}", file.name());
    let data = file.text();
    let data = JsFuture::from(data).await.unwrap().as_string().unwrap();
    data
}

[amiyatulu]

Updated the code. Question was about create_resource.

[gbj]

This is not how .and_then() works — it is a way of reactively accessing the value of a resource, so it needs to be used with an effect, just like accessing a signal would.

Your code should either

1. not use a resource, but just use spawn_local to do some async work in the file_handle handler (this is what I would recommend)

let file_handle = move |e: Event| {
        set_spinner(true);
        let input: HtmlInputElement = event_target(&e);
        let file_data = input.files().unwrap().get(0);
        gloo::console::log!(format! {"{:?}", file_data});
        spawn_local(async move {
            let data = get_cid_ipfs(file_data).await;
            // etc.
        });
    };

2. use the resource, but access its value reactively, in an effect, and not in the handler

    let file_handle = move |e: Event| {
        set_spinner(true);
        let input: HtmlInputElement = event_target(&e);
        let file_data = input.files().unwrap().get(0);
        gloo::console::log!(format! {"{:?}", file_data});
        set_file_option(file_data);
    };
    
    // outside the handler 
    create_effect(move |_| {
        async_source.and_then(|data|{
            gloo::console::log!(format!("mystring {}", data));
            // set_cid(data.to_string()); 
        });
    });

[amiyatulu]

Ya, I am using actions. spawn_local is giving unpredictable results while setting states in it.