From 9d7db746cd79debecd68b0b49f3f688ef1c31f2b Mon Sep 17 00:00:00 2001 From: Ruidy Nemausat Date: Sat, 25 Jan 2020 22:48:32 +0100 Subject: [PATCH] routing nesting --- README.md | 5 +---- src/App.css | 17 ----------------- src/App.js | 21 +++++++++++---------- src/components/CategoryEntry.js | 20 ++++++++++++++------ src/index.css | 21 ++++++++++++++++++--- src/logo.svg | 7 ------- src/pages/NotFound.js | 33 +++++++++++++++++++-------------- 7 files changed, 63 insertions(+), 61 deletions(-) delete mode 100644 src/App.css delete mode 100644 src/logo.svg diff --git a/README.md b/README.md index cdeea01..d545968 100644 --- a/README.md +++ b/README.md @@ -62,7 +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 +- [Materialize](https://materializecss.com) CSS librairy for styling - Public API: [TheMealDb](https://www.themealdb.com/api.php) and [TheCocktailDb](https://www.thecocktaildb.com/api.php) - Hosting: anywhere @@ -76,6 +76,3 @@ Free meal planner for cooks short on ideas! (like me …) - Search by name: you're looking for a recipe? Ours are easy to make and yummy! ## TO DO - -- write a createURI() function which generates the URI with a keyword as argument -- fetch categories on categories link Click diff --git a/src/App.css b/src/App.css deleted file mode 100644 index cc458b8..0000000 --- a/src/App.css +++ /dev/null @@ -1,17 +0,0 @@ -body { - display: flex; - min-height: 100vh; - flex-direction: column; -} - -main { - flex: 1 0 auto; -} - -div { - white-space: pre-wrap; -} - -.background { - background-image: url(./images/parallax1.jpg); -} diff --git a/src/App.js b/src/App.js index e81b3a4..047c6fb 100644 --- a/src/App.js +++ b/src/App.js @@ -7,7 +7,7 @@ import CategoryListPage from "./pages/CategoryList"; import NotFound from "./pages/NotFound"; import Navbar from "./components/Navbar"; import Footer from "./components/Footer"; -import "./App.css"; +import "./index.css"; const App = () => { const [searchString, setSearchString] = useState(""); @@ -72,7 +72,7 @@ const App = () => { } ] }; - const [mealItem, setMeal] = useState(mealDef); + const [meal, setMeal] = useState(mealDef); const createURI = keyword => { const ROOT = "https://www.themealdb.com/api/json/v1/1/"; @@ -80,17 +80,16 @@ const App = () => { }; const getMeal = () => { - const URI = createURI("random"); - getFromAPI(URI, setMeal); + getFromAPI("random", setMeal); }; const getCategories = () => { - const URI = createURI("categories"); - getFromAPI(URI, setCategories); + getFromAPI("categories", setCategories); }; - const getFromAPI = (uri, set) => { - fetch(uri) + const getFromAPI = (keyword, set) => { + const URI = createURI(keyword); + fetch(URI) .then(response => response.json()) .then(data => set(data)); }; @@ -117,7 +116,7 @@ const App = () => { } + render={props => } /> { /> {/* We'll have to input searchResults somewhere */} - + } + />