Store a Component in State? (& Higher-Order Components)

[kalzoo]

Hi all,

First off - loving dioxus so far. It's been great to get away from crossing a WASM FFI boundary from React.

Working on a proof of concept ahead of migrating a larger web app. In this app, modals (dialogs) are managed at the app top-level so that they stack up in a predictable order and the stack can be closed all at once. It works nicely in React.

In React, this was a ModalContext, with a useModal hook for child components. Using the hook, any component can put a new modal on the top of the app's stack.

In dioxus, this has run into lifetime issues. Because the scope cannot outlive the component to which it was provided, and Element has a lifetime, I'm not seeing how I might have a child component pass such a component to its parent via shared state. This looks like a cyclical dependency

In the meantime, I'll fall back to component-local modals and see if this becomes more clear as I get used to dioxus.

Is there a pattern you can suggest? I've tried:

Lifetime covariant with Scope:

type ElementBuilder<'e> = Box<dyn Fn(Scope<'e>) -> Element<'e>>;

#[derive(Default)]
pub struct ModalContext<'e> {
    pub open_modals: Vec<ElementBuilder<'e>>,
}

impl<'e> ModalContext<'e> {
    pub fn open_modal(&mut self, modal: ElementBuilder<'e>) {
        self.open_modals.push(modal);
    }
}

'static:

type ElementBuilder = Box<dyn Fn() -> Element<'static>>;

#[derive(Default)]
pub struct ModalContext {
    pub open_modals: Vec<ElementBuilder>,
}

impl ModalContext {
    pub fn open_modal(&mut self, modal: ElementBuilder) {
        self.open_modals.push(modal);
    }
}

Storing Elements rather than element builders (which AFAICT can't work, but worth a shot):

#[derive(Default)]
pub struct ModalContext<'e> {
    pub open_modals: Vec<Element<'e>>,
}

impl<'e> ModalContext<'e> {
    pub fn open_modal(&mut self, modal: Element<'e>) {
        self.open_modals.push(modal);
    }
}

All of those compile on their own, of course, but fail when used in a context like (don't mind the details here too much, it's a sketch):

fn App<'a>(cx: Scope<'a>) -> Element {
    // Provider is in a wrapper component
    let modal_context = use_shared_state::<ModalContext>(cx).unwrap();

    // For kicks, in case it was the shared nature of the state. No difference
    // let modal_context = use_state(cx, || ModalContext::default());

    cx.render(rsx! {
        // for modal in &modal_context.open_modals {
        //    rsx! { div { modal() } }
        // }

        for modal in &modal_context.read().open_modals {
             rsx! { div { modal } }
        }
        Router::<Route> {}
    })
}

And, while this isn't an HOC, it seems relevant to that common pattern in React (legacy docs), and is something that folks (like me) might naturally try to port over.

Thanks! And sorry if this is in the docs, issues, or discussions - I searched thoroughly.

[ealmloff]

You were pretty close on the first try. Components cannot be closures (if this is an issue you can work around it with a wrapper component that takes a Fn component and calls it). You can use higher bounded lifetimes to get rid of the 'e lifetime in ModalContext. Here is a working example:

use dioxus::prelude::*;

fn main() {
    dioxus_desktop::launch(app);
}

/// An element builder is a function that takes a scope of any lifetime and returns an element with the same lifetime.
type ElementBuilder = for<'e> fn(Scope<'e>) -> Element<'e>;

#[derive(Default)]
pub struct ModalContext {
    pub open_modals: Vec<ElementBuilder>,
}

impl ModalContext {
    pub fn open_modal(&mut self, modal: ElementBuilder) {
        self.open_modals.push(modal);
    }
}

fn app(cx: Scope) -> Element {
    use_shared_state_provider::<ModalContext>(cx, Default::default);
    let modal_context = use_shared_state::<ModalContext>(cx).unwrap();

    cx.render(rsx! {
        for Modal in modal_context.read().open_modals.iter().copied() {
            rsx! { div { Modal {} } }
        }

        Child {}
    })
}

fn Child(cx: Scope) -> Element {
    let modal_context = use_shared_state::<ModalContext>(cx).unwrap();

    cx.render(rsx! {
        div {
            button {
                onclick: move |_| {
                    modal_context.write().open_modal(Modal);
                },
                "Open modal"
            }
        }
    })
}

fn Modal(cx: Scope) -> Element {
    let modal_context = use_shared_state::<ModalContext>(cx).unwrap();

    cx.render(rsx! {
        div {
            "Modal"
            button {
                onclick: move |_| {
                    modal_context.write().open_modals.pop();
                },
                "Close"
            }
        }
    })
}

[kalzoo]

Of course, makes perfect sense! Thank you.