make edits for a messages-only view of the chat module

webroot/js/chat/chat-input.js

@@ -18,6 +18,7 @@ export default class ChatInput extends Component {
   constructor(props, context) {
     super(props, context);
     this.formMessageInput = createRef();
+    this.emojiPickerButton = createRef();
 
     this.messageCharCount = 0;
 		this.maxMessageLength = 500;
@@ -65,10 +66,7 @@ export default class ChatInput extends Component {
           custom: json,
           initialCategory: 'custom',
           showPreview: false,
-          position: {
-            top: '50%',
-            right: '100'
-          },
+          position: 'top'
         });
         this.emojiPicker.on('emoji', emoji => {
           this.handleEmojiSelected(emoji);
@@ -81,7 +79,7 @@ export default class ChatInput extends Component {
 
   handleEmojiButtonClick() {
     if (this.emojiPicker) {
-      this.emojiPicker.togglePicker(this.emojiPicker);
+      this.emojiPicker.togglePicker(this.emojiPickerButton.current);
     }
   }
 
@@ -253,20 +251,26 @@ export default class ChatInput extends Component {
             onPaste=${this.handlePaste}
             />
 
-          <button
-            type="button"
-            style=${emojiButtonStyle}
-            onclick=${this.handleEmojiButtonClick}
-          >😏</button>
           <div id="message-form-actions" class="flex">
             <span id="message-form-warning" class="text-red-600 text-xs">${inputWarning}</span>
-            <button
-              onclick=${this.handleSubmitChatButton}
-              type="button"
-              id="button-submit-message"
-              class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-1 px-2 rounded"
-            > Chat
-            </button>
+
+            <div id="message-form-actions-buttons" class="flex">
+              <button
+                ref=${this.emojiPickerButton}
+                id="emoji-button"
+                type="button"
+                style=${emojiButtonStyle}
+                onclick=${this.handleEmojiButtonClick}
+              >😏</button>
+
+              <button
+                onclick=${this.handleSubmitChatButton}
+                type="button"
+                id="button-submit-message"
+                class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-1 px-2 rounded"
+              > Chat
+              </button>
+            </div>
           </div>
       </div>
     `);

webroot/js/chat/chat.js

@@ -128,18 +128,6 @@ export default class Chat extends Component {
     this.disableChat()
   }
 
-  // handleSubmitChatButton(event) {
-  //   const { inputValue } = this.state;
-	// 	var value = inputValue.trim();
-	// 	if (value) {
-	// 		this.submitChat(value);
-	// 		event.preventDefault();
-	// 	return false;
-	// 	}
-	// 	event.preventDefault();
-	// 	return false;
-  // }
-
   submitChat(content) {
 		if (!content) {
 			return;
@@ -186,18 +174,26 @@ export default class Chat extends Component {
 
 
   render(props, state) {
-    const { username } = props;
+    const { username, messagesOnly } = props;
     const { messages, inputEnabled, chatUserNames } = state;
 
+    const messageList = messages.map((message) => (html`<${Message} message=${message} username=${username} key=${message.id} />`));
+
+    if (messagesOnly) {
+      return (
+        html`
+          <div id="messages-container">
+            ${messageList}
+          </div>
+      `);
+    }
+
     return (
       html`
         <section id="chat-container-wrap" class="flex">
           <div id="chat-container" class="bg-gray-800">
             <div id="messages-container">
-              ${
-                messages.map(message => (html`<${Message} message=${message} username=${username} />`))
-              }
-              messages..
+              ${messageList}
             </div>
             <${ChatInput}
               chatUserNames=${chatUserNames}

webroot/js/chat/standalone.js

@@ -1,4 +1,8 @@
-import { html, Component } from "https://unpkg.com/htm/preact/index.mjs?module";
+import { h, Component, Fragment } from 'https://unpkg.com/preact?module';
+import htm from 'https://unpkg.com/htm?module';
+const html = htm.bind(h);
+
+
 import UsernameForm from './username.js';
 import Chat from './chat.js';
 import Websocket from '../websocket.js';
@@ -33,10 +37,26 @@ export default class StandaloneChat extends Component {
   }
 
   render(props, state) {
+    const { messagesOnly } = props;
     const { username, userAvatarImage, websocket } = state;
+
+
+    if (messagesOnly) {
+      return (
+      html`
+        <${Chat}
+          websocket=${websocket}
+          username=${username}
+          userAvatarImage=${userAvatarImage}
+          chatEnabled
+          messagesOnly
+        />
+      `);
+    }
+
     return (
       html`
-        <div class="flex">
+        <${Fragment}>
           <${UsernameForm}
             username=${username}
             userAvatarImage=${userAvatarImage}
@@ -50,7 +70,7 @@ export default class StandaloneChat extends Component {
             userAvatarImage=${userAvatarImage}
             chatEnabled
           />
-        </div>
+        </${Fragment}>
     `);
   }