1 files changed, 52 insertions, 0 deletions
diff --git a/src/components/message.rs b/src/components/message.rs
new file mode 100644
index 0000000..2ae2ef0
--- /dev/null
+++ b/src/components/message.rs
@@ -0,0 +1,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.message).into();
+    let message_user = <ArcStore<filamento::user::User> as Clone>::clone(&message.user).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()
+    }
+}
+