Add a reload button after an error setting up the app context

2 files changed, 40 insertions, 8 deletions

diff --git a/webapp/src/components/app_context_provider.rs b/webapp/src/components/app_context_provider.rs
index f2938ff..50e4e1a 100644
--- a/webapp/src/components/app_context_provider.rs
+++ b/webapp/src/components/app_context_provider.rs
@@ -3,8 +3,14 @@ use protocol::UserInfo;
 use std::rc::Rc;
 use yew::prelude::*;
 
+#[derive(Properties, Clone, PartialEq, Debug)]
+pub struct ErrorInfoProperties {
+    pub message: String,
+}
+
 #[derive(Clone, Debug, PartialEq)]
 pub struct AppContext {
+    pub error: Option<ErrorInfoProperties>,
     pub user: Option<UserInfo>,
 }
 
@@ -13,6 +19,14 @@ pub struct Props {
     pub children: Children,
 }
 
+async fn initialize_context() -> Result<AppContext, anyhow::Error> {
+    let user = Request::get("/api/user/info").send().await?.json().await?;
+    Ok(AppContext {
+        user: user,
+        error: None,
+    })
+}
+
 #[function_component(AppContextProvider)]
 pub fn app_context_provider(props: &Props) -> Html {
     let context: UseStateHandle<Option<Rc<AppContext>>> = use_state(|| None);
@@ -22,14 +36,15 @@ pub fn app_context_provider(props: &Props) -> Html {
         use_effect_with_deps(
             move |_| {
                 wasm_bindgen_futures::spawn_local(async move {
-                    let user_info: Option<UserInfo> = Request::get("/api/user/info")
-                        .send()
-                        .await
-                        .unwrap()
-                        .json()
-                        .await
-                        .unwrap();
-                    context.set(Some(Rc::new(AppContext { user: user_info })));
+                    context.set(Some(Rc::new(match initialize_context().await {
+                        Ok(context) => context,
+                        Err(e) => AppContext {
+                            user: None,
+                            error: Some(ErrorInfoProperties {
+                                message: format!("Could not contact server"),
+                            }),
+                        },
+                    })));
                 });
                 || ()
             },
diff --git a/webapp/src/components/error_info.rs b/webapp/src/components/error_info.rs
new file mode 100644
index 0000000..4ec5ba9
--- /dev/null
+++ b/webapp/src/components/error_info.rs
@@ -0,0 +1,17 @@
+use crate::components::app_context_provider::ErrorInfoProperties;
+use yew::prelude::*;
+
+#[function_component(ErrorInfo)]
+pub fn error_info(props: &ErrorInfoProperties) -> Html {
+    let reload = Callback::from(move |_| {
+        web_sys::window().unwrap().location().reload().unwrap();
+    });
+    html! {
+    <div class="error-box">
+        <p>
+	    { format!("Error: {}. ", props.message) }
+            <button onclick={reload}>{ "Reload" }</button>
+	</p>
+    </div>
+    }
+}