separate out message relate utils, create message component

webroot/js/chat/message.js

@@ -3,50 +3,48 @@ import htm from 'https://unpkg.com/htm?module';
 // Initialize htm with Preact
 const html = htm.bind(h);
 
-import {messageBubbleColorForString } from '../utils/user-colors.js';
+import { messageBubbleColorForString } from '../utils/user-colors.js';
+import { formatMessageText } from '../utils/chat.js';
+import { generateAvatar } from '../utils.js';
+import SOCKET_MESSAGE_TYPES from './chat/socket-message-types.js';
 
 export default class Message extends Component {
-  constructor(props, context) {
-    super(props, context);
-
-    this.state = {
-      displayForm: false,
-    };
-
-    this.handleKeydown = this.handleKeydown.bind(this);
-    this.handleDisplayForm = this.handleDisplayForm.bind(this);
-    this.handleHideForm = this.handleHideForm.bind(this);
-    this.handleUpdateUsername = this.handleUpdateUsername.bind(this);
-  }
-
-
-
   render(props) {
-    const { message, type } = props;
-    const { image, author, text } = message;
+    const { message } = props;
+    const { type } = message;
 
-    const styles = {
-      info: {
-        display: displayForm || narrowSpace ? 'none' : 'flex',
-      },
-      form: {
-        display: displayForm ? 'flex' : 'none',
-      },
-    };
-
-    return (
-      html`
-        <div class="message flex">
-          <div class="message-avatar rounded-full flex items-center justify-center" v-bind:style="{ backgroundColor: message.userColor() }">
-            <img
-              v-bind:src="message.image"
-            />
+    if (type === SOCKET_MESSAGE_TYPES.CHAT) {
+      const { image, author, body, type } = message;
+      const formattedMessage = formatMessageText(body);
+      const avatar = image || generateAvatar(author);
+      const avatarBgColor = { backgroundColor: messageBubbleColorForString(author) };
+      return (
+        html`
+          <div class="message flex">
+            <div
+              class="message-avatar rounded-full flex items-center justify-center"
+              style=${avatarBgColor}
+            >
+              <img src=${avatar} />
+            </div>
+            <div class="message-content">
+              <p class="message-author text-white font-bold">${author}</p>
+              <p class="message-text text-gray-400 font-thin">${formattedMessage}</p>
+            </div>
+        </div>
+      `);
+    } else if (type === SOCKET_MESSAGE_TYPES.NAME_CHANGE) {
+      const { oldName, newName, image } = message;
+      return (
+        html`
+          <div class="message flex">
+            <img class="mr-2" src=${image} />
+            <div class="text-white text-center">
+              <span class="font-bold">${oldName}</span> is now known as <span class="font-bold">${newName}</span>.
+            </div>
           </div>
-          <div class="message-content">
-            <p class="message-author text-white font-bold">{{ message.author }}</p>
-            <p class="message-text text-gray-400 font-thin " v-html="message.formatText()"></p>
-          </div>
-      </div>
-    `);
+        `
+      )
+    }
   }
 }