Implemented Capsule Search Bar and Biography Search Bar. Work needed on routing and props data handling.

src/App.tsx

@@ -1,5 +1,8 @@
-import { IonNav, setupIonicReact } from '@ionic/react';
+import {Redirect, Route } from 'react-router-dom';
+import {IonReactRouter } from '@ionic/react-router';
+import {IonNav, setupIonicReact, IonApp, IonRouterOutlet } from '@ionic/react';
 import HomePage from './pages/HomePage';
+import Capsule from './pages/Capsule'
 
 /* Core CSS required for Ionic components to work properly */
 import '@ionic/react/css/core.css';
@@ -24,6 +27,22 @@ setupIonicReact();
 
 const App: React.FC = () => (
   <IonNav root={() => <HomePage />}></IonNav>
+  /*<IonApp>
+  <IonReactRouter>
+    <IonRouterOutlet>
+      <Route path="/" exact={true}>
+        <Redirect to="/home" />
+      </Route>
+      <Route path="/home" exact={true}>
+        <HomePage />
+      </Route>
+      <Route path="/capsule">
+         <CapsulePage />
+      </Route>
+    </IonRouterOutlet>
+  </IonReactRouter>
+</IonApp>*/
+  
 );
 
 export default App;

src/components/BiographySearchBar.tsx

@@ -0,0 +1,39 @@
+import React, { useState } from 'react';
+import { IonItem, IonList, IonSearchbar, IonNavLink} from '@ionic/react';
+import biographies from '../data/Biograph.json'
+import Biography from '../pages/Biography'
+
+function SearchBar() {
+  const data: string [] = [];
+
+    for (var i = 0; i < biographies.length; i++){
+      data.push(biographies[i].title);
+    }
+
+  let [results, setResults] = useState([...data]);
+
+  const handleChange = (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));
+  }
+
+  return (
+    <>
+      <IonSearchbar debounce={500} onIonChange={(ev) => handleChange(ev)}></IonSearchbar>
+
+      <IonList inset={true}>
+        { results.map(result => (
+        <IonNavLink routerDirection="forward" component={() => <Biography/>}>
+          <IonItem button>
+            { result }
+          </IonItem>
+        </IonNavLink>
+        ))}
+      </IonList>
+    </>
+  );
+}
+export default SearchBar;

src/components/CapsuleSearchBar.tsx

@@ -0,0 +1,54 @@
+import React, { useState } from 'react';
+import { IonItem, IonList, IonSearchbar, IonNavLink} 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);
+    }
+
+  let [results, setResults] = useState([...data]);
+
+  const handleChange = (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));
+  }
+
+  return (
+    <>
+      <IonSearchbar debounce={500} onIonChange={(ev) => handleChange(ev)}></IonSearchbar>
+
+      <IonList inset={true}>
+        { results.map(result => (
+        <IonNavLink routerDirection="forward" component={() => <Capsule/>}>
+          <IonItem button>
+            { result }
+          </IonItem>
+        </IonNavLink>
+        ))}
+      </IonList>
+    </>
+  );
+}
+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>
+*/

src/components/SearchBar.tsx

@@ -1,28 +0,0 @@
-import React, { useState } from 'react';
-import { IonItem, IonList, IonSearchbar } from '@ionic/react';
-
-function SearchBar() {
-  const data = ['Breve Historia del baile en Puerto Rico', 'Cápsula#2', 'Cápsula#3'];
-  let [results, setResults] = useState([...data]);
-
-  const handleChange = (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));
-  }
-
-  return (
-    <>
-      <IonSearchbar debounce={1000} onIonChange={(ev) => handleChange(ev)}></IonSearchbar>
-
-      <IonList inset={true}>
-        { results.map(result => (
-          <IonItem>{ result }</IonItem>
-        ))}
-      </IonList>
-    </>
-  );
-}
-export default SearchBar;

src/data/Capsule.json

@@ -0,0 +1,20 @@
+[
+    {
+        "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.",
+        "photo": "../assets/BombaPuertorriquena.jpg"
+    },
+    {
+        "id": 1,
+        "title": "Capsule#2",
+        "content": "Content",
+        "photo": "../assets/BombaPuertorriquena.jpg"
+    },
+    {
+        "id": 2,
+        "title": "Capsule#3",
+        "content": "Content",
+        "photo": "../assets/BombaPuertorriquena.jpg"
+    }
+]

src/pages/ListBiographies.tsx

@@ -28,6 +28,7 @@ import HomePage from './HomePage';
 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 (
@@ -47,8 +48,24 @@ const ListBiographies: React.FC = () => {
         </IonToolbar>
       </IonHeader>
       <IonContent fullscreen>
-        <IonSearchbar></IonSearchbar>
+        <SearchBar></SearchBar>
+      </IonContent>
+      <IonFooter>
+        <IonToolbar>
+          <IonNavLink routerDirection="forward" component={() => <HomePage />}>
+            <IonTabButton tab="HomePage" href="/HomePage">
+              <IonIcon icon={arrowBack} />
+            </IonTabButton>
+          </IonNavLink>
+        </IonToolbar>
+      </IonFooter>
+    </IonPage>
+  );
+};
+
+export default ListBiographies;
 
+/*
         {
           ListBio && ListBio.map(listbio => {
             return (
@@ -74,20 +91,4 @@ const ListBiographies: React.FC = () => {
             )
           })
         }
-
-
-      </IonContent>
-      <IonFooter>
-        <IonToolbar>
-          <IonNavLink routerDirection="forward" component={() => <HomePage />}>
-            <IonTabButton tab="HomePage" href="/HomePage">
-              <IonIcon icon={arrowBack} />
-            </IonTabButton>
-          </IonNavLink>
-        </IonToolbar>
-      </IonFooter>
-    </IonPage>
-  );
-};
-
-export default ListBiographies;
+*/

src/pages/ListCapsules.tsx

@@ -11,14 +11,16 @@ import {
   IonIcon,
   IonGrid,
   IonRow,
-  IonCol
+  IonCol,
+  IonList,
+  IonItem
 } from '@ionic/react';
 import { arrowBack } from 'ionicons/icons';
 import './ListCapsules.css';
 import HomePage from './HomePage';
 // import Capsule from './Capsule'
 import EnciclopediaPR from '../assets/EnciclopediaPR.png';
-import SearchBar from '../components/SearchBar';
+import SearchBar from '../components/CapsuleSearchBar';
 
 const ListCapsules: React.FC = () => {
   return (