set up websocket and emoji in chat component

webroot/js/chat/chat.js

@@ -1,10 +1,16 @@
-import { h, Component, render } from 'https://unpkg.com/preact?module';
+import { h, Component } from 'https://unpkg.com/preact?module';
 import htm from 'https://unpkg.com/htm?module';
 // Initialize htm with Preact
 const html = htm.bind(h);
 
+import { EmojiButton } from 'https://cdn.skypack.dev/@joeattardi/emoji-button';
+
+
 import SOCKET_MESSAGE_TYPES from '../utils/socket-message-types.js';
 import Message from './message.js';
+import Websocket, { CALLBACKS } from '../websocket.js';
+
+import { URL_CHAT_HISTORY, URL_CUSTOM_EMOJIS } from '../utils.js';
 
 export default class Chat extends Component {
   constructor(props, context) {
@@ -21,9 +27,27 @@ export default class Chat extends Component {
       chatUserNames: [],
     }
 
+    this.emojiPicker = null;
+    this.websocket = null;
+
+
+    this.handleEmojiButtonClick = this.handleEmojiButtonClick.bind(this);
+    this.handleEmojiSelected = this.handleEmojiSelected.bind(this);
+    this.getCustomEmojis = this.getCustomEmojis.bind(this);
+    this.getChatHistory = this.getChatHistory.bind(this);
+    this.receivedWebsocketMessage = this.receivedWebsocketMessage.bind(this);
+    this.websocketDisconnected = this.websocketDisconnected.bind(this);
   }
 
   componentDidMount() {
+    /*
+    - set up websocket
+    - get emojis
+    - get chat history
+    */
+   this.setupWebSocket();
+   this.getChatHistory();
+   this.getCustomEmojis();
 
   }
 
@@ -37,6 +61,64 @@ export default class Chat extends Component {
 
   }
 
+  setupWebSocket() {
+    this.websocket = new Websocket();
+    this.websocket.addListener(CALLBACKS.RAW_WEBSOCKET_MESSAGE_RECEIVED, this.receivedWebsocketMessage);
+    this.websocket.addListener(CALLBACKS.WEBSOCKET_DISCONNECTED, this.websocketDisconnected);
+  }
+
+  // fetch chat history
+  getChatHistory() {
+    fetch(URL_CHAT_HISTORY)
+    .then(response => {
+      if (!response.ok) {
+        throw new Error(`Network response was not ok ${response.ok}`);
+      }
+      return response.json();
+    })
+    .then(data => {
+      this.setState({
+        messages: data,
+      });
+      // const formattedMessages = data.map(function (message) {
+      //   return new Message(message);
+      // })
+      // this.vueApp.messages = formattedMessages.concat(this.vueApp.messages);
+    })
+    .catch(error => {
+      this.handleNetworkingError(`Fetch getChatHistory: ${error}`);
+    });
+  }
+
+  getCustomEmojis() {
+    fetch(URL_CUSTOM_EMOJIS)
+      .then(response => {
+        if (!response.ok) {
+          throw new Error(`Network response was not ok ${response.ok}`);
+        }
+        return response.json();
+      })
+      .then(json => {
+        this.emojiPicker = new EmojiButton({
+          zIndex: 100,
+          theme: 'dark',
+          custom: json,
+          initialCategory: 'custom',
+          showPreview: false,
+          position: {
+            top: '50%',
+            right: '100'
+          },
+        });
+        this.emojiPicker.on('emoji', emoji => {
+          this.handleEmojiSelected(emoji);
+        });
+      })
+      .catch(error => {
+        this.handleNetworkingError(`Emoji Fetch: ${error}`);
+      });
+  }
+
   sendUsernameChange(oldName, newName, image) {
 		const nameChange = {
 			type: SOCKET_MESSAGE_TYPES.NAME_CHANGE,
@@ -45,10 +127,51 @@ export default class Chat extends Component {
 			image: image,
 		};
 		this.send(nameChange);
-	}
+  }
+
+  handleEmojiButtonClick() {
+    if (this.emojiPicker) {
+      this.emojiPicker.togglePicker(this.picker);
+    }
+  }
+
+  handleEmojiSelected(emoji) {
+    if (emoji.url) {
+      const url = location.protocol + "//" + location.host + "/" + emoji.url;
+      const name = url.split('\\').pop().split('/').pop();
+      document.querySelector('#message-body-form').innerHTML += "<img class=\"emoji\" alt=\"" + name + "\" src=\"" + url + "\"/>";
+    } else {
+      document.querySelector('#message-body-form').innerHTML += emoji.emoji;
+    }
+  }
+
+  receivedWebsocketMessage(message) {
+    this.addMessage(message);
+    // if (model.type === SOCKET_MESSAGE_TYPES.CHAT) {
+    //   const message = new Message(model);
+    //   this.addMessage(message);
+    // } else if (model.type === SOCKET_MESSAGE_TYPES.NAME_CHANGE) {
+    //   this.addMessage(model);
+    // }
+  }
+
+  addMessage(message) {
+    const { messages: curMessages } = this.state;
+    const existing = curMessages.filter(function (item) {
+      return item.id === message.id;
+    })
+    if (existing.length === 0 || !existing) {
+      this.setState({
+        messages: [...curMessages, message],
+      });
+    }
+  }
+  websocketDisconnected() {
+    this.websocket = null;
+  }
 
   render(props, state) {
-    const { username, userAvatarImage } = props;
+    const { username } = props;
     const { messages } = state;
 
     return (
@@ -74,7 +197,10 @@ export default class Chat extends Component {
                   placeholder="Message"
                   class="appearance-none block w-full bg-gray-200 text-gray-700 border border-black-500 rounded py-2 px-2 my-2 focus:bg-white"
                 ></textarea>
-                <div id="emoji-button">😏</div>
+                <button
+                  id="emoji-button"
+                  onClick=${this.handleEmojiButtonClick}
+                >😏</button>
 
                 <div id="message-form-actions" class="flex">
                   <span id="message-form-warning" class="text-red-600 text-xs"></span>

webroot/js/chat/message.js

@@ -1,7 +1,4 @@
-import { h, Component, createRef } from 'https://unpkg.com/preact?module';
-import htm from 'https://unpkg.com/htm?module';
-// Initialize htm with Preact
-const html = htm.bind(h);
+import { html, Component } from "https://unpkg.com/htm/preact/index.mjs?module";
 
 import { messageBubbleColorForString } from '../utils/user-colors.js';
 import { formatMessageText } from '../utils/chat.js';
@@ -14,7 +11,7 @@ export default class Message extends Component {
     const { type } = message;
 
     if (type === SOCKET_MESSAGE_TYPES.CHAT) {
-      const { image, author, body, type } = message;
+      const { image, author, body } = message;
       const formattedMessage = formatMessageText(body);
       const avatar = image || generateAvatar(author);
       const avatarBgColor = { backgroundColor: messageBubbleColorForString(author) };
@@ -43,8 +40,7 @@ export default class Message extends Component {
               <span class="font-bold">${oldName}</span> is now known as <span class="font-bold">${newName}</span>.
             </div>
           </div>
-        `
-      )
+        `);
     }
   }
 }

webroot/js/chat/standalone.js

@@ -1,10 +1,4 @@
 import { html, Component } from "https://unpkg.com/htm/preact/index.mjs?module";
-
-// import { h, Component, render } from 'https://unpkg.com/preact?module';
-// import htm from 'https://unpkg.com/htm?module';
-// Initialize htm with Preact
-// const html = htm.bind(h);
-
 import UserInfo from './user-info.js';
 import Chat from './chat.js';