From 53e16751a7fabf2708d3871c22de1022962c9875 Mon Sep 17 00:00:00 2001
From: Greg Johnston <greg.johnston@gmail.com>
Date: Wed, 11 Oct 2023 16:45:48 -0400
Subject: [PATCH] chore: clean up style and bring into line with other
 hackernews examples

---
 examples/hackernews_js_fetch/Cargo.toml       | 15 ++--
 examples/hackernews_js_fetch/src/api.rs       |  3 +-
 examples/hackernews_js_fetch/src/lib.rs       | 44 ++++------
 examples/hackernews_js_fetch/src/routes.rs    |  1 -
 .../src/routes/counters.rs                    | 79 ------------------
 .../hackernews_js_fetch/src/routes/stories.rs | 35 ++++----
 .../hackernews_js_fetch/src/routes/story.rs   | 81 +++++++++----------
 .../hackernews_js_fetch/src/routes/users.rs   |  6 +-
 8 files changed, 84 insertions(+), 180 deletions(-)
 delete mode 100644 examples/hackernews_js_fetch/src/routes/counters.rs

diff --git a/examples/hackernews_js_fetch/Cargo.toml b/examples/hackernews_js_fetch/Cargo.toml
index 99b2ff656c..daf2ca52fc 100644
--- a/examples/hackernews_js_fetch/Cargo.toml
+++ b/examples/hackernews_js_fetch/Cargo.toml
@@ -27,15 +27,20 @@ reqwest = { version = "0.11.13", features = ["json"] }
 axum = { version = "0.6", default-features = false, optional = true }
 tower = { version = "0.4.13", optional = true }
 http = { version = "0.2.8", optional = true }
-web-sys = { version = "0.3", features = ["AbortController", "AbortSignal", "Request", "Response"] }
+web-sys = { version = "0.3", features = [
+  "AbortController",
+  "AbortSignal",
+  "Request",
+  "Response",
+] }
 wasm-bindgen = "0.2"
-wasm-bindgen-futures = { version = "0.4.37", features = ["futures-core-03-stream"], optional = true }
+wasm-bindgen-futures = { version = "0.4.37", features = [
+  "futures-core-03-stream",
+], optional = true }
 axum-js-fetch = { version = "0.2.1", optional = true }
 lazy_static = "1.4.0"
 
 [features]
