diff --git a/README.md b/README.md index dbcd8f0..6c4852d 100644 --- a/README.md +++ b/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! diff --git a/package-lock.json b/package-lock.json index b8ee314..1c6373e 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index a862a62..920486e 100644 --- a/package.json +++ b/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": { diff --git a/public/index.html b/public/index.html index 2e0ef92..57a17d5 100644 --- a/public/index.html +++ b/public/index.html @@ -5,10 +5,7 @@ - + Chef's Meal Planner diff --git a/src/App.js b/src/App.js index ce9cbd2..5328c90 100644 --- a/src/App.js +++ b/src/App.js @@ -1,26 +1,97 @@ -import React from 'react'; -import logo from './logo.svg'; -import './App.css'; +import React, { useState } from "react"; +import { BrowserRouter as Router, Switch, Route } from "react-router-dom"; +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 ( -
-
- logo -

- Edit src/App.js and save to reload. -

- - Learn React - -
-
+ + + + + } + /> + + {/* We'll have to input searchString somewhere */} + + +