Dish cards

src/components/CardDish.js

@@ -0,0 +1,20 @@
+import React from "react";
+
+export default function CardDish(props) {
+  const { name, price, imgUrl } = props.dish;
+
+  return (
+    <div className="carddish-container">
+      <div className="carddish-left">
+        <div
+          className="carddish-img"
+          style={{ backgroundImage: "url(" + imgUrl + ")" }}
+        />
+        <h2>{name}</h2>
+      </div>
+      <div className="carddish-right">
+        <h5>{price}</h5>
+      </div>
+    </div>
+  );
+}

src/components/DishList.js

@@ -0,0 +1,40 @@
+import React from "react";
+import DishesCategory from "./DishesCategory";
+import { useSelector } from "react-redux";
+
+function extractCategories(dishes) {
+  var categories = new Set();
+
+  if (typeof dishes !== "undefined" && dishes.length > 0) {
+    dishes.map((dish) => categories.add(dish.category));
+    return Array.from(categories);
+  }
+}
+
+function filterDishes(dishes, category) {
+  var result = [];
+
+  dishes.map((dish) => {
+    if (dish.category === category) {
+      result.push(dish);
+    }
+    return true;
+  });
+  return result;
+}
+
+export default function DishList(props) {
+  const dishlist = useSelector((state) => state.dishes);
+  const categoriesArray = extractCategories(dishlist);
+  const categories = categoriesArray.map((category) => {
+    return (
+      <DishesCategory
+        key={category}
+        name={category}
+        dishes={filterDishes(dishlist, category)}
+      />
+    );
+  });
+
+  return <div className="dishlist-container">{categories}</div>;
+}

src/components/DishesCategory.js

@@ -0,0 +1,27 @@
+import React from "react";
+import Accordion from "@material-ui/core/Accordion";
+import AccordionSummary from "@material-ui/core/AccordionSummary";
+import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
+import List from "@material-ui/core/List";
+import ListItem from "@material-ui/core/ListItem";
+import CardDish from "./CardDish";
+
+export default function DishesCategory(props) {
+  const dishes = props.dishes;
+  const dishCards = dishes.map((dish) => {
+    return (
+      <ListItem key={dish._id}>
+        <CardDish dish={dish}></CardDish>
+      </ListItem>
+    );
+  });
+
+  return (
+    <Accordion>
+      <AccordionSummary expandIcon={<ExpandMoreIcon />}>
+        <h4>{props.name}</h4>
+      </AccordionSummary>
+      <List>{dishCards}</List>
+    </Accordion>
+  );
+}

src/components/Restaurant.js

@@ -1,9 +1,12 @@
 import React from "react";
 import Pictograms from "./Pictograms";
+import DishList from "./DishList";
+import CircularProgress from "@material-ui/core/CircularProgress";
 import { useSelector } from "react-redux";
 
 export default function Restaurant(props) {
   const restaurant = useSelector((state) => state.restaurant);
+  const showDishList = useSelector((state) => state.toggles.showDishList);
   function extractTags(tags) {
     var results = [];
     for (let [key, value] of Object.entries(tags)) {
@@ -26,7 +29,10 @@ export default function Restaurant(props) {
       </div>
       <h1>{restaurant.name}</h1>
       <p>{restaurant.city}</p>
-      <hr />
+      <div className="restaurant-dishes">
+        {showDishList === false && <CircularProgress />}
+        {showDishList === true && <DishList />}
+      </div>
     </div>
   );
 }