From 02648a37b7eb13a858d4c5c4febd26902be6bdd3 Mon Sep 17 00:00:00 2001 From: Ruidy Nemausat Date: Sat, 25 Jan 2020 21:13:41 +0100 Subject: [PATCH] categoryListPage --- README.md | 6 +++++ src/App.css | 8 ++++++ src/App.js | 42 +++++++++++++++++++++--------- src/components/Footer.js | 6 ++--- src/components/IngredientList.js | 6 ++--- src/components/Logo.js | 2 +- src/components/MealPresentation.js | 38 +++++++++++++++------------ src/components/Navbar.js | 24 +++++++++++------ src/components/RandomButton.js | 2 +- src/components/Recipe.js | 4 +-- src/pages/Home.js | 10 +++++-- src/pages/Meal.js | 2 +- 12 files changed, 100 insertions(+), 50 deletions(-) diff --git a/README.md b/README.md index 8e1d3c0..cdeea01 100644 --- a/README.md +++ b/README.md @@ -72,4 +72,10 @@ Free meal planner for cooks short on ideas! (like me …) - WebApp - Random meal suggestion +- List of meals by categories - Search by name: you're looking for a recipe? Ours are easy to make and yummy! + +## TO DO + +- write a createURI() function which generates the URI with a keyword as argument +- fetch categories on categories link Click diff --git a/src/App.css b/src/App.css index c94ab51..cc458b8 100644 --- a/src/App.css +++ b/src/App.css @@ -7,3 +7,11 @@ body { main { flex: 1 0 auto; } + +div { + white-space: pre-wrap; +} + +.background { + background-image: url(./images/parallax1.jpg); +} diff --git a/src/App.js b/src/App.js index 0cf9d32..e81b3a4 100644 --- a/src/App.js +++ b/src/App.js @@ -3,6 +3,7 @@ import { BrowserRouter as Router, Switch, Route } from "react-router-dom"; import HomePage from "./pages/Home"; import MealPage from "./pages/Meal"; import SearchPage from "./pages/Search"; +import CategoryListPage from "./pages/CategoryList"; import NotFound from "./pages/NotFound"; import Navbar from "./components/Navbar"; import Footer from "./components/Footer"; @@ -10,6 +11,7 @@ import "./App.css"; const App = () => { const [searchString, setSearchString] = useState(""); + const [categories, setCategories] = useState({ categories: [] }); // Find a better alternative … const mealDef = { meals: [ @@ -20,7 +22,7 @@ const App = () => { strCategory: "Pasta", strArea: "Italian", strInstructions: - "Cook the pasta following pack instructions. Heat the oil in a non-stick frying pan and cook the onion, garlic and chilli for 3-4 mins to soften. Stir in the tomato pur\u00e9e and cook for 1 min, then add the pilchards with their sauce. Cook, breaking up the fish with a wooden spoon, then add the olives and continue to cook for a few more mins.\r\n\r\nDrain the pasta and add to the pan with 2-3 tbsp of the cooking water. Toss everything together well, then divide between plates and serve, scattered with Parmesan.", + "Cook the pasta following pack instructions.\r\n\r\nHeat the oil in a non-stick frying pan and cook the onion, garlic and chilli for 3-4 mins to soften. Stir in the tomato pur\u00e9e and cook for 1 min, then add the pilchards with their sauce. Cook, breaking up the fish with a wooden spoon, then add the olives and continue to cook for a few more mins.\r\n\r\nDrain the pasta and add to the pan with 2-3 tbsp of the cooking water. Toss everything together well, then divide between plates and serve, scattered with Parmesan.", strMealThumb: "https://www.themealdb.com/images/media/meals/vvtvtr1511180578.jpg", strTags: null, @@ -71,12 +73,26 @@ const App = () => { ] }; const [mealItem, setMeal] = useState(mealDef); - const URI = "https://www.themealdb.com/api/json/v1/1/random.php"; + + const createURI = keyword => { + const ROOT = "https://www.themealdb.com/api/json/v1/1/"; + return `${ROOT}${keyword}.php`; + }; const getMeal = () => { - fetch(URI) + const URI = createURI("random"); + getFromAPI(URI, setMeal); + }; + + const getCategories = () => { + const URI = createURI("categories"); + getFromAPI(URI, setCategories); + }; + + const getFromAPI = (uri, set) => { + fetch(uri) .then(response => response.json()) - .then(mealItem => setMeal(mealItem)); + .then(data => set(data)); }; const handleChange = ev => { @@ -84,30 +100,32 @@ const App = () => { setSearchString(value); }; - const handleClick = () => { - getMeal(); - }; - return ( ( - - )} + render={props => } /> } /> + ( + + )} + /> {/* We'll have to input searchResults somewhere */} diff --git a/src/components/Footer.js b/src/components/Footer.js index 5c5d8ed..1f391c6 100644 --- a/src/components/Footer.js +++ b/src/components/Footer.js @@ -4,9 +4,9 @@ import GitHubLink from "./GitHubLink"; const Footer = () => { return ( -