From dad9e0d16b834a21f1282de505775bcb24a5de37 Mon Sep 17 00:00:00 2001
From: gabek <gabek@users.noreply.github.com>
Date: Thu, 21 Apr 2022 05:21:35 +0000
Subject: [PATCH] Prettified Code!

---
 webroot/js/app.js                            |  10 +-
 webroot/js/components/chat/chat-menu.js      | 122 +++++++++++--------
 webroot/js/components/chat/username.js       |  12 +-
 webroot/js/components/icons/CaretDownIcon.js |  23 ++--
 webroot/js/components/icons/ChatIcon.js      |  13 +-
 webroot/js/components/icons/CheckIcon.js     |  22 ++--
 webroot/js/components/icons/CloseIcon.js     |  22 ++--
 webroot/js/components/icons/EditIcon.js      |  16 +--
 webroot/js/components/icons/UserIcon.js      |   1 -
 webroot/js/components/icons/index.js         |  12 +-
 10 files changed, 150 insertions(+), 103 deletions(-)

diff --git a/webroot/js/app.js b/webroot/js/app.js
index 992c5e478..09dbbb641 100644
--- a/webroot/js/app.js
+++ b/webroot/js/app.js
@@ -10,7 +10,7 @@ import UsernameForm from './components/chat/username.js';
 import VideoPoster from './components/video-poster.js';
 import Followers from './components/federation/followers.js';
 import Chat from './components/chat/chat.js';
-import { ChatMenu } from './components/chat/chat-menu.js'
+import { ChatMenu } from './components/chat/chat-menu.js';
 import Websocket, {
   CALLBACKS,
   SOCKET_MESSAGE_TYPES,
@@ -945,7 +945,13 @@ export default class App extends Component {
               id="user-options-container"
               class="flex flex-row justify-end items-center flex-no-wrap"
             >  -->
-            <${ChatMenu} username=${username} isModerator=${false} onUsernameChange=${this.handleUsernameChange} onFocus=${this.handleFormFocus} onBlur=${this.handleFormBlur} chatDisabled=${chatDisabled} noVideoContent=${noVideoContent} handleChatPanelToggle=${this.handleChatPanelToggle}>
+            <${ChatMenu} username=${username} isModerator=${false} onUsernameChange=${
+      this.handleUsernameChange
+    } onFocus=${this.handleFormFocus} onBlur=${
+      this.handleFormBlur
+    } chatDisabled=${chatDisabled} noVideoContent=${noVideoContent} handleChatPanelToggle=${
+      this.handleChatPanelToggle
+    }>
             </${ChatMenu}>
             <!--
             </div>
diff --git a/webroot/js/components/chat/chat-menu.js b/webroot/js/components/chat/chat-menu.js
index 2a74421e5..dbe86fbc6 100644
--- a/webroot/js/components/chat/chat-menu.js
+++ b/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]);
 }
diff --git a/webroot/js/components/chat/username.js b/webroot/js/components/chat/username.js
index 271ceb96b..5504aac44 100644
--- a/webroot/js/components/chat/username.js
+++ b/webroot/js/components/chat/username.js
@@ -8,7 +8,7 @@ import {
   KEY_CUSTOM_USERNAME_SET,
 } from '../../utils/constants.js';
 
