remember tab after refresh

[GithubCosmin]

Tab component is very nicce but ccurrent tab is lost after refresh

We fixed this by adding #tab.name to the URL

Here is the updated TabSecctor component that works on 0.5.0 in our fork that we implement falling block gamme in.

#[component]
pub fn TabSelectors(
    tabs: ReadSignal<Vec<TabData>>,
    history: ReadSignal<TabHistory>,
    set_history: WriteSignal<TabHistory>,
) -> impl IntoView {
    let navigate = leptos_router::use_navigate();
    let location = leptos_router::use_location();
    let current_path = location.pathname.get_untracked();

    let update_tabs = move |current_hash| {
        tabs.with_untracked(|tabs| {
            let mut found_tab = false;
            for tab in tabs.iter() {
                if current_hash == tab.name.clone() {
                    set_history.update(|history| history.push(tab.name.clone()));
                    found_tab = true;
                    break;
                }
            }
            if !found_tab {
                if let Some(first_tab) = tabs.first() {
                    set_history.update(|history| history.push(first_tab.name.clone()));
                }
            }
        });
    };

    let stop_watch =    leptos::watch (
            move || location.hash.get(),
            move |current_hash, _prev_hash, _| {
                let current_hash = if current_hash.len() > 1 {(&current_hash[1..]).to_string()} else {"".to_string()};
    
                update_tabs(current_hash);
            },
            false,
        );
    leptos::on_cleanup(move || {
        stop_watch();
    });

    // do immmediate: false on watch() becacuse panicc bug
    let current_hash = location.hash.get_untracked();
    let current_hash = if current_hash.len() > 1 {(&current_hash[1..]).to_string()} else {"".to_string()};
    update_tabs(current_hash);

    view! {
        <leptonic-tab-selectors role="tablist">
            <For
                each=move || tabs.get()
                key=|tab| tab.id
                children=move |tab| {
                    let n1 = tab.name.clone();
                    let n2 = tab.name.clone();
                    let n3 = tab.name.clone();
                    let navigate2 = navigate.clone();
                    let current_path = current_path.clone();
                    view! {
                        <TabSelector
                            is_active=move || history.get().get_active() == Some(&n1.clone())
                            set_active=move || {
                                set_history.update(|history| history.push(n2.clone()));

                                let new_url = format!("{}#{}", current_path, n3);
                                navigate2(
                                    &new_url,
                                    leptos_router::NavigateOptions::default() 
                                );
                            }
                            name=tab.name.clone()
                            label=tab.label.clone() />
                    }
                }
            />
        </leptonic-tab-selectors>
    }
}

Sparganothis/Sparganothis.github.io@d04461e

Does not work well with Mount::WhenShown (prints somemm panic messages about discarded signals)

does

Thank you