rebuilt app as struct component, fixed futures

src/cookie.rs

@@ -1,42 +1,31 @@
 use crate::*;
 
-#[derive(Properties, Clone, PartialEq)]
-pub struct CookieProps {
-    pub cookie: String,
-}
-
-impl CookieProps {
-    pub fn acquire_cookie() -> Self {
-        let cookie_options = cookies::CookieOptions::default()
-            .expires_after(core::time::Duration::from_secs(
-                52 * 7 * 24 * 60 * 60
-            ));
-        match cookies::get("test") {
-            Some(Ok(cookie)) => {
-                log!("got cookie");
-                return Self { cookie: cookie };
-            }
-            Some(Err(e)) => {
-                log!(format!("cookie error: {}", e));
-            }
-            None => {
-                log!("did not find cookie");
-            }
+pub fn acquire_cookie() -> String {
+    let cookie_options = cookies::CookieOptions::default()
+        .expires_after(core::time::Duration::from_secs(
+            52 * 7 * 24 * 60 * 60
+        ));
+    match cookies::get("test") {
+        Some(Ok(cookie)) => {
+            log!("got cookie");
+            return cookie;
+        }
+        Some(Err(e)) => {
+            log!(format!("cookie error: {}", e));
+        }
+        None => {
+            log!("did not find cookie");
         }
-        log!("setting cookie");
-        cookies::set("test", "123", &cookie_options);
-        let cookie = "123".to_string();
-        // XXX Don't do this!! No secrets in logs!
-        // log!(&cookie);
-        Self { cookie }
     }
+    log!("setting cookie");
+    cookies::set("test", "123", &cookie_options);
+    "123".to_string()
 }
 
-#[function_component(Cookie)]
-pub fn cookie(CookieProps { cookie }: &CookieProps) -> Html {
+pub fn render_cookie(cookie: &str) -> Html {
     html! {
         <div>
-            <p>{cookie.clone()}</p>
+            <p>{cookie}</p>
         </div>
     }
 }

src/joke.rs

@@ -10,41 +10,43 @@ pub struct JokeStruct {
 }
 
 impl JokeStruct {
-    pub async fn get_joke() -> Result<Self, gloo_net::Error> {
-        http::Request::get("http://localhost:3000/api/v1/joke")
+    pub async fn get_joke() -> Msg {
+        let response = http::Request::get("http://localhost:3000/api/v1/joke")
             .send()
-            .await?
-            .json()
-            .await
+            .await;
+        match response {
+            Err(e) => Msg::GotJoke(Err(e)),
+            Ok(data) => Msg::GotJoke(data.json().await),
+        }
     }
 }
+pub fn format_tags(tags: &HashSet<String>) -> String {
+    let taglist: Vec<&str> = tags.iter().map(String::as_ref).collect();
+    taglist.join(", ")
+}
 
 #[derive(Properties, Clone, PartialEq, serde::Deserialize)]
 pub struct JokeProps {
     pub joke: JokeStruct,
 }
 
-pub fn format_tags(tags: &HashSet<String>) -> String {
-    let taglist: Vec<&str> = tags.iter().map(String::as_ref).collect();
-    taglist.join(", ")
-}
-
 #[function_component(Joke)]
 pub fn joke(joke: &JokeProps) -> Html {
+    let joke = &joke.joke;
     html! { <>
         <div class="joke">
             <span class="teller">{"Knock-Knock!"}</span><br/>
             <span class="tellee">{"Who's there?"}</span><br/>
-            <span class="teller">{joke.joke.whos_there.clone()}</span><br/>
-            <span class="tellee">{format!("{} who?", &joke.joke.whos_there)}</span><br/>
-            <span class="teller">{joke.joke.answer_who.clone()}</span>
+            <span class="teller">{joke.whos_there.clone()}</span><br/>
+            <span class="tellee">{format!("{} who?", &joke.whos_there)}</span><br/>
+            <span class="teller">{joke.answer_who.clone()}</span>
         </div>
         <span class="annotation">
-            {format!("[id: {}", &joke.joke.id)}
-            if let Some(ref tags) = joke.joke.tags {
+            {format!("[id: {}", &joke.id)}
+            if let Some(ref tags) = joke.tags {
                 {format!("; tags: {}", &format_tags(tags))}
             }
-            if let Some(ref source) = joke.joke.source {
+            if let Some(ref source) = joke.source {
                 {format!("; source: {}", source)}
             }
             {"]"}

src/main.rs

@@ -13,37 +13,55 @@ extern crate wasm_bindgen_futures;
 use wasm_cookies as cookies;
 use yew::prelude::*;
 
-#[function_component(App)]
-fn app() -> Html {
-    let cookie = use_state(|| CookieProps::acquire_cookie());
+pub type JokeResult = Result<JokeStruct, gloo_net::Error>;
 
-    let joke = use_state(|| Err(gloo_net::Error::GlooError("uninit".to_string())));
-    let get_joke = joke.clone();
-    use_effect_with((), move |()| {
-        wasm_bindgen_futures::spawn_local(async move {
-            let joke = JokeStruct::get_joke().await;
-            get_joke.set(joke);
-        });
-        || ()
-    });
+struct App {
+    cookie: String,
+    joke: JokeResult,
+}
 
-    html! {
-    <>
-        <h1>{ "Knock-Knock" }</h1>
-        if false {
-            <div>
-                <Cookie cookie={cookie.cookie.clone()} />
-            </div>
+pub enum Msg {
+    GotJoke(JokeResult),
+}
+
+impl Component for App {
+    type Message = Msg;
+    type Properties = ();
+
+    fn create(ctx: &Context<Self>) -> Self {
+        let cookie = acquire_cookie();
+        let got_joke = JokeStruct::get_joke();
+        ctx.link().send_future(got_joke);
+        let joke = Err(gloo_net::Error::GlooError("Loading Joke…".to_string()));
+        Self { cookie, joke }
+    }
+
+    fn update(&mut self, _ctx: &Context<Self>, msg: Self::Message) -> bool {
+        match msg {
+            Msg::GotJoke(joke) => self.joke = joke,
         }
-        if let Ok(ref joke) = *joke {
-            <Joke joke={joke.clone()}/>
+        true
+    }
+
+    fn view(&self, _ctx: &Context<Self>) -> Html {
+        let cookie = &self.cookie;
+        let joke = &self.joke;
+        html! {
+        <>
+            <h1>{ "Knock-Knock" }</h1>
+            if false {
+                {render_cookie(cookie)}
+            }
+            if let Ok(ref joke) = joke {
+                <Joke joke={joke.clone()}/>
+            }
+            if let Err(ref error) = joke {
+                <div>
+                    <span class="error">{format!("Server Error: {error}")}</span>
+                </div>
+            }
+        </>
         }
-        if let Err(ref error) = *joke {
-            <div>
-                <span class="error">{format!("Server Error: {error}")}</span>
-            </div>
-        }
-    </>
     }
 }