Dish cards

src/App.scss

@@ -5,6 +5,7 @@
 @import "./styles/SearchResults.scss";
 @import "./styles/Pictograms.scss";
 @import "./styles/Restaurant.scss";
+@import "./styles/DishList.scss";
 
 .App {
   padding: 0;

src/Design.scss

@@ -1,7 +1,7 @@
 $main-color: #eb9800;
 $secondary-color: #307482;
 $darker-color: #234f53;
-$bg-color: #ffffff;
+$bg-color: #f8f8f8;
 $accents-color: #0e8496;
 $lighter-color: #00d1b5;
 

src/actions/index.js

@@ -1,4 +1,5 @@
 import axios from "axios";
+import * as toggles from "./toggles";
 
 const autocomplete = (input) => {
   return {
@@ -82,6 +83,7 @@ export const fetchRestaurant = (id) => {
       .get("http://localhost:4000/restaurant?restaurantId=" + id)
       .then((response) => {
         dispatch(setRestaurant(response.data));
+        dispatch(toggles.hideDishes());
         dispatch(setAppMode("APP_RESTAURANT"));
         dispatch(fetchAllDishes(id));
       })
@@ -102,6 +104,7 @@ export const fetchAllDishes = (id) => {
       .get("http://localhost:4000/restaurant/dishes?restaurantId=" + id)
       .then((response) => {
         dispatch(setDishes(response.data));
+        dispatch(toggles.showDishes());
       });
   };
 };

src/actions/toggles.js

@@ -0,0 +1,11 @@
+export const showDishes = () => {
+  return {
+    type: "SET_DISHLIST_VISIBLE",
+  };
+};
+
+export const hideDishes = () => {
+  return {
+    type: "SET_DISHLIST_HIDDEN",
+  };
+};

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>
   );
 }

src/reducers/index.js

@@ -5,6 +5,7 @@ import appMode from "./appMode";
 import searchQuery from "./searchQuery";
 import restaurant from "./restaurant";
 import dishes from "./dishes";
+import toggles from "./toggles";
 
 const rootReducer = combineReducers({
   autocomplete: autoCompleteReducer,
@@ -13,6 +14,7 @@ const rootReducer = combineReducers({
   searchQuery: searchQuery,
   restaurant: restaurant,
   dishes: dishes,
+  toggles: toggles,
 });
 
 export default rootReducer;

src/reducers/toggles.js

@@ -0,0 +1,16 @@
+const initialState = {
+  showDishList: false,
+};
+
+const toggles = (state = initialState, action) => {
+  switch (action.type) {
+    case "SET_DISHLIST_VISIBLE":
+      return (state = { ...state, showDishList: true });
+    case "SET_DISHLIST_HIDDEN":
+      return (state = { ...state, showDishList: false });
+    default:
+      return state;
+  }
+};
+
+export default toggles;

src/styles/DishList.scss

@@ -0,0 +1,29 @@
+.dishlist-container {
+}
+
+h4 {
+  font-weight: 400;
+}
+
+.carddish-container {
+  margin-top: 20px;
+  margin-bottom: 20px;
+  display: flex;
+  width: 100%;
+
+  h2 {
+    font-weight: 300;
+  }
+}
+
+.carddish-img {
+  background-color: $secondary-color;
+  width: 150px;
+  height: 150px;
+  border-radius: 75px;
+  margin: 0px 20px 0px 0px;
+}
+
+.carddish-left {
+  display: flex;
+}

src/styles/Restaurant.scss

@@ -1,6 +1,9 @@
 .restaurant-container {
   min-width: 100vw;
   height: 100%;
+  display: flex;
+  flex-flow: column;
+  align-items: center;
   h1 {
     font-weight: 100;
     font-size: 3rem;
@@ -34,3 +37,7 @@
     margin: 8px;
   }
 }
+
+.restaurant-dishes {
+  min-width: 70%;
+}