Skip to content

Commit

Permalink
chore: clean up style and bring into line with other hackernews examples
Browse files Browse the repository at this point in the history
  • Loading branch information
@gbj
gbj committed Oct 11, 2023
1 parent 18f7b56 commit 53e1675
Show file tree
Hide file tree
Showing 8 changed files with 84 additions and 180 deletions.
15 changes: 10 additions & 5 deletions examples/hackernews_js_fetch/Cargo.toml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -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
Expand Down
3 changes: 1 addition & 2 deletions examples/hackernews_js_fetch/src/api.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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()
Expand Down
44 changes: 16 additions & 28 deletions examples/hackernews_js_fetch/src/lib.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand All @@ -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);
Expand All @@ -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/> } )
Expand Down
1 change: 0 additions & 1 deletion examples/hackernews_js_fetch/src/routes.rs
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
pub mod counters;
pub mod nav;
pub mod stories;
pub mod story;
Expand Down
79 changes: 0 additions & 79 deletions examples/hackernews_js_fetch/src/routes/counters.rs
View file

This file was deleted.

35 changes: 15 additions & 20 deletions examples/hackernews_js_fetch/src/routes/stories.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>
Expand Down Expand Up @@ -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 />
Expand All @@ -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 {
Expand All @@ -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! {
Expand Down
81 changes: 39 additions & 42 deletions examples/hackernews_js_fetch/src/routes/story.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
}
}

Expand Down
Loading

0 comments on commit 53e1675

Please sign in to comment.