feat(chat): usage improvements with hooks

1. scroll room messages to the bottom
2. submit message on `enter`

assets/js/app.js

@@ -21,9 +21,17 @@ import "phoenix_html"
 import { Socket } from "phoenix"
 import { LiveSocket } from "phoenix_live_view"
 import topbar from "../vendor/topbar"
+import RoomMessages from "./hooks/RoomMessages"
+import ChatMessageTextarea from "./hooks/ChatMessageTextarea"
+
+const hooks = {
+  ChatMessageTextarea,
+  RoomMessages,
+}
 
 let csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute("content")
 let liveSocket = new LiveSocket("/live", Socket, {
+  hooks,
   longPollFallbackMs: 2500,
   params: {
     _csrf_token: csrfToken,

assets/js/hooks/ChatMessageTextarea.js

@@ -0,0 +1,14 @@
+const ChatMessageTextarea = {
+  mounted() {
+    this.el.addEventListener('keydown', e => {
+      if (e.key == 'Enter' && !e.shitfKey) {
+        const form = document.getElementById('new-message-form');
+
+        form.dispatchEvent(new Event('change', { bubbles: true, cancelable: true }));
+        form.dispatchEvent(new Event('submit', { bubbles: true, cancelable: true }));
+      }
+    });
+  }
+};
+
+export default ChatMessageTextarea;

assets/js/hooks/RoomMessages.js

@@ -0,0 +1,10 @@
+const RoomMessages = {
+  mounted() {
+    this.el.scrollTop = this.el.scrollHeight;
+    this.handleEvent("scroll_messages_to_bottom", () => {
+      this.el.scrollTop = this.el.scrollHeight;
+    });
+  }
+};
+
+export default RoomMessages;