feat: add search contact feature in PersonalContact page

akmalhisyammm · Dec 1, 2021 · 102d1c9 · 102d1c9
1 parent 0f14af5
commit 102d1c9
Show file tree

Hide file tree

Showing 9 changed files with 41 additions and 34 deletions.
diff --git a/src/components/Alert.tsx b/src/components/Alert.tsx
@@ -5,16 +5,16 @@ type AlertProps = {
   isOpen: boolean;
   header: string;
   message: string;
-  actionHandler: () => void;
-  cancelHandler: (isCancel: boolean) => void;
+  onActionClick: () => void;
+  onCancelClick: (isCancel: boolean) => void;
 };
 
 const Alert: React.FC<AlertProps> = ({
   isOpen,
   header,
   message,
-  actionHandler,
-  cancelHandler,
+  onActionClick,
+  onCancelClick,
 }) => {
   return (
     <IonAlert
@@ -26,10 +26,10 @@ const Alert: React.FC<AlertProps> = ({
           text: 'No',
           role: 'cancel',
           handler: () => {
-            cancelHandler(false);
+            onCancelClick(false);
           },
         },
-        { text: 'Yes', handler: actionHandler },
+        { text: 'Yes', handler: onActionClick },
       ]}
     />
   );

diff --git a/src/contexts/emergencyService/EmergencyServiceProvider.tsx b/src/contexts/emergencyService/EmergencyServiceProvider.tsx
@@ -8,11 +8,11 @@ import {
   pln,
   polisi,
 } from 'assets';
