Icon component and remove decraped code

NIAEFEUP · Aug 23, 2024 · f114c9b · f114c9b
1 parent 6ace68e
commit f114c9b
Show file tree

Hide file tree

Showing 5 changed files with 44 additions and 62 deletions.
diff --git a/content-scripts/components/Button.tsx b/content-scripts/components/Button.tsx
@@ -1,4 +1,5 @@
 import jsx from "texsaur";
+import Icon from "./Icon";
 
 interface ButtonProps {
     title?: string;
@@ -11,8 +12,8 @@ interface ButtonProps {
 const Button: JSX.Component<ButtonProps> = ({ title, icon, id, className, onClick }) => {
     return (
         <button id={id} className={className} onClick={onClick}>
-            <span className={"se-icon " + icon}></span>
-            {title}
+            {icon && <Icon name={icon} />}
+            {title && <span>{title}</span>}
         </button>
     );
 }

diff --git a/content-scripts/components/HeaderAuthentication.tsx b/content-scripts/components/HeaderAuthentication.tsx
@@ -1,6 +1,7 @@
 import jsx from "texsaur";
 import { AuthSession } from "../types";
 import { togglePopover } from "../modules/utilities/popover";
+import Icon from "./Icon";
 
 interface Props {
   auth: AuthSession | null;
@@ -16,7 +17,7 @@ const Authentication = ({ auth }: Props) => {
             }`}
           onclick={() => togglePopover("se-auth-notifications-menu")}
         >
-          <span className="se-icon ri-notification-line"></span>
+          <Icon name="ri-notification-line" />
         </button>
         <div id="se-auth-notifications-menu">
           <input
@@ -38,11 +39,11 @@ const Authentication = ({ auth }: Props) => {
             <ol id="se-auth-new-notifications"></ol>
             <ol id="se-auth-read-notifications"></ol>
             <div id="se-auth-empty-notifications">
-              <span className="se-icon ri-notification-off-line"></span>
+              <Icon name="ri-notification-off-line" />
               <span>Sem notificações</span>
             </div>
             <div className="se-loading-indicator">
-              <span className="se-icon ri-refresh-line"></span>
+              <Icon name="ri-refresh-line" />
             </div>
           </div>
         </div>
@@ -63,20 +64,21 @@ const Authentication = ({ auth }: Props) => {
               className="se-auth-profile"
               href={`fest_geral.cursos_list?pv_num_unico=${auth.number}`}
             >
-              <span className="se-icon ri-user-line"></span> Perfil
+              <Icon name="ri-user-line" />
+              Perfil
             </a>
             <a
               href={`gpag_ccorrente_geral.conta_corrente_view?pct_cod=${auth.number}`}
             >
-              <span className="se-icon ri-money-euro-circle-line"></span> Conta
-              corrente
+              <Icon name="ri-money-euro-circle-line" />
+              Conta corrente
             </a>
             <a
               id="se-logout-button"
               href="vld_validacao.sair?p_address=WEB_PAGE.INICIAL"
             >
-              <span className="se-icon ri-logout-box-line"></span> Terminar
-              Sessão
+              <Icon name="ri-logout-box-line" />
+              Terminar Sessão
             </a>
           </nav>
         </div>
@@ -88,9 +90,6 @@ const Authentication = ({ auth }: Props) => {
       <button className="se-buttonn" id="se-auth-button" onclick={() => togglePopover("se-auth-form")}>
         Iniciar Sessão
       </button>
-      <button className="se-button se-icon-button" id="se-auth-close-button">
-        <span className="se-icon ri-close-line"></span>
-      </button>
       <form id="se-auth-form" action="vld_validacao.validacao" method="post">
         <input type="hidden" name="p_address" value="web_page.inicial" />
         <input type="hidden" name="p_app" value="162" />
@@ -124,7 +123,7 @@ const Authentication = ({ auth }: Props) => {
           id="se-auth-federate"
           className="se-button"
         >
-          <span className="se-icon ri-shield-user-line"></span>
+          <Icon name="ri-shield-user-line" />
           Autenticação Federada
         </a>
         <a href="gent_geral.list_services" id="se-auth-reset">

diff --git a/content-scripts/components/Icon.tsx b/content-scripts/components/Icon.tsx
@@ -0,0 +1,13 @@
+import jsx from "texsaur";
+
+interface IconProps {
+    name?: string;
+}
+
+const Icon: JSX.Component<IconProps> = ({ name }) => {
+    return (
+        <span className={"se-icon " + name}></span>
+    );
+}
+
+export default Icon;
diff --git a/content-scripts/modules/utilities/popover.js b/content-scripts/modules/utilities/popover.js
diff --git a/content-scripts/modules/utilities/popover.ts b/content-scripts/modules/utilities/popover.ts
@@ -0,0 +1,17 @@
+export const togglePopover = (popoverId: string) => {
+    const popover = document.getElementById(popoverId);
+    if (!popover) return;
+
+    const menuDivs = document.querySelectorAll('div[id$="-menu"]');
+    menuDivs.forEach((div) => {
+        if (div !== popover)
+            div.classList.remove("se-popover-open");
+    });
+
+    if (popover.classList.contains("se-popover-open")) {
+        popover.classList.remove("se-popover-open");
+    } else {
+        popover.classList.add("se-popover-open");
+    }
+    return;
+}