Switch Flag.tsx to use Flag.json

Switched Flag.tsx to use Flag.json as it's source for content.
UI for red flags was changed to accordions as there were difficulties creating a dynamic
amount of modal dialogs.

src/pages/Flag.json

@@ -0,0 +1,39 @@
+ [{"title" : "Amenazas",
+  "content" : ["Asustarla con amenazas de hacerle mal.",
+              "Amenazarla con dejarla, con el suicidio o con denunciarla falsamente a la autoridad.",
+              "Obligarla a retirar los cargos presentados contra él.",
+               "Obligarla a cometer actos ilegales."]},
+ {"title" : "Intimidación",
+  "content" : ["Provocándole miedo a través de sus miradas, acciones y gestos.",
+               "Destrozar objetos.",
+               "Intimidarla rompiéndole sus cosas, maltratando a los animales domésticos, mostrándole armas."]},
+  {"title" : "Abuso Emocional",
+   "content" : ["Hacerla sentir inferior.",
+                "Hacerla sentir mal.",
+                "Insultarle con nombres ofensivos.",
+                "Hacerla pensar que está loca.",
+                "Confundirla a propósito.",
+                "Humillarla.",
+                "Hacerla sentir culpable."]},
+  {"title": "Aislamiento",
+   "content" : ["Controlar lo que hace, a quién puede ver, con quién puede hablar, lo que puede leer y dónde va.",
+                "Limitarle su vida social utilizando los celos para justificar sus actos"]},
+  {"title" : "Desvalorizar, Negar, Culpar",
+   "content" : ["No tomar seriamente preocupación que ella tiene sobre el abuso.",
+                "Negar que uso hacerla sentir responsable de la conducta abusiva.",
+                "Decirle que ella lo provocó."]},
+  {"title" : "Manipulación de los Niño(a)s",
+   "content" : ["Hacerla sentir culpable por el comportamiento de los niño(a) como intermediarios y mantener así el control.",
+                "Usar las visitas con los niño(a)s para molestarla o amenazarla.",
+                "Amenazarla con quitarle los niño(a)s."]},
+  {"title" : "Abuso Económico",
+   "content" : ["No dejarla trabajar o impedirle que mantenga su empleo.",
+                "Obligarala a que le pida dinero.",
+                "Darle una mensualidad.",
+                "Quitarle el dinero.",
+                "No informarle acerca de los ingresos familiares o no permitirle disponer de los ingresos."]},
+  {"title" : "Privilegio Masculino",
+   "content": ["Tratarla como una sirvienta.",
+               "No dejarla tomar decisiones importantes.",
+               "Actuar como el rey de la casa.",
+               "Definir las partes del hombre y de la mujer."]}]

src/pages/Flag.tsx

@@ -1,12 +1,45 @@
-import { IonCardHeader, IonCardTitle } from '@ionic/core/components';
-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 {
+  IonAccordion,
+  IonAccordionGroup,
+  IonCard,
+  IonContent,
+  IonHeader,
+  IonItem,
+  IonLabel,
+  IonPage,
+  IonTitle,
+  IonToolbar} from '@ionic/react';
+
 import './Flag.css';
 
