refactor: reorganise code

1 files changed, 97 insertions, 0 deletions

diff --git a/src/components/message_composer.rs b/src/components/message_composer.rs
new file mode 100644
index 0000000..3876a5a
--- /dev/null
+++ b/src/components/message_composer.rs
@@ -0,0 +1,97 @@
+use filamento::chat::Body;
+use jid::BareJID;
+use leptos::{html::Div, prelude::*, task::spawn_local};
+
+use crate::client::Client;
+
+#[component]
+pub fn ChatViewMessageComposer(chat: BareJID) -> impl IntoView {
+    let message_input: NodeRef<Div> = NodeRef::new();
+
+    // TODO: load last message draft
+    let new_message = RwSignal::new("".to_string());
+    let client: Client = use_context().expect("no client in context");
+    let client = RwSignal::new(client);
+    let (shift_pressed, set_shift_pressed) = signal(false);
+
+    let send_message = move || {
+        let value = chat.clone();
+        spawn_local(async move {
+            match client
+                .read()
+                .send_message(
+                    value,
+                    Body {
+                        body: new_message.get(),
+                    },
+                )
+                .await
+            {
+                Ok(_) => {
+                    new_message.set("".to_string());
+                    message_input
+                        .write()
+                        .as_ref()
+                        .expect("message input div not mounted")
+                        .set_text_content(Some(""));
+                }
+                Err(e) => tracing::error!("message send error: {}", e),
+            }
+        })
+    };
+
+    let _focus = Effect::new(move |_| {
+        if let Some(input) = message_input.get() {
+            let _ = input.focus();
+            // TODO: set the last draft
+            input.set_text_content(Some(""));
+            // input.style("height: 0");
+            // let height = input.scroll_height();
+            // input.style(format!("height: {}px", height));
+        }
+    });
+
+    // let on_input = move |ev: Event| {
+    //     // let keyboard_event: KeyboardEvent = ev.try_into().unwrap();
+    //     debug!("got input event");
+    //     let key= event_target_value(&ev);
+    //     new_message.set(key);
+    //     debug!("set new message");
+    // };
+    //
+
+    // TODO: placeholder
+    view! {
+        <form
+            class="new-message-composer panel"
+        >
+            <div
+                class="text-box"
+                on:input:target=move |ev| new_message.set(ev.target().text_content().unwrap_or_default())
+                node_ref=message_input
+                contenteditable
+                on:keydown=move |ev| {
+                    match ev.key_code() {
+                        16 => set_shift_pressed.set(true),
+                        13 => if !shift_pressed.get() {
+                            ev.prevent_default();
+                            send_message();
+                        }
+                        _ => {}
+                        // debug!("shift pressed down");
+                    }
+                }
+                on:keyup=move |ev| {
+                    match ev.key_code()  {
+                        16 => set_shift_pressed.set(false),
+                        _ => {}
+                        // debug!("shift released");
+                    }
+                }
+            ></div>
+            // <input hidden type="submit" />
+        </form>
+    }
+}
+
+