regalade/app/src/ingredients.rs

use api::{CreateIngredientRequest, EditIngredientRequest, IngredientInfo};
use itertools::Itertools;
use uuid::Uuid;
use wasm_bindgen::JsCast;
use web_sys::HtmlInputElement;
use yew::{prelude::*, suspense::use_future_with_deps};

use crate::{
    api,
    bootstrap::{bs, FormModal},
    RegaladeGlobalState,
};

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

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

    Ok(rsp.json().await?)
}

async fn do_edit_ingredient(
    token: String,
    household: Uuid,
    id: i64,
    new_name: String,
    new_unit: String,
) -> anyhow::Result<()> {
    let rsp = gloo_net::http::Request::patch(api!("household/{household}/ingredients/{id}"))
        .header("Authorization", &format!("Bearer {token}"))
        .json(&EditIngredientRequest {
            name: Some(new_name),
            has_unit: true,
            unit: (!new_unit.is_empty()).then_some(new_unit),
        })?
        .send()
        .await?;

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

    Ok(())
}

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

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

    Ok(())
}

#[derive(Properties, PartialEq, Eq)]
struct IngredientListProps {
    token: String,
    household: Uuid,
    render_id: u64,
}

#[function_component]
fn IngredientList(props: &IngredientListProps) -> HtmlResult {
    let fetch_id = use_state(|| 0u64);
    let ingredients = use_future_with_deps(
        |_| fetch_ingredients(props.token.clone(), props.household),
        (*fetch_id as u128) << 64 | props.render_id as u128,
    )?;
    let error = use_state(|| None::<String>);

    let edit_state = use_state(|| None);

    let es = edit_state.clone();
    let item_edit = |id, current: IngredientInfo| {
        let es = es.clone();
        Callback::from(move |_| {
            es.set(Some((id, current.clone())));
        })
    };

    let es = edit_state.clone();
    let token = props.token.clone();
    let household = props.household;
    let err = error.clone();
    let fetch = fetch_id.clone();
    let on_submit = Callback::from(move |()| {
        if let Some((id, _)) = &*es {
            let document = gloo_utils::document();

            let name: HtmlInputElement = document
                .get_element_by_id("editIgName")
                .unwrap()
                .dyn_into()
                .expect("editIgName is not an input element");
            let name = name.value();

            let unit: HtmlInputElement = document
                .get_element_by_id("editIgUnit")
                .unwrap()
                .dyn_into()
                .expect("editIgUnit is not an input element");
            let unit = unit.value();

            let token = token.clone();
            let id = *id;
            let err = err.clone();
            let fetch = fetch.clone();

            wasm_bindgen_futures::spawn_local(async move {
                match do_edit_ingredient(token, household, id, name, unit).await {
                    Ok(_) => {
                        let modal = bs::Modal::get_instance("#editIgModal");
                        modal.hide();
                        fetch.set(*fetch + 1);
                    }
                    Err(e) => err.set(Some(format!("Could not edit ingredient: {e:?}"))),
                }
            });
        }
    });

    let global_error = use_state(|| None::<String>);
    let token = props.token.clone();
    let err = global_error.clone();
    let item_delete = move |id| {
        let fetch = fetch_id.clone();
        let err = err.clone();
        let token = token.clone();

        Callback::from(move |_| {
            let fetch = fetch.clone();
            let err = err.clone();
            let token = token.clone();

            wasm_bindgen_futures::spawn_local(async move {
                match do_delete_ingredient(token, household, id).await {
                    Ok(_) => {
                        fetch.set(*fetch + 1);
                    }
                    Err(e) => err.set(Some(format!("Could not edit ingredient: {e:?}"))),
                }
            })
        })
    };

    Ok(match &*ingredients {
        Ok(l) => html! {<>
            if let Some(err) = &*global_error {
                <div class={classes!("alert", "alert-danger")} role="alert">
                    {err}
                </div>
            }
            <ul class="list-group list-group-flush text-start">
                { for l.ingredients.iter().sorted_by_key(|(&k,_)| k).map(|(&k,i)| {
                    html! {
                        <li class="list-group-item d-flex align-items-center" key={k}>
                            <p class="flex-fill m-auto">
                                {&i.name}
                                if let Some(unit) = &i.unit {
                                    {format!(" (unit: {unit})")}
                                }
                            </p>
                            <button
                                type="button"
                                class="btn btn-primary"
                                onclick={item_edit(k, i.clone())}
                                data-bs-toggle="modal"
                                data-bs-target="#editIgModal"
                            >
                                <i class={classes!("bi-pencil-fill")}></i>
                            </button>
                            <button
                                type="button"
                                class="btn btn-danger ms-1"
                                onclick={item_delete(k)}
                            >
                                <i class={classes!("bi-trash-fill")}></i>
                            </button>
                        </li>
                    }
                  })
                }
            </ul>
            <FormModal
                centered={true}
                id="editIgModal"
                submit_label="Edit"
                title="Edit Ingredient"
                {on_submit}
            >
                if let Some(err) = &*error {
                    <div class={classes!("alert", "alert-danger")} role="alert">
                        {err}
                    </div>
                }
                <div class="form-floating">
                    <input
                        id="editIgName"
                        class={classes!("form-control")}
                        placeholder="Ingredient Name"
                        value={edit_state.as_ref().map(|s| s.1.name.clone())}
                    />
                    <label for="editIgName">{"Ingredient name"}</label>
                </div>
                <div class="form-floating">
                    <input
                        id="editIgUnit"
                        class={classes!("form-control")}
                        placeholder="Ingredient Unit"
                        value={edit_state.as_ref().map(|s| s.1.unit.clone().unwrap_or_default())}
                    />
                    <label for="editIgUnit">{"Ingredient unit"}</label>
                </div>
            </FormModal>
        </>},
        Err(e) => html! {
            {format!("Error fetching ingredients: {e:?}")}
        },
    })
}

