Notes

import React, { useState } from "react";
import Axios from "axios";
import { v4 as uuidv4 } from "uuid";
import Recipe from "../components/Recipe";
import Alert from "../components/Alert";


function Inspiratie() {
const [mealType, setMealType] = useState("");
const [cuisineType, setCuisineType] = useState("");
const [diet, setDiet] = useState("");
//const [health, setHealth] = useState("");
const [recipes, setRecipes] = useState([]);
const [alert, setAlert] = useState("");

const APP_ID = "4fee97b6";
const APP_KEY = "0c5700274833fb4cf102c03717281700";

const url = [`https://api.edamam.com/search?q=&app_id=${APP_ID}&app_key=${APP_KEY}`];

const getData = async () => {
if(mealType) {url.push(`&mealType=`+mealType)}
if(cuisineType) {url.push(`&cuisineType=`+cuisineType)}
if(diet) {url.push(`&diet=`+diet)}
//if(health) {url.push(`&health=`+health)}
const result = await Axios.get(url.join(""));
if (!result.data.more) {
return setAlert("Sorry.. We could't find any recipes. Broaden your search query ");
}
setRecipes(result.data.hits);
setAlert("");
};

const onChangeMealType = e => setMealType(e.target.value);
const onChangeCuisineType = e => setCuisineType(e.target.value);
const onChangeDiet = e => setDiet(e.target.value);
// const onChangeHealth = e => setHealth(e.target.value);



const onSubmit = e => {
e.preventDefault();
getData();
};

return (
<div className="Inspiratie">
<h1>Food Searching App</h1>
<form onSubmit={onSubmit} className="search-form">
{alert !== "" && <Alert alert={alert} />}
<label htmlFor={mealType}>Meal type</label>
<select
id="mealType"
name="mealType"
value={mealType}
onChange={onChangeMealType}
>
<option></option>
<option value="breakfast">Breakfast</option>
<option value="brunch">Brunch</option>
<option value="lunch">Lunch</option>
<option value="dinner">Dinner</option>
<option value="snack">Snack</option>
<option value="teatime">Teatime</option>
</select>
<label htmlFor={cuisineType}>Cuisine type</label>
<select
id="cuisineType"
name="cuisineType"
value={cuisineType}
onChange={onChangeCuisineType}
>
<option></option>
<option value="American">American</option>
<option value="Asian">Asian</option>
<option value="British">British</option>
<option value="caribbean">Caribbean</option>
<option value="central europe">Central Europe</option>
<option value="chinese">Chinese</option>
<option value="eastern europe">Eastern Europe</option>
<option value="french">French</option>
<option value="greek">Greek</option>
<option value="indian">Indian</option>
<option value="italian">Italian</option>
<option value="japanese">Japanese</option>
<option value="korean">Korean</option>
<option value="kosher">Kosher</option>
<option value="mediterranean">Mediterranean</option>
<option value="mexican">Mexican</option>
<option value="middle eastern">Middle Eastern</option>
<option value="nordic">Nordic</option>
<option value="south american">South American</option>
<option value="south east asian">South East Asian</option>
<option value="world">World</option>
</select>
<label htmlFor={diet}>Diet</label>
<select
id="diet"
name="diet"
value={diet}
onChange={onChangeDiet}
>
<option></option>
<option value="balanced">Balanced</option>
<option value="high-fiber">High-Fiber</option>
<option value="high-protein">High-Protein</option>
<option value="low-carb">Low-Carb</option>
<option value="low-fat">Low-Fat</option>
<option value="low-sodium">Low-Sodium</option>
</select>
<label htmlFor={diet}>Diet</label>
{/*<label htmlFor="health">Ik lust geen mossels</label>*/}
{/*<input*/}
{/* id="health"*/}
{/* name="health"*/}
{/* type={"checkbox"}*/}
{/* value={health}*/}
{/* onChange={onChangeHealth}*/}
{/*/>*/}
<input type="submit" value="Search" />
</form>
<div className="recipes">
{recipes !== [] &&
recipes.map(recipe => <Recipe key={uuidv4()} recipe={recipe} />)}
</div>
</div>
);
}

export default Inspiratie;