barebone app

README.md

@@ -47,9 +47,7 @@ Free meal planner for cooks short on ideas! (like me …)
   - Turkish
   - Unknown
   - Vietnamese
-
+- Cocktail selection
-* Cocktail selection
-
 - Create a profile and save your favourite meals
 - Notation system: know what are the most loved meals
 - Suggestions based on what your personal taste
@@ -64,9 +62,7 @@ Free meal planner for cooks short on ideas! (like me …)
 ## Technical Stack
 
 - `React` client on the front-end
-
+- [Material UI](https://material-ui.com/) component librairy for styling
-* [Material UI](https://material-ui.com/) component librairy for styling
-
 - Public API: [TheMealDb](https://www.themealdb.com/api.php) and [TheCocktailDb](https://www.thecocktaildb.com/api.php)
 - Hosting: anywhere
 
@@ -76,5 +72,4 @@ Free meal planner for cooks short on ideas! (like me …)
 
 - WebApp
 - Random meal suggestion
-
+- Search by name: you're look for a recipe? Ours are easy to make and Yummy!
-* Search by name: you're look for a recipe? Ours are easy to make and Yummy!

package-lock.json

@@ -6239,6 +6239,11 @@
       "resolved": "https://registry.npmjs.org/growly/-/growly-1.3.0.tgz",
       "integrity": "sha1-8QdIy+dq+WS3yWyTxrzCivEgwIE="
     },
+    "gud": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/gud/-/gud-1.0.0.tgz",
+      "integrity": "sha512-zGEOVKFM5sVPPrYs7J5/hYEw2Pof8KCyOwyhG8sAF26mCAeUFAcYPu1mwB7hhpIP29zOIBaDqwuHdLp0jvZXjw=="
+    },
     "gzip-size": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/gzip-size/-/gzip-size-5.1.1.tgz",
@@ -6369,6 +6374,19 @@
       "resolved": "https://registry.npmjs.org/hex-color-regex/-/hex-color-regex-1.1.0.tgz",
       "integrity": "sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ=="
     },
+    "history": {
+      "version": "4.10.1",
+      "resolved": "https://registry.npmjs.org/history/-/history-4.10.1.tgz",
+      "integrity": "sha512-36nwAD620w12kuzPAsyINPWJqlNbij+hpK1k9XRloDtym8mxzGYl2c17LnV6IAGB2Dmg4tEa7G7DlawS0+qjew==",
+      "requires": {
+        "@babel/runtime": "^7.1.2",
+        "loose-envify": "^1.2.0",
+        "resolve-pathname": "^3.0.0",
+        "tiny-invariant": "^1.0.2",
+        "tiny-warning": "^1.0.0",
+        "value-equal": "^1.0.1"
+      }
+    },
     "hmac-drbg": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz",
@@ -6379,6 +6397,14 @@
         "minimalistic-crypto-utils": "^1.0.1"
       }
     },
+    "hoist-non-react-statics": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
+      "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
+      "requires": {
+        "react-is": "^16.7.0"
+      }
+    },
     "hosted-git-info": {
       "version": "2.8.5",
       "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.5.tgz",
@@ -8689,6 +8715,16 @@
       "resolved": "https://registry.npmjs.org/min-indent/-/min-indent-1.0.0.tgz",
       "integrity": "sha1-z8RcN+nsDY8KDsPdTvf3w6vjklY="
     },
+    "mini-create-react-context": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/mini-create-react-context/-/mini-create-react-context-0.3.2.tgz",
+      "integrity": "sha512-2v+OeetEyliMt5VHMXsBhABoJ0/M4RCe7fatd/fBy6SMiKazUSEt3gxxypfnk2SHMkdBYvorHRoQxuGoiwbzAw==",
+      "requires": {
+        "@babel/runtime": "^7.4.0",
+        "gud": "^1.0.0",
+        "tiny-warning": "^1.0.2"
+      }
+    },
     "mini-css-extract-plugin": {
       "version": "0.8.0",
       "resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-0.8.0.tgz",
@@ -11089,6 +11125,52 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.12.0.tgz",
       "integrity": "sha512-rPCkf/mWBtKc97aLL9/txD8DZdemK0vkA3JMLShjlJB3Pj3s+lpf1KaBzMfQrAmhMQB0n1cU/SUGgKKBCe837Q=="
     },
