make route meal take the category main by defualt and from menu

relates #39
GSG-G7 · Oct 2, 2019 · 2fc187f · 2fc187f
1 parent 923f59d
commit 2fc187f
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 15 deletions.
diff --git a/client/src/components/App/index.js b/client/src/components/App/index.js
@@ -8,7 +8,7 @@ export default () => {
   return (
     <Router>
       <Switch>
-        <Route exact path="/meals" component={MenuPage} />
+        <Route path="/meals" component={MenuPage} />
         <Route exact path="*" component={Error404} />
       </Switch>
     </Router>

diff --git a/client/src/components/MealPage/Category.js b/client/src/components/MealPage/Category.js
@@ -10,7 +10,7 @@ const Category = ({ fetchMeals }) => {
           <i
             className="category_icon white fas fa-turkey"
             tabIndex={0}
-            onClick={() => fetchMeals('Desserts')}
+            onClick={() => fetchMeals('desserts')}
             role="button"
             onKeyPress={key => key}
           >
@@ -21,7 +21,7 @@ const Category = ({ fetchMeals }) => {
           <i
             className="category_icon white fas fa-turkey"
             tabIndex={0}
-            onClick={() => fetchMeals('Breakfast')}
+            onClick={() => fetchMeals('breakfast')}
             role="button"
             onKeyPress={key => key}
           >
@@ -32,7 +32,7 @@ const Category = ({ fetchMeals }) => {
           <i
             className="category_icon white fas fa-turkey"
             tabIndex={0}
-            onClick={() => fetchMeals('Drinks')}
+            onClick={() => fetchMeals('drinks')}
             role="button"
             onKeyPress={key => key}
           >
@@ -43,18 +43,18 @@ const Category = ({ fetchMeals }) => {
           <i
             className="category_icon white fas fa-turkey"
             tabIndex={0}
-            onClick={() => fetchMeals('Sandwishes')}
+            onClick={() => fetchMeals('sandwishes')}
             role="button"
             onKeyPress={key => key}
           >
-            Sandwishes
+            Sandwiches
           </i>
         </li>
         <li>
           <i
             className="category_icon white fas fa-turkey"
             tabIndex={0}
-            onClick={() => fetchMeals('Main')}
+            onClick={() => fetchMeals('main')}
             role="button"
             onKeyPress={key => key}
           >

diff --git a/client/src/components/MealPage/MealList.js b/client/src/components/MealPage/MealList.js
@@ -4,6 +4,8 @@ import CardMeal from './CardMeal';
 import './style.css';
 
 const MealList = ({ data }) => {
+  console.log(data);
+
   const listItems = data.map(item => {
     return (
       <li>

diff --git a/client/src/components/MealPage/index.js b/client/src/components/MealPage/index.js
@@ -10,19 +10,18 @@ import './style.css';
 class MenuPage extends React.Component {
   state = {
     showMenu: true,
-    category: 'main',
     data: [],
   };
 
   componentDidMount() {
-    const { category } = this.state;
-    this.fetchMeals(category);
+    this.fetchMeals('main');
   }
 
-  fetchMeals = category => {
+  fetchMeals = (cat = 'main') => {
     const { history } = this.props;
-    this.setState({ category });
-    fetch(`/api/v1/meals?category=${category}`)
+    history.push(`/meals?category=${cat}`);
+
+    fetch(`/api/v1/meals?category=${cat}`)
       .then(res => res.json())
       .then(result => {
         this.setState({
@@ -54,7 +53,11 @@ class MenuPage extends React.Component {
   };
 
   Header = () => {
-    const { category } = this.state;
+    const {
+      location: { search },
+    } = this.props;
+    const paramVal = new URLSearchParams(search);
+    const category = paramVal.get('category');
 
     return (
       <header className="header">
@@ -98,5 +101,7 @@ class MenuPage extends React.Component {
 }
 MenuPage.propTypes = {
   history: PropTypes.objectOf(PropTypes.any).isRequired,
+  location: PropTypes.objectOf(PropTypes.any).isRequired,
 };
+
 export default MenuPage;
diff --git a/client/src/components/MealPage/style.css b/client/src/components/MealPage/style.css
@@ -8,7 +8,9 @@
     border-radius: 8px;
     align-items: center;
 }
-
+.categoryName{
+    text-transform: capitalize;
+}
 .categoryList{
     width: 100%;
     height: 99vh;