navigation error handling

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)

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

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>

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>

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

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}>

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 {
+  const {
-      strMeal,
+    strMeal,
-      strMealThumb,
+    strMealThumb,
-      strYoutube,
+    strYoutube,
-      strCategory,
+    strCategory,
-      strArea,
+    strArea,
-      strInstructions
+    strInstructions
-    } = meal;
+  } = meal;
 
-    const item = {
+  const item = {
-      mealName: strMeal,
+    mealName: strMeal,
-      imgAddress: strMealThumb,
+    imgAddress: strMealThumb,
-      videoAddress: strYoutube,
+    videoAddress: strYoutube,
-      mealCategory: strCategory,
+    mealCategory: strCategory,
-      mealArea: strArea
+    mealArea: strArea
-    };
+  };
 
-    let ingredientList = [];
+  let ingredientList = [];
-    var i;
+  var i;
-    for (i = 1; i <= 20; i++) {
+  for (i = 1; i <= 20; i++) {
-      var strIng = `strIngredient${i}`;
+    var strIng = `strIngredient${i}`;
-      var strMes = `strMeasure${i}`;
+    var strMes = `strMeasure${i}`;
-      if (meal[strIng] !== "" && meal[strIng] !== null) {
+    if (meal[strIng] !== "" && meal[strIng] !== null) {
-        ingredientList.push([meal[strIng], meal[strMes]]);
+      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>
+  );
 };

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
+        <div className="col s12 offset-m3 m6">
-          src="https://images.otstatic.com/prod/26153735/2/large.jpg"
+          <div className="card hoverable">
-          alt="404 not found"
+            <div className="card-image">
-        />
+              <img
-        <div className="row">
+                className="responsive-img"
-          <RandomButton handleClick={props.handleClick} />
+                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>