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

6 files changed, 69 insertions, 10 deletions

diff --git a/webapp/Cargo.toml b/webapp/Cargo.toml
index 5411ccd..b7c0d28 100644
--- a/webapp/Cargo.toml
+++ b/webapp/Cargo.toml
@@ -20,6 +20,7 @@ gloo-net = "0.2.4"
 wasm-bindgen-futures = "0.4.33"
 protocol = { path = "../protocol" }
 yew-router = "0.16.0"
+web-sys = { version = "0.3.60", features = ["Location", "Document"] }
 
 [dev-dependencies]
 env_logger = "0.8.4"
diff --git a/webapp/src/components.rs b/webapp/src/components.rs
index 224177b..60c310e 100644
--- a/webapp/src/components.rs
+++ b/webapp/src/components.rs
@@ -2,6 +2,7 @@ use crate::card::Suit;
 
 mod app_context_provider;
 mod bidding;
+mod error_info;
 mod bidding_box;
 mod bidding_table;
 mod card;
@@ -21,6 +22,7 @@ pub use self::hand::*;
 pub use self::show_bid::*;
 pub use self::trick_in_play::*;
 pub use self::tricks_played::*;
+pub use self::error_info::*;
 
 pub fn suit_css_class(suit: Suit) -> &'static str {
     match suit {
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>
+    }
+}
diff --git a/webapp/src/default.css b/webapp/src/default.css
index 72080dd..1a6817f 100644
--- a/webapp/src/default.css
+++ b/webapp/src/default.css
@@ -2,6 +2,8 @@
 
 body {
     background-color: #eeb;
+    font-family: Arial, sans-serif;
+    font-size: 12pt;
 }
 
 *{
@@ -10,6 +12,14 @@ body {
   margin: 0;
 }
 
+.error-box {
+    width: 80vw;
+    padding: 0.5em;
+    border: 2px solid #444;
+    border-radius: 2em;
+    background-color: #eaa;
+}
+
 .game-layout {
     display: grid;
     grid-template-areas: "north north north nav"
@@ -21,6 +31,17 @@ body {
     height: 100vh;
 }
 
+button {
+  background: none!important;
+  border: none;
+  padding: 0!important;
+  font-family: Arial, sans-serif;
+  font-size: 100%;
+  color: #229;
+  text-decoration: underline;
+  cursor: pointer;
+}
+
 .nav {
     grid-area: nav;
     display: grid;
diff --git a/webapp/src/main.rs b/webapp/src/main.rs
index cf7c813..1b60a9f 100644
--- a/webapp/src/main.rs
+++ b/webapp/src/main.rs
@@ -7,7 +7,7 @@ use yew_router::prelude::*;
 pub mod bridge_engine;
 pub mod card;
 pub mod components;
-use components::{AppContextProvider, AppContext, Game};
+use components::{AppContextProvider, AppContext, Game, ErrorInfo};
 use gloo_net::http::Request;
 extern crate wee_alloc;
 
@@ -25,7 +25,7 @@ enum Route {
 
 fn main() {
     std::panic::set_hook(Box::new(console_error_panic_hook::hook));
-    wasm_logger::init(wasm_logger::Config::default());
+    wasm_logger::init(wasm_logger::Config::new(log::Level::Debug));
     yew::start_app::<App>();
 }
 
@@ -55,6 +55,9 @@ fn home() -> Html {
 
     html! {
         <>
+	    if let Some(error) = &ctx.error {
+		<ErrorInfo ..error.clone()/>
+            }
 	    { user }
             <p>
                 <Link<Route> to={Route::Playground}>{ "Playground" }</Link<Route>>