Updates to frontend and fix a bug where first socket assignment failed

1 files changed, 107 insertions, 8 deletions

diff --git a/assets/js/chat.js b/assets/js/chat.js
index 4183531..aa7f05d 100644
--- a/assets/js/chat.js
+++ b/assets/js/chat.js
@@ -1,11 +1,110 @@
-let RoomChat = {
-  connect(socket, postId) {
-    let channel = socket.channel(`post:${postId}`)
+const gruvboxColors = [
+  "#b8bb26",
+  "#fabd2f",
+  "#83a598",
+  "#d3869b",
+  "#8ec07c",
+  "#458588",
+  "#cc241d",
+  "#d65d0e",
+  "#bdae93",
+];
+const generateGruvboxFromString = (string) => 
+  gruvboxColors[Array.from(string).map((x) => x.charCodeAt(0)).reduce((a, x) => a+x, 0) % gruvboxColors.length];
+
+const RoomChat = (() => {
+  let channel;
+  const connect = (socket, postId) => {
+    channel = socket.channel(`post:${postId}`);
     channel.join()
-      .receive("ok", resp => { console.log("Joined successfully: ", resp) })
-      .receive("error", resp => { console.log("Unable to join: ", resp) })
+      .receive("ok", resp => { console.log("Joined successfully: ", resp); })
+      .receive("error", resp => { console.log("Unable to join: ", resp); });
     return channel;
-  },
-}
+  };
+
+  const scrollToBottom = (element) => {
+    element.scrollTop = element.scrollHeight;
+  };
+
+  const appendComment = ({user, body, id, user_id, inserted_at}, element) => {
+    const messageElement = document.createElement("div");
+    messageElement.innerHTML = `
+      <div class="d-flex flex-row card border rounded m-2 align-items-center">
+        <div class="m-2">
+          <div class="circle" style="background:${generateGruvboxFromString(user)}">${user.charAt(0)}</div>
+        </div>
+        <div class="m-2">
+          <div class="comment">
+            <div class="comment-header">
+              <span class="comment-username">${user}</span>
+              <span class="text-muted">${new Date(inserted_at).toLocaleString()}</span>
+            </div>
+            <div class="comment-body">
+              ${body}
+            </div>
+          </div>
+        </div>
+      </div>
+    `;
+    element.appendChild(messageElement);
+    scrollToBottom(element);
+  };
+
+  const leaveChannel = () => {
+    if (channel) {
+      channel.leave();
+      console.log(channel);
+    }
+  };
+
+  const main = (post_id) => {
+    leaveChannel();
+    const chatWindow = document.getElementById("chat");
+    window.userSocket.connect();
+    channel = connect(window.userSocket, post_id);
+  
+    channel.on('shout', (comment) => {
+      appendComment(comment, chatWindow);
+    });
+  
+    channel.on('initial-comments', ({comments}) => {
+      comments.forEach((comment) => {
+        appendComment(comment, chatWindow);
+      });
+      scrollToBottom(chatWindow);
+    }); 
+
+    channel.on('join', ({ user }) => {
+      const joinElement = document.createElement("div");
+      joinElement.innerHTML = `
+        <div class="m-2 card border rounded p-2 text-muted">
+          join: ${user}
+        </div>
+      `;
+      chatWindow.appendChild(joinElement);
+      scrollToBottom(chatWindow);
+    }); 
+
+    channel.on('left', ({ user }) => {
+      console.log(user, "left");
+    });
+  };
+
+  const submitForm = (e) => {
+    e.preventDefault();
+    let message = e.target.elements.message.value;
+    if (message) {
+      channel.push("send", {body: message});
+      e.target.elements.message.value = "";
+    }
+    return false;
+  };
+
+  return { main, submitForm };
+})();
+
+window.addEventListener('load', () => {
+  window.addEventListener('phx:initial-post', (e) => RoomChat.main(e.detail.id));
+});
 
-export default RoomChat;
\ No newline at end of file
+export default RoomChat;