-
-
Notifications
You must be signed in to change notification settings - Fork 1.4k
/
post_list.rs
92 lines (80 loc) · 2.43 KB
/
post_list.rs
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
use yew::prelude::*;
use yew_router::prelude::*;
use crate::components::pagination::{PageQuery, Pagination};
use crate::components::post_card::PostCard;
use crate::Route;
const ITEMS_PER_PAGE: u64 = 10;
const TOTAL_PAGES: u64 = u64::MAX / ITEMS_PER_PAGE;
pub enum Msg {
PageUpdated,
}
pub struct PostList {
page: u64,
_listener: LocationHandle,
}
fn current_page(ctx: &Context<PostList>) -> u64 {
let location = ctx.link().location().unwrap();
location.query::<PageQuery>().map(|it| it.page).unwrap_or(1)
}
impl Component for PostList {
type Message = Msg;
type Properties = ();
fn create(ctx: &Context<Self>) -> Self {
let link = ctx.link().clone();
let listener = ctx
.link()
.add_location_listener(link.callback(move |_| Msg::PageUpdated))
.unwrap();
Self {
page: current_page(ctx),
_listener: listener,
}
}
fn update(&mut self, ctx: &Context<Self>, msg: Self::Message) -> bool {
match msg {
Msg::PageUpdated => self.page = current_page(ctx),
}
true
}
fn view(&self, ctx: &Context<Self>) -> Html {
let page = self.page;
html! {
<div class="section container">
<h1 class="title">{ "Posts" }</h1>
<h2 class="subtitle">{ "All of our quality writing in one place" }</h2>
{ self.view_posts(ctx) }
<Pagination
{page}
total_pages={TOTAL_PAGES}
route_to_page={Route::Posts}
/>
</div>
}
}
}
impl PostList {
fn view_posts(&self, _ctx: &Context<Self>) -> Html {
let start_seed = (self.page - 1) * ITEMS_PER_PAGE;
let mut cards = (0..ITEMS_PER_PAGE).map(|seed_offset| {
html! {
<li class="list-item mb-5">
<PostCard seed={start_seed + seed_offset} />
</li>
}
});
html! {
<div class="columns">
<div class="column">
<ul class="list">
{ for cards.by_ref().take(ITEMS_PER_PAGE as usize / 2) }
</ul>
</div>
<div class="column">
<ul class="list">
{ for cards }
</ul>
</div>
</div>
}
}
}