-import { CheckIcon, CloseIcon, EditIcon } from '../icons/index.js'
+import { CheckIcon, CloseIcon, EditIcon } from '../icons/index.js';
 
 export default class UsernameForm extends Component {
   constructor(props, context) {
@@ -113,11 +113,13 @@ export default class UsernameForm extends Component {
         >
           <span id="username-display">Change Username</span>
           <span><${EditIcon} /></span>
-        </button> 
+        </button>
 
         <div
           id="user-info-change"
-          class="${displayForm ? 'flex' : 'hidden'} flex-row flex-no-wrap h-full items-center justify-end"
+          class="${displayForm
+            ? 'flex'
+            : 'hidden'} flex-row flex-no-wrap h-full items-center justify-end"
         >
           <input
             type="text"
@@ -137,7 +139,7 @@ export default class UsernameForm extends Component {
               type="button"
               class="bg-purple-500 hover:bg-purple-700 text-white uppercase p-1 ml-1 rounded-md cursor-pointer transition duration-100 user-btn"
             >
-              <${CheckIcon } />
+              <${CheckIcon} />
             </button>
 
             <button
@@ -147,7 +149,7 @@ export default class UsernameForm extends Component {
               class="bg-gray-700 hover:bg-gray-500 text-white uppercase p-1 ml-1 rounded-md cursor-pointer transition duration-100 user-btn"
               title="cancel"
             >
-              <${CloseIcon} /> 
+              <${CloseIcon} />
             </button>
           </div>
         </div>
diff --git a/webroot/js/components/icons/CaretDownIcon.js b/webroot/js/components/icons/CaretDownIcon.js
index fdab9972e..efa71bd13 100644
--- a/webroot/js/components/icons/CaretDownIcon.js
+++ b/webroot/js/components/icons/CaretDownIcon.js
@@ -2,12 +2,17 @@ import { h } from '/js/web_modules/preact.js';
 import htm from '/js/web_modules/htm.js';
 const html = htm.bind(h);
 
-export const CaretDownIcon = ({ className = "w-6 h-6"}) => {
-  return html`<svg class="${className}" 
-  fill="currentColor" 
-  viewBox="0 0 20 20" 
-  xmlns="http://www.w3.org/2000/svg">
-    <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd">
-    </path>
-  </svg>`
-}
+export const CaretDownIcon = ({ className = 'w-6 h-6' }) => {
+  return html`<svg
+    class="${className}"
+    fill="currentColor"
+    viewBox="0 0 20 20"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fill-rule="evenodd"
+      d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
+      clip-rule="evenodd"
+    ></path>
+  </svg>`;
+};
diff --git a/webroot/js/components/icons/ChatIcon.js b/webroot/js/components/icons/ChatIcon.js
index 268b111ef..a9cf7d9cc 100644
--- a/webroot/js/components/icons/ChatIcon.js
+++ b/webroot/js/components/icons/ChatIcon.js
@@ -6,10 +6,15 @@ export const ChatIcon = ({ className = 'w-6 h-6' }) => {
   return html`
     <svg
       className="${className}"
-      fill="currentColor" 
-      viewBox="0 0 20 20" 
-      xmlns="http://www.w3.org/2000/svg">
-        <path fill-rule="evenodd" d="M18 5v8a2 2 0 01-2 2h-5l-5 4v-4H4a2 2 0 01-2-2V5a2 2 0 012-2h12a2 2 0 012 2zM7 8H5v2h2V8zm2 0h2v2H9V8zm6 0h-2v2h2V8z" clip-rule="evenodd"></path>
+      fill="currentColor"
+      viewBox="0 0 20 20"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        fill-rule="evenodd"
+        d="M18 5v8a2 2 0 01-2 2h-5l-5 4v-4H4a2 2 0 01-2-2V5a2 2 0 012-2h12a2 2 0 012 2zM7 8H5v2h2V8zm2 0h2v2H9V8zm6 0h-2v2h2V8z"
+        clip-rule="evenodd"
+      ></path>
     </svg>
   `;
 };
diff --git a/webroot/js/components/icons/CheckIcon.js b/webroot/js/components/icons/CheckIcon.js
index 34c13bb1d..dc3f74516 100644
--- a/webroot/js/components/icons/CheckIcon.js
+++ b/webroot/js/components/icons/CheckIcon.js
@@ -3,12 +3,18 @@ import htm from '/js/web_modules/htm.js';
 const html = htm.bind(h);
 
 export const CheckIcon = ({ className = 'w-6 h-6' }) => {
-  return html`<svg 
-    class="${className}" 
+  return html`<svg
+    class="${className}"
     fill="none"
-    stroke="currentColor" 
-    viewBox="0 0 24 24" 
-    xmlns="http://www.w3.org/2000/svg">
-    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
-  </svg>`
-}
+    stroke="currentColor"
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      stroke-width="2"
+      d="M5 13l4 4L19 7"
+    ></path>
+  </svg>`;
+};
diff --git a/webroot/js/components/icons/CloseIcon.js b/webroot/js/components/icons/CloseIcon.js
index faf56012e..bc07bdf29 100644
--- a/webroot/js/components/icons/CloseIcon.js
+++ b/webroot/js/components/icons/CloseIcon.js
@@ -1,14 +1,18 @@
-
 import { h } from '/js/web_modules/preact.js';
 import htm from '/js/web_modules/htm.js';
 const html = htm.bind(h);
 
 export const CloseIcon = ({ className = 'w-6 h-6' }) => {
-  return html`<svg 
-    class="${className}" 
-    fill="currentColor" 
-    viewBox="0 0 20 20" 
-    xmlns="http://www.w3.org/2000/svg">
-      <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path>
-    </svg>`
-}
+  return html`<svg
+    class="${className}"
+    fill="currentColor"
+    viewBox="0 0 20 20"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fill-rule="evenodd"
+      d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
+      clip-rule="evenodd"
+    ></path>
+  </svg>`;
+};
diff --git a/webroot/js/components/icons/EditIcon.js b/webroot/js/components/icons/EditIcon.js
index 7c138880d..b9fb22397 100644
--- a/webroot/js/components/icons/EditIcon.js
+++ b/webroot/js/components/icons/EditIcon.js
@@ -1,14 +1,16 @@
-
 import { h } from '/js/web_modules/preact.js';
 import htm from '/js/web_modules/htm.js';
 const html = htm.bind(h);
 
 export const EditIcon = ({ className = 'w-6 h-6' }) => {
-  return html`<svg class="${className}" 
-    fill="currentColor" 
-    viewBox="0 0 20 20" 
+  return html`<svg
+    class="${className}"
+    fill="currentColor"
+    viewBox="0 0 20 20"
     xmlns="http://www.w3.org/2000/svg"
   >
-    <path d="M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zM11.379 5.793L3 14.172V17h2.828l8.38-8.379-2.83-2.828z"></path>
-  </svg>`
-} 
+    <path
+      d="M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zM11.379 5.793L3 14.172V17h2.828l8.38-8.379-2.83-2.828z"
+    ></path>
+  </svg>`;
+};
diff --git a/webroot/js/components/icons/UserIcon.js b/webroot/js/components/icons/UserIcon.js
index b83faaad2..f5841def1 100644
--- a/webroot/js/components/icons/UserIcon.js
+++ b/webroot/js/components/icons/UserIcon.js
@@ -1,4 +1,3 @@
-
 import { h } from '/js/web_modules/preact.js';
 import htm from '/js/web_modules/htm.js';
 const html = htm.bind(h);
diff --git a/webroot/js/components/icons/index.js b/webroot/js/components/icons/index.js
index 0855194e9..6b2e19b30 100644
--- a/webroot/js/components/icons/index.js
+++ b/webroot/js/components/icons/index.js
@@ -1,6 +1,6 @@
-export { ChatIcon } from "./ChatIcon.js"
-export { UserIcon } from "./UserIcon.js"
-export { EditIcon } from "./EditIcon.js"
-export { CheckIcon } from "./CheckIcon.js"
-export { CloseIcon } from "./CloseIcon.js"
-export { CaretDownIcon } from "./CaretDownIcon.js"
+export { ChatIcon } from './ChatIcon.js';
+export { UserIcon } from './UserIcon.js';
+export { EditIcon } from './EditIcon.js';
+export { CheckIcon } from './CheckIcon.js';
+export { CloseIcon } from './CloseIcon.js';
+export { CaretDownIcon } from './CaretDownIcon.js';