-const Flag: React.FC = () => {
-  const modal = useRef<HTMLIonModalElement>(null);
+// generate single accordion item given a title and points of info
+const AccordionItem = (title: string, content: string[]) => {
+  return (
+    <IonAccordion value={title}>
+      <IonItem slot="header" color="light">
+        <IonLabel class="ion-text-center">{title}</IonLabel>
+      </IonItem>
+      <div className="ion-padding" slot="content">
+        {
+          // generate each point in content
+          content.map((text: string) =>{
+            return (
+              <IonCard color="light">
+                <IonItem>
+                <IonLabel class="ion-text-center">{text}</IonLabel>
+                </IonItem>
+              </IonCard>
+            );
+          })
+        }
+      </div>
+    </IonAccordion>)
+}
 
+const Flag: React.FC = () => {
+  // Load Flag.json which has format of Object[],
+  // where each object has a title and content field.
+  let content = require("./Flag.json")
   return (
     <IonPage>
       <IonHeader>
@@ -20,250 +53,15 @@ const Flag: React.FC = () => {
             <IonTitle size="large">Flag</IonTitle>
           </IonToolbar>
         </IonHeader>
-
-        <IonTitle class="ion-text-center" color="light">Pendiente a...</IonTitle>
-        <IonGrid>
-          <IonRow>
-            <IonCol>
-                <IonButton id="open-amenazas" color="light" expand="block">
-                  Amenazas
-                </IonButton>
-                <IonModal ref={modal} keepContentsMounted={true} trigger="open-amenazas">
-                  <IonHeader>
-                    <IonToolbar>
-                      <IonTitle>Amenazas</IonTitle>
-                      <IonButtons slot="end">
-                        <IonButton color="light" onClick={() => modal.current?.dismiss()}>Cerrar</IonButton>
-                      </IonButtons>
-                   </IonToolbar>
-                  </IonHeader>
-                  <IonContent className="ion-padding">
-                    <IonCard color="light">
-                      <p>Asustarla con amenazas de hacerle mal.</p>
-                    </IonCard>
-                    <IonCard color="light">
-                      <p>Amenazarla con dejarla, con el suicidio o con denunciarla falsamente a la autoridad.</p>
-                    </IonCard>
-                    <IonCard color="light">
-                      <p>Obligarla a retirar los cargos presentados contra él.</p>
-                    </IonCard>
-                    <IonCard color="light">
-                      <p>Obligarla a cometer actos ilegales.</p>
-                    </IonCard>
-                  </IonContent>
-                </IonModal>
-            </IonCol>
-            <IonCol>
-                <IonButton id="open-intimidacion" color="light" expand="block" >
-                  Intimidación
-                </IonButton>
-                <IonModal ref={modal} keepContentsMounted={true} trigger="open-intimidacion">
-                  <IonHeader>
-                    <IonToolbar>
-                      <IonTitle>Intimidación</IonTitle>
-                      <IonButtons slot="end">
-                        <IonButton color="light" onClick={() => modal.current?.dismiss()}>Cerrar</IonButton>
-                      </IonButtons>
-                   </IonToolbar>
-                  </IonHeader>
-                  <IonContent className="ion-padding">
-                    <IonCard color="light">
-                      <p>Provocándole miedo a través de sus miradas, acciones y gestos.</p>
-                    </IonCard>
-                    <IonCard color="light">
-                      <p>Destrozar objetos.</p>
-                    </IonCard>
-                    <IonCard color="light">
-                      <p>Intimidarla rompiéndole sus cosas, maltratando a los animales domésticos, mostrándole armas.</p>
-                    </IonCard>
-                  </IonContent>
-                </IonModal>
-            </IonCol>
-          </IonRow>
-          <IonRow>
-            <IonCol>
-              <IonButton id="open-abuso-emocional" color="light" expand="block">
-                 Abuso Emocional
-                </IonButton>
-                <IonModal ref={modal} trigger="open-abuso-emocional">
-                  <IonHeader>
-                    <IonToolbar>
-                      <IonTitle>Abuso Emocional</IonTitle>
-                      <IonButtons slot="end">
-                        <IonButton color="light" onClick={() => modal.current?.dismiss()}>Cerrar</IonButton>
-                      </IonButtons>
-                   </IonToolbar>
-                  </IonHeader>
-                  <IonContent className="ion-padding">
-                    <IonCard color="light">
-                      <p>Hacerla sentir inferior.</p>
-                    </IonCard>
-                    <IonCard color="light">
-                      <p>Hacerla sentir mal.</p>
-                    </IonCard>
-                    <IonCard color="light">
-                      <p>Insultarle con nombres ofensivos.</p>
-                    </IonCard>
-                    <IonCard color="light">
-                      <p>Hacerla pensar que está loca.</p>
-                    </IonCard>
-                    <IonCard color="light">
-                      <p>Confundirla a propósito.</p>
-                    </IonCard>
-                    <IonCard color="light">
-                      <p>Humillarla.</p>
-                    </IonCard>
-                    <IonCard color="light">
-                      <p>Hacerla sentir culpable.</p>
-                    </IonCard>
-                  </IonContent>
-                </IonModal>
-            </IonCol>
-            <IonCol>
-              <IonButton id="open-aislamiento" color="light" expand="block">
-                 Aislamiento
-                </IonButton>
-                <IonModal ref={modal} trigger="open-aislamiento">
-                  <IonHeader>
-                    <IonToolbar>
-                      <IonTitle>Aislamiento</IonTitle>
-                      <IonButtons slot="end">
-                        <IonButton color="light" onClick={() => modal.current?.dismiss()}>Cerrar</IonButton>
-                      </IonButtons>
-                   </IonToolbar>
-                  </IonHeader>
-                  <IonContent className="ion-padding">
-                    <IonCard color="light">
-                      <p>Controlar lo que hace, a quién puede ver, con quién puede hablar, lo que puede leer y dónde va.</p>
-                    </IonCard>
-                    <IonCard color="light">
-                      <p>Limitarle su vida social utilizando los celos para justificar sus actos</p>
-                    </IonCard>
-                  </IonContent>
-                </IonModal>
-            </IonCol>
-          </IonRow>
-          <IonRow>
-            <IonCol>
-            <IonButton id="open-des-neg-cul" color="light" expand="block">
-                 Desvalorizar, Negar, Culpar
-                </IonButton>
-                <IonModal  ref={modal} trigger="open-des-neg-cul">
-                  <IonHeader>
-                    <IonToolbar>
-                      <IonTitle>Desvalorizar, Negar, Culpar</IonTitle>
-                      <IonButtons slot="end">
-                        <IonButton color="light" onClick={() => modal.current?.dismiss()}>Cerrar</IonButton>
-                      </IonButtons>
-                   </IonToolbar>
-                  </IonHeader>
-                  <IonContent className="ion-padding">
-                    <IonCard color="light">
-                      <p>No tomar seriamente preocupación que ella tiene sobre el abuso.</p>
-                    </IonCard>
-                    <IonCard color="light">
-                      <p>Negar que uso hacerla sentir responsable de la conducta abusiva.</p>
-                    </IonCard>
-                    <IonCard color="light">
-                      <p>Decirle que ella lo provocó.</p>
-                    </IonCard>
-                  </IonContent>
-                </IonModal>
-            </IonCol>
-            <IonCol>
-              <IonButton id="open-manipulacion" color="light" expand="block">
-                 Manipulación de los Niño(a)s
-                </IonButton>
-                <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={() => modal.current?.dismiss()}>Cerrar</IonButton>
-                      </IonButtons>
-                   </IonToolbar>
-                  </IonHeader>
-                  <IonContent className="ion-padding">
-                    <IonCard color="light">
-                      <p>Hacerla sentir culpable por el comportamiento de los niño(a) como intermediarios y mantener así el control.</p>
-                    </IonCard>
-                    <IonCard color="light">
-                      <p>Usar las visitas con los niño(a)s para molestarla o amenazarla.</p>
-                    </IonCard>
-                    <IonCard color="light">
-                      <p>Amenazarla con quitarle los niño(a)s.</p>
-                    </IonCard>
-                  </IonContent>
-                </IonModal>
-            </IonCol>
-          </IonRow>
-          <IonRow>
-            <IonCol>
-            <IonButton id="open-abuso-economico" color="light" expand="block">
-                 Abuso Económico
-                </IonButton>
-                <IonModal ref={modal} trigger="open-abuso-economico">
-                  <IonHeader>
-                    <IonToolbar>
-                      <IonTitle>Abuso Económico</IonTitle>
-                      <IonButtons slot="end">
-                        <IonButton color="light" onClick={() => modal.current?.dismiss()}>Cerrar</IonButton>
-                      </IonButtons>
-                   </IonToolbar>
-                  </IonHeader>
-                  <IonContent className="ion-padding">
-                    <IonCard color="light">
-                      <p>No dejarla trabajar o impedirle que mantenga su empleo.</p>
-                    </IonCard>
-                    <IonCard color="light">
-                      <p>Obligarala a que le pida dinero.</p>
-                    </IonCard>
-                    <IonCard color="light">
-                      <p>Darle una mensualidad.</p>
-                    </IonCard>
-                    <IonCard color="light">
-                      <p>Quitarle el dinero.</p>
-                    </IonCard>
-                    <IonCard color="light">
-                      <p>No informarle acerca de los ingresos familiares o no permitirle disponer de los ingresos.</p>
-                    </IonCard>
-                  </IonContent>
-                </IonModal>
-            </IonCol>
-            <IonCol>
-              <IonButton id="open-priv-masculino" color="light" expand="block">
-                 Privilegio Masculino
-                </IonButton>
-                <IonModal ref={modal} trigger="open-priv-masculino">
-                  <IonHeader>
-                    <IonToolbar>
-                      <IonTitle>Privilegio Masculino</IonTitle>
-                      <IonButtons slot="end">
-                        <IonButton color="light" onClick={() => modal.current?.dismiss()}>Cerrar</IonButton>
-                      </IonButtons>
-                   </IonToolbar>
-                  </IonHeader>
-                  <IonContent className="ion-padding">
-                    <IonCard color="light">
-                      <p>Tratarla como una sirvienta.</p>
-                    </IonCard>
-                    <IonCard color="light">
-                      <p>No dejarla tomar decisiones importantes.</p>
-                    </IonCard>
-                    <IonCard color="light">
-                      <p>Actuar como el rey de la casa.</p>
-                    </IonCard>
-                    <IonCard color="light">
-                      <p>Definir las partes del hombre y de la mujer.</p>
-                    </IonCard>
-                  </IonContent>
-                </IonModal>
-            </IonCol>
-          </IonRow>
-        </IonGrid>
+        <IonAccordionGroup multiple={true}>
+          {
+            // generate an accordion item for each object in Flag.json
+            content.map((obj: any) => AccordionItem(obj.title, obj.content))
+          }
+        </IonAccordionGroup>
       </IonContent>
     </IonPage>
   );
-};
+}
 
 export default Flag;