diff options
Diffstat (limited to 'src/components/message.rs')
| -rw-r--r-- | src/components/message.rs | 122 |
1 files changed, 72 insertions, 50 deletions
diff --git a/src/components/message.rs b/src/components/message.rs index 9eb0b09..1ddb603 100644 --- a/src/components/message.rs +++ b/src/components/message.rs @@ -4,69 +4,91 @@ use reactive_stores::{ArcStore, Store}; use crate::{ message::MacawMessage, - user::{NO_AVATAR, get_avatar, get_name}, + user::{get_avatar, get_name, NO_AVATAR}, }; use super::icon::Delivery; #[component] -pub fn Message(message: MacawMessage, major: bool, r#final: bool) -> impl IntoView { +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()} - 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"> + 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> - <div class="message-text"> - {move || message.get().body().read().body.clone()} + } + .into_any() + } + }} + {move || { + if new_day { + view! { + <div class="new-day"> + {move || { + message.get().timestamp().read().format("%Y-%m-%d").to_string() + }} </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() + } + .into_any() + } else { + view! {}.into_any() + } + }} } } |