src/App.tsx

@@ -42,10 +42,10 @@ const App: React.FC = () => (
         <Route path="/home" exact={true}>
           <HomePage />
         </Route>
-        <Route path="/ListBiographie">
+        <Route path="/ListBiographies">
           <ListBiographies />
         </Route>
-        <Route path="/Biographie/:id">
+        <Route path="/Biography/:id">
           <Biography />
         </Route>
         <Route path="/ListCapsules">

src/components/BiographySearchBar.tsx

@@ -0,0 +1,59 @@
+import React, { useState } from 'react';
+import { 
+  IonItem,
+  IonImg,
+  IonList, 
+  IonSearchbar,
+  IonCard, 
+  IonCardHeader,
+  IonCardTitle,
+  IonCardContent,
+  IonCardSubtitle,
+  IonIcon,
+} from '@ionic/react';
+import biographies from '../data/Biograph.json'
+import { square } from 'ionicons/icons';
+
+function SearchBar() {
+
+  let [results, setResults] = useState([...biographies]);
+
+  const filterSearch = (ev: Event) => {
+    let query = "";
+    const target = ev.target as HTMLIonSearchbarElement;
+    if (target) query = target.value!.toLowerCase();
+
+    setResults(biographies.filter(bio => {
+      return bio.title.toLowerCase().indexOf(query) > -1;
+    })
+    )
+  }
+
+  return (
+    <>
+      <IonSearchbar debounce={500} onIonChange={(ev) => filterSearch(ev)}></IonSearchbar>
+
+      <IonList inset={true}>
+        { results.map(result => (
+          <>
+          <IonCard>
+            <IonItem routerLink={`/Biography/${result.id}`}>
+              <IonImg style={{ height: 300, width: 600 }} src={result.photo} alt='Logo'></IonImg>
+              <IonCardHeader>
+                <IonCardTitle>{result.title}</IonCardTitle>
+                <IonCardSubtitle>{result.tags}</IonCardSubtitle>
+              </IonCardHeader><IonCardContent>
+                {result.content}
+              </IonCardContent>
+            </IonItem>
+            <IonItem routerLink={`/Question`} detail={true}>
+              <IonIcon icon={square} />Tomar quiz
+            </IonItem>
+          </IonCard>
+        </>
+        ))}
+      </IonList>
+    </>
+  );
+}
+export default SearchBar;

src/components/CapsuleSearchBar.tsx

@@ -0,0 +1,66 @@
+import React, { useState } from 'react';
+import { 
+  IonItem, 
+  IonList, 
+  IonSearchbar,
+  IonCard, 
+  IonCardHeader,
+  IonCardTitle,
+} from '@ionic/react';
+import capsules from '../data/Capsule.json'
+
+
+function SearchBar() {
+
+  let [results, setResults] = useState([...capsules]);
+
+  const filterSearch = (ev: Event) => {
+    let query = "";
+    const target = ev.target as HTMLIonSearchbarElement;
+    if (target) query = target.value!.toLowerCase();
+
+    setResults(capsules.filter(cap => {
+      return cap.title.toLowerCase().indexOf(query) > -1;
+    })
+    )
+  }
+
+  return (
+    <>
+      <IonSearchbar debounce={500} onIonChange={(ev) => filterSearch(ev)}></IonSearchbar>
+
+      <IonList inset={true}>
+        { results.map(result => (
+            <IonCard>
+            <IonItem button routerLink={`/Capsule/${result.id}`}>
+              <IonCardHeader>
+                <IonCardTitle>{result.title}</IonCardTitle>
+              </IonCardHeader>
+            </IonItem>
+          </IonCard>
+        ))}
+      </IonList>
+    </>
+  );
+}
+export default SearchBar;
+
+
+/*
+             <>
+                <IonCard>
+                  <IonItem routerLink={`/Biography/${listbio.id}`}>
+                    <IonImg style={{ height: 300, width: 600 }} src={RobertoClemente} alt='Logo'></IonImg>
+                    <IonCardHeader>
+                      <IonCardTitle>{listbio.title}</IonCardTitle>
+                      <IonCardSubtitle>{listbio.tags}</IonCardSubtitle>
+                    </IonCardHeader><IonCardContent>
+                      {listbio.content}
+                    </IonCardContent>
+                  </IonItem>
+                  <IonItem routerLink={`/Question`} detail={true}>
+                    <IonIcon icon={square} />Tomar quiz
+                  </IonItem>
+                </IonCard>
+              </>
+*/

src/components/ExploreContainer.css

@@ -1,24 +0,0 @@
-.container {
-  text-align: center;
-  position: absolute;
-  left: 0;
-  right: 0;
-  top: 50%;
-  transform: translateY(-50%);
-}
-
-.container strong {
-  font-size: 20px;
-  line-height: 26px;
-}
-
-.container p {
-  font-size: 16px;
-  line-height: 22px;
-  color: #8c8c8c;
-  margin: 0;
-}
-
-.container a {
-  text-decoration: none;
-}

src/components/ExploreContainer.tsx

@@ -1,16 +0,0 @@
-import './ExploreContainer.css';
-
-interface ContainerProps {
-  name: string;
-}
-
-const ExploreContainer: React.FC<ContainerProps> = ({ name }) => {
-  return (
-    <div className="container">
-      <strong>{name}</strong>
-      <p>Explore <a target="_blank" rel="noopener noreferrer" href="https://ionicframework.com/docs/components">UI Components</a></p>
-    </div>
-  );
-};
-
-export default ExploreContainer;

src/data/Capsule.json

@@ -1,65 +1,20 @@
 [
     {
-        "id": 1,
+        "id": 0,
         "title": "Grandes deportistas puertorriqueños",
-        "Text1": "Uno de los aspectos culturales por los que Puerto Rico más se destaca en el mundo es por el deporte, además de por nuestra admiración y entusiasmo por los logros de nuestros deportistas de todas las disciplinas.",
-        "Text2": "Cuando los nuestros logran grandes triunfos —ya sea individualmente, como parte de un equipo o como parte de una selección boricua en un evento internacional— seguimos sus hazañas y las celebramos con ellos.",
-        "Text3": "Aquí presentamos a tres grandes de nuestro deporte: la estrella del béisbol de Grandes Ligas, Roberto Clemente; la gran atleta de pista y campo Rebekah Colberg; y Germán Rieckehoff Sampayo, un incansable líder deportivo que luchó por el desarrollo de nuestros atletas y por nuestro derecho a participar en competencias a nivel internacional.",
-        "Text4": "",
-        "Text5": "",
-        "Text6": "",
-        "Text7": "",
-        "Text8": "",
-        "Text9": "",
-        "Text10": "",
-        "mensage": "¡Conócelos!",
-        "nombre1": "Roberto Clemente",
-        "id1": 1,
-        "nombre2": "German Rieckhoff Sampayo",
-        "id2": 2,
-        "nombre3": "Rebekah Colberg Cabrera",
-        "id3": 3
+        "content": "<p>Uno de los aspectos culturales por los que Puerto Rico más se destaca en el mundo es por el deporte, además de por nuestra admiración y entusiasmo por los logros de nuestros deportistas de todas las disciplinas.</p> <p>Cuando los nuestros logran grandes triunfos —ya sea individualmente, como parte de un equipo o como parte de una selección boricua en un evento internacional— seguimos sus hazañas y las celebramos con ellos.</p> <p>Aquí presentamos a tres grandes de nuestro deporte: la estrella del béisbol de Grandes Ligas, Roberto Clemente; la gran atleta de pista y campo Rebekah Colberg; y Germán Rieckehoff Sampayo, un incansable líder deportivo que luchó por el desarrollo de nuestros atletas y por nuestro derecho a participar en competencias a nivel internacional.</p> <p>¡Conócelos!</p>",
+        "photo": "../assets/BombaPuertorriquena.jpg"
     },
     {
-        "id": 2,
+        "id": 1,
         "title": "La familia Figueroa: sus aportaciones a la música puertorriqueña",
-        "Text1": "¿Has oído hablar alguna vez de “La familia Figueroa”? Sus recordados integrantes —instrumentistas, compositores y educadores— son figuras de la música puertorriqueña del siglo 20 que nos llenan de orgullo.",
-        "Text2": "Cuando en Puerto Rico se habla de “Los hermanos Figueroa”, en el contexto de las artes musicales, nos referimos a las tres hijas y cinco hijos del matrimonio compuesto por Jesús Figueroa Iriarte (1878-1971) —violinista, compositor y director de orquesta— y Carmen Sanabia Ellinger (1881-1954) —pianista y educadora.",
-        "Text3": "Entre las muchas características admirables de don Narciso y doña Carmen, resalta el haber expuesto a la música, desde temprano y por igual, a sus ocho hijos e hijas: Pepito, Narciso, Kachiro, Guillermo, Rafael, Angelina, Carmelina y Leonor. Se esmeraron por procurarles a todos —tanto a las niñas como a los niños— la mejor educación musical posible.",
-        "Text4": "De esa visión, surgió una familia única de artistas y educadores que dejó huella en Puerto Rico y cuya próxima generación continuó cultivando con altura el arte por el que son reconocidos.",
-        "Text5": "",
-        "Text6": "",
-        "Text7": "",
-        "Text8": "",
-        "Text9": "",
-        "Text10": "",
-        "mensage": "Conoce a tres de los hermanos Figueroa Sanabia: Narciso, Angelina y Leonor, y su legado a Puerto Rico.",
-        "nombre1": "Narciso Figueroa Sanabia",
-        "id1": 4,
-        "nombre2": "Angelina Figueroa Sanabia",
-        "id2": 5,
-        "nombre3": "Leonor Figueroa Sanabia",
-        "id3": 6
+        "content": "<p>¿Has oído hablar alguna vez de “La familia Figueroa”? Sus recordados integrantes —instrumentistas, compositores y educadores— son figuras de la música puertorriqueña del siglo 20 que nos llenan de orgullo.</p><p>Cuando en Puerto Rico se habla de “Los hermanos Figueroa”, en el contexto de las artes musicales, nos referimos a las tres hijas y cinco hijos del matrimonio compuesto por Jesús Figueroa Iriarte (1878-1971) —violinista, compositor y director de orquesta— y Carmen Sanabia Ellinger (1881-1954) —pianista y educadora.</p><p>Entre las muchas características admirables de don Narciso y doña Carmen, resalta el haber expuesto a la música, desde temprano y por igual, a sus ocho hijos e hijas: Pepito, Narciso, Kachiro, Guillermo, Rafael, Angelina, Carmelina y Leonor. Se esmeraron por procurarles a todos —tanto a las niñas como a los niños— la mejor educación musical posible.</p><p>De esa visión, surgió una familia única de artistas y educadores que dejó huella en Puerto Rico y cuya próxima generación continuó cultivando con altura el arte por el que son reconocidos.</p><p>Conoce a tres de los hermanos Figueroa Sanabia: Narciso, Angelina y Leonor, y su legado a Puerto Rico. </p>",
+        "photo": "../assets/BombaPuertorriquena.jpg"
     },
     {
-        "id": 3,
+        "id": 2,
         "title": "Las mujeres en nuestra música: Tres estrellas de nuestra canción popular",
-        "Text1": "Las mujeres en nuestra música: Tres estrellas de nuestra canción popular",
-        "Text2": "Al igual que hoy en día brillan en escenarios de todo el mundo exponentes de géneros tan diversos como la ópera, la salsa, el pop latino o el reggaetón, nuestra historia está llena de grandes artistas que precedieron a las estrellas de hoy.",
-        "Text3": "Es importante reconocer y recordar que, a lo largo de la historia de nuestra música, especialmente, a partir del siglo 20, las mujeres han tenido un papel importantísimo como cantantes, compositoras o instrumentistas.",
-        "Text4": "En esta cápsula, queremos presentarte a tres de las cientos de mujeres que han marcado nuestra memoria musical, ya sea por su portentosa voz y presencia, o por habernos dejado algunas de las composiciones más valoradas de la canción popular. Conoce a Ruth Fernández, (1919-2012), Sylvia Rexach (1921-1961) y Lucecita Benítez (Nacida en 1942).",
-        "Text5": "Las tres, de distintas maneras, rompieron barreras y abrieron brechas para nuestras exponentes musicales de hoy. Además, sus historias permiten conocer mejor la riqueza de espacios para nuestras y nuestros artistas que se dieron en el teatro, la radio, la televisión y otros escenarios culturales del siglo 20.",
-        "Text6": "",
-        "Text7": "",
-        "Text8": "",
-        "Text9": "",
-        "Text10": "",
-        "mensage": "Lee sus biografías para conocer sus logros, luchas y aportaciones",
-        "nombre1": "Ruth Fernandez",
-        "id1": 7,
-        "nombre2": "Sylvia Rexach",
-        "id2": 8,
-        "nombre3": "Lucecita Benitez",
-        "id3": 9
+        "content": "<p>La música puertorriqueña ha dado innumerables intérpretes que han cultivado con gran excelencia diversos géneros de este arte, tanto a nivel local como internacional.</p><p>Al igual que hoy en día brillan en escenarios de todo el mundo exponentes de géneros tan diversos como la ópera, la salsa, el pop latino o el reggaetón, nuestra historia está llena de grandes artistas que precedieron a las estrellas de hoy.</p><p>Es importante reconocer y recordar que, a lo largo de la historia de nuestra música, especialmente, a partir del siglo 20, las mujeres han tenido un papel importantísimo como cantantes, compositoras o instrumentistas.</p><p>En esta cápsula, queremos presentarte a tres de las cientos de mujeres que han marcado nuestra memoria musical, ya sea por su                                                                                                                               portentosa voz y presencia, o por habernos dejado algunas de las composiciones más valoradas de la canción popular. Conoce a Ruth Fernández, (1919-2012), Sylvia Rexach (1921-1961) y Lucecita Benítez (Nacida en 1942).</p><p>Las tres, de distintas maneras, rompieron barreras y abrieron brechas para nuestras exponentes musicales de hoy. Además, sus historias permiten conocer mejor la riqueza de espacios para nuestras y nuestros artistas que se dieron en el teatro, la radio, la televisión y otros escenarios culturales del siglo 20.</><p>Lee sus biografías para conocer sus logros, luchas y aportaciones.</p>",
+        "photo": "../assets/BombaPuertorriquena.jpg"
     }
 ]

src/data/CapsuleInfo.ts

@@ -3,25 +3,10 @@ import ListCapsule from '../data/Capsule.json';
 export interface CapsuleInfo {
     id: number;
     title: string;
-    Text1: string;
-    Text2: string;
-    Text3: string;
-    Text4: string;
-    Text5: string;
-    Text6: string;
-    Text7: string;
-    Text8: string;
-    Text9: string;
-    Text10: string;
-    mensage: string;
-    nombre1: string;
-    id1: number;
-    nombre2: string;
-    id2: number;
-    nombre3: string;
-    id3: number;
+    content: string;
+    photo: string;
 }
 
-export const getMessages = () => ListCapsule;
+export const getCapsules = () => ListCapsule;
 
-export const getMessage = (id: number) => ListCapsule.find(m => m.id === id);
+export const getCapsule = (id: number) => ListCapsule.find(c => c.id === id);

src/pages/Biography.tsx

@@ -48,6 +48,7 @@ const Biography: React.FC = () => {
                     </IonGrid>
                 </IonToolbar>
             </IonHeader>
+
             <IonContent fullscreen className="ion-padding">
                 {bioinfo ? (
                     <>
@@ -78,7 +79,7 @@ const Biography: React.FC = () => {
                         </IonItem>
                     </>
                 ) : (
-                    <div>Message not found</div>
+                    <div>Biography not found</div>
                 )}
             </IonContent>
 

src/pages/Capsule.tsx

@@ -9,28 +9,23 @@ import {
     IonGrid,
     IonRow,
     IonCol,
-    useIonViewWillEnter,
     IonButtons,
     IonBackButton,
-    IonCard,
-    IonItem,
-    IonCardHeader,
-    IonCardSubtitle
+    useIonViewWillEnter
 } from '@ionic/react';
+import { useParams } from 'react-router';
 import React, { useState } from 'react';
 import './Capsule.css';
-import { useParams } from 'react-router';
-import { CapsuleInfo, getMessage } from '../data/CapsuleInfo';
+import { CapsuleInfo, getCapsule} from '../data/CapsuleInfo';
 import EnciclopediaPR from '../assets/EnciclopediaPR.png';
-import RobertoClemente from '../assets/RobertoClemente.jpg';
 
 const Capsule: React.FC = () => {
-    const [capinfo, setMessage] = useState<CapsuleInfo>();
+    const [capinfo, setCapsule] = useState<CapsuleInfo>();
     const params = useParams<{ id: string }>();
 
     useIonViewWillEnter(() => {
-        const msg = getMessage(parseInt(params.id, 10));
-        setMessage(msg);
+        const capsule = getCapsule(parseInt(params.id, 10));
+        setCapsule(capsule);
     });
 
     return (
@@ -49,51 +44,20 @@ const Capsule: React.FC = () => {
                     </IonGrid>
                 </IonToolbar>
             </IonHeader>
+
             <IonContent fullscreen className="ion-padding">
-                {capinfo ? (
+            {capinfo ? (
                     <>
+                        <IonImg style={{ height: 300, width: 600 }} src={capinfo.photo} alt='Logo'></IonImg>
                         <h1>{capinfo.title}</h1>
-                        <p>{capinfo.Text1}</p>
-                        <p>{capinfo.Text2}</p>
-                        <p>{capinfo.Text3}</p>
-                        <p>{capinfo.Text4}</p>
-                        <p>{capinfo.Text5}</p>
-                        <p>{capinfo.Text6}</p>
-                        <p>{capinfo.Text7}</p>
-                        <p>{capinfo.Text8}</p>
-                        <p>{capinfo.Text9}</p>
-                        <p>{capinfo.Text10}</p>
-                        <p></p>
-                        <h2>{capinfo.mensage}</h2>
-                        <IonCard>
-                            <IonItem routerLink={`/Biographie/${capinfo.id1}`} detail={true}>
-                                <IonImg style={{ height: 150, width: 300 }} src={RobertoClemente} alt='Logo'></IonImg>
-                                <IonCardHeader>
-                                    <IonCardSubtitle>{capinfo.nombre1}</IonCardSubtitle>
-                                </IonCardHeader>
-                            </IonItem>
-                        </IonCard>
-                        <IonCard>
-                            <IonItem routerLink={`/Biographie/${capinfo.id2}`} detail={true}>
-                                <IonImg style={{ height: 150, width: 300 }} src={RobertoClemente} alt='Logo'></IonImg>
-                                <IonCardHeader>
-                                    <IonCardSubtitle>{capinfo.nombre2}</IonCardSubtitle>
-                                </IonCardHeader>
-                            </IonItem>
-                        </IonCard>
-                        <IonCard>
-                            <IonItem routerLink={`/Biographie/${capinfo.id3}`} detail={true}>
-                                <IonImg style={{ height: 150, width: 300 }} src={RobertoClemente} alt='Logo'></IonImg>
-                                <IonCardHeader>
-                                    <IonCardSubtitle>{capinfo.nombre3}</IonCardSubtitle>
-                                </IonCardHeader>
-                            </IonItem>
-                        </IonCard>
+
+                        <p dangerouslySetInnerHTML={ {__html:capinfo.content} }></p>
                     </>
                 ) : (
-                    <div>Message not found</div>
+                    <div>Capsule not found</div>
                 )}
             </IonContent>
+
             <IonFooter>
                 <IonToolbar className="Footer-Color">
                     <div className='Item-Center'>

src/pages/HomePage.tsx

@@ -41,8 +41,8 @@ const HomePage: React.FC = () => {
       </IonHeader>
       <IonContent fullscreen>
         <div className='Item-Center'>
-          <IonCard>
-            <IonItem routerLink={`/ListBiographie`} detail={true}>
+          <IonItem routerLink={`/ListBiographies`} detail={true}>
+            <IonCard>
               <IonCardHeader>
                 <IonCardTitle>Biografías</IonCardTitle>
                 <IonCardSubtitle>Lista de todas las biografías</IonCardSubtitle>

src/pages/ListBiographies.tsx

@@ -1,11 +1,5 @@
 import {
   IonImg,
-  IonCard,
-  IonCardContent,
-  IonCardHeader,
-  IonCardSubtitle,
-  IonCardTitle,
-  IonSearchbar,
   IonContent,
   IonHeader,
   IonPage,
@@ -17,14 +11,11 @@ import {
   IonCol,
   IonButtons,
   IonBackButton,
-  IonItem,
-  IonIcon
 } from '@ionic/react';
 import './ListBiographies.css';
 import { clipboardOutline } from 'ionicons/icons';
 import EnciclopediaPR from '../assets/EnciclopediaPR.png';
-import RobertoClemente from '../assets/RobertoClemente.jpg';
-import ListBio from '../data/Biograph.json';
+import SearchBar from '../components/BiographySearchBar';
 
 const ListBiographies: React.FC = () => {
   return (
@@ -43,31 +34,11 @@ const ListBiographies: React.FC = () => {
           </IonGrid>
         </IonToolbar>
       </IonHeader>
+
       <IonContent fullscreen>
-        <IonSearchbar></IonSearchbar>
-        {
-          ListBio && ListBio.map(listbio => {
-            return (
-              <>
-                <IonCard>
-                  <IonItem routerLink={`/Biographie/${listbio.id}`}>
-                    <IonImg style={{ height: 300, width: 600 }} src={RobertoClemente} alt='Biopic'></IonImg>
-                    <IonCardHeader>
-                      <IonCardTitle>{listbio.title}</IonCardTitle>
-                      <IonCardSubtitle>{listbio.tags}</IonCardSubtitle>
-                    </IonCardHeader><IonCardContent>
-                      {listbio.content}
-                    </IonCardContent>
-                  </IonItem>
-                  <IonItem routerLink={`/Question/${listbio.id}`} detail={true}>
-                    <IonIcon icon={clipboardOutline} />Tomar quiz
-                  </IonItem>
-                </IonCard>
-              </>
-            )
-          })
-        }
+        <SearchBar></SearchBar>
       </IonContent>
+      
       <IonFooter>
         <IonToolbar className="Footer-Color">
           <div className='Item-Center'>

src/pages/ListCapsules.tsx

@@ -1,9 +1,5 @@
 import {
-  IonList,
-  IonItem,
-  IonLabel,
   IonImg,
-  IonSearchbar,
   IonContent,
   IonHeader,
   IonPage,
@@ -14,11 +10,11 @@ import {
   IonRow,
   IonCol,
   IonButtons,
-  IonBackButton
+  IonBackButton,
 } from '@ionic/react';
 import './ListCapsules.css';
 import EnciclopediaPR from '../assets/EnciclopediaPR.png';
-import ListCapsule from '../data/Capsule.json';
+import SearchBar from '../components/CapsuleSearchBar';
 
 const ListCapsules: React.FC = () => {
   return (
@@ -37,22 +33,11 @@ const ListCapsules: React.FC = () => {
           </IonGrid>
         </IonToolbar>
       </IonHeader>
+
       <IonContent fullscreen>
-        <IonSearchbar></IonSearchbar>
-        {
-          ListCapsule && ListCapsule.map(listcap => {
-            return (
-              <>
-                <IonList inset={true}>
-                  <IonItem routerLink={`/Capsule/${listcap.id}`} detail={true}>
-                    <IonLabel>{listcap.title}</IonLabel>
-                  </IonItem>
-                </IonList>
-              </>
-            )
-          })
-        }
+        <SearchBar></SearchBar>
       </IonContent>
+
       <IonFooter>
         <IonToolbar className="Footer-Color">
           <div className='Item-Center'>