Added categories / add category

src/components/EditRestaurant/EditRestaurantMenu.js

@@ -1,18 +1,28 @@
-import React from "react";
+import React, { useState } from "react";
+import { useSelector, useDispatch } from "react-redux";
 import Divider from "@material-ui/core/Divider";
 import Accordion from "@material-ui/core/Accordion";
 import AccordionSummary from "@material-ui/core/AccordionSummary";
 import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
 import ButtonSecondary from "../Input/ButtonSecondary";
 import TextField from "@material-ui/core/TextField";
+import IconButton from "@material-ui/core/IconButton";
+import DeleteIcon from "@material-ui/icons/Delete";
 import List from "@material-ui/core/List";
 import ListItem from "@material-ui/core/ListItem";
+import AddIcon from "@material-ui/icons/Add";
 import { makeStyles } from "@material-ui/core/styles";
+import validator from "validator";
+import LunchMenu from "./LunchMenu";
+import axios from "axios";
+import { notification, refreshUserData } from "../../actions";
+import { showBackdrop, hideBackdrop } from "../../actions/toggles.js";
 
 const useStyles = makeStyles((theme) => ({
   root: {
     backgroundColor: "#262626",
     color: "#bbbbbb",
+    width: "100%",
   },
   expandIcon: {
     color: "#bbbbbb",
@@ -34,23 +44,49 @@ const useStyles = makeStyles((theme) => ({
 
 export default function EditRestaurantMenu(props) {
   const classes = useStyles();
-  const {
-    imgUrl,
-    dishes,
-    categories,
-    lunchMenu,
-    name,
-    city,
-    adress,
-    placesId,
-    location,
-    workingHours,
-    description,
-    tags,
-    links,
-    phone,
-    hidden,
-  } = props.restaurant;
+  const { categories, lunchMenu } = props.restaurant;
+  const [newCategory, setNewCategory] = useState("");
+  const token = useSelector((state) => state.data.userData.jwt);
+  const dispatch = useDispatch();
+
+  const addCategory = () => {
+    if (validator.isLength(newCategory, { min: 1, max: 20 })) {
+      dispatch(showBackdrop());
+      const data = {
+        restaurantId: props.restaurant._id,
+        category: newCategory,
+        action: "add",
+      };
+      axios({
+        url: "http://localhost:4000/restaurant/category",
+        method: "POST",
+        data: data,
+        headers: {
+          "x-auth-token": token,
+        },
+      })
+        .then((res) => {
+          dispatch(hideBackdrop());
+          dispatch(notification("Dodano kategorię.", "success"));
+          dispatch(refreshUserData(token));
+        })
+        .catch((e) => {
+          dispatch(hideBackdrop());
+          dispatch(notification("Nie udało się dodać kategorii :(", "error"));
+        });
+    }
+  };
+
+  const filterDishes = (dishes, category) => {
+    var result = [];
+    dishes.map((dish) => {
+      if (dish.category === category) {
+        result.push(dish);
+      }
+      return true;
+    });
+    return result;
+  };
 
   const CategoriesList = categories.map((category) => {
     return (
@@ -59,6 +95,16 @@ export default function EditRestaurantMenu(props) {
           expandIcon={<ExpandMoreIcon className={classes.expandIcon} />}
         >
           <h4>{category}</h4>
+          <div className="editRestaurant-categorySpan">
+            <h5>Dania: 0</h5>
+            <IconButton
+              color="primary"
+              aria-label="upload picture"
+              component="span"
+            >
+              <DeleteIcon />
+            </IconButton>
+          </div>
         </AccordionSummary>
       </Accordion>
     );
@@ -73,21 +119,26 @@ export default function EditRestaurantMenu(props) {
       {CategoriesList}
       <Accordion className={classes.root}>
         <AccordionSummary
-          expandIcon={<ExpandMoreIcon className={classes.expandIcon} />}
+          expandIcon={<AddIcon className={classes.expandIcon} />}
         >
           <h4>Dodaj kategorię</h4>
         </AccordionSummary>
-        <TextField
-          className={classes.textInputFullWidth}
-          label="Nazwa kategorii"
-          variant="outlined"
-        ></TextField>
-        <ButtonSecondary text="Dodaj" />
+        <div className="editRestaurant-addCategory">
+          <TextField
+            className={classes.textInputFullWidth}
+            value={newCategory}
+            onChange={(event) => setNewCategory(event.target.value)}
+            label="Nazwa kategorii"
+            variant="outlined"
+          ></TextField>
+          <ButtonSecondary onClick={addCategory} text="Dodaj" />
+        </div>
       </Accordion>
       <div className="editRestaurant-sectiontitle">
         <h4>Lunch menu</h4>
         <Divider />
       </div>
+      <LunchMenu lunchMenu={lunchMenu} />
     </div>
   );
 }

src/components/EditRestaurant/LunchMenu.js

@@ -0,0 +1,31 @@
+import React from "react";
+import IconButton from "@material-ui/core/IconButton";
+import DeleteIcon from "@material-ui/icons/Delete";
+import List from "@material-ui/core/List";
+import ListItem from "@material-ui/core/ListItem";
+
+export default function LunchMenu(props) {
+  const { lunchMenu } = props;
+  const LunchDishes = () => {
+    if (lunchMenu.length > 0) {
+      lunchMenu.map((dish) => {
+        return (
+          <ListItem key={dish}>
+            Dish name
+            <IconButton
+              color="primary"
+              aria-label="upload picture"
+              component="span"
+            >
+              <DeleteIcon />
+            </IconButton>
+          </ListItem>
+        );
+      });
+    } else {
+      return <ListItem>Lunch menu puste</ListItem>;
+    }
+  };
+
+  return <List>{LunchDishes}</List>;
+}

src/styles/EditRestaurant.scss

@@ -73,3 +73,21 @@
     margin: auto 6px auto 6px;
   }
 }
+
+.editRestaurant-addCategory {
+  display: flex;
+  align-items: center;
+  padding-left: 8px;
+  padding-right: 8px;
+}
+
+.editRestaurant-categorySpan {
+  flex-grow: 10;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  h5 {
+    font-weight: 300;
+    font-size: 14px;
+  }
+}

src/styles/NewRestaurant.scss

@@ -62,6 +62,7 @@
 
 .image-upload-container-wide {
   display: flex;
+  width: 100%;
   flex-direction: column;
   align-items: flex-end;
 }