+    "react-router": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-5.1.2.tgz",
+      "integrity": "sha512-yjEuMFy1ONK246B+rsa0cUam5OeAQ8pyclRDgpxuSCrAlJ1qN9uZ5IgyKC7gQg0w8OM50NXHEegPh/ks9YuR2A==",
+      "requires": {
+        "@babel/runtime": "^7.1.2",
+        "history": "^4.9.0",
+        "hoist-non-react-statics": "^3.1.0",
+        "loose-envify": "^1.3.1",
+        "mini-create-react-context": "^0.3.0",
+        "path-to-regexp": "^1.7.0",
+        "prop-types": "^15.6.2",
+        "react-is": "^16.6.0",
+        "tiny-invariant": "^1.0.2",
+        "tiny-warning": "^1.0.0"
+      },
+      "dependencies": {
+        "isarray": {
+          "version": "0.0.1",
+          "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
+          "integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8="
+        },
+        "path-to-regexp": {
+          "version": "1.8.0",
+          "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-1.8.0.tgz",
+          "integrity": "sha512-n43JRhlUKUAlibEJhPeir1ncUID16QnEjNpwzNdO3Lm4ywrBpBZ5oLD0I6br9evr1Y9JTqwRtAh7JLoOzAQdVA==",
+          "requires": {
+            "isarray": "0.0.1"
+          }
+        }
+      }
+    },
+    "react-router-dom": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-5.1.2.tgz",
+      "integrity": "sha512-7BPHAaIwWpZS074UKaw1FjVdZBSVWEk8IuDXdB+OkLb8vd/WRQIpA4ag9WQk61aEfQs47wHyjWUoUGGZxpQXew==",
+      "requires": {
+        "@babel/runtime": "^7.1.2",
+        "history": "^4.9.0",
+        "loose-envify": "^1.3.1",
+        "prop-types": "^15.6.2",
+        "react-router": "5.1.2",
+        "tiny-invariant": "^1.0.2",
+        "tiny-warning": "^1.0.0"
+      }
+    },
     "react-scripts": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-3.3.0.tgz",
@@ -11493,6 +11575,11 @@
       "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-3.0.0.tgz",
       "integrity": "sha1-six699nWiBvItuZTM17rywoYh0g="
     },
+    "resolve-pathname": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/resolve-pathname/-/resolve-pathname-3.0.0.tgz",
+      "integrity": "sha512-C7rARubxI8bXFNB/hqcp/4iUeIXJhJZvFPFPiSPRnhU5UPxzMFIl+2E6yY6c4k9giDJAhtV+enfA+G89N6Csng=="
+    },
     "resolve-url": {
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/resolve-url/-/resolve-url-0.2.1.tgz",
@@ -12842,6 +12929,16 @@
       "resolved": "https://registry.npmjs.org/timsort/-/timsort-0.3.0.tgz",
       "integrity": "sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q="
     },
+    "tiny-invariant": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.0.6.tgz",
+      "integrity": "sha512-FOyLWWVjG+aC0UqG76V53yAWdXfH8bO6FNmyZOuUrzDzK8DI3/JRY25UD7+g49JWM1LXwymsKERB+DzI0dTEQA=="
+    },
+    "tiny-warning": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz",
+      "integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA=="
+    },
     "tmp": {
       "version": "0.0.33",
       "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.0.33.tgz",
@@ -13239,6 +13336,11 @@
         "spdx-expression-parse": "^3.0.0"
       }
     },
+    "value-equal": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/value-equal/-/value-equal-1.0.1.tgz",
+      "integrity": "sha512-NOJ6JZCAWr0zlxZt+xqCHNTEKOsrks2HQd4MqhP1qy4z1SkbEP467eNx6TgDKXMvUOb+OENfJCZwM+16n7fRfw=="
+    },
     "vary": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",

package.json

@@ -8,6 +8,7 @@
     "@testing-library/user-event": "^7.2.1",
     "react": "^16.12.0",
     "react-dom": "^16.12.0",
