Sending a signal at a specific time and date

[madsmh]

I am working on a webapp that will let users sign up for meals, but there is a deadline to sign up for each meal. I would like to be able to send a signal when that deadline passes to hide the sign up/cancel buttons without the user having to reload the page. Is this possible? Are there alternative approaches?

I have been trying to find out how to update a use_server_future to do this, but I have so far been unable to do this.

[apoorva-01]

Yeah, doable. Don't try to make use_server_future re-fire on a schedule, that's not what it's for. Spawn a task that sleeps until the deadline and flips a signal:

let mut expired = use_signal(|| false);

use_future(move || async move {
    let ms = /* deadline - now, in milliseconds */;
    gloo_timers::future::TimeoutFuture::new(ms as u32).await;
    expired.set(true);
});

rsx! {
    if !expired() {
        button { "Sign up" }
    }
}

Why gloo_timers and not tokio::time::sleep: on the web your component runs in wasm, and tokio's timer needs its runtime, which isn't there. TimeoutFuture is backed by the browser's setTimeout, so it just works in the browser.

use_future kicks the timer off once when the component mounts, and reading expired() in the rsx subscribes it, so the button disappears the instant it flips. No reload.

Two things to watch:

• TimeoutFuture::new takes a u32 of millis, which caps out around 49 days. Fine for meal deadlines.
• If the deadline is already in the past when the component mounts, skip the timer and just use_signal(|| true) up front.