Prettified Code!

webroot/js/components/chat/chat-message-view.js

@@ -42,11 +42,15 @@ export default class ChatMessageView extends Component {
   render() {
     const { message, isModerator, accessToken } = this.props;
     const { user, timestamp } = message;
-    const { displayName, displayColor, createdAt,
+    const {
+      displayName,
+      displayColor,
+      createdAt,
       isModerator: isAuthorModerator,
-     } = user;
+    } = user;
 
-     const isMessageModeratable = isModerator && message.type === SOCKET_MESSAGE_TYPES.CHAT;
+    const isMessageModeratable =
+      isModerator && message.type === SOCKET_MESSAGE_TYPES.CHAT;
 
     const { formattedMessage } = this.state;
     if (!formattedMessage) {
@@ -67,7 +71,9 @@ export default class ChatMessageView extends Component {
       : { backgroundColor: messageBubbleColorForHue(displayColor) };
     const messageClassString = isSystemMessage
       ? 'message flex flex-row items-start p-4 m-2 rounded-lg shadow-l border-solid border-indigo-700 border-2 border-opacity-60 text-l'
-      : `message relative flex flex-row items-start p-3 m-3 rounded-lg shadow-s text-sm ${isMessageModeratable ? 'moderatable' : ''}`;
+      : `message relative flex flex-row items-start p-3 m-3 rounded-lg shadow-s text-sm ${
+          isMessageModeratable ? 'moderatable' : ''
+        }`;
 
     return html`
       <div
@@ -78,12 +84,18 @@ export default class ChatMessageView extends Component {
         <div class="message-content break-words w-full">
           <div
             style=${authorTextColor}
-            class="message-author font-bold${isAuthorModerator ? ' moderator-flag' : ''}"
+            class="message-author font-bold${isAuthorModerator
+              ? ' moderator-flag'
+              : ''}"
             title=${userMetadata}
           >
             ${displayName}
           </div>
-          ${isMessageModeratable && html`<${ModeratorActions} message=${message} accessToken=${accessToken} />`}
+          ${isMessageModeratable &&
+          html`<${ModeratorActions}
+            message=${message}
+            accessToken=${accessToken}
+          />`}
           <div
             class="message-text text-gray-300 font-normal overflow-y-hidden pt-2"
             dangerouslySetInnerHTML=${{ __html: formattedMessage }}

webroot/js/components/chat/message.js

@@ -10,9 +10,15 @@ import { checkIsModerator } from '../../utils/chat.js';
 function SystemMessage(props) {
   const { contents } = props;
   return html`
-    <div class="message message-name-change flex items-center justify-start p-3">
-      <div class="message-content flex flex-row items-center justify-center text-sm w-full">
-        <div class="text-white text-center opacity-50 overflow-hidden break-words">
+    <div
+      class="message message-name-change flex items-center justify-start p-3"
+    >
+      <div
+        class="message-content flex flex-row items-center justify-center text-sm w-full"
+      >
+        <div
+          class="text-white text-center opacity-50 overflow-hidden break-words"
+        >
           ${contents}
         </div>
       </div>
@@ -36,22 +42,25 @@ export default function Message(props) {
         <span class="font-bold">${displayName}</span>.
       </>
     `;
-    return html`<${SystemMessage} contents=${contents}/>`;
+    return html`<${SystemMessage} contents=${contents} />`;
   } else if (type === SOCKET_MESSAGE_TYPES.USER_JOINED) {
     const { displayName } = user;
-    const contents = html`<span class="font-bold">${displayName}</span> joined the chat.`;
-    return html`<${SystemMessage} contents=${contents}/>`;
+    const contents = html`<span class="font-bold">${displayName}</span> joined
+      the chat.`;
+    return html`<${SystemMessage} contents=${contents} />`;
   } else if (type === SOCKET_MESSAGE_TYPES.CHAT_ACTION) {
     const contents = html`<span
       dangerouslySetInnerHTML=${{ __html: body }}
     ></span>`;
-    return html`<${SystemMessage} contents=${contents}/>`;
+    return html`<${SystemMessage} contents=${contents} />`;
   } else if (type === SOCKET_MESSAGE_TYPES.CONNECTED_USER_INFO) {
     // moderator message
     const isModerator = checkIsModerator(message);
     if (isModerator) {
-      const contents = html`<span class="font-bold moderator-flag">You are now a moderator.</span>`;
-      return html`<${SystemMessage} contents=${contents}/>`;
+      const contents = html`<span class="font-bold moderator-flag"
+        >You are now a moderator.</span
+      >`;
+      return html`<${SystemMessage} contents=${contents} />`;
     }
   } else {
     console.log('Unknown message type:', type);

webroot/js/components/chat/moderator-actions.js

@@ -106,7 +106,7 @@ class ModeratorMenu extends Component {
   }
 
   async handleHideMessage() {
-    if (!confirm("Are you sure you want to remove this message from chat?")) {
+    if (!confirm('Are you sure you want to remove this message from chat?')) {
       this.props.onDismiss();
       return;
     }
@@ -126,7 +126,7 @@ class ModeratorMenu extends Component {
 
     try {
       await fetch(hideMessageUrl, options);
-    } catch(e) {
+    } catch (e) {
       console.error(e);
     }
 
@@ -134,7 +134,7 @@ class ModeratorMenu extends Component {
   }
 
   async handleBanUser() {
-    if (!confirm("Are you sure you want to remove this user from chat?")) {
+    if (!confirm('Are you sure you want to remove this user from chat?')) {
       this.props.onDismiss();
       return;
     }
@@ -154,7 +154,7 @@ class ModeratorMenu extends Component {
 
     try {
       await fetch(hideMessageUrl, options);
-    } catch(e) {
+    } catch (e) {
       console.error(e);
     }
 
@@ -196,7 +196,11 @@ class ModeratorMenu extends Component {
           />
         </li>
         ${displayMoreInfo &&
-        html`<${ModeratorMoreInfoContainer} message=${message} handleBanUser=${this.handleBanUser} handleHideMessage=${this.handleHideMessage} />`}
+        html`<${ModeratorMoreInfoContainer}
+          message=${message}
+          handleBanUser=${this.handleBanUser}
+          handleHideMessage=${this.handleHideMessage}
+        />`}
       </ul>
     `;
   }
@@ -226,14 +230,13 @@ function ModeratorMenuItem({ icon, hoverIcon, label, onClick }) {
 }
 
 // more details panel that display message, prev usernames, actions
-function ModeratorMoreInfoContainer({ message, handleHideMessage, handleBanUser }) {
+function ModeratorMoreInfoContainer({
+  message,
+  handleHideMessage,
+  handleBanUser,
+}) {
   const { user, timestamp, body } = message;
-  const {
-    displayName,
-    createdAt,
-    previousNames,
-    displayColor,
-  } = user;
+  const { displayName, createdAt, previousNames, displayColor } = user;
   const isAuthorModerator = user.scopes && user.scopes.contains('MODERATOR');
 
   const authorTextColor = { color: textColorForHue(displayColor) };

webroot/js/components/chat/username.js

@@ -3,7 +3,10 @@ import htm from '/js/web_modules/htm.js';
 const html = htm.bind(h);
 
 import { setLocalStorage } from '../../utils/helpers.js';
-import { KEY_USERNAME, KEY_CUSTOM_USERNAME_SET } from '../../utils/constants.js';
+import {
+  KEY_USERNAME,
+  KEY_CUSTOM_USERNAME_SET,
+} from '../../utils/constants.js';
 
 export default class UsernameForm extends Component {
   constructor(props, context) {
@@ -38,11 +41,13 @@ export default class UsernameForm extends Component {
   }
 
   handleKeydown(event) {
-    if (event.keyCode === 13) { // enter
-			this.handleUpdateUsername();
-		} else if (event.keyCode === 27) { // esc
-			this.handleHideForm();
-		}
+    if (event.keyCode === 13) {
+      // enter
+      this.handleUpdateUsername();
+    } else if (event.keyCode === 27) {
+      // esc
+      this.handleHideForm();
+    }
   }
 
   handleUpdateUsername() {
@@ -72,7 +77,7 @@ export default class UsernameForm extends Component {
     if (onBlur) {
       onBlur();
     }
- }
+  }
 
   render(props, state) {
     const { username, isModerator } = props;
@@ -87,32 +92,60 @@ export default class UsernameForm extends Component {
       },
     };
 
+    return html`
+      <div id="user-info" class="whitespace-nowrap">
+        <div
+          id="user-info-display"
+          style=${styles.info}
+          title="Click to update user name"
+          class="flex flex-row justify-end items-center align-middle cursor-pointer py-2 px-4 overflow-hidden w-full opacity-1 transition-opacity duration-200 hover:opacity-75"
+          onClick=${this.handleDisplayForm}
+        >
+          <span
+            id="username-display"
+            class="text-indigo-600 text-xs font-semibold truncate overflow-hidden whitespace-no-wrap ${isModerator &&
+            'moderator-flag'}"
+            >${username}</span
+          >
+        </div>
 
-
-    return (
-      html`
-        <div id="user-info" class="whitespace-nowrap">
-          <div id="user-info-display" style=${styles.info} title="Click to update user name" class="flex flex-row justify-end items-center align-middle cursor-pointer py-2 px-4 overflow-hidden w-full opacity-1 transition-opacity duration-200 hover:opacity-75" onClick=${this.handleDisplayForm}>
-            <span id="username-display" class="text-indigo-600 text-xs font-semibold truncate overflow-hidden whitespace-no-wrap ${isModerator && 'moderator-flag'}">${username}</span>
-          </div>
-
-          <div id="user-info-change" class="flex flex-row flex-no-wrap p-1 items-center justify-end" style=${styles.form}>
-            <input type="text"
-              id="username-change-input"
-              class="appearance-none block w-full bg-gray-200 text-gray-700 border border-black-500 rounded py-1 px-1 leading-tight text-xs focus:bg-white"
-              maxlength="60"
-              placeholder="Update username"
-              defaultValue=${username}
-              onKeydown=${this.handleKeydown}
-              onFocus=${this.handleFocus}
-              onBlur=${this.handleBlur}
-              ref=${this.textInput}
-            />
-            <button id="button-update-username" onClick=${this.handleUpdateUsername}  type="button" class="bg-blue-500 hover:bg-blue-700 text-white text-xs uppercase p-1 mx-1 rounded cursor-pointer user-btn">Update</button>
-
-            <button id="button-cancel-change" onClick=${this.handleHideForm} type="button" class="bg-gray-900 hover:bg-gray-800 py-1 px-2 mx-1 rounded cursor-pointer user-btn text-white text-xs uppercase text-opacity-50" title="cancel">X</button>
-          </div>
+        <div
+          id="user-info-change"
+          class="flex flex-row flex-no-wrap p-1 items-center justify-end"
+          style=${styles.form}
+        >
+          <input
+            type="text"
+            id="username-change-input"
+            class="appearance-none block w-full bg-gray-200 text-gray-700 border border-black-500 rounded py-1 px-1 leading-tight text-xs focus:bg-white"
+            maxlength="60"
+            placeholder="Update username"
+            defaultValue=${username}
+            onKeydown=${this.handleKeydown}
+            onFocus=${this.handleFocus}
+            onBlur=${this.handleBlur}
+            ref=${this.textInput}
+          />
+          <button
+            id="button-update-username"
+            onClick=${this.handleUpdateUsername}
+            type="button"
+            class="bg-blue-500 hover:bg-blue-700 text-white text-xs uppercase p-1 mx-1 rounded cursor-pointer user-btn"
+          >
+            Update
+          </button>
+
+          <button
+            id="button-cancel-change"
+            onClick=${this.handleHideForm}
+            type="button"
+            class="bg-gray-900 hover:bg-gray-800 py-1 px-2 mx-1 rounded cursor-pointer user-btn text-white text-xs uppercase text-opacity-50"
+            title="cancel"
+          >
+            X
+          </button>
         </div>
-    `);
+      </div>
+    `;
   }
 }

webroot/js/utils/chat.js

@@ -183,7 +183,6 @@ export function emojify(HTML, emojiList) {
   return HTML;
 }
 
-
 // MODERATOR UTILS
 export function checkIsModerator(message) {
   const { user } = message;