+    "react-router-dom": "^5.1.2",
     "react-scripts": "3.3.0"
   },
   "scripts": {

public/index.html

@@ -5,10 +5,7 @@
     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
-    <meta
+    <meta name="description" content="Chef's Meal Planner" />
-      name="description"
-      content="Web site created using create-react-app"
-    />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
     <title>Chef's Meal Planner</title>

src/App.js

@@ -1,26 +1,97 @@
-import React from 'react';
+import React, { useState } from "react";
-import logo from './logo.svg';
+import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
-import './App.css';
+import HomePage from "./pages/Home";
+import MealPage from "./pages/Meal";
+import SearchPage from "./pages/Search";
+import NotFound from "./pages/NotFound";
+import Navbar from "./components/Navbar";
+import Footer from "./components/Footer";
+
+const App = () => {
+  const [searchString, setSearchString] = useState("");
+
+  const mealItem = {
+    meals: [
+      {
+        idMeal: "52837",
+        strMeal: "Pilchard puttanesca",
+        strDrinkAlternate: null,
+        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.",
+        strMealThumb:
+          "https://www.themealdb.com/images/media/meals/vvtvtr1511180578.jpg",
+        strTags: null,
+        strYoutube: "https://www.youtube.com/watch?v=wqZzLAPmr9k",
+        strIngredient1: "Spaghetti",
+        strIngredient2: "Olive Oil",
+        strIngredient3: "Onion",
+        strIngredient4: "Garlic",
+        strIngredient5: "Red Chilli",
+        strIngredient6: "Tomato Puree",
+        strIngredient7: "Pilchards",
+        strIngredient8: "Black Olives",
+        strIngredient9: "Parmesan",
+        strIngredient10: "",
+        strIngredient11: "",
+        strIngredient12: "",
+        strIngredient13: "",
+        strIngredient14: "",
+        strIngredient15: "",
+        strIngredient16: "",
+        strIngredient17: "",
+        strIngredient18: "",
+        strIngredient19: "",
+        strIngredient20: "",
+        strMeasure1: "300g",
+        strMeasure2: "1 tbls",
+        strMeasure3: "1 finely chopped ",
+        strMeasure4: "2 cloves minced",
+        strMeasure5: "1",
+        strMeasure6: "1 tbls",
+        strMeasure7: "425g",
+        strMeasure8: "70g",
+        strMeasure9: "Shaved",
+        strMeasure10: "",
+        strMeasure11: "",
+        strMeasure12: "",
+        strMeasure13: "",
+        strMeasure14: "",
+        strMeasure15: "",
+        strMeasure16: "",
+        strMeasure17: "",
+        strMeasure18: "",
+        strMeasure19: "",
+        strMeasure20: "",
+        strSource: "https://www.bbcgoodfood.com/recipes/pilchard-puttanesca",
+        dateModified: null
+      }
+    ]
+  };
+
+  const handleChange = ev => {
+    const { value } = ev.target;
+    setSearchString(value);
+  };
 
-function App() {
   return (
-    <div className="App">
+    <Router>
-      <header className="App-header">
+      <Navbar searchString={searchString} handleChange={handleChange} />
-        <img src={logo} className="App-logo" alt="logo" />
+      <Switch>
-        <p>
+        <Route exact path="/" component={HomePage} />
-          Edit <code>src/App.js</code> and save to reload.
+        <Route
-        </p>
+          exact
-        <a
+          path="/meal"
-          className="App-link"
+          render={props => <MealPage {...props} meal={mealItem} />}
-          href="https://reactjs.org"
+        />
-          target="_blank"
+        <Route exact path="/search" component={SearchPage} />
-          rel="noopener noreferrer"
+        {/* We'll have to input searchString somewhere */}
-        >
+        <Route component={NotFound} />
-          Learn React
+      </Switch>
-        </a>
+      <Footer />
-      </header>
+    </Router>
-    </div>
   );
-}
+};
 
 export default App;

src/components/CopyrightText.js

@@ -0,0 +1,7 @@
+import React from "react";
+
+const CopyrightText = () => {
+  return <p>2020 - Meal's Planner - Made with love</p>;
+};
+
+export default CopyrightText;

src/components/Footer.js

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

src/components/GitHubLink.js

@@ -0,0 +1,11 @@
+import React from "react";
+
+const GitHubLink = () => {
+  return (
+    <a href="https://github.com/rjNemo" target="blank">
+      GitHub
+    </a>
+  );
+};
+
+export default GitHubLink;

src/components/IngredientList.js

@@ -0,0 +1,18 @@
+import React from "react";
+
+const IngredientList = props => {
+  const { ingredients } = props;
+  return (
+    <div className="ingredientList">
+      <h2>Ingredient List</h2>
+      <ul>
+        {ingredients.map(ing => (
+          <li>
+            {ing[0]}: {ing[1]}
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+};
+export default IngredientList;

src/components/Logo.js

@@ -0,0 +1,7 @@
+import React from "react";
+
+const Logo = () => {
+  return <p>🍪</p>;
+};
+
+export default Logo;

src/components/MealPresentation.js

@@ -0,0 +1,38 @@
+import React from "react";
+
+const MealPresentation = props => {
+  const {
+    mealName,
+    imgAddress,
+    videoAddress,
+    mealCategory,
+    mealArea
+  } = props.meal;
+  return (
+    <div className="mealPresentation">
+      <h1>{mealName}</h1>
+      <img src={imgAddress} alt={mealName} />
+      <a href={videoAddress} target="blank">
+        See in video
+      </a>
+      {/* <video width="" height="" controls autoplay>
+        <source src={videoAddress} type="video/mp4" />
+        Your browser does not support the video tag.
+      </video> */}
+      {/* <iframe
+        title="video"
+        width="560"
+        height="315"
+        src="https://www.youtube.com/embed/wqZzLAPmr9k"
+        frameborder="0"
+        allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
+        allowfullscreen
+      ></iframe> */}
+      <ul>
+        <li>{mealCategory}</li>
+        <li>{mealArea}</li>
+      </ul>
+    </div>
+  );
+};
+export default MealPresentation;

src/components/Navbar.js

@@ -0,0 +1,19 @@
+import React from "react";
+import Logo from "./Logo";
+import SearchBar from "./SearchBar";
+import RandomButton from "./RandomButton";
+
+const Navbar = props => {
+  return (
+    <div className="Navbar">
+      <Logo />
+      <SearchBar
+        searchString={props.searchString}
+        handleChange={props.handleChange}
+      />
+      <RandomButton />
+    </div>
+  );
+};
+
+export default Navbar;

src/components/RandomButton.js

@@ -0,0 +1,7 @@
+import React from "react";
+
+const RandomButton = () => {
+  return <input type="submit" value="Random Recipe" />;
+};
+
+export default RandomButton;

src/components/Recipe.js

@@ -0,0 +1,11 @@
+import React from "react";
+
+const Recipe = props => {
+  return (
+    <div className="recipe">
+      <h2>Instructions</h2>
+      <p>{props.recipe}</p>
+    </div>
+  );
+};
+export default Recipe;

src/components/SearchBar.js

@@ -0,0 +1,15 @@
+import React from "react";
+
+const SearchBar = props => {
+  return (
+    <input
+      type="text"
+      name="search"
+      value={props.searchString}
+      placeholder="Search a recipe"
+      onChange={props.handleChange}
+      //{onSubmit={props.handleSubmit}
+    />
+  );
+};
+export default SearchBar;

src/components/SearchResultList.js

@@ -0,0 +1,16 @@
+import React from "react";
+
+const SearchResultList = () => {
+  return (
+    <div>
+      <ul>
+        <li>Recipe #1</li>
+        <li>Recipe #2</li>
+        <li>Recipe #…</li>
+        <li>Recipe #N</li>
+      </ul>
+    </div>
+  );
+};
+
+export default SearchResultList;

src/pages/Home.js

@@ -0,0 +1,18 @@
+import React, { Component } from "react";
+import RandomButton from "../components/RandomButton";
+
+export default class HomePage extends Component {
+  constructor(props) {
+    super(props);
+    this.initState = {};
+    this.state = this.initState;
+  }
+  render() {
+    return (
+      <div>
+        <h1>Get a daily suggestion from the Chef</h1>
+        <RandomButton />
+      </div>
+    );
+  }
+}

src/pages/Meal.js

@@ -0,0 +1,46 @@
+import React from "react";
+import MealPresentation from "../components/MealPresentation";
+import IngredientList from "../components/IngredientList";
+import Recipe from "../components/Recipe";
+
+const MealPage = props => {
+  const meal = props.meal.meals[0];
+
+  const {
+    strMeal,
+    strMealThumb,
+    strYoutube,
+    strCategory,
+    strArea,
+    strInstructions
+  } = meal;
+
+  const item = {
+    mealName: strMeal,
+    imgAddress: strMealThumb,
+    videoAddress: strYoutube,
+    mealCategory: strCategory,
+    mealArea: strArea
+  };
+
+  // Please improve this code …
+  let ingredientList = [];
+  var i;
+  for (i = 1; i <= 20; i++) {
+    var strIng = `strIngredient${i}`;
+    var strMes = `strMeasure${i}`;
+    ingredientList.push([meal[strIng], meal[strMes]]);
+  }
+
+  return (
+    <div>
+      <MealPresentation meal={item} />
+      <IngredientList ingredients={ingredientList} />
+      {/* <p>
+        {meal["strIngredient9"]}: {meal["strMeasure9"]}
+      </p> */}
+      <Recipe recipe={strInstructions} />
+    </div>
+  );
+};
+export default MealPage;

src/pages/NotFound.js

@@ -0,0 +1,16 @@
+import React, { Component } from "react";
+
+export default class NotFoundPage extends Component {
+  constructor(props) {
+    super(props);
+    this.initState = {};
+    this.state = this.initState;
+  }
+  render() {
+    return (
+      <div>
+        <p>404 Not Found</p>
+      </div>
+    );
+  }
+}

src/pages/Search.js

@@ -0,0 +1,18 @@
+import React, { Component } from "react";
+import SearchResultList from "../components/SearchResultList";
+
+export default class SearchPage extends Component {
+  constructor(props) {
+    super(props);
+    this.initState = {};
+    this.state = this.initState;
+  }
+  render() {
+    return (
+      <div>
+        <h1>Search Results</h1>
+        <SearchResultList />
+      </div>
+    );
+  }
+}