Prettified Code!

webroot/js/components/chat/chat-menu.js

@@ -1,29 +1,38 @@
 import { h, createContext } from '/js/web_modules/preact.js';
 import htm from '/js/web_modules/htm.js';
 import { useState, useEffect, useRef } from '/js/web_modules/preact/hooks.js';
-import UsernameForm from './username.js'
-import { ChatIcon, UserIcon, CaretDownIcon } from '../icons/index.js'
+import UsernameForm from './username.js';
+import { ChatIcon, UserIcon, CaretDownIcon } from '../icons/index.js';
 
 const html = htm.bind(h);
 
 const moderatorFlag = html`
-      <img src="/img/moderator-nobackground.svg" class="moderator-flag" />
-    `;
+  <img src="/img/moderator-nobackground.svg" class="moderator-flag" />
+`;
 
-const Context = createContext()
+const Context = createContext();
 
 export const ChatMenu = (props) => {
-  const { username, isModerator, chatDisabled, noVideoContent, handleChatPanelToggle, onUsernameChange, onFocus, onBlur } = props
+  const {
+    username,
+    isModerator,
+    chatDisabled,
+    noVideoContent,
+    handleChatPanelToggle,
+    onUsernameChange,
+    onFocus,
+    onBlur,
+  } = props;
 
   const [chatMenuOpen, setChatMenuOpen] = useState(false);
-  const [view, setView] = useState('main')
+  const [view, setView] = useState('main');
 
-  const chatMenuRef = useRef(undefined)
-  closeOnOutsideClick(chatMenuRef, setChatMenuOpen)
+  const chatMenuRef = useRef(undefined);
+  closeOnOutsideClick(chatMenuRef, setChatMenuOpen);
 
   useEffect(() => {
-    if (chatMenuOpen) setView('main')
-  }, [chatMenuOpen])
+    if (chatMenuOpen) setView('main');
+  }, [chatMenuOpen]);
 
   return html`
   <${Context.Provider} value=${props}>
@@ -33,23 +42,29 @@ export const ChatMenu = (props) => {
         class="flex items-center p-1 bg-transparent rounded-md overflow-hidden text-gray-200 transition duration-150"
         onClick="${() => setChatMenuOpen(!chatMenuOpen)}"
       >
-      ${!isModerator ? html`<${UserIcon} className="w-6 h-6 mr-2" />` : moderatorFlag}
+      ${
+        !isModerator
+          ? html`<${UserIcon} className="w-6 h-6 mr-2" />`
+          : moderatorFlag
+      }
       <span
         id="username-display"
-        class="text-indigo-100 text-sm font-bold truncate overflow-hidden whitespace-no-wrap ${isModerator &&
-    'moderator-flag'}"
+        class="text-indigo-100 text-sm font-bold truncate overflow-hidden whitespace-no-wrap ${
+          isModerator && 'moderator-flag'
+        }"
       >
         ${username}
       </span>
        <${CaretDownIcon} className="w-8 h-8"/> 
       </button>
-      ${chatMenuOpen && html`
-     <div
-        class="chat-menu-popout shadow-2xl text-gray-100 absolute w-max top-full right-0 z-50 rounded-md p-2 bg-gray-900 fadeIn "
-        style=${{ minWidth: '20rem' }}
-      >
-        ${view === "main" &&
-      html`<ul class="chat-menu-options w-max">
+      ${
+        chatMenuOpen &&
+        html` <div
+          class="chat-menu-popout shadow-2xl text-gray-100 absolute w-max top-full right-0 z-50 rounded-md p-2 bg-gray-900 fadeIn "
+          style=${{ minWidth: '20rem' }}
+        >
+          ${view === 'main' &&
+          html`<ul class="chat-menu-options w-max">
             <li>
               <${UsernameForm}
                 username=${username}
@@ -60,52 +75,55 @@ export const ChatMenu = (props) => {
               />
             </li>
             <li>
-                <button
-                  type="button"
-                  id="chat-toggle"
-                  onClick=${handleChatPanelToggle}
-                  style=${{
-          display: chatDisabled || noVideoContent ? 'none' : 'flex',
-        }}
-                >
-                  <span>Toggle Chat</span>
-                  <span><${ChatIcon} /></span>
-                </button>
+              <button
+                type="button"
+                id="chat-toggle"
+                onClick=${handleChatPanelToggle}
+                style=${{
+                  display: chatDisabled || noVideoContent ? 'none' : 'flex',
+                }}
+              >
+                <span>Toggle Chat</span>
+                <span><${ChatIcon} /></span>
+              </button>
             </li>
           </ul>`}
-
-        ${view != "main" && html`<${SubMenuView} view=${view} setView=${setView} />`}
-      </div>`}
+          ${view != 'main' &&
+          html`<${SubMenuView} view=${view} setView=${setView} />`}
+        </div>`
+      }
     </div>
-  </${Context.Provider}>`
+  </${Context.Provider}>`;
 };
 
 const SubMenuView = ({ view, setView }) => {
   return html`
-  <div className=${`chat-view fadeInRight`}>
-    <ul>
-      <li>
-        <button onClick=${() => setView('main')}>
-          <span><${CaretDownIcon} className="w-6 h-6 transform rotate-90"/></span>
-          <span>Back</span>
-        </button>
-      </li>
-    </ul>
-    ${view === 'change_username' && html`<${ChangeUsernameView}  />`}
-  </div>
-  `
-}
+    <div className=${`chat-view fadeInRight`}>
+      <ul>
+        <li>
+          <button onClick=${() => setView('main')}>
+            <span
+              ><${CaretDownIcon} className="w-6 h-6 transform rotate-90"
+            /></span>
+            <span>Back</span>
+          </button>
+        </li>
+      </ul>
+      ${view === 'change_username' && html`<${ChangeUsernameView} />`}
+    </div>
+  `;
+};
 
 function closeOnOutsideClick(ref, setter) {
   useEffect(() => {
     function handleClickOutside(event) {
       if (ref.current && !ref.current.contains(event.target)) {
-        setter(undefined)
+        setter(undefined);
       }
     }
-    document.addEventListener("mousedown", handleClickOutside);
+    document.addEventListener('mousedown', handleClickOutside);
     return () => {
-      document.removeEventListener("mousedown", handleClickOutside);
+      document.removeEventListener('mousedown', handleClickOutside);
     };
   }, [ref]);
 }