upgrade yew 0.21 (#52)

Cargo.toml

@@ -1,4 +1,5 @@
 [workspace]
+resolver = "2"
 members = [
     "crates/conduit-wasm",
     "crates/conduit-tauri",

crates/conduit-wasm/Cargo.toml

@@ -12,18 +12,18 @@ version = "0.1.0"
 
 [dependencies]
 chrono = { version = "0.4", features = ["serde"] }
-dotenv_codegen = "0.15.0"
-gloo = "0.8"
-lazy_static = "1.4.0"
+dotenv_codegen = "0.15"
+gloo = "0.11"
+lazy_static = "1.4"
 log = "0.4"
-parking_lot = "0.12.1"
-pulldown-cmark = "0.9.2"
-reqwest = { version = "0.11.13", features = ["json"] }
+parking_lot = "0.12"
+pulldown-cmark = "0.10"
+reqwest = { version = "0.12", features = ["json"] }
 serde = "1"
 thiserror = "1"
-yew = { version = "0.20.0", features = ["csr"] }
-yew-router = "0.17.0"
-yew-hooks = "0.2.0"
+yew = { version = "0.21.0", features = ["csr"] }
+yew-router = "0.18.0"
+yew-hooks = "0.3"
 wasm-bindgen = "0.2"
 wasm-logger = "0.2"
 
@@ -42,4 +42,4 @@ features = [
 js-sys = "0.3"
 wasm-bindgen-futures = "0.4"
 wasm-bindgen-test = "0.3"
-gloo-utils = "0.1.5"
+gloo-utils = "0.2"

crates/conduit-wasm/src/app/article/article_actions.rs

@@ -12,8 +12,8 @@ pub struct Props {
 }
 
 /// Article actions component to edit or delete an article.
-#[function_component(ArticleActions)]
-pub fn article_actions(props: &Props) -> Html {
+#[function_component]
+pub fn ArticleActions(props: &Props) -> Html {
     let navigator = use_navigator().unwrap();
     let article_delete = {
         let slug = props.slug.clone();
@@ -26,15 +26,12 @@ pub fn article_actions(props: &Props) -> Html {
         })
     };
 
-    use_effect_with_deps(
-        move |article_delete| {
-            if article_delete.data.is_some() {
-                navigator.push(&AppRoute::Home);
-            }
-            || ()
-        },
-        article_delete,
-    );
+    use_effect_with(article_delete, move |article_delete| {
+        if article_delete.data.is_some() {
+            navigator.push(&AppRoute::Home);
+        }
+        || ()
+    });
 
     if props.can_modify {
         html! {

crates/conduit-wasm/src/app/article/article_meta.rs

@@ -13,8 +13,8 @@ pub struct Props {
     pub created_at: String,
 }
 
-#[function_component(ArticleMeta)]
-pub fn article_meta(props: &Props) -> Html {
+#[function_component]
+pub fn ArticleMeta(props: &Props) -> Html {
     html! {
         <div class="article-meta">
             <img src={ props.author.image.clone() } alt={ props.author.username.clone() } />

crates/conduit-wasm/src/app/article/comment.rs

@@ -13,8 +13,8 @@ pub struct Props {
     pub callback: Callback<u32>,
 }
 
-#[function_component(Comment)]
-pub fn comment(props: &Props) -> Html {
+#[function_component]
+pub fn Comment(props: &Props) -> Html {
     let user_ctx = use_user_context();
     let comment = &props.comment;
     let show = user_ctx.is_authenticated() && user_ctx.username == comment.author.username;
@@ -33,7 +33,7 @@ pub fn comment(props: &Props) -> Html {
                     { &comment.author.username }
                 </Link<AppRoute>>
                 <span class="date-posted">
-                    { &comment.created_at.format("%B %e, %Y") }
+                    { format!("{}", &comment.created_at.format("%B %e, %Y")) }
                 </span>
                 { if show {
                     html! {

crates/conduit-wasm/src/app/article/comment_input.rs

@@ -15,8 +15,8 @@ pub struct Props {
 }
 
 /// Create a comment for an article.
-#[function_component(CommentInput)]
-pub fn comment_input(props: &Props) -> Html {
+#[function_component]
+pub fn CommentInput(props: &Props) -> Html {
     let create_info = use_state(CommentCreateInfo::default);
     let user_ctx = use_user_context();
     let create_comment = {
@@ -47,17 +47,14 @@ pub fn comment_input(props: &Props) -> Html {
     {
         let create_info = create_info.clone();
         let callback = props.callback.clone();
-        use_effect_with_deps(
-            move |create_comment| {
-                if let Some(comment_info) = &create_comment.data {
-                    create_info.set(CommentCreateInfo::default());
-                    callback.emit(comment_info.comment.clone());
-                }
+        use_effect_with(create_comment.clone(), move |create_comment| {
+            if let Some(comment_info) = &create_comment.data {
+                create_info.set(CommentCreateInfo::default());
+                callback.emit(comment_info.comment.clone());
+            }
 
-                || ()
-            },
-            create_comment.clone(),
-        );
+            || ()
+        });
     }
 
     html! {

crates/conduit-wasm/src/app/article/comment_list.rs

@@ -14,8 +14,8 @@ pub struct Props {
 }
 
 /// A comment list component of an article.
-#[function_component(CommentList)]
-pub fn comment_list(props: &Props) -> Html {
+#[function_component]
+pub fn CommentList(props: &Props) -> Html {
     let user_ctx = use_user_context();
     let comment_list = {
         let slug = props.slug.clone();

crates/conduit-wasm/src/app/article/delete_button.rs

@@ -11,8 +11,8 @@ pub struct Props {
 }
 
 /// A component to delete a comment from an article.
-#[function_component(DeleteButton)]
-pub fn delete_button(props: &Props) -> Html {
+#[function_component]
+pub fn DeleteButton(props: &Props) -> Html {
     let delete_comment = {
         let slug = props.slug.clone();
         let comment_id = props.comment_id;
@@ -26,14 +26,14 @@ pub fn delete_button(props: &Props) -> Html {
     };
 
     {
-        use_effect_with_deps(
+        use_effect_with(
+            (props.callback.clone(), props.comment_id, delete_comment),
             move |(callback, comment_id, delete_comment)| {
                 if delete_comment.data.is_some() {
                     callback.emit(*comment_id);
                 }
                 || ()
             },
-            (props.callback.clone(), props.comment_id, delete_comment),
         )
     }
 

crates/conduit-wasm/src/app/article/mod.rs

@@ -22,8 +22,8 @@ pub struct Props {
 }
 
 /// Article detail page
-#[function_component(Article)]
-pub fn article(props: &Props) -> Html {
+#[function_component]
+pub fn Article(props: &Props) -> Html {
     let article = {
         let slug = props.slug.clone();
         use_async_with_options(

crates/conduit-wasm/src/app/editor.rs

@@ -11,12 +11,13 @@ use crate::types::{ArticleCreateUpdateInfo, ArticleCreateUpdateInfoWrapper};
 
 #[derive(Properties, Clone, PartialEq, Eq)]
 pub struct Props {
+    #[prop_or_default]
     pub slug: Option<String>,
 }
 
 /// Create or update an article
-#[function_component(Editor)]
-pub fn editor(props: &Props) -> Html {
+#[function_component]
+pub fn Editor(props: &Props) -> Html {
     let navigator = use_navigator().unwrap();
     let error = use_state(|| None);
     let update_info = use_state(ArticleCreateUpdateInfo::default);
@@ -42,59 +43,50 @@ pub fn editor(props: &Props) -> Html {
 
     {
         let article_get = article_get.clone();
-        use_effect_with_deps(
-            move |slug| {
-                if slug.is_some() {
-                    article_get.run();
-                }
-                || ()
-            },
-            props.slug.clone(),
-        );
+        use_effect_with(props.slug.clone(), move |slug| {
+            if slug.is_some() {
+                article_get.run();
+            }
+            || ()
+        });
     }
 
     {
         let update_info = update_info.clone();
         let error = error.clone();
-        use_effect_with_deps(
-            move |article_get| {
-                if let Some(article_info) = &article_get.data {
-                    update_info.set(ArticleCreateUpdateInfo {
-                        title: article_info.article.title.clone(),
-                        description: article_info.article.description.clone(),
-                        body: article_info.article.body.clone(),
-                        tag_list: Some(article_info.article.tag_list.clone()),
-                    });
-                    error.set(None);
-                }
-                if let Some(e) = &article_get.error {
-                    error.set(Some(e.clone()));
-                }
+        use_effect_with(article_get, move |article_get| {
+            if let Some(article_info) = &article_get.data {
+                update_info.set(ArticleCreateUpdateInfo {
+                    title: article_info.article.title.clone(),
+                    description: article_info.article.description.clone(),
+                    body: article_info.article.body.clone(),
+                    tag_list: Some(article_info.article.tag_list.clone()),
+                });
+                error.set(None);
+            }
+            if let Some(e) = &article_get.error {
+                error.set(Some(e.clone()));
+            }
 
-                || ()
-            },
-            article_get,
-        );
+            || ()
+        });
     }
 
     {
         let error = error.clone();
-        use_effect_with_deps(
-            move |article_update| {
-                if let Some(article_info) = &article_update.data {
-                    error.set(None);
-                    // Route to article detail page.
-                    navigator.push(&AppRoute::Article {
-                        slug: article_info.article.slug.clone(),
-                    });
-                }
-                if let Some(e) = &article_update.error {
-                    error.set(Some(e.clone()));
-                }
-                || ()
-            },
-            article_update.clone(),
-        );
+        use_effect_with(article_update.clone(), move |article_update| {
+            if let Some(article_info) = &article_update.data {
+                error.set(None);
+                // Route to article detail page.
+                navigator.push(&AppRoute::Article {
+                    slug: article_info.article.slug.clone(),
+                });
+            }
+            if let Some(e) = &article_update.error {
+                error.set(Some(e.clone()));
+            }
+            || ()
+        });
     }
 
     let onsubmit = {

crates/conduit-wasm/src/app/home/banner.rs

@@ -2,8 +2,8 @@ use yew::prelude::*;
 
 use crate::hooks::use_user_context;
 
-#[function_component(Banner)]
-pub fn banner() -> Html {
+#[function_component]
+pub fn Banner() -> Html {
     let user_ctx = use_user_context();
     if user_ctx.is_authenticated() {
         html! {}

crates/conduit-wasm/src/app/home/main_view.rs

@@ -16,8 +16,8 @@ pub enum Tab {
 }
 
 /// Main content with tabs of article list for home page
-#[function_component(MainView)]
-pub fn main_view(props: &Props) -> Html {
+#[function_component]
+pub fn MainView(props: &Props) -> Html {
     let user_ctx = use_user_context();
     let tab = use_state(|| {
         if user_ctx.is_authenticated() {
@@ -38,35 +38,29 @@ pub fn main_view(props: &Props) -> Html {
     {
         let tab = tab.clone();
         let filter = filter.clone();
-        use_effect_with_deps(
-            move |tag| {
-                if let Some(tag) = &tag {
-                    tab.set(Tab::Tag);
-                    filter.set(ArticleListFilter::ByTag(tag.clone()));
-                }
-                || ()
-            },
-            props.tag.clone(),
-        );
+        use_effect_with(props.tag.clone(), move |tag| {
+            if let Some(tag) = &tag {
+                tab.set(Tab::Tag);
+                filter.set(ArticleListFilter::ByTag(tag.clone()));
+            }
+            || ()
+        });
     }
 
     {
         let filter = filter.clone();
-        use_effect_with_deps(
-            move |(tab, tag)| {
-                match tab {
-                    Tab::Feed => filter.set(ArticleListFilter::Feed),
-                    Tab::All => filter.set(ArticleListFilter::All),
-                    Tab::Tag => {
-                        if let Some(tag) = tag {
-                            filter.set(ArticleListFilter::ByTag(tag.clone()));
-                        }
+        use_effect_with(((*tab).clone(), props.tag.clone()), move |(tab, tag)| {
+            match tab {
+                Tab::Feed => filter.set(ArticleListFilter::Feed),
+                Tab::All => filter.set(ArticleListFilter::All),
+                Tab::Tag => {
+                    if let Some(tag) = tag {
+                        filter.set(ArticleListFilter::ByTag(tag.clone()));
                     }
                 }
-                || ()
-            },
-            ((*tab).clone(), props.tag.clone()),
-        );
+            }
+            || ()
+        });
     }
 
     html! {

crates/conduit-wasm/src/app/home/mod.rs

@@ -9,8 +9,8 @@ use main_view::MainView;
 use tags::Tags;
 
 /// Home page with an article list and a tag list.
-#[function_component(Home)]
-pub fn home() -> Html {
+#[function_component]
+pub fn Home() -> Html {
     let tag = use_state(|| None);
     let callback = {
         let tag = tag.clone();

crates/conduit-wasm/src/app/home/tags.rs

@@ -9,8 +9,8 @@ pub struct Props {
 }
 
 /// A tag list component with a callback to notify that some tag is clicked.
-#[function_component(Tags)]
-pub fn tags(props: &Props) -> Html {
+#[function_component]
+pub fn Tags(props: &Props) -> Html {
     let tag_list = use_async_with_options(
         async move { get_all().await },
         UseAsyncOptions::enable_auto(),