update demo-recipe-app,
This commit is contained in:
louiscklaw
@@ -26,7 +26,7 @@ import { BookmarkStore } from '../store';
|
|||||||
|
|
||||||
const Categories = () => {
|
const Categories = () => {
|
||||||
const router = useIonRouter();
|
const router = useIonRouter();
|
||||||
const pageRef = useRef();
|
const pageRef = useRef(null);
|
||||||
const [recipeCategories, setRecipeCategories] = useState([]);
|
const [recipeCategories, setRecipeCategories] = useState([]);
|
||||||
const bookmarks = useStoreState(BookmarkStore, getBookmarks);
|
const bookmarks = useStoreState(BookmarkStore, getBookmarks);
|
||||||
|
|
||||||
|
|||||||
@@ -39,7 +39,7 @@ import { useStoreState } from 'pullstate';
|
|||||||
import { getBookmarks } from '../store/Selectors';
|
import { getBookmarks } from '../store/Selectors';
|
||||||
|
|
||||||
const Recipe = () => {
|
const Recipe = () => {
|
||||||
const pageRef = useRef();
|
const pageRef = useRef(null);
|
||||||
const { state } = useLocation();
|
const { state } = useLocation();
|
||||||
const [recipe, setRecipe] = useState([]);
|
const [recipe, setRecipe] = useState([]);
|
||||||
const [fromSearch, setFromSearch] = useState(false);
|
const [fromSearch, setFromSearch] = useState(false);
|
||||||
|
|||||||
@@ -25,7 +25,7 @@ import { performSearch } from '../utils';
|
|||||||
import { RecipeListItem } from '../components/RecipeListItem';
|
import { RecipeListItem } from '../components/RecipeListItem';
|
||||||
|
|
||||||
const Search = () => {
|
const Search = () => {
|
||||||
const searchRef = useRef();
|
const searchRef = useRef(null);
|
||||||
const [searchResults, setSearchResults] = useState([]);
|
const [searchResults, setSearchResults] = useState([]);
|
||||||
const [showLoader, hideLoader] = useIonLoading();
|
const [showLoader, hideLoader] = useIonLoading();
|
||||||
|
|
||||||
|
|||||||
@@ -0,0 +1,16 @@
|
|||||||
|
import { IonItem, IonLabel } from "@ionic/react";
|
||||||
|
import styles from "./Ingredient.module.scss";
|
||||||
|
|
||||||
|
export const Ingredient = ({ ingredient }) => {
|
||||||
|
|
||||||
|
return (
|
||||||
|
|
||||||
|
<IonItem lines="full" className={ styles.ingredientItem }>
|
||||||
|
<img alt="ingredient" src={ ingredient.image } className={ styles.ingredientImage } />
|
||||||
|
<IonLabel className="ion-text-wrap ion-margin-start">
|
||||||
|
<h3>{ ingredient.text }</h3>
|
||||||
|
<p>{ ingredient.weight.toFixed(2) }g</p>
|
||||||
|
</IonLabel>
|
||||||
|
</IonItem>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,13 @@
|
|||||||
|
.ingredientImage {
|
||||||
|
|
||||||
|
height: 3rem;
|
||||||
|
width: 3rem;
|
||||||
|
border-radius: 10px;
|
||||||
|
border: 1px solid rgb(172, 172, 172);
|
||||||
|
}
|
||||||
|
|
||||||
|
.ingredientItem {
|
||||||
|
|
||||||
|
--padding-top: 1rem;
|
||||||
|
--padding-bottom: 1rem;
|
||||||
|
}
|
||||||
@@ -0,0 +1,30 @@
|
|||||||
|
import { IonButton, IonButtons, IonContent, IonGrid, IonHeader, IonList, IonPage, IonRow, IonTitle, IonToolbar } from "@ionic/react"
|
||||||
|
import { Ingredient } from "./Ingredient";
|
||||||
|
|
||||||
|
const IngredientsModal = ({ dismiss, ingredients}) => {
|
||||||
|
|
||||||
|
return (
|
||||||
|
|
||||||
|
<IonPage>
|
||||||
|
<IonHeader>
|
||||||
|
<IonToolbar>
|
||||||
|
<IonTitle>View Ingredients</IonTitle>
|
||||||
|
<IonButtons slot="start">
|
||||||
|
<IonButton color="main" onClick={ dismiss }>Close</IonButton>
|
||||||
|
</IonButtons>
|
||||||
|
</IonToolbar>
|
||||||
|
</IonHeader>
|
||||||
|
|
||||||
|
<IonContent>
|
||||||
|
<IonList>
|
||||||
|
{ ingredients.map((ingredient, index) => {
|
||||||
|
|
||||||
|
return <Ingredient key={ `ingredient_${ index }` } ingredient={ ingredient } />;
|
||||||
|
})}
|
||||||
|
</IonList>
|
||||||
|
</IonContent>
|
||||||
|
</IonPage>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default IngredientsModal;
|
||||||
@@ -0,0 +1,48 @@
|
|||||||
|
import { IonButton, IonButtons, IonCardSubtitle, IonCol, IonContent, IonGrid, IonHeader, IonPage, IonRow, IonTitle, IonToolbar } from "@ionic/react"
|
||||||
|
import NutritionalFact from "./NutritionalFact";
|
||||||
|
|
||||||
|
const NutritionModal = ({ dismiss, recipe }) => {
|
||||||
|
|
||||||
|
return (
|
||||||
|
|
||||||
|
<IonPage>
|
||||||
|
<IonHeader>
|
||||||
|
<IonToolbar>
|
||||||
|
<IonTitle>View Nutrition</IonTitle>
|
||||||
|
<IonButtons slot="start">
|
||||||
|
<IonButton color="main" onClick={ dismiss }>Close</IonButton>
|
||||||
|
</IonButtons>
|
||||||
|
</IonToolbar>
|
||||||
|
</IonHeader>
|
||||||
|
|
||||||
|
<IonContent>
|
||||||
|
|
||||||
|
{ (recipe && recipe.digest) &&
|
||||||
|
|
||||||
|
<IonGrid>
|
||||||
|
<IonRow>
|
||||||
|
<IonCol size="12">
|
||||||
|
<IonCardSubtitle className="ion-text-center" color="main">
|
||||||
|
Based on a serving size of { recipe.totalWeight.toFixed(0) }g
|
||||||
|
</IonCardSubtitle>
|
||||||
|
<NutritionalFact type="calories" amount={ recipe.calories.toFixed(0) } />
|
||||||
|
<NutritionalFact type="fat" amount={ recipe.digest[0].total.toFixed(0) } />
|
||||||
|
<NutritionalFact type="trans_fat" amount={ recipe.digest[0].sub[1].total.toFixed(0) } inset={ true } />
|
||||||
|
<NutritionalFact type="saturated_fat" amount={ recipe.digest[0].sub[0].total.toFixed(0) } inset={ true } />
|
||||||
|
<NutritionalFact type="polyunsaturated_fat" amount={ recipe.digest[0].sub[3].total.toFixed(0) } inset={ true } />
|
||||||
|
<NutritionalFact type="monounsaturated_fat" amount={ recipe.digest[0].sub[2].total.toFixed(0) } inset={ true } />
|
||||||
|
<NutritionalFact type="carbs" amount={ recipe.digest[1].total.toFixed(0) } />
|
||||||
|
<NutritionalFact type="sugar" amount={ recipe.digest[1].sub[2].total.toFixed(0) } inset={ true } />
|
||||||
|
<NutritionalFact type="fibre" amount={ recipe.digest[1].sub[1].total.toFixed(0) } inset={ true } />
|
||||||
|
<NutritionalFact type="sugars_added" amount={ recipe.digest[1].sub[3].total.toFixed(0) } inset={ true } />
|
||||||
|
<NutritionalFact type="protein" amount={ recipe.digest[2].total.toFixed(0) } />
|
||||||
|
</IonCol>
|
||||||
|
</IonRow>
|
||||||
|
</IonGrid>
|
||||||
|
}
|
||||||
|
</IonContent>
|
||||||
|
</IonPage>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default NutritionModal;
|
||||||
@@ -0,0 +1,25 @@
|
|||||||
|
import { IonCardTitle, IonCol, IonRow } from "@ionic/react";
|
||||||
|
|
||||||
|
const NutritionalFact = ({ type, amount, inset }) => {
|
||||||
|
|
||||||
|
const label = type.replace("_", " ").replace(/(^\w{1})|(\s+\w{1})/g, letter => letter.toUpperCase());
|
||||||
|
|
||||||
|
return (
|
||||||
|
|
||||||
|
<IonRow style={{ borderBottom: "1px solid #242424", padding: "0.5rem" }}>
|
||||||
|
<IonCol size="9">
|
||||||
|
<IonCardTitle style={{ fontSize: "0.9rem", marginLeft: inset ? "1.5rem" : "" }}>
|
||||||
|
{ label }
|
||||||
|
</IonCardTitle>
|
||||||
|
</IonCol>
|
||||||
|
|
||||||
|
<IonCol size="3">
|
||||||
|
<IonCardTitle style={{ fontSize: "0.9rem" }}>
|
||||||
|
{ amount }{ type !== "calories" && "g" }
|
||||||
|
</IonCardTitle>
|
||||||
|
</IonCol>
|
||||||
|
</IonRow>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default NutritionalFact;
|
||||||
@@ -0,0 +1,18 @@
|
|||||||
|
import { IonItem, IonLabel } from "@ionic/react";
|
||||||
|
import { Link } from "react-router-dom";
|
||||||
|
import styles from "./RecipeListItem.module.scss";
|
||||||
|
|
||||||
|
export const RecipeListItem = ({ recipe, fromSearch = false, fromBookmarks = false }) => (
|
||||||
|
|
||||||
|
<Link to={{ pathname: `/recipe/${ recipe.label.replace(" ", "").toLowerCase() }`, state: { recipe, fromSearch, fromBookmarks }}}>
|
||||||
|
<IonItem detail={ true } lines="full" className={ styles.categoryItem }>
|
||||||
|
|
||||||
|
<img src={ recipe.image } alt="cover" className={ styles.categoryImage } />
|
||||||
|
|
||||||
|
<IonLabel className={ styles.categoryDetails }>
|
||||||
|
<h2>{ recipe.label }</h2>
|
||||||
|
<p>{ recipe.dishType && recipe.dishType[0] }</p>
|
||||||
|
</IonLabel>
|
||||||
|
</IonItem>
|
||||||
|
</Link>
|
||||||
|
);
|
||||||
@@ -0,0 +1,17 @@
|
|||||||
|
.categoryDetails {
|
||||||
|
|
||||||
|
margin-left: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.categoryImage {
|
||||||
|
|
||||||
|
width: 5rem;
|
||||||
|
height: 5rem;
|
||||||
|
border-radius: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.categoryItem {
|
||||||
|
|
||||||
|
--padding-top: 1.5rem;
|
||||||
|
--padding-bottom: 1.5rem;
|
||||||
|
}
|
||||||
65
03_source/mobile/src/pages/DemoRecipeApp/pages/Bookmarks.jsx
Normal file
65
03_source/mobile/src/pages/DemoRecipeApp/pages/Bookmarks.jsx
Normal file
@@ -0,0 +1,65 @@
|
|||||||
|
import { IonBackButton, IonButtons, IonCol, IonContent, IonHeader, IonImg, IonList, IonNote, IonPage, IonRow, IonText, IonTitle, IonToolbar } from '@ionic/react';
|
||||||
|
import { RecipeListItem } from '../components/RecipeListItem';
|
||||||
|
|
||||||
|
import { useStoreState } from "pullstate";
|
||||||
|
import { BookmarkStore } from '../store';
|
||||||
|
import { getBookmarks } from '../store/Selectors';
|
||||||
|
|
||||||
|
const Bookmarks = () => {
|
||||||
|
|
||||||
|
const bookmarks = useStoreState(BookmarkStore, getBookmarks);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<IonPage>
|
||||||
|
<IonHeader>
|
||||||
|
<IonToolbar>
|
||||||
|
<IonButtons slot="start">
|
||||||
|
<IonBackButton text="Categories" />
|
||||||
|
</IonButtons>
|
||||||
|
<IonTitle>Bookmarks</IonTitle>
|
||||||
|
</IonToolbar>
|
||||||
|
</IonHeader>
|
||||||
|
<IonContent fullscreen>
|
||||||
|
<IonHeader collapse="condense">
|
||||||
|
<IonToolbar>
|
||||||
|
<IonTitle size="large">Bookmarks ({ bookmarks.length })</IonTitle>
|
||||||
|
</IonToolbar>
|
||||||
|
</IonHeader>
|
||||||
|
|
||||||
|
<IonList>
|
||||||
|
{ bookmarks.map((bookmark, index) => {
|
||||||
|
|
||||||
|
return (
|
||||||
|
<RecipeListItem recipe={ bookmark } key={ `recipe_${ index }` } fromBookmarks={ true } />
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</IonList>
|
||||||
|
|
||||||
|
{ bookmarks.length < 1 &&
|
||||||
|
|
||||||
|
<>
|
||||||
|
<IonRow className="ion-justify-content-center ion-text-center ion-margin-top ion-padding-top">
|
||||||
|
<IonCol size="8">
|
||||||
|
<IonText>
|
||||||
|
You don't have any bookmarks yet
|
||||||
|
</IonText>
|
||||||
|
|
||||||
|
<IonNote>
|
||||||
|
<p>When viewing a recipe, press the bookmark icon to add it</p>
|
||||||
|
</IonNote>
|
||||||
|
</IonCol>
|
||||||
|
</IonRow>
|
||||||
|
|
||||||
|
<IonRow className="ion-justify-content-center">
|
||||||
|
<IonCol size="8">
|
||||||
|
<IonImg src="/assets/bookmark.png" />
|
||||||
|
</IonCol>
|
||||||
|
</IonRow>
|
||||||
|
</>
|
||||||
|
}
|
||||||
|
</IonContent>
|
||||||
|
</IonPage>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Bookmarks;
|
||||||
101
03_source/mobile/src/pages/DemoRecipeApp/pages/Categories.jsx
Normal file
101
03_source/mobile/src/pages/DemoRecipeApp/pages/Categories.jsx
Normal file
@@ -0,0 +1,101 @@
|
|||||||
|
import { useEffect, useState } from "react";
|
||||||
|
import { IonButton, IonButtons, IonCardTitle, IonCol, IonContent, IonGrid, IonHeader, IonIcon, IonPage, IonRow, IonSearchbar, IonTitle, IonToolbar, useIonRouter } from '@ionic/react';
|
||||||
|
import styles from "./Categories.module.scss";
|
||||||
|
import { recipes } from "../recipes";
|
||||||
|
import { useRef } from "react";
|
||||||
|
import { Link } from "react-router-dom";
|
||||||
|
import { bookmarkOutline } from "ionicons/icons";
|
||||||
|
import { getBookmarks } from "../store/Selectors";
|
||||||
|
import { useStoreState } from "pullstate";
|
||||||
|
import { BookmarkStore } from "../store";
|
||||||
|
|
||||||
|
const Categories = () => {
|
||||||
|
|
||||||
|
const router = useIonRouter();
|
||||||
|
const pageRef = useRef();
|
||||||
|
const [ recipeCategories, setRecipeCategories ] = useState([]);
|
||||||
|
const bookmarks = useStoreState(BookmarkStore, getBookmarks)
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
|
||||||
|
const getAllRecipes = async () => {
|
||||||
|
|
||||||
|
const tempRecipeCategories = [
|
||||||
|
{
|
||||||
|
name: "Chicken",
|
||||||
|
data: recipes.chicken.hits[0]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Beef",
|
||||||
|
data: recipes.beef.hits[0]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Fish",
|
||||||
|
data: recipes.fish.hits[0]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Fruit",
|
||||||
|
data: recipes.fruit.hits[0]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Salad",
|
||||||
|
data: recipes.salad.hits[0]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Vegan",
|
||||||
|
data: recipes.vegan.hits[0]
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
setRecipeCategories(tempRecipeCategories);
|
||||||
|
}
|
||||||
|
|
||||||
|
getAllRecipes();
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<IonPage ref={ pageRef }>
|
||||||
|
<IonHeader className="ion-no-border">
|
||||||
|
<IonToolbar className="ion-no-border">
|
||||||
|
<IonTitle>Recipe Categories</IonTitle>
|
||||||
|
|
||||||
|
<IonButtons slot="end">
|
||||||
|
<IonButton routerLink="/bookmarks">
|
||||||
|
<IonIcon icon={ bookmarkOutline } />
|
||||||
|
{ bookmarks.length }
|
||||||
|
</IonButton>
|
||||||
|
</IonButtons>
|
||||||
|
</IonToolbar>
|
||||||
|
</IonHeader>
|
||||||
|
<IonContent fullscreen>
|
||||||
|
<div className={ styles.searchArea }>
|
||||||
|
<IonSearchbar className="ion-justify-content-center" placeholder="Try 'Chicken Piccata'" onClick={ () => router.push("/search") } />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<IonGrid>
|
||||||
|
<IonRow className={ styles.row }>
|
||||||
|
{ recipeCategories.map((category, index) => {
|
||||||
|
|
||||||
|
const { name, data } = category;
|
||||||
|
const { recipe } = data;
|
||||||
|
|
||||||
|
return (
|
||||||
|
|
||||||
|
<IonCol className={ styles.col } size="6" key={ `recipe_${ index }` }>
|
||||||
|
<Link to={ `/category/${ name }`}>
|
||||||
|
<img src={ recipe.image } alt="cover" />
|
||||||
|
<div className={ styles.categoryName }>
|
||||||
|
<IonCardTitle>{ name }</IonCardTitle>
|
||||||
|
</div>
|
||||||
|
</Link>
|
||||||
|
</IonCol>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</IonRow>
|
||||||
|
</IonGrid>
|
||||||
|
</IonContent>
|
||||||
|
</IonPage>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Categories;
|
||||||
@@ -0,0 +1,65 @@
|
|||||||
|
.categoryName {
|
||||||
|
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
margin: 0 auto;
|
||||||
|
z-index: 10;
|
||||||
|
background-color: rgba(0, 0, 0, 0.3);
|
||||||
|
border-radius: 10px;
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
ion-card-title {
|
||||||
|
|
||||||
|
color: white;
|
||||||
|
margin-left: 0.5rem;
|
||||||
|
margin-top: 0.5rem;
|
||||||
|
padding: 0.5rem;
|
||||||
|
width: fit-content;
|
||||||
|
background-color: rgba(0, 0, 0, 0.5);
|
||||||
|
border-radius: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.row,
|
||||||
|
.col,
|
||||||
|
.card {
|
||||||
|
|
||||||
|
padding: 0;
|
||||||
|
background-color: white;
|
||||||
|
border-radius: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.col {
|
||||||
|
|
||||||
|
border: 5px solid white;
|
||||||
|
|
||||||
|
img {
|
||||||
|
|
||||||
|
border-radius: 10px;
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.searchArea {
|
||||||
|
|
||||||
|
background-color: var(--ion-toolbar-background);
|
||||||
|
padding-bottom: 0.5rem;
|
||||||
|
|
||||||
|
ion-searchbar {
|
||||||
|
|
||||||
|
color: white;
|
||||||
|
--background: rgb(49, 49, 49);
|
||||||
|
--icon-color: rgb(27, 173, 100);
|
||||||
|
// --border-radius: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.searchButton {
|
||||||
|
|
||||||
|
height: 2.2rem;
|
||||||
|
margin-top: 0.9rem;
|
||||||
|
|
||||||
|
}
|
||||||
50
03_source/mobile/src/pages/DemoRecipeApp/pages/Category.jsx
Normal file
50
03_source/mobile/src/pages/DemoRecipeApp/pages/Category.jsx
Normal file
@@ -0,0 +1,50 @@
|
|||||||
|
import { IonBackButton, IonButtons, IonContent, IonHeader, IonList, IonPage, IonTitle, IonToolbar } from '@ionic/react';
|
||||||
|
import { useEffect } from 'react';
|
||||||
|
import { useState } from 'react';
|
||||||
|
import { useParams } from 'react-router';
|
||||||
|
import { RecipeListItem } from '../components/RecipeListItem';
|
||||||
|
import { recipes } from '../recipes';
|
||||||
|
|
||||||
|
const Category = () => {
|
||||||
|
|
||||||
|
const { name } = useParams();
|
||||||
|
const [ categoryRecipes, setCategoryRecipes ] = useState([]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
|
||||||
|
setCategoryRecipes(recipes[name.toLowerCase()].hits);
|
||||||
|
}, [ name ]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<IonPage>
|
||||||
|
<IonHeader>
|
||||||
|
<IonToolbar>
|
||||||
|
<IonButtons slot="start">
|
||||||
|
<IonBackButton text="Categories" />
|
||||||
|
</IonButtons>
|
||||||
|
<IonTitle>{ name } Recipes</IonTitle>
|
||||||
|
</IonToolbar>
|
||||||
|
</IonHeader>
|
||||||
|
<IonContent fullscreen>
|
||||||
|
<IonHeader collapse="condense">
|
||||||
|
<IonToolbar>
|
||||||
|
<IonTitle size="large">{ name } Recipes</IonTitle>
|
||||||
|
</IonToolbar>
|
||||||
|
</IonHeader>
|
||||||
|
|
||||||
|
<IonList>
|
||||||
|
{ categoryRecipes.map((categoryRecipe, index) => {
|
||||||
|
|
||||||
|
const { recipe } = categoryRecipe;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<RecipeListItem recipe={ recipe } key={ `recipe_${ index }` } />
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</IonList>
|
||||||
|
</IonContent>
|
||||||
|
</IonPage>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Category;
|
||||||
165
03_source/mobile/src/pages/DemoRecipeApp/pages/Recipe.jsx
Normal file
165
03_source/mobile/src/pages/DemoRecipeApp/pages/Recipe.jsx
Normal file
@@ -0,0 +1,165 @@
|
|||||||
|
import { IonBackButton, IonButton, IonButtons, IonCardSubtitle, IonCardTitle, IonCol, IonContent, IonGrid, IonHeader, IonIcon, IonList, IonListHeader, IonPage, IonRow, IonTitle, IonToolbar, useIonModal, useIonToast } from '@ionic/react';
|
||||||
|
import { bookmark, bookmarkOutline, informationCircleOutline, layersOutline, peopleOutline, timeOutline } from 'ionicons/icons';
|
||||||
|
import { useEffect, useRef } from 'react';
|
||||||
|
import { useState } from 'react';
|
||||||
|
import { useLocation } from 'react-router';
|
||||||
|
import { Ingredient } from '../components/Ingredient';
|
||||||
|
import IngredientsModal from '../components/IngredientsModal';
|
||||||
|
import NutritionModal from '../components/NutritionModal';
|
||||||
|
import BookmarkStore, { addToBookmarks } from '../store/BookmarkStore';
|
||||||
|
import styles from "./Recipe.module.scss";
|
||||||
|
|
||||||
|
import { useStoreState } from "pullstate";
|
||||||
|
import { getBookmarks } from '../store/Selectors';
|
||||||
|
|
||||||
|
const Recipe = () => {
|
||||||
|
|
||||||
|
const pageRef = useRef();
|
||||||
|
const { state } = useLocation();
|
||||||
|
const [ recipe, setRecipe ] = useState([]);
|
||||||
|
const [ fromSearch, setFromSearch ] = useState(false);
|
||||||
|
const [ fromBookmarks, setFromBookmarks ] = useState(false);
|
||||||
|
|
||||||
|
const bookmarks = useStoreState(BookmarkStore, getBookmarks);
|
||||||
|
|
||||||
|
const [ showToast ] = useIonToast();
|
||||||
|
|
||||||
|
const handleDismissIngredientsModal = () => {
|
||||||
|
|
||||||
|
hideIngredientsModal();
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleDismissNutritionModal = () => {
|
||||||
|
|
||||||
|
hideNutritionModal();
|
||||||
|
}
|
||||||
|
|
||||||
|
const [ showIngredientsModal, hideIngredientsModal ] = useIonModal(IngredientsModal, {
|
||||||
|
|
||||||
|
dismiss: handleDismissIngredientsModal,
|
||||||
|
ingredients: recipe.ingredients
|
||||||
|
});
|
||||||
|
|
||||||
|
const [ showNutritionModal, hideNutritionModal ] = useIonModal(NutritionModal, {
|
||||||
|
|
||||||
|
dismiss: handleDismissNutritionModal,
|
||||||
|
recipe
|
||||||
|
});
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
|
||||||
|
if (state && state.recipe) {
|
||||||
|
|
||||||
|
setRecipe(state.recipe);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (state && state.fromSearch) {
|
||||||
|
|
||||||
|
setFromSearch(state.fromSearch);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (state && state.fromBookmarks) {
|
||||||
|
|
||||||
|
setFromBookmarks(state.fromBookmarks);
|
||||||
|
}
|
||||||
|
}, [ state ]);
|
||||||
|
|
||||||
|
const addBookmark = async () => {
|
||||||
|
|
||||||
|
const added = addToBookmarks(recipe);
|
||||||
|
showToast({
|
||||||
|
|
||||||
|
message: added ? "This recipe has been bookmarked!" : "This recipe has been removed from your bookmarks.",
|
||||||
|
duration: 2000,
|
||||||
|
color: "main"
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<IonPage ref={ pageRef }>
|
||||||
|
<IonHeader>
|
||||||
|
<IonToolbar>
|
||||||
|
<IonTitle>View Recipe</IonTitle>
|
||||||
|
<IonButtons slot="start">
|
||||||
|
<IonBackButton text={ fromSearch ? "Search" : fromBookmarks ? "Bookmarks" : "Recipes" } color="main" />
|
||||||
|
</IonButtons>
|
||||||
|
|
||||||
|
<IonButtons slot="end">
|
||||||
|
<IonButton onClick={ addBookmark }>
|
||||||
|
<IonIcon icon={ bookmarks.includes(recipe) ? bookmark : bookmarkOutline } />
|
||||||
|
</IonButton>
|
||||||
|
</IonButtons>
|
||||||
|
</IonToolbar>
|
||||||
|
</IonHeader>
|
||||||
|
<IonContent fullscreen>
|
||||||
|
|
||||||
|
<div className={ styles.headerImage }>
|
||||||
|
<img src={ recipe.image } alt="main cover" />
|
||||||
|
<div className={ `${ styles.headerInfo } animate__animated animate__slideInLeft` }>
|
||||||
|
<h1>{ recipe.label }</h1>
|
||||||
|
<p>{ recipe.dishType && recipe.dishType[0] }</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<IonGrid>
|
||||||
|
|
||||||
|
<IonRow className="ion-text-center">
|
||||||
|
<IonCol size="4">
|
||||||
|
<IonCardTitle>
|
||||||
|
<IonIcon icon={ peopleOutline } />
|
||||||
|
</IonCardTitle>
|
||||||
|
<IonCardSubtitle>serves { recipe.yield && recipe.yield }</IonCardSubtitle>
|
||||||
|
</IonCol>
|
||||||
|
<IonCol size="4">
|
||||||
|
<IonCardTitle>
|
||||||
|
<IonIcon icon={ timeOutline } />
|
||||||
|
</IonCardTitle>
|
||||||
|
<IonCardSubtitle>{ recipe.totalTime !== 0 ? `${ recipe.totalWeight && recipe.totalWeight.toFixed(0) } mins` : "N/A" }</IonCardSubtitle>
|
||||||
|
</IonCol>
|
||||||
|
<IonCol size="4">
|
||||||
|
<IonCardTitle>
|
||||||
|
<IonIcon icon={ layersOutline } />
|
||||||
|
</IonCardTitle>
|
||||||
|
<IonCardSubtitle>{ recipe.totalWeight && recipe.totalWeight.toFixed(0) }g</IonCardSubtitle>
|
||||||
|
</IonCol>
|
||||||
|
</IonRow>
|
||||||
|
|
||||||
|
<IonRow className="ion-text-center">
|
||||||
|
<IonCol size="6">
|
||||||
|
{/* <IonButton color="main" onClick={ () => showIngredientsModal({
|
||||||
|
|
||||||
|
presentingElement: pageRef.current,
|
||||||
|
cssClass: "customModal"
|
||||||
|
})}>
|
||||||
|
<IonIcon icon={ informationCircleOutline } />
|
||||||
|
View Ingredients
|
||||||
|
</IonButton> */}
|
||||||
|
</IonCol>
|
||||||
|
<IonCol size="12">
|
||||||
|
<IonButton expand="block" color="main" onClick={ () => showNutritionModal({
|
||||||
|
|
||||||
|
presentingElement: pageRef.current,
|
||||||
|
cssClass: "customModal"
|
||||||
|
})}>
|
||||||
|
<IonIcon icon={ informationCircleOutline } />
|
||||||
|
View Nutrition
|
||||||
|
</IonButton>
|
||||||
|
</IonCol>
|
||||||
|
</IonRow>
|
||||||
|
|
||||||
|
{ recipe.ingredients &&
|
||||||
|
<IonList>
|
||||||
|
<IonListHeader>Ingredients ({ recipe.ingredients.length })</IonListHeader>
|
||||||
|
{ recipe.ingredients.map((ingredient, index) => {
|
||||||
|
|
||||||
|
return <Ingredient key={ `ingredient_${ index }` } ingredient={ ingredient } />;
|
||||||
|
})}
|
||||||
|
</IonList>
|
||||||
|
}
|
||||||
|
</IonGrid>
|
||||||
|
</IonContent>
|
||||||
|
</IonPage>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Recipe;
|
||||||
@@ -0,0 +1,37 @@
|
|||||||
|
.headerImage {
|
||||||
|
|
||||||
|
img {
|
||||||
|
|
||||||
|
width: 100%;
|
||||||
|
margin-top: -5rem;
|
||||||
|
border-bottom: 5px solid var(--ion-color-main);
|
||||||
|
}
|
||||||
|
|
||||||
|
.headerInfo {
|
||||||
|
|
||||||
|
position: absolute;
|
||||||
|
top: 10rem;
|
||||||
|
z-index: 10;
|
||||||
|
|
||||||
|
background-color: rgba($color: #000000, $alpha: 0.8);
|
||||||
|
color: white;
|
||||||
|
padding: 1rem;
|
||||||
|
border-top-right-radius: 10px;
|
||||||
|
border-bottom-right-radius: 10px;
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
|
||||||
|
font-size: 1.1rem;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
|
||||||
|
font-size: 0.9rem;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
color: var(--ion-color-main);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
106
03_source/mobile/src/pages/DemoRecipeApp/pages/Search.jsx
Normal file
106
03_source/mobile/src/pages/DemoRecipeApp/pages/Search.jsx
Normal file
@@ -0,0 +1,106 @@
|
|||||||
|
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();
|
||||||
|
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/placeholder.png" />
|
||||||
|
</IonCol>
|
||||||
|
</IonRow>
|
||||||
|
</>
|
||||||
|
}
|
||||||
|
</IonContent>
|
||||||
|
</IonPage>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Search;
|
||||||
141
03_source/mobile/src/pages/DemoRecipeApp/theme/variables.css
Normal file
141
03_source/mobile/src/pages/DemoRecipeApp/theme/variables.css
Normal file
@@ -0,0 +1,141 @@
|
|||||||
|
/* Ionic Variables and Theming. For more info, please see:
|
||||||
|
http://ionicframework.com/docs/theming/ */
|
||||||
|
|
||||||
|
/** Ionic CSS Variables **/
|
||||||
|
:root {
|
||||||
|
/** primary **/
|
||||||
|
--ion-color-primary: #3880ff;
|
||||||
|
--ion-color-primary-rgb: 56, 128, 255;
|
||||||
|
--ion-color-primary-contrast: #ffffff;
|
||||||
|
--ion-color-primary-contrast-rgb: 255, 255, 255;
|
||||||
|
--ion-color-primary-shade: #3171e0;
|
||||||
|
--ion-color-primary-tint: #4c8dff;
|
||||||
|
|
||||||
|
/** secondary **/
|
||||||
|
--ion-color-secondary: #3dc2ff;
|
||||||
|
--ion-color-secondary-rgb: 61, 194, 255;
|
||||||
|
--ion-color-secondary-contrast: #ffffff;
|
||||||
|
--ion-color-secondary-contrast-rgb: 255, 255, 255;
|
||||||
|
--ion-color-secondary-shade: #36abe0;
|
||||||
|
--ion-color-secondary-tint: #50c8ff;
|
||||||
|
|
||||||
|
/** tertiary **/
|
||||||
|
--ion-color-tertiary: #5260ff;
|
||||||
|
--ion-color-tertiary-rgb: 82, 96, 255;
|
||||||
|
--ion-color-tertiary-contrast: #ffffff;
|
||||||
|
--ion-color-tertiary-contrast-rgb: 255, 255, 255;
|
||||||
|
--ion-color-tertiary-shade: #4854e0;
|
||||||
|
--ion-color-tertiary-tint: #6370ff;
|
||||||
|
|
||||||
|
/** success **/
|
||||||
|
--ion-color-success: #2dd36f;
|
||||||
|
--ion-color-success-rgb: 45, 211, 111;
|
||||||
|
--ion-color-success-contrast: #ffffff;
|
||||||
|
--ion-color-success-contrast-rgb: 255, 255, 255;
|
||||||
|
--ion-color-success-shade: #28ba62;
|
||||||
|
--ion-color-success-tint: #42d77d;
|
||||||
|
|
||||||
|
/** warning **/
|
||||||
|
--ion-color-warning: #ffc409;
|
||||||
|
--ion-color-warning-rgb: 255, 196, 9;
|
||||||
|
--ion-color-warning-contrast: #000000;
|
||||||
|
--ion-color-warning-contrast-rgb: 0, 0, 0;
|
||||||
|
--ion-color-warning-shade: #e0ac08;
|
||||||
|
--ion-color-warning-tint: #ffca22;
|
||||||
|
|
||||||
|
/** danger **/
|
||||||
|
--ion-color-danger: #eb445a;
|
||||||
|
--ion-color-danger-rgb: 235, 68, 90;
|
||||||
|
--ion-color-danger-contrast: #ffffff;
|
||||||
|
--ion-color-danger-contrast-rgb: 255, 255, 255;
|
||||||
|
--ion-color-danger-shade: #cf3c4f;
|
||||||
|
--ion-color-danger-tint: #ed576b;
|
||||||
|
|
||||||
|
/** dark **/
|
||||||
|
--ion-color-dark: #222428;
|
||||||
|
--ion-color-dark-rgb: 34, 36, 40;
|
||||||
|
--ion-color-dark-contrast: #ffffff;
|
||||||
|
--ion-color-dark-contrast-rgb: 255, 255, 255;
|
||||||
|
--ion-color-dark-shade: #1e2023;
|
||||||
|
--ion-color-dark-tint: #383a3e;
|
||||||
|
|
||||||
|
/** medium **/
|
||||||
|
--ion-color-medium: #92949c;
|
||||||
|
--ion-color-medium-rgb: 146, 148, 156;
|
||||||
|
--ion-color-medium-contrast: #ffffff;
|
||||||
|
--ion-color-medium-contrast-rgb: 255, 255, 255;
|
||||||
|
--ion-color-medium-shade: #808289;
|
||||||
|
--ion-color-medium-tint: #9d9fa6;
|
||||||
|
|
||||||
|
/** light **/
|
||||||
|
--ion-color-light: #f4f5f8;
|
||||||
|
--ion-color-light-rgb: 244, 245, 248;
|
||||||
|
--ion-color-light-contrast: #000000;
|
||||||
|
--ion-color-light-contrast-rgb: 0, 0, 0;
|
||||||
|
--ion-color-light-shade: #d7d8da;
|
||||||
|
--ion-color-light-tint: #f5f6f9;
|
||||||
|
|
||||||
|
--ion-color-main: #1BAD64;
|
||||||
|
--ion-color-main-rgb: 27,173,100;
|
||||||
|
--ion-color-main-contrast: #ffffff;
|
||||||
|
--ion-color-main-contrast-rgb: 255,255,255;
|
||||||
|
--ion-color-main-shade: #189858;
|
||||||
|
--ion-color-main-tint: #32b574;
|
||||||
|
|
||||||
|
--ion-background-color: white;
|
||||||
|
--ion-tab-bar-background: rgb(36, 36, 36);
|
||||||
|
--ion-toolbar-background: rgb(36, 36, 36);
|
||||||
|
--ion-tab-bar-color-selected: rgb(27, 173, 100);
|
||||||
|
--ion-tab-bar-color: rgb(97, 97, 97);
|
||||||
|
}
|
||||||
|
|
||||||
|
.ion-color-main {
|
||||||
|
--ion-color-base: var(--ion-color-main);
|
||||||
|
--ion-color-base-rgb: var(--ion-color-main-rgb);
|
||||||
|
--ion-color-contrast: var(--ion-color-main-contrast);
|
||||||
|
--ion-color-contrast-rgb: var(--ion-color-main-contrast-rgb);
|
||||||
|
--ion-color-shade: var(--ion-color-main-shade);
|
||||||
|
--ion-color-tint: var(--ion-color-main-tint);
|
||||||
|
}
|
||||||
|
|
||||||
|
ion-toolbar ion-title {
|
||||||
|
|
||||||
|
--color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
ion-toolbar ion-back-button,
|
||||||
|
ion-toolbar ion-button {
|
||||||
|
|
||||||
|
--color: rgb(27, 173, 100);
|
||||||
|
}
|
||||||
|
|
||||||
|
ion-content ion-toolbar ion-title {
|
||||||
|
|
||||||
|
color: rgb(36, 36, 36);
|
||||||
|
}
|
||||||
|
|
||||||
|
* {
|
||||||
|
|
||||||
|
font-family: 'Ubuntu', sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
ion-toolbar {
|
||||||
|
--border-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.customLoader {
|
||||||
|
|
||||||
|
--background: var(--ion-toolbar-background);
|
||||||
|
--spinner-color: var(--ion-tab-bar-color-selected);
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.customModal {
|
||||||
|
|
||||||
|
--background: var(--ion-toolbar-background);
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user