async fn do_add_ingredient(
    token: String,
    household: Uuid,
    name: String,
    unit: String,
) -> anyhow::Result<()> {
    let rsp = gloo_net::http::Request::post(api!("household/{household}/ingredients"))
        .header("Authorization", &format!("Bearer {token}"))
        .json(&CreateIngredientRequest {
            name,
            unit: (!unit.is_empty()).then_some(unit),
        })?
        .send()
        .await?;

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

    Ok(())
}

#[function_component]
pub fn Ingredients() -> Html {
    let fallback = html! { {"Loading..."} };
    let global_state = use_state(RegaladeGlobalState::get);

    let render_id = use_state(|| 0u64);
    let error = use_state(|| None::<String>);

    let token = global_state.token.token.clone();
    let household = global_state.household.id;
    let err = error.clone();
    let render = render_id.clone();
    let onsubmit = Callback::from(move |e: SubmitEvent| {
        e.prevent_default();

        let document = gloo_utils::document();

        let name_elem: HtmlInputElement = document
            .get_element_by_id("newIgName")
            .unwrap()
            .dyn_into()
            .expect("editIgName is not an input element");
        let name = name_elem.value();

        let unit_elem: HtmlInputElement = document
            .get_element_by_id("newIgUnit")
            .unwrap()
            .dyn_into()
            .expect("editIgUnit is not an input element");
        let unit = unit_elem.value();

        if name.is_empty() && unit.is_empty() {
            return;
        }

        let token = token.clone();
        let err = err.clone();
        let render = render.clone();

        wasm_bindgen_futures::spawn_local(async move {
            match do_add_ingredient(token, household, name, unit).await {
                Ok(_) => {
                    name_elem.set_value("");
                    unit_elem.set_value("");
                    render.set(*render + 1);
                }
                Err(e) => err.set(Some(format!("Could not add ingredient: {e:?}"))),
            }
        });
    });

    html! {
        <div class="d-flex align-items-center justify-content-center w-100">
            <div class={classes!("container", "text-center", "rounded", "border", "pt-2", "m-2")}>
                <form {onsubmit}>
                    if let Some(err) = &*error {
                        <div class={classes!("alert", "alert-danger")} role="alert">
                            {err}
                        </div>
                    }
                    <div class="form-floating">
                        <input
                            type="text"
                            class="form-control"
                            placeholder="Ingredient Name"
                            id="newIgName"
                        />
                        <label for="newIgName">{"Ingredient Name"}</label>
                    </div>
                    <div class="form-floating my-1">
                        <input
                            type="text"
                            class="form-control"
                            placeholder="Ingredient Unit"
                            id="newIgUnit"
                        />
                        <label for="newIgUnit">{"Ingredient Unit"}</label>
                    </div>
                    <button class="btn btn-primary mt-2">
                        {"Add Ingredient"}
                    </button>
                </form>
                <hr />
                <Suspense {fallback}>
                    <IngredientList
                        token={global_state.token.token.clone()}
                        household={global_state.household.id}
                        render_id={*render_id}
                    />
                </Suspense>
            </div>
        </div>
    }
}