From 0f40ad5878050a66d5b4813198e2dacf4a88f5ea Mon Sep 17 00:00:00 2001 From: Ruidy Nemausat Date: Sun, 26 Jan 2020 16:47:41 +0100 Subject: [PATCH] recipe page --- README.md | 2 ++ src/App.js | 52 ++++++++++++++++++++------- src/components/CategoryEntry.js | 12 ++----- src/components/CopyrightText.js | 2 +- src/components/Logo.js | 2 +- src/components/Navbar.js | 16 ++------- src/components/PreLoader.js | 21 +++++++++++ src/pages/Category.js | 62 +++++++++++++++++++++++++++++++++ src/pages/CategoryList.js | 15 ++++---- src/pages/Home.js | 10 ++---- src/pages/Meal.js | 11 +++++- 11 files changed, 152 insertions(+), 53 deletions(-) create mode 100644 src/components/PreLoader.js create mode 100644 src/pages/Category.js diff --git a/README.md b/README.md index d545968..f1acf93 100644 --- a/README.md +++ b/README.md @@ -76,3 +76,5 @@ Free meal planner for cooks short on ideas! (like me …) - Search by name: you're looking for a recipe? Ours are easy to make and yummy! ## TO DO + +- put a preloader diff --git a/src/App.js b/src/App.js index 047c6fb..d6f260a 100644 --- a/src/App.js +++ b/src/App.js @@ -4,12 +4,15 @@ import HomePage from "./pages/Home"; import MealPage from "./pages/Meal"; import SearchPage from "./pages/Search"; import CategoryListPage from "./pages/CategoryList"; +import CategoryPage from "./pages/Category"; import NotFound from "./pages/NotFound"; import Navbar from "./components/Navbar"; +import SearchBar from "./components/SearchBar"; import Footer from "./components/Footer"; import "./index.css"; const App = () => { + // const [isLoading, setIsLoading] = useState(true); For Preloader const [searchString, setSearchString] = useState(""); const [categories, setCategories] = useState({ categories: [] }); // Find a better alternative … @@ -74,21 +77,28 @@ const App = () => { }; const [meal, setMeal] = useState(mealDef); - const createURI = keyword => { - const ROOT = "https://www.themealdb.com/api/json/v1/1/"; - return `${ROOT}${keyword}.php`; + const createURI = (keyword, filter) => { + if (filter === null) { + const ROOT = "https://www.themealdb.com/api/json/v1/1/"; + return `${ROOT}${keyword}.php`; + } else { + const ROOT = "https://www.themealdb.com/api/json/v1/1/filter.php?c="; + return `${ROOT}${keyword}`; + } }; const getMeal = () => { + // setIsLoading(true); getFromAPI("random", setMeal); + // setIsLoading(false); }; const getCategories = () => { getFromAPI("categories", setCategories); }; - const getFromAPI = (keyword, set) => { - const URI = createURI(keyword); + const getFromAPI = (keyword, set, filter = null) => { + const URI = createURI(keyword, filter); fetch(URI) .then(response => response.json()) .then(data => set(data)); @@ -101,12 +111,10 @@ const App = () => { return ( - + +
+ +
{ } + render={props => ( + + )} /> ( - + )} /> + + + + + + + {/* We'll have to input searchResults somewhere */} { const { @@ -8,23 +8,17 @@ const CategoryEntry = props => { strCategoryDescription } = props.category; - const { url, path } = useRouteMatch(); + const { url } = useRouteMatch(); return (
-
  • +
  • {strCategory}

    {strCategory}

    {strCategoryDescription}
    • - - // - // - //

    Please select a topic.

    - //     - //     ); }; diff --git a/src/components/CopyrightText.js b/src/components/CopyrightText.js index 5ea6c11..aa411ba 100644 --- a/src/components/CopyrightText.js +++ b/src/components/CopyrightText.js @@ -3,7 +3,7 @@ import React from "react"; const CopyrightText = () => { return ( - © 2020 - Meal's Planner - Made with{" "} + © 2020 - Chef's - Made with{" "} ❤️ diff --git a/src/components/Logo.js b/src/components/Logo.js index b405a75..f5d698a 100644 --- a/src/components/Logo.js +++ b/src/components/Logo.js @@ -5,7 +5,7 @@ const Logo = () => { return ( - 🍪 Chef's Planner + 👩‍🍳 Chef's ); diff --git a/src/components/Navbar.js b/src/components/Navbar.js index c06cab6..8759a43 100644 --- a/src/components/Navbar.js +++ b/src/components/Navbar.js @@ -1,6 +1,6 @@ import React from "react"; import Logo from "./Logo"; -import SearchBar from "./SearchBar"; + import RandomButton from "./RandomButton"; import { Link } from "react-router-dom"; @@ -9,25 +9,15 @@ const Navbar = props => { diff --git a/src/components/PreLoader.js b/src/components/PreLoader.js new file mode 100644 index 0000000..d77866e --- /dev/null +++ b/src/components/PreLoader.js @@ -0,0 +1,21 @@ +import React from "react"; + +const PreLoader = () => { + return ( +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + ); +}; + +export default PreLoader; diff --git a/src/pages/Category.js b/src/pages/Category.js new file mode 100644 index 0000000..2cc3fb9 --- /dev/null +++ b/src/pages/Category.js @@ -0,0 +1,62 @@ +import React, { useEffect, useState } from "react"; +import { + useParams, + Link, + useRouteMatch, + Switch, + Route +} from "react-router-dom"; +import MealPage from "./Meal"; + +const CategoryPage = props => { + const [meals, setMeals] = useState({ meals: [] }); + const { getFromAPI } = props; + const { strCategory } = useParams(); + + const getMeals = () => { + getFromAPI(strCategory, setMeals, 0); + }; + + const getMeal = () => { + // setIsLoading(true); + getFromAPI("random", props.setMeal); + // setIsLoading(false); + }; + + useEffect(() => { + getMeals(); + }, []); + + const { url } = useRouteMatch(); + // const { + // strCategory, + // strCategoryThumb, + // strCategoryDescription + // } = props.category; + + return ( +
    +

    Chef's {strCategory} Recipes

    + {/* {strCategory} +

    {strCategoryDescription}

    */} + +
      + {meals.meals.map((meal, i) => ( +
    • + + {/* */} + {meal.strMeal} +

      {meal.strMeal}

      + + + + + + +
      • + ))} +
    +
    + ); +}; +export default CategoryPage; diff --git a/src/pages/CategoryList.js b/src/pages/CategoryList.js index 2bc1650..edfdfa9 100644 --- a/src/pages/CategoryList.js +++ b/src/pages/CategoryList.js @@ -1,20 +1,21 @@ -import React from "react"; +import React, { useEffect } from "react"; import CategoryEntry from "../components/CategoryEntry"; const CategoryListPage = props => { - // const { categories } = props; const categories = props.categories.categories; - // if (categories.length > 0) { + const { getCategories } = props; + + useEffect(() => { + getCategories(); + }, []); - // } - // const { strCategory } = categories; return (
    -

    The Chef's meal categories

    +

    The Chef's Meal Categories

      {categories.map((category, i) => ( - + ))}
    diff --git a/src/pages/Home.js b/src/pages/Home.js index 275e7ec..32d409a 100644 --- a/src/pages/Home.js +++ b/src/pages/Home.js @@ -4,14 +4,8 @@ import RandomButton from "../components/RandomButton"; const HomePage = props => { return (
    -
    - {/* */} -

    The Chef's meal suggestions

    +
    +

    The Chef's Meal Suggestions

    diff --git a/src/pages/Meal.js b/src/pages/Meal.js index 2fc87ca..ca46700 100644 --- a/src/pages/Meal.js +++ b/src/pages/Meal.js @@ -1,10 +1,16 @@ -import React from "react"; +import React, { useEffect } from "react"; import MealPresentation from "../components/MealPresentation"; import IngredientList from "../components/IngredientList"; import Recipe from "../components/Recipe"; +// import PreLoader from "../components/PreLoader"; const MealPage = props => { const meal = props.meal.meals[0]; + const { getMeal } = props; + + useEffect(() => { + getMeal(); + }, []); const { strMeal, @@ -33,6 +39,9 @@ const MealPage = props => { } } + // const page = + + // return isLoading ? : page; return (