blob: 5deccddfeed92794844c33069c897910f0c2d434 (
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
|
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) -> impl IntoView {
let message_message: Store<filamento::chat::Message> =
<ArcStore<filamento::chat::Message> as Clone>::clone(&message.get()).into();
let message_user = <ArcStore<filamento::user::User> as Clone>::clone(&message.user.get()).into();
let avatar = LocalResource::new(move || get_avatar(message_user));
let name = move || get_name(message_user, 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()}
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 || avatar.get() />
</Transition>
</div>
<div class="middle">
<div class="message-info">
<div class="message-user-name">{name}</div>
<div class="message-timestamp">{move || message_message.timestamp().read().format("%H:%M").to_string()}</div>
</div>
<div class="message-text">
{move || message_message.body().read().body.clone()}
</div>
</div>
<div class="right message-delivery">{move || message_message.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_message.timestamp().read().format("%H:%M").to_string()}
</div>
<div class="middle message-text">{move || message_message.body().read().body.clone()}</div>
<div class="right message-delivery">{move || message_message.delivery().get().map(|delivery| view! { <Delivery delivery /> } ) }</div>
</div>
}.into_any()
}
}
|
