categoryListPage

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

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);
+}

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 (
     <Router>
       <Navbar
         searchString={searchString}
         handleChange={handleChange}
-        handleClick={handleClick}
+        handleClick={getMeal}
+        getCategories={getCategories}
       />
       <Switch>
         <Route
           exact
           path="/"
-          render={props => (
-            <HomePage {...props} getMeal={getMeal} handleClick={handleClick} />
-          )}
+          render={props => <HomePage {...props} handleClick={getMeal} />}
         />
         <Route
           exact
           path="/meal"
           render={props => <MealPage {...props} meal={mealItem} />}
         />
+        <Route
+          exact
+          path="/categories"
+          render={props => (
+            <CategoryListPage {...props} categories={categories} />
+          )}
+        />
         <Route exact path="/search" component={SearchPage} />
         {/* We'll have to input searchResults somewhere */}
         <Route component={NotFound} />

src/components/Footer.js

@@ -4,9 +4,9 @@ import GitHubLink from "./GitHubLink";
 
 const Footer = () => {
   return (
-    <footer class="page-footer">
-      <div class="footer-copyright">
-        <div class="container">
+    <footer className="page-footer">
+      <div className="footer-copyright">
+        <div className="container">
           <CopyrightText />
           <GitHubLink />
         </div>

src/components/IngredientList.js

@@ -4,10 +4,10 @@ const IngredientList = props => {
   const { ingredients } = props;
   return (
     <div className="ingredientList">
-      <h2>Ingredients</h2>
+      <h3>Ingredients</h3>
       <ul>
-        {ingredients.map(ing => (
-          <li>
+        {ingredients.map((ing, i) => (
+          <li key={i}>
             <b>{ing[0]}:</b> {ing[1]}
           </li>
         ))}

src/components/Logo.js

@@ -3,7 +3,7 @@ import { Link } from "react-router-dom";
 
 const Logo = () => {
   return (
-    <Link to="/" class="brand-logo">
+    <Link to="/" className="brand-logo">
       <span role="img" aria-label="cookie">
         🍪 Chef's Planner
       </span>

src/components/MealPresentation.js

@@ -11,19 +11,21 @@ const MealPresentation = props => {
   return (
     <div className="row">
       <div className="col s12">
-        <h1>{mealName}</h1>
-        <img className="responsive-img" src={imgAddress} alt={mealName} />
-        <ul>
-          <li>
-            <a href={videoAddress} target="blank">
-              See in video
-            </a>
-          </li>
-          {/* <video width="" height="" controls autoplay>
+        <div className="card blue-grey darken-1">
+          <div className="card-content white-text">
+            <span className="card-title">{mealName}</span>
+            <img className="responsive-img" src={imgAddress} alt={mealName} />
+            <ul>
+              <li>
+                <a href={videoAddress} target="blank">
+                  See in video
+                </a>
+              </li>
+              {/* <video width="" height="" controls autoplay>
         <source src={videoAddress} type="video/mp4" />
         Your browser does not support the video tag.
       </video> */}
-          {/* <iframe
+              {/* <iframe
         title="video"
         width="560"
         height="315"
@@ -33,13 +35,15 @@ const MealPresentation = props => {
         allowfullscreen
       ></iframe> */}
 
-          <li>
-            <b>Category:</b> {mealCategory}
-          </li>
-          <li>
-            <b>Origin:</b> {mealArea}
-          </li>
-        </ul>
+              <li>
+                <b>Category:</b> {mealCategory}
+              </li>
+              <li>
+                <b>Origin:</b> {mealArea}
+              </li>
+            </ul>
+          </div>
+        </div>
       </div>
     </div>
   );

src/components/Navbar.js

@@ -2,24 +2,32 @@ import React from "react";
 import Logo from "./Logo";
 import SearchBar from "./SearchBar";
 import RandomButton from "./RandomButton";
+import { Link } from "react-router-dom";
 
 const Navbar = props => {
   return (
     <nav>
       <div className="nav-wrapper">
         <div className="row">
-          <div className="col s3">
-            <Logo />
-          </div>
-          <div className="col s6">
+          {/* <div className="col s9"> */}
+          <Logo />
+          {/* </div> */}
+          <ul id="nav-mobile" class="right hide-on-med-and-down">
+            <li>
+              <Link to="/categories" onClick={props.getCategories}>
+                Categories
+              </Link>
+            </li>
+            <li>
+              <RandomButton handleClick={props.handleClick} />
+            </li>
+          </ul>
+          {/* <div className="col s6">
             <SearchBar
               searchString={props.searchString}
               handleChange={props.handleChange}
             />
-          </div>
-          <div className="col s3">
-            <RandomButton handleClick={props.handleClick} />
-          </div>
+          </div> */}
         </div>
       </div>
     </nav>

src/components/RandomButton.js

@@ -5,7 +5,7 @@ const RandomButton = props => {
   return (
     <Link to="/meal">
       <button
-        class="waves-effect waves-light btn-large"
+        className="waves-effect waves-light btn-small"
         onClick={props.handleClick}
       >
         Random Recipe

src/components/Recipe.js

@@ -3,8 +3,8 @@ import React from "react";
 const Recipe = props => {
   return (
     <div className="recipe">
-      <h2>Instructions</h2>
-      <p>{props.recipe}</p>
+      <h3>Instructions</h3>
+      <div dangerouslySetInnerHTML={{ __html: props.recipe }} />
     </div>
   );
 };

src/pages/Home.js

@@ -3,8 +3,14 @@ import RandomButton from "../components/RandomButton";
 
 const HomePage = props => {
   return (
-    <div className="section">
-      <div className="container center-align">
+    <div className="section background">
+      <div
+        className="container center-align"
+        // styles={{
+        //   backgroundImage: `url(require("../images/parallax1.jpg"))`
+        // }}
+      >
+        {/* <img src={require("../images/parallax1.jpg")} alt="" /> */}
         <h1>The Chef's meal suggestions</h1>
         <RandomButton handleClick={props.handleClick} />
       </div>

src/pages/Meal.js

@@ -28,7 +28,7 @@ const MealPage = props => {
   for (i = 1; i <= 20; i++) {
     var strIng = `strIngredient${i}`;
     var strMes = `strMeasure${i}`;
-    if (meal[strIng] !== "") {
+    if (meal[strIng] !== "" && meal[strIng] !== null) {
       ingredientList.push([meal[strIng], meal[strMes]]);
     }
   }