blob: 1ddb603faa1ccbfd33dd5e92742e7793e967c0de (
plain) (
blame)
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
93
94
|
use filamento::chat::MessageStoreFields;
use leptos::prelude::*;
use reactive_stores::{ArcStore, Store};
use crate::{
message::MacawMessage,
user::{get_avatar, get_name, NO_AVATAR},
};
use super::icon::Delivery;
#[component]
pub fn Message(message: MacawMessage, major: bool, r#final: bool, new_day: bool) -> impl IntoView {
let name = move || get_name(message.user.get().into(), false);
// TODO: chrono-humanize?
// TODO: if final, show delivery not only on hover.
// {move || message_message.delivery().read().map(|delivery| delivery.to_string()).unwrap_or_default()}
view! {
{move || {
if major {
view! {
<div class:final=r#final class="chat-message major">
<div class="left">
<Transition fallback=|| view! { <img class="avatar" src=NO_AVATAR /> }>
<img class="avatar" src=move || message.user.avatar().get() />
</Transition>
</div>
<div class="middle">
<div class="message-info">
<div class="message-user-name">{name}</div>
<div class="message-timestamp">
{move || {
message.get().timestamp().read().format("%H:%M").to_string()
}}
</div>
</div>
<div class="message-text">
{move || message.get().body().read().body.clone()}
</div>
</div>
<div class="right message-delivery">
{move || {
message
.get()
.delivery()
.get()
.map(|delivery| {
view! { <Delivery class:light=true delivery /> }
})
}}
</div>
</div>
}
.into_any()
} else {
view! {
<div class:final=r#final class="chat-message minor">
<div class="left message-timestamp">
{move || message.get().timestamp().read().format("%H:%M").to_string()}
</div>
<div class="middle message-text">
{move || message.get().body().read().body.clone()}
</div>
<div class="right message-delivery">
{move || {
message
.get()
.delivery()
.get()
.map(|delivery| view! { <Delivery delivery /> })
}}
</div>
</div>
}
.into_any()
}
}}
{move || {
if new_day {
view! {
<div class="new-day">
{move || {
message.get().timestamp().read().format("%Y-%m-%d").to_string()
}}
</div>
}
.into_any()
} else {
view! {}.into_any()
}
}}
}
}
|
