How can I trigger an Action using a form?

[66OJ66]

Hi,

I'm trying to implement a form which triggers a POST request once submitted (without server actions/functions).

Example code below (using v0.2.0-alpha)

#[component]
pub fn RenameUserForm(cx: Scope) -> impl IntoView {

   let rename_action = create_action(cx, 
      // |Closure here with user_id and new_name|
   ,{
      rename_user(user_id: user_id.clone(), new_name: new_name.clone())
   });

   view! { cx,
      <ActionForm action=rename_action>
         <input name="user_id"
            type="text"
            hidden="true"
            value="test" //Hardcoded for this example
         />

       <input name="new_name"
            type="text"
         />

      </ActionForm>
   }
}

async fn rename_user(user_id: String, new_name: String) -> Result<(),()> {
   // Make a POST request using reqwasm here
}

I'm not quite sure how to pass the user_id and new_name values from the form into the action - how should that be done?

Thanks in advance for any help!

[gbj]

Yeah so <ActionForm/> is pretty tightly coupled to server functions, as I think the docs mention but maybe not strongly enough. Maybe it should be named <ServerActionForm/> in reality.

Here are a few options, if you don't want to use a server function

1. Use a plain <Form/> and copy relevant parts of the <ActionForm/> implementation
2. Use a plain <Form method="post" action="..."/>
3. Use a plain HTML element <form method="post" action="..."/> and let the browser handle posting correctly for you
4. Use node_ref on each of the inputs to get their values, and dispatch your action on form submit
5. Use signals to hold each of the input values, and dispatch your action on form submit

For 4 and 5 see here.

[66OJ66]

Yeah so <ActionForm/> is pretty tightly coupled to server functions

Ah okay, I did miss that in the docs, but that makes sense.

I've had a go at using Option 5.
Essentially, the code below renders a form if a user is selected (i.e. get_user() evaluates to Some(...)).

When rename_action.dispatch(()) is commented out, the code compiles fine.
However, when it's uncommented, I get a lifetime may not live long enough error which I think is related to the Option?

Am I making any obvious mistakes?

use futures::{
    channel::oneshot::{self, Canceled},
    Future,
};
use leptos::*;
use std::time::Duration;

pub fn main() {
    console_error_panic_hook::set_once();
    _ = console_log::init_with_level(log::Level::Debug);
    console_error_panic_hook::set_once();
    mount_to_body(|cx| view! { cx, <RenameUserForm/> })
}

#[derive(Clone)]
struct User{
    user_id: String,
    user_name: String,
}

#[component]
fn RenameUserForm(cx: Scope) -> impl IntoView {

    let (get_user, set_user) = create_signal(cx, Some(User {
        user_id: "test_id".to_string(),
        user_name: "test_name".to_string(),
    }));

    let (form_user_id, set_form_user_id) = create_signal(cx, "test_id".to_string());
    let (form_user_name, set_form_user_name) = create_signal(cx, String::new());

    let rename_action = create_action(cx, move|_ :&()|
        rename_user(form_user_id(), form_user_name())
    );

    view! { cx,
        { move || match get_user.get() {
            None => {
                view! { cx,
                    <>
                    </>
                }
            }
            Some(user) => {
                view! { cx,
                    <>
                        <form
                            on:submit={ |ev| {
                                ev.prevent_default();
                                log::debug!("Form submitted");
                                rename_action.dispatch(())
                            }}
                        >
                             <input name="user_id"
                                type="text"
                                hidden="true"
                                value="test_id" //Hardcoded for this example
                             />

                            <label class="label">
                                "New Name"
                            </label>

                            <input name="new_name"
                                type="text"
                                on:input={move |ev| {
                                    log::debug!("User name modified");
                                    set_form_user_name.set(event_target_value(&ev));
                                }}
                            />

                            <div class="control">
                                <button>
                                    "Save"
                                </button>
                            </div>

                        </form>
                    </>
                }}
            }
        }
    }
}

async fn rename_user(user_id: String, new_name: String) {
    _ = delay(Duration::from_millis(500)).await
}

fn delay(duration: Duration) -> impl Future<Output = Result<(), Canceled>> {
    let (tx, rx) = oneshot::channel();
    set_timeout(
        move || {
            _ = tx.send(());
        },
        duration,
    );
    rx
}

Dependencies used are:

[dependencies]
leptos = "0.2.0-alpha"
leptos_router = { version = "0.2.0-alpha", features = ["csr"] }
leptos_meta = { version = "0.2.0-alpha", features = ["csr"] }
futures = "0.3"
console_log = "0.2"
log = "0.4"
console_error_panic_hook = "0.1.7"

[gbj]

You'll probably just need to add a move before that on:submit closure. The action is a Copy type but Rust doesn't automatically move into closures so it thinks it's &Action, but event listeners all need to be 'static. This is why almost all our closures are move in examples.

[66OJ66]

Yep, I was missing a move.

Thank you very much for your help :)