-default = ["csr"]
-csr = ["leptos/csr", "leptos_meta/csr", "leptos_router/csr"]
 hydrate = ["leptos/hydrate", "leptos_meta/hydrate", "leptos_router/hydrate"]
 ssr = [
   "dep:tower",
@@ -51,7 +56,7 @@ ssr = [
 
 [package.metadata.cargo-all-features]
 denylist = ["axum", "tower", "http", "leptos_axum"]
-skip_feature_sets = [["csr", "ssr"], ["csr", "hydrate"], ["ssr", "hydrate"]]
+skip_feature_sets = [["ssr", "hydrate"]]
 
 [package.metadata.leptos]
 # The name used by wasm-bindgen/cargo-leptos for the JS/WASM bundle. Defaults to the crate name
diff --git a/examples/hackernews_js_fetch/src/api.rs b/examples/hackernews_js_fetch/src/api.rs
index b30bbb3cc1..99c44c6e3a 100644
--- a/examples/hackernews_js_fetch/src/api.rs
+++ b/examples/hackernews_js_fetch/src/api.rs
@@ -17,8 +17,7 @@ where
     let abort_controller = web_sys::AbortController::new().ok();
     let abort_signal = abort_controller.as_ref().map(|a| a.signal());
 
-    // abort in-flight requests if the Scope is disposed
-    // i.e., if we've navigated away from this page
+    // abort in-flight requests if, e.g., we've navigated away from this page
     leptos::on_cleanup(move || {
         if let Some(abort_controller) = abort_controller {
             abort_controller.abort()
diff --git a/examples/hackernews_js_fetch/src/lib.rs b/examples/hackernews_js_fetch/src/lib.rs
index 3bee19e8fc..014a1f32c3 100644
--- a/examples/hackernews_js_fetch/src/lib.rs
+++ b/examples/hackernews_js_fetch/src/lib.rs
@@ -2,42 +2,35 @@ use cfg_if::cfg_if;
 use leptos::{component, view, IntoView};
 use leptos_meta::*;
 use leptos_router::*;
-use log::{info, Level};
 mod api;
 pub mod error_template;
 pub mod fallback;
 mod routes;
-use routes::{counters::*, nav::*, stories::*, story::*, users::*};
+use routes::{nav::*, stories::*, story::*, users::*};
+use wasm_bindgen::prelude::wasm_bindgen;
 
 #[component]
 pub fn App() -> impl IntoView {
     provide_meta_context();
     view! {
-
-        <>
-            <Link rel="shortcut icon" type_="image/ico" href="/public/favicon.ico"/>
-            <Stylesheet id="leptos" href="/public/style.css"/>
-            <Meta name="description" content="Leptos implementation of a HackerNews demo."/>
-            <Router>
-                <Nav />
-                <main>
-                    <Routes>
-                        <Route path="users/:id" view=User/>
-                        <Route path="stories/:id" view=Story/>
-                        <Route path=":stories?" view=Stories/>
-                        <Route path="counter" view=Counter/>
-                    </Routes>
-                </main>
-            </Router>
-        </>
+        <Link rel="shortcut icon" type_="image/ico" href="/public/favicon.ico"/>
+        <Stylesheet id="leptos" href="/public/style.css"/>
+        <Meta name="description" content="Leptos implementation of a HackerNews demo."/>
+        <Router>
+            <Nav />
+            <main>
+                <Routes>
+                    <Route path="users/:id" view=User/>
+                    <Route path="stories/:id" view=Story/>
+                    <Route path=":stories?" view=Stories/>
+                </Routes>
+            </main>
+        </Router>
     }
 }
 
-// Needs to be in lib.rs AFAIK because wasm-bindgen needs us to be compiling a lib. I may be wrong.
 cfg_if! {
     if #[cfg(feature = "hydrate")] {
-        use wasm_bindgen::prelude::wasm_bindgen;
-
         #[wasm_bindgen]
         pub fn hydrate() {
             _ = console_log::init_with_level(log::Level::Debug);
@@ -53,8 +46,8 @@ cfg_if! {
         routing::post
     };
     use leptos_axum::{generate_route_list, LeptosRoutes};
-    use wasm_bindgen::prelude::*;
     use leptos::*;
+    use log::{info, Level};
 
     #[wasm_bindgen]
     pub struct Handler(axum_js_fetch::App);
@@ -66,13 +59,8 @@ cfg_if! {
             console_error_panic_hook::set_once();
 
             let leptos_options = LeptosOptions::builder().output_name("client").site_pkg_dir("pkg").build();
-
-
             let routes = generate_route_list(App);
 
-            ClearServerCount::register_explicit().unwrap();
-            AdjustServerCount::register_explicit().unwrap();
-            GetServerCount::register_explicit().unwrap();
             // build our application with a route
             let app: axum::Router<(), axum::body::Body> = Router::new()
             .leptos_routes(&leptos_options, routes, || view! { <App/> } )
diff --git a/examples/hackernews_js_fetch/src/routes.rs b/examples/hackernews_js_fetch/src/routes.rs
index 9ed9dd4cc0..1525419ff8 100644
--- a/examples/hackernews_js_fetch/src/routes.rs
+++ b/examples/hackernews_js_fetch/src/routes.rs
@@ -1,4 +1,3 @@
-pub mod counters;
 pub mod nav;
 pub mod stories;
 pub mod story;
diff --git a/examples/hackernews_js_fetch/src/routes/counters.rs b/examples/hackernews_js_fetch/src/routes/counters.rs
deleted file mode 100644
index 618528e4dd..0000000000
--- a/examples/hackernews_js_fetch/src/routes/counters.rs
+++ /dev/null
@@ -1,79 +0,0 @@
-/// This file is mostly copied from the counters isomorphic example
-/// just to demonstrate server actions in wasm
-use leptos::*;
-use std::sync::atomic::{AtomicI32, Ordering};
-static COUNT: AtomicI32 = AtomicI32::new(0);
-
-// "/api" is an optional prefix that allows you to locate server functions wherever you'd like on the server
-#[server(GetServerCount, "/api")]
-pub async fn get_server_count() -> Result<i32, ServerFnError> {
-    Ok(COUNT.load(Ordering::Relaxed))
-}
-
-#[server(AdjustServerCount, "/api")]
-pub async fn adjust_server_count(
-    delta: i32,
-    msg: String,
-) -> Result<i32, ServerFnError> {
-    let new = COUNT.load(Ordering::Relaxed) + delta;
-    COUNT.store(new, Ordering::Relaxed);
-    println!("message = {:?}", msg);
-    Ok(new)
-}
-
-#[server(ClearServerCount, "/api")]
-pub async fn clear_server_count() -> Result<i32, ServerFnError> {
-    COUNT.store(0, Ordering::Relaxed);
-    Ok(0)
-}
-
-// This is an example of "single-user" server functions
-// The counter value is loaded from the server, and re-fetches whenever
-// it's invalidated by one of the user's own actions
-// This is the typical pattern for a CRUD app
-#[component]
-pub fn Counter() -> impl IntoView {
-    let dec = create_action(|_| adjust_server_count(-1, "decing".into()));
-    let inc = create_action(|_| adjust_server_count(1, "incing".into()));
-    let clear = create_action(|_| clear_server_count());
-    let counter = create_resource(
-        move || {
-            (
-                dec.version().get(),
-                inc.version().get(),
-                clear.version().get(),
-            )
-        },
-        |_| get_server_count(),
-    );
-
-    let value =
-        move || counter.get().map(|count| count.unwrap_or(0)).unwrap_or(0);
-    let error_msg = move || {
-        counter.get().and_then(|res| match res {
-            Ok(_) => None,
-            Err(e) => Some(e),
-        })
-    };
-
-    view! {
-        <div>
-            <h2>"Simple Counter"</h2>
-            <p>
-                "This counter sets the value on the server and automatically reloads the new value."
-            </p>
-            <div>
-                <button on:click=move |_| clear.dispatch(())>"Clear"</button>
-                <button on:click=move |_| dec.dispatch(())>"-1"</button>
-                <span>"Value: " {value}</span>
-                <button on:click=move |_| inc.dispatch(())>"+1"</button>
-            </div>
-            {move || {
-                error_msg()
-                    .map(|msg| {
-                        view! { <p>"Error: " {msg.to_string()}</p> }
-                    })
-            }}
-        </div>
-    }
-}
diff --git a/examples/hackernews_js_fetch/src/routes/stories.rs b/examples/hackernews_js_fetch/src/routes/stories.rs
index 4deaa5a38d..a8ab981c2f 100644
--- a/examples/hackernews_js_fetch/src/routes/stories.rs
+++ b/examples/hackernews_js_fetch/src/routes/stories.rs
@@ -36,12 +36,11 @@ pub fn Stories() -> impl IntoView {
     let (pending, set_pending) = create_signal(false);
 
     let hide_more_link = move || {
-        pending()
-            || stories.get().unwrap_or(None).unwrap_or_default().len() < 28
+        stories.get().unwrap_or(None).unwrap_or_default().len() < 28
+            || pending()
     };
 
     view! {
-
         <div class="news-view">
             <div class="news-list-nav">
                 <span>
@@ -65,30 +64,26 @@ pub fn Stories() -> impl IntoView {
                     }}
                 </span>
                 <span>"page " {page}</span>
-                <Transition
-                    fallback=move || view! {  <p>"Loading..."</p> }
+                <span class="page-link"
+                    class:disabled=hide_more_link
+                    aria-hidden=hide_more_link
                 >
-                    <span class="page-link"
-                        class:disabled=move || hide_more_link()
-                        aria-hidden=move || hide_more_link()
+                    <a href=move || format!("/{}?page={}", story_type(), page() + 1)
+                        aria-label="Next Page"
                     >
-                        <a href=move || format!("/{}?page={}", story_type(), page() + 1)
-                            aria-label="Next Page"
-                        >
-                            "more >"
-                        </a>
-                    </span>
-                </Transition>
+                        "more >"
+                    </a>
+                </span>
             </div>
             <main class="news-list">
                 <div>
                     <Transition
-                        fallback=move || view! {  <p>"Loading..."</p> }
+                        fallback=move || view! { <p>"Loading..."</p> }
                         set_pending
                     >
                         {move || match stories.get() {
                             None => None,
-                            Some(None) => Some(view! {  <p>"Error loading stories."</p> }.into_any()),
+                            Some(None) => Some(view! { <p>"Error loading stories."</p> }.into_any()),
                             Some(Some(stories)) => {
                                 Some(view! {
                                     <ul>
@@ -127,7 +122,7 @@ fn Story(story: api::Story) -> impl IntoView {
                     }.into_view()
                 } else {
                     let title = story.title.clone();
-                    view! {  <A href=format!("/stories/{}", story.id)>{title.clone()}</A> }.into_view()
+                    view! { <A href=format!("/stories/{}", story.id)>{title.clone()}</A> }.into_view()
                 }}
             </span>
             <br />
@@ -136,7 +131,7 @@ fn Story(story: api::Story) -> impl IntoView {
                     view! {
                         <span>
                             {"by "}
-                            {story.user.map(|user| view ! { <A href=format!("/users/{user}")>{user.clone()}</A>})}
+                            {story.user.map(|user| view ! {  <A href=format!("/users/{user}")>{user.clone()}</A>})}
                             {format!(" {} | ", story.time_ago)}
                             <A href=format!("/stories/{}", story.id)>
                                 {if story.comments_count.unwrap_or_default() > 0 {
@@ -149,7 +144,7 @@ fn Story(story: api::Story) -> impl IntoView {
                     }.into_view()
                 } else {
                     let title = story.title.clone();
-                    view! {  <A href=format!("/item/{}", story.id)>{title.clone()}</A> }.into_view()
+                    view! { <A href=format!("/item/{}", story.id)>{title.clone()}</A> }.into_view()
                 }}
             </span>
             {(story.story_type != "link").then(|| view! {
diff --git a/examples/hackernews_js_fetch/src/routes/story.rs b/examples/hackernews_js_fetch/src/routes/story.rs
index 5aa8f34b63..00449a03a1 100644
--- a/examples/hackernews_js_fetch/src/routes/story.rs
+++ b/examples/hackernews_js_fetch/src/routes/story.rs
@@ -25,50 +25,47 @@ pub fn Story() -> impl IntoView {
     };
 
     view! {
-        <>
+        <Suspense fallback=|| view! {  "Loading..." }>
             <Meta name="description" content=meta_description/>
-                <Suspense fallback=|| view! { "Loading..." }>
-                    {move || story.get().map(|story| match story {
-                        None => view! {  <div class="item-view">"Error loading this story."</div> },
-                        Some(story) => view! {
-                            <div class="item-view">
-                                <div class="item-view-header">
-                                <a href=story.url target="_blank">
-                                    <h1>{story.title}</h1>
-                                </a>
-                                <span class="host">
-                                    "("{story.domain}")"
-                                </span>
-                                {story.user.map(|user| view! {  <p class="meta">
-                                    {story.points}
-                                    " points | by "
-                                    <A href=format!("/users/{user}")>{user.clone()}</A>
-                                    {format!(" {}", story.time_ago)}
-                                </p>})}
-                                </div>
-                                <div class="item-view-comments">
-                                <p class="item-view-comments-header">
-                                    {if story.comments_count.unwrap_or_default() > 0 {
-                                        format!("{} comments", story.comments_count.unwrap_or_default())
-                                    } else {
-                                        "No comments yet.".into()
-                                    }}
-                                </p>
-                                <ul class="comment-children">
-                                    <For
-                                        each=move || story.comments.clone().unwrap_or_default()
-                                        key=|comment| comment.id
-                                        let:comment
-                                    >
-                                        <Comment comment/>
-                                    </For>
-                                </ul>
-                            </div>
+            {move || story.get().map(|story| match story {
+                None => view! { <div class="item-view">"Error loading this story."</div> },
+                Some(story) => view! {
+                    <div class="item-view">
+                        <div class="item-view-header">
+                        <a href=story.url target="_blank">
+                            <h1>{story.title}</h1>
+                        </a>
+                        <span class="host">
+                            "("{story.domain}")"
+                        </span>
+                        {story.user.map(|user| view! { <p class="meta">
+                            {story.points}
+                            " points | by "
+                            <A href=format!("/users/{user}")>{user.clone()}</A>
+                            {format!(" {}", story.time_ago)}
+                        </p>})}
                         </div>
-                    }})
-                }
-            </Suspense>
-        </>
+                        <div class="item-view-comments">
+                        <p class="item-view-comments-header">
+                            {if story.comments_count.unwrap_or_default() > 0 {
+                                format!("{} comments", story.comments_count.unwrap_or_default())
+                            } else {
+                                "No comments yet.".into()
+                            }}
+                        </p>
+                        <ul class="comment-children">
+                            <For
+                                each=move || story.comments.clone().unwrap_or_default()
+                                key=|comment| comment.id
+                                let:comment
+                            >
+                                <Comment comment />
+                            </For>
+                        </ul>
+                    </div>
+                </div>
+            }})}
+        </Suspense>
     }
 }
 
diff --git a/examples/hackernews_js_fetch/src/routes/users.rs b/examples/hackernews_js_fetch/src/routes/users.rs
index 18bcdd21bb..74264adf74 100644
--- a/examples/hackernews_js_fetch/src/routes/users.rs
+++ b/examples/hackernews_js_fetch/src/routes/users.rs
@@ -17,9 +17,9 @@ pub fn User() -> impl IntoView {
     );
     view! {
         <div class="user-view">
-            <Suspense fallback=|| view! { "Loading..." }>
+            <Suspense fallback=|| view! {  "Loading..." }>
                 {move || user.get().map(|user| match user {
-                    None => view! {  <h1>"User not found."</h1> }.into_any(),
+                    None => view! { <h1>"User not found."</h1> }.into_any(),
                     Some(user) => view! {
                         <div>
                             <h1>"User: " {&user.id}</h1>
@@ -30,7 +30,7 @@ pub fn User() -> impl IntoView {
                                 <li>
                                 <span class="label">"Karma: "</span> {user.karma}
                                 </li>
-                                {user.about.as_ref().map(|about| view! {  <li inner_html=about class="about"></li> })}
+                                {user.about.as_ref().map(|about| view! { <li inner_html=about class="about"></li> })}
                             </ul>
                             <p class="links">
                                 <a href=format!("https://news.ycombinator.com/submitted?id={}", user.id)>"submissions"</a>