-import { EmergencyService } from 'types/emergencyService';
+import { EmergencyServiceData } from 'types/emergencyService';
 import { EmergencyServiceContext } from './emergencyService.context';
 
 export const EmergencyServiceProvider: React.FC = ({ children }) => {
-  const services: EmergencyService[] = [
+  const services: EmergencyServiceData[] = [
     {
       id: 'ES01',
       name: 'Call Center',

diff --git a/src/contexts/emergencyService/emergencyService.context.ts b/src/contexts/emergencyService/emergencyService.context.ts
@@ -1,8 +1,8 @@
 import { createContext } from 'react';
-import { EmergencyService } from 'types/emergencyService';
+import { EmergencyServiceData } from 'types/emergencyService';
 
 interface Context {
-  services: EmergencyService[];
+  services: EmergencyServiceData[];
 }
 
 export const EmergencyServiceContext = createContext<Context>({ services: [] });
diff --git a/src/contexts/personalContact/PersonalContactProvider.tsx b/src/contexts/personalContact/PersonalContactProvider.tsx
@@ -1,16 +1,16 @@
 import { useState } from 'react';
-import { PersonalContact } from 'types/personalContact';
+import { PersonalContactData } from 'types/personalContact';
 import { PersonalContactContext } from './personalContact.context';
 
 export const PersonalContactProvider: React.FC = ({ children }) => {
-  const [contacts, setContacts] = useState<PersonalContact[]>([]);
+  const [contacts, setContacts] = useState<PersonalContactData[]>([]);
 
   const addContact = (name: string, phoneNumber: string) => {
     const currIdNumber = contacts.length
       ? contacts[contacts.length - 1].id.replace(/[^0-9]/g, '')
       : 0;
 
-    const newContact: PersonalContact = {
+    const newContact: PersonalContactData = {
       id: 'PC' + (+currIdNumber + 1),
       name: name,
       phoneNumber: phoneNumber,
@@ -22,7 +22,7 @@ export const PersonalContactProvider: React.FC = ({ children }) => {
   };
 
   const updateContact = (id: string, name: string, phoneNumber: string) => {
-    const updateContact: PersonalContact = {
+    const updateContact: PersonalContactData = {
       id: id,
       name: name,
       phoneNumber: phoneNumber,

diff --git a/src/contexts/personalContact/personalContact.context.ts b/src/contexts/personalContact/personalContact.context.ts
@@ -1,8 +1,8 @@
 import { createContext } from 'react';
-import { PersonalContact } from 'types/personalContact';
+import { PersonalContactData } from 'types/personalContact';
 
 interface Context {
-  contacts: PersonalContact[];
+  contacts: PersonalContactData[];
   addContact: (name: string, phoneNumber: string) => void;
   updateContact: (id: string, name: string, phoneNumber: string) => void;
   deleteContact: (id: string) => void;

diff --git a/src/pages/main/EmergencyLocation.tsx b/src/pages/main/EmergencyLocation.tsx
@@ -108,13 +108,7 @@ const EmergencyLocation: React.FC = () => {
           }}
         >
           <IonChip outline style={{ borderColor: '#ffffff' }}>
-            Relevansi
-          </IonChip>
-          <IonChip outline style={{ borderColor: '#ffffff' }}>
-            Sedang Buka
-          </IonChip>
-          <IonChip outline style={{ borderColor: '#ffffff' }}>
-            Rating Tertinggi
+            Rumah Sakit
           </IonChip>
         </div>
       </IonToolbar>

diff --git a/src/pages/main/PersonalContact.tsx b/src/pages/main/PersonalContact.tsx
@@ -21,10 +21,11 @@ import {
   IonToolbar,
 } from '@ionic/react';
 import { add, create, trash } from 'ionicons/icons';
-import { useState, useContext, useRef } from 'react';
+import { useState, useContext, useRef, useEffect } from 'react';
 import { CallNumber } from '@ionic-native/call-number';
 
 import { PersonalContactContext } from 'contexts/personalContact';
+import { PersonalContactData } from 'types/personalContact';
 import Layout from 'components/layout';
 import Toast from 'components/Toast';
 import Alert from 'components/Alert';
@@ -33,18 +34,29 @@ const PersonalContact: React.FC = () => {
   const [startDeleting, setStartDeleting] = useState<boolean>(false);
   const [isEditing, setIsEditing] = useState<boolean>(false);
   const [toastMessage, setToastMessage] = useState<string>('');
-  const [selectedContact, setSelectedContact] = useState<{
-    id: string;
-    name: string;
-    phoneNumber: string;
-  } | null>();
+  const [selectedContact, setSelectedContact] =
+    useState<PersonalContactData | null>();
+  const [searchQuery, setSearchQuery] = useState<string>('');
+  const [filteredSearch, setFilteredSearch] = useState<PersonalContactData[]>(
+    []
+  );
 
   const contactsCtx = useContext(PersonalContactContext);
 
   const slidingOptionsRef = useRef<HTMLIonItemSlidingElement>(null);
   const nameRef = useRef<HTMLIonInputElement>(null);
   const phoneNumberRef = useRef<HTMLIonInputElement>(null);
 
+  useEffect(() => {
+    const tempSearchResult = contactsCtx.contacts.filter((contact) =>
+      contact.name.toLowerCase().includes(searchQuery.toLowerCase())
+    );
+
+    console.log(searchQuery);
+
+    setFilteredSearch([...tempSearchResult]);
+  }, [searchQuery, contactsCtx.contacts]);
+
   const callContactHandler = (phoneNumber: string) => {
     try {
       CallNumber.callNumber(phoneNumber, true);
@@ -126,8 +138,8 @@ const PersonalContact: React.FC = () => {
         isOpen={startDeleting}
         header="Apakah Anda yakin?"
         message="Apakah Anda ingin menghapus kontak ini?"
-        actionHandler={deleteContactHandler}
-        cancelHandler={setStartDeleting}
+        onActionClick={deleteContactHandler}
+        onCancelClick={setStartDeleting}
       />
 
       <Toast message={toastMessage} setMessage={setToastMessage} />
@@ -193,6 +205,7 @@ const PersonalContact: React.FC = () => {
       <Layout title="Kontak Darurat">
         <IonToolbar color="primary">
           <IonSearchbar
+            onIonChange={(e) => setSearchQuery(e.detail.value!)}
             color="light"
             placeholder="Cari Kontak..."
             style={{
@@ -206,7 +219,7 @@ const PersonalContact: React.FC = () => {
 
         <IonList>
           {contactsCtx.contacts.length ? (
-            contactsCtx.contacts.map((contact) => (
+            filteredSearch.map((contact) => (
               <IonItemSliding key={contact.id} ref={slidingOptionsRef}>
                 <IonItemOptions side="end">
                   <IonItemOption

diff --git a/src/types/emergencyService.ts b/src/types/emergencyService.ts
@@ -1,4 +1,4 @@
-export interface EmergencyService {
+export interface EmergencyServiceData {
   id: string;
   name: string;
   image: string;

diff --git a/src/types/personalContact.ts b/src/types/personalContact.ts
@@ -1,4 +1,4 @@
-export interface PersonalContact {
+export interface PersonalContactData {
   id: string;
   name: string;
   phoneNumber: string;