From 12fdc42bd53631a3ac1163bbe3253735d8ed1f34 Mon Sep 17 00:00:00 2001
From: Ruidy Nemausat <ruidy.nemausat@gmail.com>
Date: Fri, 31 Jan 2020 08:24:30 +0100
Subject: [PATCH] navigation error handling

---
 README.md                       |  4 --
 src/App.js                      | 23 +++++++++-
 src/components/Footer.jsx       |  4 +-
 src/components/FooterLink.jsx   |  4 +-
 src/components/Navbar.jsx       |  2 +-
 src/components/RandomButton.jsx |  2 +-
 src/pages/Meal.jsx              | 80 ++++++++++++++++-----------------
 src/pages/NotFound.jsx          | 23 ++++++----
 8 files changed, 80 insertions(+), 62 deletions(-)

diff --git a/README.md b/README.md
index c210086..c147cd2 100644
--- a/README.md
+++ b/README.md
@@ -96,9 +96,5 @@ Free meal planner for cooks short on ideas! (like me …)
 - send message after contact form validation (confirm to sender and msg+info to admin)
 - code cleanup (props and refactoring)
 - put a preloader
-- redirect after failed fetch request: (history.push('/path'), or write handleFetchResponse function)
-  - https://stackoverflow.com/questions/45089386/what-is-the-best-way-to-redirect-a-page-using-react-router
-  - https://www.henriksommerfeld.se/error-handling-with-fetch/
-  - Use ErrorBoundaries component ?
 - Back to top button
 - Take a look at some components [here](http://react-materialize.github.io/react-materialize/?path=/story/css-grid--default)
diff --git a/src/App.js b/src/App.js
index 9cbe96d..c24c7b8 100644
--- a/src/App.js
+++ b/src/App.js
@@ -106,24 +106,33 @@ export const App = () => {
   return (
     <Router>
       <Navbar handleClick={getRandomMeal} buttonUrl={buttonUrl} />
+
       <SearchBar
         searchString={searchString}
         handleChange={handleChange}
         onSubmit={getSearchResults}
       />
+
       <Switch>
         <Route exact path="/">
           <Home buttonUrl={buttonUrl} />
         </Route>
+
         <Route exact path={buttonUrl}>
-          <Meal meal={meal} getMeal={getRandomMeal} />
+          {meal !== undefined && meal.meals !== null ? (
+            <Meal meal={meal} getMeal={getRandomMeal} />
+          ) : (
+            <NotFoundPage handleClick={getRandomMeal} />
+          )}
         </Route>
+
         <Route exact path="/categories">
           <CategoryListPage
             categories={categories}
             getCategories={getCategories}
           />
         </Route>
+
         <Route path="/categories/:strCategory/">
           <CategoryPage
             getData={getData}
@@ -132,25 +141,35 @@ export const App = () => {
             meal={meal}
           />
         </Route>
+
         <Route exact path="/search">
           <SearchPage
             searchString={searchString}
             searchResults={searchResults}
           />
         </Route>
+
         <Route path="/contact">
           <ContactPage />
         </Route>
+
         <Route path="/404">
           <NotFoundPage handleClick={getRandomMeal} />
         </Route>
+
         <Route path="/:idMeal">
-          <Meal meal={meal} getMeal={getMeal} />
+          {meal !== undefined && meal.meals !== null ? (
+            <Meal meal={meal} getMeal={getMeal} />
+          ) : (
+            <NotFoundPage handleClick={getRandomMeal} />
+          )}
         </Route>
+
         <Route path="*">
           <Redirect to="/404" />
         </Route>
       </Switch>
+
       <Footer />
     </Router>
   );
diff --git a/src/components/Footer.jsx b/src/components/Footer.jsx
index bb5f65c..820e49a 100644
--- a/src/components/Footer.jsx
+++ b/src/components/Footer.jsx
@@ -11,10 +11,10 @@ export const Footer = () => {
       <div className="row">
         <div className="container">
           <div className=" s12">
-            <h5 className="white-text">Links</h5>
+            <h5 className="white-text">Navigation</h5>
             <ul>
               {links.map((link, i) => (
-                <FooterLink i={i} link={link} />
+                <FooterLink key={i} link={link} />
               ))}
             </ul>
           </div>
diff --git a/src/components/FooterLink.jsx b/src/components/FooterLink.jsx
index 7200d60..c41b292 100644
--- a/src/components/FooterLink.jsx
+++ b/src/components/FooterLink.jsx
@@ -2,9 +2,9 @@ import React from "react";
 import { Link } from "react-router-dom";
 import { upFirstChar } from "../utils/methods";
 
-export const FooterLink = ({ link, i }) => {
+export const FooterLink = ({ link }) => {
   return (
-    <li key={i}>
+    <li>
       <Link className="grey-text text-lighten-3" to={`/${link}`}>
         {upFirstChar(link)}
       </Link>
diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx
index 1e0f6b8..58ee4c2 100644
--- a/src/components/Navbar.jsx
+++ b/src/components/Navbar.jsx
@@ -14,7 +14,7 @@ export const Navbar = props => {
             <Logo />
             <ul id="nav-mobile" className="right hide-on-med-and-down">
               {links.map((link, i) => (
-                <FooterLink i={i} link={link} />
+                <FooterLink key={i} link={link} />
               ))}
               <li>
                 <RandomButton
diff --git a/src/components/RandomButton.jsx b/src/components/RandomButton.jsx
index 5dbac80..6fa2ece 100644
--- a/src/components/RandomButton.jsx
+++ b/src/components/RandomButton.jsx
@@ -1,7 +1,7 @@
 import React from "react";
 import { Link } from "react-router-dom";
 
-export const RandomButton = ({ url, size, handleClick }) => {
+export const RandomButton = ({ url, size = "large", handleClick }) => {
   const classString = `waves-effect waves-light btn-${size}`;
   return (
     <Link to={url}>
diff --git a/src/pages/Meal.jsx b/src/pages/Meal.jsx
index d4c4d70..bdad1ef 100644
--- a/src/pages/Meal.jsx
+++ b/src/pages/Meal.jsx
@@ -2,7 +2,7 @@ import React, { useEffect } from "react";
 import { MealPresentation } from "../components/MealPresentation";
 import { IngredientList } from "../components/IngredientList";
 import { Recipe } from "../components/Recipe";
-import { useParams, Redirect } from "react-router-dom";
+import { useParams } from "react-router-dom";
 
 export const Meal = props => {
   const { getMeal } = props;
@@ -12,50 +12,46 @@ export const Meal = props => {
     idMeal === null ? getMeal() : getMeal(idMeal);
   }, []);
 
-  if (props.meal.meals !== null) {
-    const meal = props.meal.meals[0];
+  const meal = props.meal.meals[0];
 
-    const {
-      strMeal,
-      strMealThumb,
-      strYoutube,
-      strCategory,
-      strArea,
-      strInstructions
-    } = meal;
+  const {
+    strMeal,
+    strMealThumb,
+    strYoutube,
+    strCategory,
+    strArea,
+    strInstructions
+  } = meal;
 
-    const item = {
-      mealName: strMeal,
-      imgAddress: strMealThumb,
-      videoAddress: strYoutube,
-      mealCategory: strCategory,
-      mealArea: strArea
-    };
+  const item = {
+    mealName: strMeal,
+    imgAddress: strMealThumb,
+    videoAddress: strYoutube,
+    mealCategory: strCategory,
+    mealArea: strArea
+  };
 
-    let ingredientList = [];
-    var i;
-    for (i = 1; i <= 20; i++) {
-      var strIng = `strIngredient${i}`;
-      var strMes = `strMeasure${i}`;
-      if (meal[strIng] !== "" && meal[strIng] !== null) {
-        ingredientList.push([meal[strIng], meal[strMes]]);
-      }
+  let ingredientList = [];
+  var i;
+  for (i = 1; i <= 20; i++) {
+    var strIng = `strIngredient${i}`;
+    var strMes = `strMeasure${i}`;
+    if (meal[strIng] !== "" && meal[strIng] !== null) {
+      ingredientList.push([meal[strIng], meal[strMes]]);
     }
-
-    return (
-      <div className="container">
-        <div className="row">
-          <div className="col s12 m6">
-            <MealPresentation meal={item} />
-          </div>
-          <div className="col s12 m6">
-            <IngredientList ingredients={ingredientList} />
-          </div>
-        </div>
-        <Recipe recipe={strInstructions} />
-      </div>
-    );
-  } else {
-    return <Redirect to="/404" />;
   }
+
+  return (
+    <div className="container">
+      <div className="row">
+        <div className="col s12 m6">
+          <MealPresentation meal={item} />
+        </div>
+        <div className="col s12 m6">
+          <IngredientList ingredients={ingredientList} />
+        </div>
+      </div>
+      <Recipe recipe={strInstructions} />
+    </div>
+  );
 };
diff --git a/src/pages/NotFound.jsx b/src/pages/NotFound.jsx
index 098c6c3..a48e5ca 100644
--- a/src/pages/NotFound.jsx
+++ b/src/pages/NotFound.jsx
@@ -3,15 +3,22 @@ import { RandomButton } from "../components/RandomButton";
 
 export const NotFoundPage = props => {
   return (
-    <div className="section">
-      <div className="container center-align">
+    <div className="container center-align">
+      <div className="row">
         <h1>Wrong Way!</h1>
-        <img
-          src="https://images.otstatic.com/prod/26153735/2/large.jpg"
-          alt="404 not found"
-        />
-        <div className="row">
-          <RandomButton handleClick={props.handleClick} />
+        <div className="col s12 offset-m3 m6">
+          <div className="card hoverable">
+            <div className="card-image">
+              <img
+                className="responsive-img"
+                src="https://images.otstatic.com/prod/26153735/2/large.jpg"
+                alt="404 not found"
+              />
+            </div>
+            <div className="card-content">
+              <RandomButton url="/random" />
+            </div>
+          </div>
         </div>
       </div>
     </div>