random recipe ok

src/App.css

@@ -1,38 +1,9 @@
-.App {
+body {
-  text-align: center;
-}
-
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
   display: flex;
+  min-height: 100vh;
   flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
 }
 
-.App-link {
+main {
-  color: #61dafb;
+  flex: 1 0 auto;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
 }

src/App.js

@@ -6,11 +6,11 @@ import SearchPage from "./pages/Search";
 import NotFound from "./pages/NotFound";
 import Navbar from "./components/Navbar";
 import Footer from "./components/Footer";
+// import "./App.css";
 
 const App = () => {
   const [searchString, setSearchString] = useState("");
-
+  const mealDef = {
-  const mealItem = {
     meals: [
       {
         idMeal: "52837",
@@ -69,24 +69,48 @@ const App = () => {
       }
     ]
   };
+  const [mealItem, setMeal] = useState(mealDef);
+  const URI = "https://www.themealdb.com/api/json/v1/1/random.php";
+
+  const getMeal = () => {
+    fetch(URI)
+      .then(response => response.json())
+      .then(mealItem => setMeal(mealItem));
+  };
+
+  // const { mealItem } = meal;
 
   const handleChange = ev => {
     const { value } = ev.target;
     setSearchString(value);
   };
 
+  const handleClick = () => {
+    getMeal();
+  };
+
   return (
     <Router>
-      <Navbar searchString={searchString} handleChange={handleChange} />
+      <Navbar
+        searchString={searchString}
+        handleChange={handleChange}
+        handleClick={handleClick}
+      />
       <Switch>
-        <Route exact path="/" component={HomePage} />
+        <Route
+          exact
+          path="/"
+          render={props => (
+            <HomePage {...props} getMeal={getMeal} handleClick={handleClick} />
+          )}
+        />
         <Route
           exact
           path="/meal"
           render={props => <MealPage {...props} meal={mealItem} />}
         />
         <Route exact path="/search" component={SearchPage} />
-        {/* We'll have to input searchString somewhere */}
+        {/* We'll have to input searchResults somewhere */}
         <Route component={NotFound} />
       </Switch>
       <Footer />

src/components/CopyrightText.js

@@ -1,7 +1,14 @@
 import React from "react";
 
 const CopyrightText = () => {
-  return <span>© 2020 - Meal's Planner - Made with ❤️</span>;
+  return (
+    <span>
+      © 2020 - Meal's Planner - Made with{" "}
+      <span role="img" aria-label="heart">
+        ❤️
+      </span>
+    </span>
+  );
 };
 
 export default CopyrightText;

src/components/Navbar.js

@@ -19,7 +19,7 @@ const Navbar = props => {
             />
           </div>
           <div className="col s4">
-            <RandomButton />
+            <RandomButton handleClick={props.handleClick} />
           </div>
         </div>
       </div>

src/components/RandomButton.js

@@ -1,10 +1,15 @@
 import React from "react";
 import { Link } from "react-router-dom";
 
-const RandomButton = () => {
+const RandomButton = props => {
   return (
     <Link to="/meal">
-      <button class="waves-effect waves-light btn-large">Random Recipe</button>
+      <button
+        class="waves-effect waves-light btn-large"
+        onClick={props.handleClick}
+      >
+        Random Recipe
+      </button>
     </Link>
   );
 };

src/pages/Home.js

@@ -1,20 +1,15 @@
-import React, { Component } from "react";
+import React from "react";
 import RandomButton from "../components/RandomButton";
 
-export default class HomePage extends Component {
+const HomePage = props => {
-  constructor(props) {
-    super(props);
-    this.initState = {};
-    this.state = this.initState;
-  }
-  render() {
   return (
     <div className="section">
       <div className="container center-align">
-          <h1>Get a daily suggestion from the Chef</h1>
+        <h1>The Chef's meal suggestions</h1>
-          <RandomButton />
+        <RandomButton handleClick={props.handleClick} />
       </div>
     </div>
   );
-  }
+};
-}
+
+export default HomePage;

src/pages/Meal.js

@@ -4,9 +4,9 @@ import IngredientList from "../components/IngredientList";
 import Recipe from "../components/Recipe";
 
 const MealPage = props => {
-  const meal = props.meal.meals[0];
+  let meal = props.meal.meals[0];
 
-  const {
+  let {
     strMeal,
     strMealThumb,
     strYoutube,
@@ -15,7 +15,7 @@ const MealPage = props => {
     strInstructions
   } = meal;
 
-  const item = {
+  let item = {
     mealName: strMeal,
     imgAddress: strMealThumb,
     videoAddress: strYoutube,
@@ -23,14 +23,15 @@ const MealPage = props => {
     mealArea: strArea
   };
 
-  // Please improve this code …
   let ingredientList = [];
   var i;
   for (i = 1; i <= 20; i++) {
     var strIng = `strIngredient${i}`;
     var strMes = `strMeasure${i}`;
+    if (meal[strIng] !== "") {
       ingredientList.push([meal[strIng], meal[strMes]]);
     }
+  }
 
   return (
     <div className="container">
@@ -39,9 +40,6 @@ const MealPage = props => {
         <div className="col s6">
           <IngredientList ingredients={ingredientList} />
         </div>
-        {/* <p>
-        {meal["strIngredient9"]}: {meal["strMeasure9"]}
-      </p> */}
         <div className="col s6">
           <Recipe recipe={strInstructions} />
         </div>