daily brush

README.md

@@ -87,4 +87,3 @@ Free meal planner for cooks short on ideas! (like me …)
   - Use ErrorBoundaries component ?
 - add sidenav on mobile
 - contact form
-- override Router with scoll to top function

public/manifest.json

@@ -25,6 +25,6 @@
   ],
   "start_url": "/",
   "display": "standalone",
-  "theme_color": "#000000",
+  "theme_color": "#ee6e73",
   "background_color": "#ffffff"
 }

src/App.js

@@ -1,41 +1,37 @@
 import React, { useState } from "react";
-import {
-  BrowserRouter as Router,
-  Switch,
-  Route,
-  Redirect
-} 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 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 { Router } from "./utils/router";
+import { Switch, Route, Redirect } 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 { CategoryPage } from "./pages/Category";
+import { NotFoundPage } from "./pages/NotFound";
+import { Navbar } from "./components/Navbar";
+import { SearchBar } from "./components/SearchBar";
+import { Footer } from "./components/Footer";
 import "./index.css";
+import { getData } from "./utils/methods";
 
-const App = () => {
+export const App = () => {
   const [searchString, setSearchString] = useState("");
   const [categories, setCategories] = useState({ categories: [] });
   const [searchResults, setSearchResults] = useState({ meals: [] });
-  // const [isLoading, setIsLoading] = useState(true); //For Preloader
   // Default meal object. TODO: Find a better alternative …
   const mealDef = {
     meals: [
       {
         idMeal: "52837",
-        strMeal: "Pilchard puttanesca",
+        strMeal: "Chef's meal",
         strDrinkAlternate: null,
-        strCategory: "Pasta",
-        strArea: "Italian",
+        strCategory: "yummy",
+        strArea: "Mine",
         strInstructions:
           "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",
+        strMealThumb: require("./images/breakfast.svg"),
+        // "https://www.themealdb.com/images/media/meals/vvtvtr1511180578.jpg",
         strTags: null,
-        strYoutube: "https://www.youtube.com/watch?v=wqZzLAPmr9k",
+        strYoutube: "#",
         strIngredient1: "Spaghetti",
         strIngredient2: "Olive Oil",
         strIngredient3: "Onion",
@@ -83,26 +79,6 @@ const App = () => {
   };
   const [meal, setMeal] = useState(mealDef);
 
-  const createURI = (keyword, option) => {
-    const ROOT = "https://www.themealdb.com/api/json/v1/1/";
-    if (option === null) {
-      return `${ROOT}${keyword}.php`;
-    } else if (option === "filter") {
-      return `${ROOT}${option}.php?c=${keyword}`;
-    } else if (option === "lookup") {
-      return `${ROOT}${option}.php?i=${keyword}`;
-    } else if (option === "search") {
-      return `${ROOT}${option}.php?s=${keyword}`;
-    }
-  };
-
-  const getData = (keyword, set, option = null) => {
-    const URI = createURI(keyword, option);
-    fetch(URI)
-      .then(response => response.json())
-      .then(data => set(data));
-  };
-
   const getRandomMeal = () => {
     getData("random", setMeal);
   };
@@ -129,32 +105,24 @@ const App = () => {
   return (
     <Router>
       <Navbar handleClick={getRandomMeal} buttonUrl={buttonUrl} />
-      <div className="container">
-        <SearchBar
-          searchString={searchString}
-          handleChange={handleChange}
-          onSubmit={getSearchResults}
-        />
-      </div>
+      <SearchBar
+        searchString={searchString}
+        handleChange={handleChange}
+        onSubmit={getSearchResults}
+      />
       <Switch>
         <Route exact path="/">
           <HomePage handleClick={getRandomMeal} buttonUrl={buttonUrl} />
         </Route>
         <Route exact path={buttonUrl}>
-          <MealPage
-            meal={meal}
-            getMeal={getRandomMeal}
-            // isLoading={isLoading}
-          />
+          <MealPage meal={meal} getMeal={getRandomMeal} />
         </Route>
-
         <Route exact path="/categories">
           <CategoryListPage
             categories={categories}
             getCategories={getCategories}
           />
         </Route>
-
         <Route path="/categories/:strCategory/">
           <CategoryPage
             getData={getData}
@@ -170,7 +138,7 @@ const App = () => {
           />
         </Route>
         <Route path="/404">
-          <NotFound handleClick={getRandomMeal} />
+          <NotFoundPage handleClick={getRandomMeal} />
         </Route>
         <Route path="/:idMeal">
           <MealPage meal={meal} getMeal={getMeal} />
@@ -183,5 +151,3 @@ const App = () => {
     </Router>
   );
 };
-
-export default App;

src/components/CardEntry.js

@@ -1,7 +1,7 @@
 import React from "react";
 import { Link } from "react-router-dom";
 
-const CardEntry = props => {
+export const CardEntry = props => {
   const { idMeal, strMeal, strMealThumb } = props.item;
   return (
     <Link to={`${idMeal}`}>
@@ -22,4 +22,3 @@ const CardEntry = props => {
     </Link>
   );
 };
-export default CardEntry;

src/components/CategoryEntry.js

@@ -12,7 +12,7 @@ const CategoryEntry = props => {
 
   return (
     // <CardEntry item={meal} />
-    <Link to={`${url}/${strCategory}`}>
+    <Link to={`${url}${strCategory}`}>
       <li>
         <div className="row">
           <div className="col s12">

src/components/CopyrightText.js

@@ -1,6 +1,6 @@
 import React from "react";
 
-const CopyrightText = () => {
+export const CopyrightText = () => {
   return (
     <span>
       © 2020 - Chef's - Made with{" "}
@@ -10,5 +10,3 @@ const CopyrightText = () => {
     </span>
   );
 };
-
-export default CopyrightText;

src/components/Footer.js

@@ -1,8 +1,8 @@
 import React from "react";
-import CopyrightText from "./CopyrightText";
-import GitHubLink from "./GitHubLink";
+import { CopyrightText } from "./CopyrightText";
+import { GitHubLink } from "./GitHubLink";
 
-const Footer = () => {
+export const Footer = () => {
   return (
     <footer className="page-footer">
       <div className="footer-copyright">
@@ -14,5 +14,3 @@ const Footer = () => {
     </footer>
   );
 };
-
-export default Footer;

src/components/GitHubLink.js

@@ -1,6 +1,6 @@
 import React from "react";
 
-const GitHubLink = () => {
+export const GitHubLink = () => {
   return (
     <a
       className="grey-text text-lighten-4 right"
@@ -12,5 +12,3 @@ const GitHubLink = () => {
     </a>
   );
 };
-
-export default GitHubLink;

src/components/IngredientList.js

@@ -1,6 +1,6 @@
 import React from "react";
 
-const IngredientList = props => {
+export const IngredientList = props => {
   const { ingredients } = props;
   return (
     <div className="ingredientList">
@@ -15,4 +15,3 @@ const IngredientList = props => {
     </div>
   );
 };
-export default IngredientList;

src/components/Logo.js

@@ -1,7 +1,7 @@
 import React from "react";
 import { Link } from "react-router-dom";
 
-const Logo = () => {
+export const Logo = () => {
   return (
     <div className="logo">
       <Link to="/" className="brand-logo">
@@ -12,5 +12,3 @@ const Logo = () => {
     </div>
   );
 };
-
-export default Logo;

src/components/MealPresentation.js

@@ -1,7 +1,7 @@
 import React from "react";
 import { Link } from "react-router-dom";
 
-const MealPresentation = props => {
+export const MealPresentation = props => {
   const {
     mealName,
     imgAddress,
@@ -53,4 +53,3 @@ const MealPresentation = props => {
     </div>
   );
 };
-export default MealPresentation;

src/components/Navbar.js

@@ -1,10 +1,10 @@
 import React from "react";
-import Logo from "./Logo";
+import { Logo } from "./Logo";
 
-import RandomButton from "./RandomButton";
+import { RandomButton } from "./RandomButton";
 import { Link } from "react-router-dom";
 
-const Navbar = props => {
+export const Navbar = props => {
   return (
     <div className="row">
       <nav>
@@ -70,5 +70,3 @@ const Navbar = props => {
     </div>
   );
 };
-
-export default Navbar;

src/components/PreLoader.js

@@ -1,6 +1,6 @@
 import React from "react";
 
-const PreLoader = () => {
+export const PreLoader = () => {
   return (
     <div className="preloader-wrapper active">
       <div className="spinner-layer spinner-red-only">
@@ -17,5 +17,3 @@ const PreLoader = () => {
     </div>
   );
 };
-
-export default PreLoader;

src/components/RandomButton.js

@@ -1,7 +1,7 @@
 import React from "react";
 import { Link } from "react-router-dom";
 
-const RandomButton = props => {
+export const RandomButton = props => {
   const classString = `waves-effect waves-light btn-${props.size}`;
   return (
     <Link to={props.url}>
@@ -15,5 +15,3 @@ const RandomButton = props => {
     </Link>
   );
 };
-
-export default RandomButton;

src/components/Recipe.js

@@ -1,6 +1,6 @@
 import React from "react";
 
-const Recipe = props => {
+export const Recipe = props => {
   return (
     <div className="recipe">
       <h3>Instructions</h3>
@@ -8,4 +8,3 @@ const Recipe = props => {
     </div>
   );
 };
-export default Recipe;

src/components/SearchBar.js

@@ -1,31 +1,32 @@
 import React from "react";
 import { Link } from "react-router-dom";
 
-const SearchBar = props => {
+export const SearchBar = props => {
   return (
-    <div className="row">
-      <form>
-        <input
-          className="input-field col s10"
-          type="text"
-          name="search"
-          value={props.searchString}
-          placeholder="Search a recipe"
-          onChange={props.handleChange}
-        />
-        <Link to="/search">
-          <button
-            className="btn-floating waves-effect waves-light  right  "
-            type="submit"
-            name="searchButton"
-            value="Search"
-            onClick={props.onSubmit}
-          >
-            <i className="material-icons right">send</i>
-          </button>
-        </Link>
-      </form>
+    <div className="container">
+      <div className="row center-align">
+        <form>
+          <input
+            className="input-field col s10"
+            type="text"
+            name="search"
+            value={props.searchString}
+            placeholder="Search a recipe"
+            onChange={props.handleChange}
+          />
+          <Link to="/search">
+            <button
+              className="btn-floating waves-effect waves-light  right  "
+              type="submit"
+              name="searchButton"
+              value="Search"
+              onClick={props.onSubmit}
+            >
+              <i className="material-icons right">send</i>
+            </button>
+          </Link>
+        </form>
+      </div>
     </div>
   );
 };
-export default SearchBar;

src/components/SearchResult.js

@@ -1,9 +1,7 @@
 import React from "react";
-import CardEntry from "./CardEntry";
+import { CardEntry } from "./CardEntry";
 
-const SearchResult = props => {
+export const SearchResult = props => {
   const { meal } = props;
   return <CardEntry item={meal} />;
 };
-
-export default SearchResult;

src/index.js

@@ -1,7 +1,7 @@
 import React from "react";
 import ReactDOM from "react-dom";
 import "./index.css";
-import App from "./App";
+import { App } from "./App";
 import * as serviceWorker from "./serviceWorker";
 
 ReactDOM.render(<App />, document.getElementById("root"));

src/pages/Category.js

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from "react";
 import { useParams, Link, Redirect } from "react-router-dom";
 
-const CategoryPage = props => {
+export const CategoryPage = props => {
   const [meals, setMeals] = useState({ meals: [] });
   const { getData } = props;
   const { strCategory } = useParams();
@@ -24,7 +24,7 @@ const CategoryPage = props => {
           {meals.meals.map((meal, i) => (
             <li key={i}>
               {/* <CardEntry item={meal} /> */}
-              <Link to={`/meal/${meal.idMeal}`}>
+              <Link to={`/${meal.idMeal}`}>
                 <div className="row">
                   <div className="col s12 m6">
                     <div className="card ">
@@ -45,4 +45,3 @@ const CategoryPage = props => {
     </div>
   );
 };
-export default CategoryPage;

src/pages/CategoryList.js

@@ -1,7 +1,7 @@
 import React, { useEffect } from "react";
 import CategoryEntry from "../components/CategoryEntry";
 
-const CategoryListPage = props => {
+export const CategoryListPage = props => {
   const { categories } = props.categories;
   const { getCategories } = props;
 
@@ -22,5 +22,3 @@ const CategoryListPage = props => {
     </div>
   );
 };
-
-export default CategoryListPage;

src/pages/Home.js

@@ -1,7 +1,7 @@
 import React from "react";
-import RandomButton from "../components/RandomButton";
+import { RandomButton } from "../components/RandomButton";
 
-const HomePage = props => {
+export const HomePage = props => {
   return (
     <div className="section ">
       <div className="container ">
@@ -12,10 +12,7 @@ const HomePage = props => {
           </div>
           <div className="col s12 m6">
             <img
-              // src={require("../images/breakfast.svg")}
-              // src={require("../images/Chef.svg")}
               src={require("../images/healthy_options.svg")}
-              // src={require("../images/special_event.svg")}
               alt="hero_image"
               width="100%"
             />
@@ -25,5 +22,3 @@ const HomePage = props => {
     </div>
   );
 };
-
-export default HomePage;

src/pages/Meal.js

@@ -1,11 +1,10 @@
 import React, { useEffect } from "react";
-import MealPresentation from "../components/MealPresentation";
-import IngredientList from "../components/IngredientList";
-import Recipe from "../components/Recipe";
+import { MealPresentation } from "../components/MealPresentation";
+import { IngredientList } from "../components/IngredientList";
+import { Recipe } from "../components/Recipe";
 import { useParams, Redirect } from "react-router-dom";
-// import PreLoader from "../components/PreLoader";
 
-const MealPage = props => {
+export const MealPage = props => {
   const { getMeal } = props;
   const { idMeal } = useParams();
 
@@ -43,7 +42,6 @@ const MealPage = props => {
       }
     }
 
-    // return isLoading ? <PreLoader /> : page;
     return (
       <div className="container">
         <div className="row">
@@ -61,5 +59,3 @@ const MealPage = props => {
     return <Redirect to="/404" />;
   }
 };
-
-export default MealPage;

src/pages/NotFound.js

@@ -1,7 +1,7 @@
 import React from "react";
-import RandomButton from "../components/RandomButton";
+import { RandomButton } from "../components/RandomButton";
 
-const NotFoundPage = props => {
+export const NotFoundPage = props => {
   return (
     <div className="section">
       <div className="container center-align">
@@ -17,5 +17,3 @@ const NotFoundPage = props => {
     </div>
   );
 };
-
-export default NotFoundPage;

src/pages/Search.js

@@ -1,7 +1,7 @@
 import React from "react";
-import SearchResult from "../components/SearchResult";
+import { SearchResult } from "../components/SearchResult";
 
-const SearchPage = props => {
+export const SearchPage = props => {
   let { meals } = props.searchResults;
   const { searchString } = props;
   if (meals === null) {
@@ -12,7 +12,17 @@ const SearchPage = props => {
     <div className="container">
       <h1>Search Results for: {searchString} </h1>
       {meals[0] === undefined ? (
-        <p> Nothing ! Create a component to illustrate emptiness</p>
+        <div className="center-align">
+          <p>
+            No results to display, instead there is a picture of my breakfast.
+          </p>
+          <img
+            src={require("../images/breakfast.svg")}
+            alt="Nothing here!"
+            width="70%"
+          />
+          <p></p>
+        </div>
       ) : (
         <ul>
           {meals.map((meal, i) => (
@@ -23,4 +33,3 @@ const SearchPage = props => {
     </div>
   );
 };
-export default SearchPage;

src/utils/methods.js

@@ -0,0 +1,19 @@
+export const createURI = (keyword, option) => {
+  const ROOT = "https://www.themealdb.com/api/json/v1/1/";
+  if (option === null) {
+    return `${ROOT}${keyword}.php`;
+  } else if (option === "filter") {
+    return `${ROOT}${option}.php?c=${keyword}`;
+  } else if (option === "lookup") {
+    return `${ROOT}${option}.php?i=${keyword}`;
+  } else if (option === "search") {
+    return `${ROOT}${option}.php?s=${keyword}`;
+  }
+};
+
+export const getData = (keyword, set, option = null) => {
+  const URI = createURI(keyword, option);
+  fetch(URI)
+    .then(response => response.json())
+    .then(data => set(data));
+};

src/utils/router.js

@@ -0,0 +1,51 @@
+import React, { useMemo, useEffect } from "react";
+import {
+  Router as RouterOriginal,
+  useParams,
+  useLocation,
+  useHistory,
+  useRouteMatch
+} from "react-router-dom";
+import queryString from "query-string";
+
+import { createBrowserHistory } from "history";
+export const history = createBrowserHistory();
+
+export const Router = ({ children }) => {
+  return (
+    <RouterOriginal history={history}>
+      <ScrollToTop />
+      {children}
+    </RouterOriginal>
+  );
+};
+
+export const ScrollToTop = () => {
+  const location = useLocation();
+  useEffect(() => {
+    window.scrollTo(0, 0);
+  }, [location.pathname]);
+  return null;
+};
+
+export const useRouter = () => {
+  const params = useParams();
+  const location = useLocation();
+  const history = useHistory();
+  const match = useRouteMatch();
+
+  return useMemo(() => {
+    return {
+      push: history.push,
+      replace: history.replace,
+      pathname: location.pathname,
+      query: {
+        ...queryString.parse(location.search),
+        ...params
+      },
+      match,
+      location,
+      history
+    };
+  }, [params, match, location, history]);
+};