app: Implement disconnection & leaving an household

app/src/sidebar.rs

@@ -1,7 +1,10 @@
-use crate::{RegaladeGlobalState, Route};
+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,
@@ -16,9 +19,54 @@ struct SidebarProps {
     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">
@@ -105,7 +153,35 @@ fn Sidebar(props: &SidebarProps) -> Html {
                                     {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>