121 lines
3.0 KiB
JavaScript
121 lines
3.0 KiB
JavaScript
import {
|
|
IonBackButton,
|
|
IonButton,
|
|
IonButtons,
|
|
IonCol,
|
|
IonContent,
|
|
IonGrid,
|
|
IonHeader,
|
|
IonImg,
|
|
IonList,
|
|
IonNote,
|
|
IonPage,
|
|
IonRow,
|
|
IonSearchbar,
|
|
IonText,
|
|
IonTitle,
|
|
IonToolbar,
|
|
useIonLoading,
|
|
useIonViewDidEnter,
|
|
} from '@ionic/react';
|
|
import { useState } from 'react';
|
|
import { useRef } from 'react';
|
|
import styles from './Categories.module.scss';
|
|
import { performSearch } from '../utils';
|
|
import { RecipeListItem } from '../components/RecipeListItem';
|
|
|
|
const Search = () => {
|
|
const searchRef = useRef(null);
|
|
const [searchResults, setSearchResults] = useState([]);
|
|
const [showLoader, hideLoader] = useIonLoading();
|
|
|
|
useIonViewDidEnter(() => {
|
|
searchRef.current.setFocus();
|
|
});
|
|
|
|
const search = async () => {
|
|
showLoader({
|
|
cssClass: 'customLoader',
|
|
message: 'Searching...',
|
|
duration: 9999999,
|
|
spinner: 'dots',
|
|
});
|
|
|
|
const searchTerm = searchRef.current.value;
|
|
const data = await performSearch(searchTerm);
|
|
|
|
setSearchResults(data.hits);
|
|
|
|
setTimeout(() => {
|
|
hideLoader();
|
|
}, 300);
|
|
};
|
|
|
|
return (
|
|
<IonPage>
|
|
<IonHeader>
|
|
<IonToolbar>
|
|
<IonTitle>Search Recipes</IonTitle>
|
|
<IonButtons slot="start">
|
|
<IonBackButton color="main" text="Categories" />
|
|
</IonButtons>
|
|
</IonToolbar>
|
|
</IonHeader>
|
|
|
|
<IonContent>
|
|
<div className={styles.searchArea}>
|
|
<IonGrid>
|
|
<IonRow>
|
|
<IonCol size="9">
|
|
<IonSearchbar ref={searchRef} placeholder="Try 'Chicken Piccata'" />
|
|
</IonCol>
|
|
<IonCol size="3">
|
|
<IonButton
|
|
className={styles.searchButton}
|
|
expand="block"
|
|
color="main"
|
|
onClick={search}
|
|
>
|
|
Search
|
|
</IonButton>
|
|
</IonCol>
|
|
</IonRow>
|
|
</IonGrid>
|
|
</div>
|
|
|
|
{searchResults.length > 0 && (
|
|
<IonList>
|
|
{searchResults.map((result, index) => {
|
|
const { recipe } = result;
|
|
|
|
return <RecipeListItem recipe={recipe} key={`result_${index}`} fromSearch={true} />;
|
|
})}
|
|
</IonList>
|
|
)}
|
|
|
|
{searchResults.length < 1 && (
|
|
<>
|
|
<IonRow className="ion-justify-content-center ion-text-center ion-margin-top ion-padding-top">
|
|
<IonCol size="8">
|
|
<IonText>Search for a recipe then select from the list to view it</IonText>
|
|
|
|
<IonNote>
|
|
<p>For development purposes, only 20 results will be returned</p>
|
|
</IonNote>
|
|
</IonCol>
|
|
</IonRow>
|
|
|
|
<IonRow className="ion-justify-content-center">
|
|
<IonCol size="8">
|
|
<IonImg src="/assets/DemoRecipeApp/placeholder.png" />
|
|
</IonCol>
|
|
</IonRow>
|
|
</>
|
|
)}
|
|
</IonContent>
|
|
</IonPage>
|
|
);
|
|
};
|
|
|
|
export default Search;
|