redesign / fixes

src/actions/index.js

@@ -22,7 +22,7 @@ axios.interceptors.response.use(
         })
         resolve(response)
         }
-        throw error;
+        store.dispatch(logout());
       })
   });
 
@@ -272,7 +272,9 @@ export const changePassword = (email, password, token) => {
 export const logout = () => {
   return function (dispatch) {
     dispatch(notification("Wylogowano.", "info"));
+    dispatch(toggles.hideBackdrop());
     dispatch(toggles.setLoggedOut());
+    dispatch(push("/"));
   };
 };
 

src/components/Dialogs/AddToSet.js

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
 import { makeStyles } from "@material-ui/core/styles";
 import DialogTitle from "@material-ui/core/DialogTitle";
 import DialogContent from "@material-ui/core/DialogContent";
@@ -9,8 +9,14 @@ import CloseIcon from "@material-ui/icons/Close";
 import List from "@material-ui/core/List";
 import ListItem from "@material-ui/core/ListItem";
 import ListItemText from "@material-ui/core/ListItemText";
+import AddIcon from '@material-ui/icons/Add';
+import RemoveIcon from '@material-ui/icons/Remove';
+import ButtonPrimary from "../Input/ButtonPrimary";
+import ButtonSecondary from "../Input/ButtonSecondary";
 
 export default function AddToSet(props) {
+  const [quantity, setQuantity] = useState(1);
+  const [selectedSet, setName] = useState("");
   const loginStyles = makeStyles((theme) => ({
     root: {
       textAlign: "center",
@@ -18,7 +24,9 @@ export default function AddToSet(props) {
         backgroundColor: "#262626",
         color: "#bbbbbb",
         minWidth: "360px",
+        borderRadius: "24px"
       },
+      zIndex: "5 !important"
     },
     closeButton: {
       color: "#bbbbbb",
@@ -28,7 +36,21 @@ export default function AddToSet(props) {
     },
     set: {
       width: "100%",
+      "& .Mui-selected": {
+        backgroundColor: "#b46c00",
       },
+      "& .MuiListItem-root": {
+        borderRadius: "12px"
+      }
+    },
+    quantity: {
+      width: "100%",
+      display: "flex",
+      justifyContent: "center"
+    },
+    h4: {
+      margin: "12px auto 12px auto"
+    }
   }));
 
   const loginClass = loginStyles();
@@ -38,13 +60,24 @@ export default function AddToSet(props) {
       <ListItem
         button
         key={lunchSet.lunchSetName}
-        onClick={() => props.add(lunchSet.lunchSetName)}
+        onClick={() => setName(lunchSet.lunchSetName)}
+        selected={selectedSet === lunchSet.lunchSetName}
       >
         <ListItemText primary={lunchSet.lunchSetName} />
       </ListItem>
     );
   });
 
+  const increment = () => {
+    setQuantity(quantity + 1);
+  }
+
+  const decrement = () => {
+    if(quantity > 1){
+      setQuantity(quantity - 1);
+    }
+  }
+
   return (
     <Dialog
       className={loginClass.root}
@@ -52,7 +85,7 @@ export default function AddToSet(props) {
       open={props.open}
       aria-labelledby="login-title"
     >
-      <DialogTitle id="login-title">Wybierz zestaw</DialogTitle>
+      <DialogTitle id="login-title">Dodaj do zestawu</DialogTitle>
       <IconButton
         className={loginClass.closeButton}
         onClick={props.cancel}
@@ -62,7 +95,21 @@ export default function AddToSet(props) {
       </IconButton>
       <Divider />
       <DialogContent>
+        <h4 className={loginClass.h4}>Ilość</h4>
+        <div className={loginClass.quantity}>
+          <IconButton onClick={decrement}>
+            <RemoveIcon/>
+          </IconButton>
+          <h3>{quantity}</h3>
+          <IconButton onClick={increment}>
+            <AddIcon/>
+          </IconButton>
+        </div>
+        <h4 className={loginClass.h4}>Zestaw</h4>
         <List className={loginClass.set}>{Sets}</List>
+        <Divider />
+        <ButtonPrimary text="Anuluj" onClick={() => props.cancel()}/>
+        <ButtonSecondary disabled={!(selectedSet.length > 0)} text="Dodaj" onClick={() => props.add(selectedSet, quantity)}/>
       </DialogContent>
     </Dialog>
   );

src/components/Dialogs/EditDish.js

@@ -30,6 +30,7 @@ import InputPrices from "../Input/InputPrices";
 
 const useStyles = makeStyles((theme) => ({
   root: {
+    zIndex: "5 !important",
     margin: "auto",
     textAlign: "center",
     maxHeight: "90vh",

src/components/Dialogs/ForgotPassword.js

@@ -30,6 +30,7 @@ export default function ForgotPassword(props) {
 
   const loginStyles = makeStyles((theme) => ({
     root: {
+      zIndex: "5 !important",
       textAlign: "center",
       "& .MuiPaper-root": {
         backgroundColor: "#262626",

src/components/Dialogs/LoginDialog.js

@@ -39,6 +39,7 @@ export default function LoginDialog(props) {
         color: "#bbbbbb",
         borderRadius: "24px"
       },
+      zIndex: "5 !important"
     },
     closeButton: {
       color: "#bbbbbb",

src/components/Dialogs/NewDish.js

@@ -36,6 +36,7 @@ import FavoriteBorderIcon from "@material-ui/icons/FavoriteBorder";
 
 const useStyles = makeStyles((theme) => ({
   root: {
+    zIndex: "5 !important",
     margin: "auto",
     textAlign: "center",
     maxHeight: "90vh",

src/components/Dialogs/NewRestaurant.js

@@ -43,6 +43,7 @@ import ButtonPrimary from "../Input/ButtonPrimary";
 
 const useStyles = makeStyles((theme) => ({
   root: {
+    zIndex: "5 !important",
     margin: "auto",
     textAlign: "center",
     maxHeight: "90vh",

src/components/Dialogs/PasswordConfirmation.js

@@ -16,6 +16,7 @@ export default function PasswordConfirmation(props) {
 
   const loginStyles = makeStyles((theme) => ({
     root: {
+      zIndex: "5 !important",
       textAlign: "center",
       "& .MuiPaper-root": {
         backgroundColor: "#262626",

src/components/Dialogs/PaymentDialog.js

@@ -12,6 +12,7 @@ import CloseIcon from "@material-ui/icons/Close";
 export default function PasswordConfirmation(props) {
   const loginStyles = makeStyles((theme) => ({
     root: {
+      zIndex: "5 !important",
       textAlign: "center",
       "& .MuiPaper-root": {
         backgroundColor: "#262626",

src/components/Dialogs/RegisterDialog.js

@@ -50,6 +50,7 @@ export default function RegisterDialog(props) {
 
   const loginStyles = makeStyles((theme) => ({
     root: {
+      zIndex: "5 !important",
       textAlign: "center",
       "& .MuiPaper-root": {
         backgroundColor: "#262626",

src/components/Dialogs/ResetPassword.js

@@ -39,6 +39,7 @@ export default function ResetPassword(props) {
 
   const loginStyles = makeStyles((theme) => ({
     root: {
+      zIndex: "5 !important",
       textAlign: "center",
       "& .MuiPaper-root": {
         backgroundColor: "#262626",

src/components/Dialogs/Settings.js

@@ -20,6 +20,7 @@ import RoomIcon from '@material-ui/icons/Room';
 
 const useStyles = makeStyles((theme) => ({
   root: {
+    zIndex: "5 !important",
     textAlign: "center",
     "& .MuiPaper-root": {
       minWidth: "30%",

src/components/Dialogs/YesNo.js

@@ -12,10 +12,12 @@ import CloseIcon from "@material-ui/icons/Close";
 export default function PasswordConfirmation(props) {
   const loginStyles = makeStyles((theme) => ({
     root: {
+      zIndex: "5 !important",
       textAlign: "center",
       "& .MuiPaper-root": {
         backgroundColor: "#262626",
         color: "#bbbbbb",
+        borderRadius: "24px"
       },
       minWidth: "250px",
     },

src/components/Input/ButtonSecondary.js

@@ -20,5 +20,5 @@ const StylizedButton = withStyles({
 })(Button);
 
 export default function ButtonSecondary(props) {
-  return <StylizedButton onClick={props.onClick}>{props.text}</StylizedButton>;
+  return <StylizedButton disabled={props.disabled} onClick={props.onClick}>{props.text}</StylizedButton>;
 }

src/components/Output/AppBackdrop.js

@@ -6,7 +6,7 @@ import { makeStyles } from "@material-ui/core/styles";
 
 const useStyles = makeStyles((theme) => ({
   backdrop: {
-    zIndex: theme.zIndex.drawer + 15,
+    zIndex: theme.zIndex.drawer + 5,
     color: "#fff",
   },
 }));

src/components/Output/DishesCategory.js

@@ -11,6 +11,9 @@ const useStyles = makeStyles((theme) => ({
   root: {
     backgroundColor: "#262626",
     color: "#bbbbbb",
+    "& .MuiListItem-gutters": {
+      padding: "2px"
+    }
   },
   expandIcon: {
     color: "#bbbbbb",
@@ -20,6 +23,7 @@ const useStyles = makeStyles((theme) => ({
 export default function DishesCategory(props) {
   const classes = useStyles();
   const dishes = props.dishes;
+
   const dishCards = dishes.map((dish) => {
     return (
       <ListItem key={dish._id}>

src/components/Output/EditDishList.js

@@ -90,18 +90,19 @@ export default function EditDishList(props) {
     setSetListOpen(true);
   };
 
-  const addToSet = (setName) => {
+  const addToSet = (setName, quantity) => {
     setSetListOpen(false);
     const data = {
       setName: setName,
       restaurantId: props.restaurantId,
       dishId: selectedDish,
+      quantity: quantity,
       action: "add",
     };
     dispatch(showBackdrop());
     axios({
       method: "POST",
-      url: backend + "/restaurant/lunch",
+      url: backend + "restaurant/lunch",
       data: data,
       headers: {
         "x-auth-token": token,
@@ -182,7 +183,7 @@ export default function EditDishList(props) {
         lunchMenu={props.lunchMenu}
         open={setListOpen}
         cancel={() => setSetListOpen(false)}
-        add={(setName) => addToSet(setName)}
+        add={(setName, quantity) => addToSet(setName, quantity)}
       />
       {thisCategoryDishes.length === 0 ? (
         <ListItem style={{ marginLeft: "14px", fontSize: "12px" }}>

src/components/Output/LunchCardDish.js

@@ -0,0 +1,33 @@
+import React from "react";
+import { useHistory } from "react-router-dom";
+import KeyboardArrowRightIcon from "@material-ui/icons/KeyboardArrowRight";
+
+export default function LunchCardDish(props) {
+  const history = useHistory();
+  const {
+    name,
+    imgUrl,
+    _id,
+  } = props.dish;
+
+  return (
+    <div
+      className="carddish-container"
+      onClick={() => history.push(`/dish/${_id}`)}
+    >
+      <div className="carddish-left">
+        <h3>{props.quantity}x</h3>
+        <div
+          className="lunch-carddish-img"
+          style={{ backgroundImage: "url(" + imgUrl + ")" }}
+        />
+        <div className="carddish-left-info">
+            <h2>{name}</h2>
+        </div>
+      </div>
+      <div className="lunch-carddish-right">
+        <KeyboardArrowRightIcon color="primary" />
+      </div>
+    </div>
+  );
+}

src/components/Output/LunchDishesCategory.js

@@ -0,0 +1,63 @@
+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 LunchCardDish from "./LunchCardDish";
+import { makeStyles } from "@material-ui/core/styles";
+
+const useStyles = makeStyles((theme) => ({
+  root: {
+    backgroundColor: "#262626",
+    color: "#bbbbbb",
+    "& .MuiListItem-gutters": {
+      padding: "2px"
+    },
+  },
+  expandIcon: {
+    color: "#bbbbbb",
+  },
+}));
+
+const filterDishes = (dishes, setDishes) => {
+    const ids = setDishes.map((dish) => {
+      return dish.dishId
+    })
+    let result = [];
+    dishes.map((dish) => {
+      if (ids.includes(dish._id)) {
+        const lunchSetDish = setDishes.filter((thisDish) => thisDish.dishId === dish._id)[0]
+        result.push({...dish, quantity: lunchSetDish.quantity});
+      }
+      return true;
+    });
+    return result;
+};
+
+
+export default function LunchDishesCategory(props) {
+  const classes = useStyles();
+  const dishes = props.dishes;
+  const filtered = filterDishes(dishes, props.lunchSetDishes)
+  const dishCards = filtered.map((dish) => {
+    return (
+      <ListItem key={dish._id}>
+        <LunchCardDish dish={dish} quantity={dish.quantity}></LunchCardDish>
+      </ListItem>
+    );
+  });
+
+  return (
+    <Accordion className={classes.root}>
+      <AccordionSummary
+        expandIcon={<ExpandMoreIcon className={classes.expandIcon} />}
+      >
+        <h4>
+          {props.name} <span>{props.price && `(${props.price}zł)`}</span>
+        </h4>
+      </AccordionSummary>
+      <List>{dishCards}</List>
+    </Accordion>
+  );
+}

src/components/Output/LunchMenu.js

@@ -1,35 +1,26 @@
 import React from "react";
-import DishesCategory from "./DishesCategory";
+import LunchDishesCategory from "./LunchDishesCategory";
 import { useSelector } from "react-redux";
 
 export default function LunchMenu(props) {
-  const dishlist = useSelector((state) => state.dishes);
+  const dishes = useSelector((state) => state.dishes)
   const { restaurant } = props;
   const lunchMenu = restaurant.lunchMenu;
-  function filterDishes(dishes, set) {
-    var result = [];
-    if (dishes.length !== 0) {
-      dishes.map((dish) => {
-        if (set.lunchSetDishes.includes(dish._id)) {
-          result.push(dish);
-        }
-        return true;
-      });
-      return result;
-    } else {
-      return [];
-    }
-  }
   const sets = lunchMenu.map((set) => {
+    if(set.lunchSetDishes.length > 0){
       return (
-      <DishesCategory
+        <LunchDishesCategory
           key={set.lunchSetName}
           name={set.lunchSetName}
           price={set.lunchSetPrice}
           hidePrice={true}
-        dishes={filterDishes(dishlist, set)}
+          lunchSetDishes={set.lunchSetDishes}
+          dishes={dishes}
         />
       );
+    } else {
+      return <div key={set.lunchSetName}></div>;
+    }
   });
 
   return <div className="dishlist-container">{sets && sets}</div>;

src/components/Output/LunchSetDishList.js

@@ -18,9 +18,12 @@ export default function EditDishList(props) {
   const token = useSelector((state) => state.data.userData.jwt);
 
   const filterDishes = (dishes, setDishes) => {
+    const ids = setDishes.map((dish) => {
+      return dish.dishId
+    })
     let result = [];
     dishes.map((dish) => {
-      if (setDishes.includes(dish._id)) {
+      if (ids.includes(dish._id)) {
         result.push(dish);
       }
       return true;
@@ -50,7 +53,7 @@ export default function EditDishList(props) {
     dispatch(showBackdrop());
     axios({
       method: "POST",
-      url: backend + "/restaurant/lunch",
+      url: backend + "restaurant/lunch",
       data: data,
       headers: {
         "x-auth-token": token,
@@ -70,10 +73,14 @@ export default function EditDishList(props) {
   const allDishes = useSelector((state) => state.dishes);
   const thisSetDishes = filterDishes(allDishes, props.lunchSet.lunchSetDishes);
   const Dishes = thisSetDishes.map((dish) => {
+    const thisDishInSet = props.lunchSet.lunchSetDishes.filter((dishInSet) => {
+      return dishInSet.dishId === dish._id;
+    })[0]
     return (
       <ListItem key={dish._id}>
         <div className="editRestaurant-dish">
           <div className="editRestaurant-dishLeft">
+            <h3 className="editRestaurant-dishLeft-header">{thisDishInSet.quantity}x</h3>
             <div
               className="editRestaurant-dishImg"
               style={

src/components/Output/Restaurant.js

@@ -73,6 +73,7 @@ export default function Restaurant(props) {
       <div className="restaurant-content">
         <div className="restaurant-dishes">
           {!showDishList && <CircularProgress />}
+          {(showDishList && restaurant.lunchMenu) && <h3>Zestawy</h3>}
           {(showDishList && restaurant.lunchMenu) && <LunchMenu restaurant={restaurant} />}
           <h3>Menu</h3>
           {!showDishList && <CircularProgress />}

src/styles/Dish.scss

@@ -47,13 +47,13 @@
 .dish-content {
   h5 {
     font-size: 1rem;
-    font-weight: 300;
+    font-weight: 500;
     margin: 0 0 0 auto;
   }
   p {
     color: $gray;
     margin: 0 auto 0 0;
-    font-weight: 500;
+    font-weight: 300;
   }
 }
 

src/styles/DishList.scss

@@ -13,7 +13,6 @@ h4 {
   width: 95%;
   cursor: pointer;
   transition: all 0.2s;
-
   h2 {
     font-weight: 500;
     color: $main-color;
@@ -28,10 +27,20 @@ h4 {
   background-color: $secondary-color;
   background-size: cover;
   background-position: center;
-  width: 120px;
+  width: 100px;
-  height: 120px;
+  height: 100px;
   border-radius: 20px;
-  margin: 0px 14px 0px 0px;
+  margin: 0px 12px 0px 0px;
+}
+
+.lunch-carddish-img {
+  background-color: $secondary-color;
+  background-size: cover;
+  background-position: center;
+  width: 60px;
+  height: 60px;
+  border-radius: 14px;
+  margin: 0px 12px 0px 0px;
 }
 
 .carddish-left {
@@ -42,11 +51,14 @@ h4 {
     margin: auto;
   }
   p {
-    font-size: 14px;
+    font-size: 12px;
     font-weight: 400;
     margin-left: auto;
     color: #c9c9c9;
   }
+  h3{
+    margin: auto 12px auto 12px;
+  }
 }
 
 .carddish-left-info {
@@ -76,6 +88,14 @@ h4 {
   }
 }
 
+.lunch-carddish-right{
+  display: flex;
+  flex-direction: column;
+  margin-right: 5px;
+  align-items: flex-end;
+  justify-content: center;
+}
+
 .carddish-prices-multi {
   margin-right: 6px;
   margin-top: 6px;

src/styles/EditRestaurant.scss

@@ -122,6 +122,10 @@
   align-items: center;
 }
 
+.editRestaurant-dishLeft-header{
+  margin-right: 12px;
+}
+
 .editRestaurant-dish:hover {
   background-color: #3b3b3b;
 }