Added Search Bar for both capsules and biographies. Small tweaks in code formatting and variable names.

src/App.tsx

@@ -42,16 +42,16 @@ 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">
           <ListCapsules />
         </Route>
-        <Route path="/Capsule">
+        <Route path="/Capsule/:id">
           <Capsule />
         </Route>
         <Route path="/Question">

src/components/BiographySearchBar.tsx

@@ -1,36 +1,56 @@
 import React, { useState } from 'react';
-import { IonItem, IonList, IonSearchbar, IonNavLink} from '@ionic/react';
+import { 
+  IonItem,
+  IonImg,
+  IonList, 
+  IonSearchbar,
+  IonCard, 
+  IonCardHeader,
+  IonCardTitle,
+  IonCardContent,
+  IonCardSubtitle,
+  IonIcon,
+} from '@ionic/react';
 import biographies from '../data/Biograph.json'
-import Biography from '../pages/Biography'
+import { square } from 'ionicons/icons';
 
 function SearchBar() {
-  const data: string [] = [];
 
-    for (var i = 0; i < biographies.length; i++){
-      data.push(biographies[i].title);
-    }
+  let [results, setResults] = useState([...biographies]);
 
-  let [results, setResults] = useState([...data]);
-
-  const handleChange = (ev: Event) => {
+  const filterSearch = (ev: Event) => {
     let query = "";
     const target = ev.target as HTMLIonSearchbarElement;
     if (target) query = target.value!.toLowerCase();
 
-    setResults(data.filter(d => d.toLowerCase().indexOf(query) > -1));
+    setResults(biographies.filter(bio => {
+      return bio.title.toLowerCase().indexOf(query) > -1;
+    })
+    )
   }
 
   return (
     <>
-      <IonSearchbar debounce={500} onIonChange={(ev) => handleChange(ev)}></IonSearchbar>
+      <IonSearchbar debounce={500} onIonChange={(ev) => filterSearch(ev)}></IonSearchbar>
 
       <IonList inset={true}>
         { results.map(result => (
-        <IonNavLink routerDirection="forward" component={() => <Biography/>}>
-          <IonItem button>
-            { result }
-          </IonItem>
-        </IonNavLink>
+          <>
+          <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>
     </>

src/components/CapsuleSearchBar.tsx

@@ -1,36 +1,43 @@
 import React, { useState } from 'react';
-import { IonItem, IonList, IonSearchbar, IonNavLink} from '@ionic/react';
+import { 
+  IonItem, 
+  IonList, 
+  IonSearchbar,
+  IonCard, 
+  IonCardHeader,
+  IonCardTitle,
+} from '@ionic/react';
 import capsules from '../data/Capsule.json'
-import Capsule from '../pages/Capsule'
 
-function SearchBar() {
-  const data: string [] = [];
 
-    for (var i = 0; i < capsules.length; i++){
-      data.push(capsules[i].title);
-    }
+function SearchBar() {
 
-  let [results, setResults] = useState([...data]);
+  let [results, setResults] = useState([...capsules]);
 
-  const handleChange = (ev: Event) => {
+  const filterSearch = (ev: Event) => {
     let query = "";
     const target = ev.target as HTMLIonSearchbarElement;
     if (target) query = target.value!.toLowerCase();
 
-    setResults(data.filter(d => d.toLowerCase().indexOf(query) > -1));
+    setResults(capsules.filter(cap => {
+      return cap.title.toLowerCase().indexOf(query) > -1;
+    })
+    )
   }
 
   return (
     <>
-      <IonSearchbar debounce={500} onIonChange={(ev) => handleChange(ev)}></IonSearchbar>
+      <IonSearchbar debounce={500} onIonChange={(ev) => filterSearch(ev)}></IonSearchbar>
 
       <IonList inset={true}>
         { results.map(result => (
-        <IonNavLink routerDirection="forward" component={() => <Capsule/>}>
-          <IonItem button>
-            { result }
-          </IonItem>
-        </IonNavLink>
+            <IonCard>
+            <IonItem button routerLink={`/Capsule/${result.id}`}>
+              <IonCardHeader>
+                <IonCardTitle>{result.title}</IonCardTitle>
+              </IonCardHeader>
+            </IonItem>
+          </IonCard>
         ))}
       </IonList>
     </>
@@ -38,17 +45,22 @@ function SearchBar() {
 }
 export default SearchBar;
 
-/*
- <IonLabel>Breve Historia del baile en Puerto Rico</IonLabel>
-<IonNavLink routerDirection="forward" component={() => <Capsule />}>
-<IonButton>Visitar</IonButton>
-*/
 
 /*
-    <IonItem routerLink={`/message/${message.id}`} detail={true}>
-      <div slot="start" className="dot dot-unread"></div>
-      <IonLabel className="ion-text-wrap">
-
-      </IonLabel>
-    </IonItem>
+             <>
+                <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,8 +1,8 @@
 [
     {
         "id": 0,
-        "title": "Breve Historia del baile en Puerto Rico",
-        "content": "Han existido distintas formas de danzar o bailar desde la historia muy antigua de la humanidad. En Puerto Rico el primer baile documentado por los cronistas de Indias es el llamado areito, con las variantes de escritura areyto y areíto. Era un baile coreado y musicalizado, dirigido por un guía. Esta manifestación de movimiento corporal, que Gonzalo Fernández de Oviedo llamó “bailar cantando”, fue común en los grupos indígenas de la región caribeña.",
+        "title": "Grandes deportistas puertorriqueños",
+        "content": "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.",
         "photo": "../assets/BombaPuertorriquena.jpg"
     },
     {

src/data/CapsuleInfo.ts

@@ -0,0 +1,12 @@
+import ListCapsule from '../data/Capsule.json';
+
+export interface CapsuleInfo {
+    id: number;
+    title: string;
+    content: string;
+    photo: string;
+}
+
+export const getCapsules = () => ListCapsule;
+
+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 ? (
                     <>
@@ -62,7 +63,7 @@ const Biography: React.FC = () => {
                         </IonItem>
                     </>
                 ) : (
-                    <div>Message not found</div>
+                    <div>Biography not found</div>
                 )}
             </IonContent>
 

src/pages/Capsule.tsx

@@ -5,23 +5,29 @@ import {
     IonTitle,
     IonToolbar,
     IonFooter,
-    IonNavLink,
     IonImg,
     IonGrid,
     IonRow,
     IonCol,
-    IonButton,
     IonButtons,
-    IonBackButton
+    IonBackButton,
+    useIonViewWillEnter
 } from '@ionic/react';
-import React from 'react';
+import { useParams } from 'react-router';
+import React, { useState } from 'react';
 import './Capsule.css';
-import Biography from './Biography';
+import { CapsuleInfo, getCapsule} from '../data/CapsuleInfo';
 import EnciclopediaPR from '../assets/EnciclopediaPR.png';
-import Bomba from '../assets/BombaPuertorriquena.jpg';
-import RobertoClemente from '../assets/RobertoClemente.jpg';
 
 const Capsule: React.FC = () => {
+    const [capinfo, setCapsule] = useState<CapsuleInfo>();
+    const params = useParams<{ id: string }>();
+
+    useIonViewWillEnter(() => {
+        const capsule = getCapsule(parseInt(params.id, 10));
+        setCapsule(capsule);
+    });
+
     return (
         <IonPage>
             <IonHeader>
@@ -38,25 +44,20 @@ const Capsule: React.FC = () => {
                     </IonGrid>
                 </IonToolbar>
             </IonHeader>
-            <IonContent fullscreen className="ion-padding">
-                <IonImg style={{ height: 300, width: 600 }} src={Bomba} alt='Logo'></IonImg>
-                <h1>Breve Historia del baile en Puerto Rico</h1>
 
-                <p>Han existido distintas formas de danzar o bailar desde la historia muy antigua de la humanidad. En Puerto Rico el primer baile documentado por los cronistas de Indias es el llamado areito, con las variantes de escritura areyto y areíto. Era un baile coreado y musicalizado, dirigido por un guía. Esta manifestación de movimiento corporal, que Gonzalo Fernández de Oviedo llamó “bailar cantando”, fue común en los grupos indígenas de la región caribeña.</p>
-                <p>Se ejecutaba en hileras, con los participantes cogidos de las manos, de los brazos o, según Bartolomé de las Casas, “los brazos de los unos puestos sobre los hombros de los otros”. Según Pedro Mártir de Anglería, los participantes llevaban caracoles en los brazos y piernas, con los que producían “un ruido agradable”. Narraban una historia y el guía indicaba qué pasos y cantos se repetirían hasta que ésta culminara.</p>
-                <p>Aunque la llegada de los conquistadores españoles produjo una rápida desaparición de la población indígena y de cualquier expresión autóctona que las autoridades consideraran pagana, Fray Iñigo Abbad y Lasierra afirmaba en 1789 que “la diversión más apreciable para estos isleños son los bailes; los tienen sin más motivo que el de pasar el tiempo y rara vez faltan en una cosa u otra”.</p>
-
-                <h2>Information about important figures</h2>
-                <IonGrid fixed={true}>
-                    <IonRow>
-                        <IonImg style={{ height: 150, width: 300 }} src={RobertoClemente} alt='Logo'></IonImg>
-                        <IonNavLink routerDirection="forward" component={() => <Biography />} >
-                            <IonButton color="light">Roberto Clemente</IonButton>
-                        </IonNavLink>
-                    </IonRow>
-                </IonGrid>
+            <IonContent fullscreen className="ion-padding">
+            {capinfo ? (
+                    <>
+                        <IonImg style={{ height: 300, width: 600 }} src={capinfo.photo} alt='Logo'></IonImg>
+                        <h1>{capinfo.title}</h1>
 
+                        <p>{capinfo.content}</p>
+                    </>
+                ) : (
+                    <div>Capsule not found</div>
+                )}
             </IonContent>
+
             <IonFooter>
                 <IonToolbar className="Footer-Color">
                     <div className='Item-Center'>

src/pages/HomePage.tsx

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

src/pages/ListBiographies.tsx

@@ -1,11 +1,5 @@
 import {
   IonImg,
-  IonCard,
-  IonCardContent,
-  IonCardHeader,
-  IonCardSubtitle,
-  IonCardTitle,
-  IonSearchbar,
   IonContent,
   IonHeader,
   IonPage,
@@ -17,14 +11,9 @@ import {
   IonCol,
   IonButtons,
   IonBackButton,
-  IonItem,
-  IonIcon
 } from '@ionic/react';
 import './ListBiographies.css';
-import { square } 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 = () => {
@@ -44,31 +33,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='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>
-              </>
-            )
-          })
-        }
+        <SearchBar></SearchBar>
       </IonContent>
+      
       <IonFooter>
         <IonToolbar className="Footer-Color">
           <div className='Item-Center'>

src/pages/ListCapsules.tsx

@@ -10,7 +10,7 @@ import {
   IonRow,
   IonCol,
   IonButtons,
-  IonBackButton
+  IonBackButton,
 } from '@ionic/react';
 import './ListCapsules.css';
 import EnciclopediaPR from '../assets/EnciclopediaPR.png';
@@ -33,20 +33,11 @@ const ListCapsules: React.FC = () => {
           </IonGrid>
         </IonToolbar>
       </IonHeader>
+
       <IonContent fullscreen>
-        <IonSearchbar></IonSearchbar>
-        <IonList inset={true}>
-          <IonItem routerLink={`/Capsule`} detail={true}>
-            <IonLabel>Breve Historia del baile en Puerto Rico</IonLabel>
-          </IonItem>
-          <IonItem>
-            <IonLabel>Cápsula#2</IonLabel>
-          </IonItem>
-          <IonItem>
-            <IonLabel>Cápsula#3</IonLabel>
-          </IonItem>
-        </IonList>
+        <SearchBar></SearchBar>
       </IonContent>
+
       <IonFooter>
         <IonToolbar className="Footer-Color">
           <div className='Item-Center'>