regalade/app/src/sidebar.rs

use gloo_storage::{LocalStorage, Storage};
use uuid::Uuid;
use yew::prelude::*;
use yew_router::prelude::*;

use crate::{api, bootstrap::ConfirmDangerModal, RegaladeGlobalState, Route};

#[derive(PartialEq)]
struct MenuEntry {
    icon: &'static str,
    label: &'static str,
    page: Route,
}

#[derive(Properties, PartialEq)]
struct SidebarProps {
    entries: Vec<MenuEntry>,
    current: Route,
    children: Children,
}

async fn do_leave(token: String, household: Uuid) -> anyhow::Result<()> {
    let rsp = gloo_net::http::Request::delete(api!("household/{household}"))
        .header("Authorization", &format!("Bearer {token}"))
        .send()
        .await?;

    if !rsp.ok() {
        let body = rsp.body();
        match body {
            None => anyhow::bail!("Could not leave: {rsp:?}"),
            Some(s) => anyhow::bail!("Could not leave: {}", s.to_string()),
        }
    }

    LocalStorage::delete("household");

    Ok(())
}

#[function_component]
fn Sidebar(props: &SidebarProps) -> Html {
    let global_state = use_state(RegaladeGlobalState::get);
    let navigator = use_navigator().unwrap();

    let token = global_state.token.token.clone();
    let household = global_state.household.id;
    let nav = navigator.clone();
    let leave_household = Callback::from(move |()| {
        let token = token.clone();
        let nav = nav.clone();
        wasm_bindgen_futures::spawn_local(async move {
            match do_leave(token, household).await {
                Err(e) => {
                    log::error!("Could not leave household: {e:?}");
                }
                Ok(_) => {
                    nav.push(&Route::HouseholdSelect);
                }
            }
        })
    });

    let logout = Callback::from(move |_| {
        LocalStorage::delete("token");
        LocalStorage::delete("household");

        navigator.push(&Route::HouseholdSelect);
    });

    html! {
        <div class="container-fluid">
            <div class={classes!("row", "flex-nowrap")}>
                <div class={classes!(
                                "col-auto",
                                "col-md-3",
                                "col-xl-2",
                                "px-sm-2",
                                "px-0",
                                "bg-dark-subtle"
                            )}>
                    <div class={classes!(
                                    "d-flex",
                                    "flex-column",
                                    "align-items-center",
                                    "align-items-sm-start",
                                    "px-3",
                                    "pt-2",
                                    "text-white",
                                    "min-vh-100"
                                )}>
                        <a href="/" class={classes!(
                                                "d-flex",
                                                "align-items-center",
                                                "pb-3",
                                                "mb-md-0",
                                                "me-md-auto",
                                                "text-white",
                                                "text-decoration-none"
                                            )}>
                            <span class="fs-5 d-none d-sm-inline">{"Menu"}</span>
                        </a>
                        <hr class={classes!("w-100", "d-none", "d-sm-inline")} />
                        <ul id="menu" class={classes!(
                                                "nav",
                                                "nav-pills",
                                                "flex-column",
                                                "mb-sm-auto",
                                                "mb-0",
                                                "align-items-center",
                                                "align-items-sm-start",
                                                "w-100",
                                            )}>
                            {
                                for props.entries.iter().map(|e| {
                                    let active = if e.page == props.current {
                                        Some("active")
                                    } else {
                                        None
                                    };
                                    html! {
                                        <li class="nav-item w-100">
                                            <a href="#" class={classes!(
                                                        "nav-link",
                                                        "text-white",
                                                        active,
                                                    )}>
                                                <i class={classes!("fs-4", e.icon)}></i>
                                                <span class={classes!("ms-2", "d-none", "d-sm-inline")}>
                                                    {e.label}
                                                </span>
                                            </a>
                                        </li>
                                    }
                                })
                            }
                        </ul>
                        <hr class="w-100" />
                        <div class={classes!("dropdown")}>
                            <a href="#"
                               data-bs-toggle="dropdown"
                               aria-expanded="false"
                               class={classes!(
                                        "d-flex",
                                        "align-items-center",
                                        "text-white",
                                        "text-decoration-none",
                                        "dropdown-toggle",
                               )}
                            >
                                <i class={classes!("fs-4", "bi-house-door-fill")}></i>
                                <strong class={classes!("ms-2", "d-none", "d-sm-inline")}>
                                    {format!("{} ({})", global_state.household.name, global_state.token.name)}
                                </strong>
                            </a>
                            <ConfirmDangerModal
                                id="leaveModal"
                                title="Leaving Household"
                                centered={true}
                                on_confirm={leave_household}
                            >
                                {format!("Are you sure you want to leave the household '{}' ?", global_state.household.name)}
                            </ConfirmDangerModal>
                            <ul class="dropdown-menu">
                                <li>
                                    <a
                                        class="dropdown-item"
                                        href="#"
                                        onclick={logout}
                                    >
                                        {"Logout"}
                                    </a>
                                </li>
                                <hr />
                                <li>
                                    <a
                                        class="dropdown-item"
                                        href="#"
                                        data-bs-toggle="modal"
                                        data-bs-target="#leaveModal"
                                    >
                                        {"Leave Household"}
                                    </a>
                                </li>
                                <hr />
                                <li>
                                    <Link<Route>
                                        classes={classes!("dropdown-item")}
                                        to={Route::HouseholdSelect}
                                    >
                                        {"Change household"}
                                    </Link<Route>>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class={classes!("col", "py-3")}>
                    { for props.children.iter() }
                </div>
            </div>
        </div>
    }
}

#[derive(Properties, PartialEq)]
pub(crate) struct RegaladeSidebarProps {
    pub(crate) current: Route,
    pub(crate) children: Children,
}

#[function_component]
pub(crate) fn RegaladeSidebar(props: &RegaladeSidebarProps) -> Html {
    let entries = vec![
        MenuEntry {
            label: "Home",
            icon: "bi-house",
            page: Route::Index,
        },
        MenuEntry {
            label: "Ingredients",
            icon: "bi-egg-fill",
            page: Route::Ingredients,
        },
    ];

    html! {
        <Sidebar {entries} current={props.current}>
            { for props.children.iter() }
        </Sidebar>
    }
}