Flag Page Update

src/pages/Flag.tsx

@@ -1,11 +1,11 @@
 import { IonCardHeader, IonCardTitle } from '@ionic/core/components';
-import React, { useState } from 'react';
+import React, { useState, useRef, useEffect } from 'react';
 import { IonButton, IonButtons, IonCard, IonCol, IonContent, IonGrid, IonHeader, IonModal, IonPage, IonRow, IonText, IonTitle, IonToolbar } from '@ionic/react';
 import ExploreContainer from '../components/ExploreContainer';
 import './Flag.css';
 
 const Flag: React.FC = () => {
-  const [isOpen, setIsOpen] = useState(false);
+  const modal = useRef<HTMLIonModalElement>(null);
 
   return (
     <IonPage>
@@ -25,15 +25,15 @@ const Flag: React.FC = () => {
         <IonGrid>
           <IonRow>
             <IonCol>
-                <IonButton color="light" expand="block" onClick={() => setIsOpen(true)}>
+                <IonButton id="open-amenazas" color="light" expand="block">
                   Amenazas
                 </IonButton>
-                <IonModal isOpen={isOpen}>
+                <IonModal ref={modal} keepContentsMounted={true} trigger="open-amenazas">
                   <IonHeader>
                     <IonToolbar>
                       <IonTitle>Amenazas</IonTitle>
                       <IonButtons slot="end">
-                        <IonButton color="light" onClick={() => setIsOpen(false)}>Cerrar</IonButton>
+                        <IonButton color="light" onClick={() => modal.current?.dismiss()}>Cerrar</IonButton>
                       </IonButtons>
                    </IonToolbar>
                   </IonHeader>
@@ -54,15 +54,15 @@ const Flag: React.FC = () => {
                 </IonModal>
             </IonCol>
             <IonCol>
-                <IonButton color="light" expand="block" onClick={() => setIsOpen(true)}>
+                <IonButton id="open-intimidacion" color="light" expand="block" >
                   Intimidación
                 </IonButton>
-                <IonModal isOpen={isOpen}>
+                <IonModal ref={modal} keepContentsMounted={true} trigger="open-intimidacion">
                   <IonHeader>
                     <IonToolbar>
                       <IonTitle>Intimidación</IonTitle>
                       <IonButtons slot="end">
-                        <IonButton color="light" onClick={() => setIsOpen(false)}>Cerrar</IonButton>
+                        <IonButton color="light" onClick={() => modal.current?.dismiss()}>Cerrar</IonButton>
                       </IonButtons>
                    </IonToolbar>
                   </IonHeader>
@@ -82,15 +82,15 @@ const Flag: React.FC = () => {
           </IonRow>
           <IonRow>
             <IonCol>
-              <IonButton color="light" expand="block" onClick={() => setIsOpen(true)}>
+              <IonButton id="open-abuso-emocional" color="light" expand="block">
                  Abuso Emocional
                 </IonButton>
-                <IonModal isOpen={isOpen}>
+                <IonModal ref={modal} trigger="open-abuso-emocional">
                   <IonHeader>
                     <IonToolbar>
                       <IonTitle>Abuso Emocional</IonTitle>
                       <IonButtons slot="end">
-                        <IonButton color="light" onClick={() => setIsOpen(false)}>Cerrar</IonButton>
+                        <IonButton color="light" onClick={() => modal.current?.dismiss()}>Cerrar</IonButton>
                       </IonButtons>
                    </IonToolbar>
                   </IonHeader>
@@ -120,15 +120,15 @@ const Flag: React.FC = () => {
                 </IonModal>
             </IonCol>
             <IonCol>
-              <IonButton color="light" expand="block" onClick={() => setIsOpen(true)}>
+              <IonButton id="open-aislamiento" color="light" expand="block">
                  Aislamiento
                 </IonButton>
-                <IonModal isOpen={isOpen}>
+                <IonModal ref={modal} trigger="open-aislamiento">
                   <IonHeader>
                     <IonToolbar>
                       <IonTitle>Aislamiento</IonTitle>
                       <IonButtons slot="end">
-                        <IonButton color="light" onClick={() => setIsOpen(false)}>Cerrar</IonButton>
+                        <IonButton color="light" onClick={() => modal.current?.dismiss()}>Cerrar</IonButton>
                       </IonButtons>
                    </IonToolbar>
                   </IonHeader>
@@ -145,15 +145,15 @@ const Flag: React.FC = () => {
           </IonRow>
           <IonRow>
             <IonCol>
-            <IonButton color="light" expand="block" onClick={() => setIsOpen(true)}>
+            <IonButton id="open-des-neg-cul" color="light" expand="block">
                  Desvalorizar, Negar, Culpar
                 </IonButton>
-                <IonModal isOpen={isOpen}>
+                <IonModal  ref={modal} trigger="open-des-neg-cul">
                   <IonHeader>
                     <IonToolbar>
                       <IonTitle>Desvalorizar, Negar, Culpar</IonTitle>
                       <IonButtons slot="end">
-                        <IonButton color="light" onClick={() => setIsOpen(false)}>Cerrar</IonButton>
+                        <IonButton color="light" onClick={() => modal.current?.dismiss()}>Cerrar</IonButton>
                       </IonButtons>
                    </IonToolbar>
                   </IonHeader>
@@ -171,15 +171,15 @@ const Flag: React.FC = () => {
                 </IonModal>
             </IonCol>
             <IonCol>
-              <IonButton color="light" expand="block" onClick={() => setIsOpen(true)}>
+              <IonButton id="open-manipulacion" color="light" expand="block">
                  Manipulación de los Niño(a)s
                 </IonButton>
-                <IonModal isOpen={isOpen}>
+                <IonModal ref={modal} trigger="open-manipulacion">
                   <IonHeader>
                     <IonToolbar>
                       <IonTitle>Manipulación de los Niño(a)s</IonTitle>
                       <IonButtons slot="end">
-                        <IonButton color="light" onClick={() => setIsOpen(false)}>Cerrar</IonButton>
+                        <IonButton color="light" onClick={() => modal.current?.dismiss()}>Cerrar</IonButton>
                       </IonButtons>
                    </IonToolbar>
                   </IonHeader>
@@ -199,15 +199,15 @@ const Flag: React.FC = () => {
           </IonRow>
           <IonRow>
             <IonCol>
-            <IonButton color="light" expand="block" onClick={() => setIsOpen(true)}>
+            <IonButton id="open-abuso-economico" color="light" expand="block">
                  Abuso Económico
                 </IonButton>
-                <IonModal isOpen={isOpen}>
+                <IonModal ref={modal} trigger="open-abuso-economico">
                   <IonHeader>
                     <IonToolbar>
                       <IonTitle>Abuso Económico</IonTitle>
                       <IonButtons slot="end">
-                        <IonButton color="light" onClick={() => setIsOpen(false)}>Cerrar</IonButton>
+                        <IonButton color="light" onClick={() => modal.current?.dismiss()}>Cerrar</IonButton>
                       </IonButtons>
                    </IonToolbar>
                   </IonHeader>
@@ -231,15 +231,15 @@ const Flag: React.FC = () => {
                 </IonModal>
             </IonCol>
             <IonCol>
-              <IonButton color="light" expand="block" onClick={() => setIsOpen(true)}>
+              <IonButton id="open-priv-masculino" color="light" expand="block">
                  Privilegio Masculino
                 </IonButton>
-                <IonModal isOpen={isOpen}>
+                <IonModal ref={modal} trigger="open-priv-masculino">
                   <IonHeader>
                     <IonToolbar>
                       <IonTitle>Privilegio Masculino</IonTitle>
                       <IonButtons slot="end">
-                        <IonButton color="light" onClick={() => setIsOpen(false)}>Cerrar</IonButton>
+                        <IonButton color="light" onClick={() => modal.current?.dismiss()}>Cerrar</IonButton>
                       </IonButtons>
                    </IonToolbar>
                   </IonHeader>