Fix bug and Update Yew 0.21.0 with some improvements (#51)

* Fix a rendering bug

Fix `use_state(|| props.article.clone())` and `props.article` not synchronized in case of partial tab switching

* Update dependencies and Add justfile

Cargo.toml Update dependencise:
Major changes:
* Yew: Replace `use_effect_with_deps` with `use_effect_with`

* sync with master

---------

Co-authored-by: Coylr <[email protected]>
Co-authored-by: Jet Li <[email protected]>

README.md

@@ -87,6 +87,13 @@ You can visit `http://127.0.0.1:8080` in your browser now.
   wasm-pack test --headless --chrome
   ```
 
+* Justfile
+  * Install [wasm-pack] `just install-wasm-pack`
+  * Copy `.env.example` to `.env` `just env`
+  * Trunk serve `just trunk-serve`
+  * Trunk build `just trunk-build`
+  * Test `just test`
+
 ### With [Tauri] for desktop (optional)
 
 * Install [Tauri]
@@ -106,6 +113,11 @@ You can visit `http://127.0.0.1:8080` in your browser now.
   ```bash
   cargo tauri build
   ```
+
+* Justfile
+  * Install [Tauri] `just install-tauri`
+  * Build and develop `just tauri-dev`
+  * Build and release `just tauri-build`
 
 ## Create Yew App
 
@@ -117,6 +129,10 @@ cd my-app
 trunk serve
 ```
 
+Justfile:
+* Create-yew-app `just create-yew-app`
+* App-serve `just app-serve`
+
 ## Contributing
 
 Feel free to take a look at the current issues in this repo for anything that currently needs to be worked on.

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

@@ -33,7 +33,7 @@ pub fn Comment(props: &Props) -> Html {
                     { &comment.author.username }
                 </Link<AppRoute>>
                 <span class="date-posted">
-                    { format!("{}", &comment.created_at.format("%B %e, %Y")) }
+                    { &comment.created_at.format("%B %e, %Y").to_string() }
                 </span>
                 { if show {
                     html! {

crates/conduit-wasm/src/components/article_preview.rs

@@ -31,8 +31,14 @@ pub fn ArticlePreview(props: &Props) -> Html {
 
     {
         let article = article.clone();
-        let article_favorite = article_favorite.clone();
-        use_effect_with(article_favorite, move |article_favorite| {
+        use_effect_with(props.clone(), move |props| {
+            article.set(props.article.clone());
+        })
+    }
+
+    {
+        let article = article.clone();
+        use_effect_with(article_favorite.clone(), move |article_favorite| {
             if let Some(article_info) = &article_favorite.data {
                 article.set(article_info.article.clone());
             }
@@ -63,7 +69,7 @@ pub fn ArticlePreview(props: &Props) -> Html {
                         { &article.author.username }
                     </Link<AppRoute>>
                     <span class="date">
-                        { format!("{}", &article.created_at.format("%B %e, %Y")) }
+                        { &article.created_at.format("%B %e, %Y").to_string() }
                     </span>
                 </div>
                 <div class="pull-xs-right">

crates/conduit-wasm/src/components/list_errors.rs

@@ -34,7 +34,7 @@ pub fn ListErrors(props: &Props) -> Html {
                         }
                         _ => {
                             html! {
-                                <li>{ format!("{}", error) }</li>
+                                <li>{error.to_string()}</li>
                             }
                         }
 

justfile

@@ -0,0 +1,31 @@
+#!/usr/bin/env just --justfile
+
+install-wasm-pack:
+  cargo install wasm-pack
+
+install-tauri:
+  cargo install tauri-cli
+
+env:
+  cp .env.example .env
+
+trunk-serve:
+  cd crates/conduit-wasm && trunk serve
+
+build:
+  cd crates/conduit-wasm && trunk build
+
+test:
+  wasm-pack test --headless --chrome
+
+tauri-dev:
+  cargo tauri dev
+
+tauri-build:
+  cargo tauri build
+
+create-yew-app:
+  npx create-yew-app my-app
+
+serve-app:
+  cd my-app && trunk serve