Browse Source

Added Search Bar functionality to Capsules list.

Alejandro Soledad 2 years ago
parent
commit
80dc4da8ce
3 changed files with 31 additions and 21 deletions
  1. 0
    0
      src/components/SearchBar.css
  2. 28
    0
      src/components/SearchBar.tsx
  3. 3
    21
      src/pages/ListCapsules.tsx

+ 0
- 0
src/components/SearchBar.css View File


+ 28
- 0
src/components/SearchBar.tsx View File

1
+import React, { useState } from 'react';
2
+import { IonItem, IonList, IonSearchbar } from '@ionic/react';
3
+
4
+function SearchBar() {
5
+  const data = ['Breve Historia del baile en Puerto Rico', 'Cápsula#2', 'Cápsula#3'];
6
+  let [results, setResults] = useState([...data]);
7
+
8
+  const handleChange = (ev: Event) => {
9
+    let query = "";
10
+    const target = ev.target as HTMLIonSearchbarElement;
11
+    if (target) query = target.value!.toLowerCase();
12
+
13
+    setResults(data.filter(d => d.toLowerCase().indexOf(query) > -1));
14
+  }
15
+
16
+  return (
17
+    <>
18
+      <IonSearchbar debounce={1000} onIonChange={(ev) => handleChange(ev)}></IonSearchbar>
19
+
20
+      <IonList inset={true}>
21
+        { results.map(result => (
22
+          <IonItem>{ result }</IonItem>
23
+        ))}
24
+      </IonList>
25
+    </>
26
+  );
27
+}
28
+export default SearchBar;

+ 3
- 21
src/pages/ListCapsules.tsx View File

1
 import {
1
 import {
2
-  IonList,
3
-  IonItem,
4
-  IonLabel,
5
   IonImg,
2
   IonImg,
6
-  IonSearchbar,
7
   IonContent,
3
   IonContent,
8
   IonHeader,
4
   IonHeader,
9
   IonPage,
5
   IonPage,
10
   IonTitle,
6
   IonTitle,
11
   IonToolbar,
7
   IonToolbar,
12
-  IonButton,
13
   IonNavLink,
8
   IonNavLink,
14
   IonFooter,
9
   IonFooter,
15
   IonTabButton,
10
   IonTabButton,
21
 import { arrowBack } from 'ionicons/icons';
16
 import { arrowBack } from 'ionicons/icons';
22
 import './ListCapsules.css';
17
 import './ListCapsules.css';
23
 import HomePage from './HomePage';
18
 import HomePage from './HomePage';
24
-import Capsule from './Capsule'
19
+// import Capsule from './Capsule'
25
 import EnciclopediaPR from '../assets/EnciclopediaPR.png';
20
 import EnciclopediaPR from '../assets/EnciclopediaPR.png';
21
+import SearchBar from '../components/SearchBar';
26
 
22
 
27
 const ListCapsules: React.FC = () => {
23
 const ListCapsules: React.FC = () => {
28
   return (
24
   return (
42
         </IonToolbar>
38
         </IonToolbar>
43
       </IonHeader>
39
       </IonHeader>
44
       <IonContent fullscreen>
40
       <IonContent fullscreen>
45
-        <IonSearchbar></IonSearchbar>
46
-        <IonList inset={true}>
47
-          <IonItem>
48
-            <IonLabel>Breve Historia del baile en Puerto Rico</IonLabel>
49
-            <IonNavLink routerDirection="forward" component={() => <Capsule />}>
50
-              <IonButton>Visitar</IonButton>
51
-            </IonNavLink>
52
-          </IonItem>
53
-          <IonItem>
54
-            <IonLabel>Cápsula#2</IonLabel>
55
-          </IonItem>
56
-          <IonItem>
57
-            <IonLabel>Cápsula#3</IonLabel>
58
-          </IonItem>
59
-        </IonList>
41
+      <SearchBar></SearchBar>
60
       </IonContent>
42
       </IonContent>
61
       <IonFooter>
43
       <IonFooter>
62
         <IonToolbar>
44
         <IonToolbar>