web client v0.6 (add dish)

src/App.js

@@ -21,6 +21,7 @@ import ResetPassword from "./components/Dialogs/ResetPassword";
 import Contact from "./components/Output/Contact";
 import Settings from "./components/Dialogs/Settings";
 import EditRestaurant from "./components/Dialogs/EditRestaurant";
+import NewDish from "./components/Dialogs/NewDish";
 
 const theme = createMuiTheme({
   palette: {
@@ -68,6 +69,10 @@ function App(props) {
                 <Route path="/restaurant/:id">
                   <Restaurant />
                 </Route>
+                <PrivateRoute
+                  path="/newDish/:restaurantID"
+                  component={<NewDish />}
+                />
                 <Route path="/dish">
                   <LogoMain />
                 </Route>

src/components/Dialogs/EditRestaurant.js

@@ -53,6 +53,8 @@ export default function EditRestaurant(props) {
     color: "",
     secondaryText: "",
   };
+  const restaurant = restaurants.find(matchId);
+  if (restaurant === undefined) history.push("/");
   const badgeInit = () => {
     if (
       !restaurant.subscriptionActive ||
@@ -73,8 +75,6 @@ export default function EditRestaurant(props) {
   function matchId(element) {
     return element._id === id;
   }
-  const restaurant = restaurants.find(matchId);
-  if (restaurant === undefined) history.push("/");
   badgeInit();
 
   return (
@@ -153,7 +153,10 @@ export default function EditRestaurant(props) {
             </ListItemIcon>
             <ListItemText primary="Menu" />
           </ListItem>
-          <ListItem button>
+          <ListItem
+            button
+            onClick={() => history.push(`/newDish/${restaurant._id}`)}
+          >
             <ListItemIcon>
               <AddIcon color="primary" />
             </ListItemIcon>

src/components/Dialogs/NewDish.js

@@ -0,0 +1,419 @@
+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";
+import Dialog from "@material-ui/core/Dialog";
+import Divider from "@material-ui/core/Divider";
+import ButtonSecondary from "../Input/ButtonSecondary";
+import IconButton from "@material-ui/core/IconButton";
+import TextField from "@material-ui/core/TextField";
+import CloseIcon from "@material-ui/icons/Close";
+import Paper from "@material-ui/core/Paper";
+import MenuItem from "@material-ui/core/MenuItem";
+import FormControl from "@material-ui/core/FormControl";
+import Select from "@material-ui/core/Select";
+import ImageUpload from "../Input/ImageUpload";
+import validator from "validator";
+import { useHistory, useParams } from "react-router-dom";
+import axios from "axios";
+import { useSelector, useDispatch } from "react-redux";
+import { notification, refreshUserData } from "../../actions";
+import { showBackdrop, hideBackdrop } from "../../actions/toggles.js";
+import InputLabel from "@material-ui/core/InputLabel";
+import InputAdornment from "@material-ui/core/InputAdornment";
+import Checkboxes from "../Input/Checkboxes";
+
+// ICONS
+
+import TextFieldsIcon from "@material-ui/icons/TextFields";
+import AttachMoneyIcon from "@material-ui/icons/AttachMoney";
+import FitnessCenterIcon from "@material-ui/icons/FitnessCenter";
+import LocalHospitalIcon from "@material-ui/icons/LocalHospital";
+import FavoriteBorderIcon from "@material-ui/icons/FavoriteBorder";
+
+// SETUP
+
+const useStyles = makeStyles((theme) => ({
+  root: {
+    margin: "auto",
+    textAlign: "center",
+    maxHeight: "90vh",
+    "& .MuiPaper-root": {
+      width: "auto",
+      backgroundColor: "#262626",
+      color: "#bbbbbb",
+      overflow: "visible",
+    },
+  },
+  closeButton: {
+    color: "#bbbbbb",
+    position: "absolute",
+    right: theme.spacing(1),
+    top: theme.spacing(1),
+  },
+  textInput: {
+    margin: theme.spacing(2),
+    "& .MuiInputBase-root": {
+      color: "#bbbbbb",
+    },
+    "& .MuiInputLabel-root": {
+      color: "#bbbbbb",
+    },
+  },
+  textInputFullWidth: {
+    marginTop: theme.spacing(2),
+    marginBottom: theme.spacing(2),
+    color: "#bbbbbb",
+    "& .MuiInputBase-root": {
+      color: "#bbbbbb",
+    },
+    "& .MuiInputLabel-root": {
+      color: "#bbbbbb",
+    },
+    "$ .MuiFormHelperText-root": {
+      color: "#bbbbbb",
+    },
+  },
+  formControl: {
+    margin: theme.spacing(2),
+    minWidth: 100,
+    "& .MuiInputBase-root": {
+      color: "#bbbbbb",
+    },
+    "$ .MuiSelect-root": {
+      color: "#bbbbbb",
+    },
+    "& .MuiInputLabel-root": {
+      color: "#bbbbbb",
+    },
+  },
+  selectEmpty: {
+    marginTop: theme.spacing(2),
+  },
+}));
+
+export default function NewRestaurant() {
+  const dispatch = useDispatch();
+  const { restaurantID } = useParams();
+  const initialState = {
+    restaurantId: restaurantID,
+    name: "",
+    category: "",
+    price: "",
+    notes: "",
+    imgUrl: "",
+    hidden: false,
+    weight: "",
+    allergens: {
+      gluten: false,
+      lactose: false,
+      soy: false,
+      eggs: false,
+      seaFood: false,
+      peanuts: false,
+      sesame: false,
+    },
+    ingredients: "",
+    glicemicIndex: "",
+    kCal: "",
+    vegan: false,
+    vegetarian: false,
+    charLeft: 200,
+    nameError: false,
+    categoryError: false,
+    priceError: false,
+  };
+  const [state, setState] = useState(initialState);
+  const styles = useStyles();
+  const history = useHistory();
+  const token = useSelector((state) => state.data.userData.jwt);
+  const restaurants = useSelector((state) => state.data.userData.restaurants);
+  function matchId(element) {
+    return element._id === restaurantID;
+  }
+  const restaurant = restaurants.find(matchId);
+  if (restaurant === undefined) history.push("/");
+
+  const Categories = restaurant.categories.map((category) => {
+    return (
+      <MenuItem key={category} value={category}>
+        {category}
+      </MenuItem>
+    );
+  });
+
+  // HANDLERS
+
+  const handleCategoryChange = (event) => {
+    setState({ ...state, category: event.target.value });
+  };
+
+  const handleAdd = () => {
+    if (validateForm()) {
+      sendForm();
+    } else {
+      dispatch(notification("Popraw dane", "error"));
+    }
+  };
+
+  const validateForm = () => {
+    const validation = {
+      name: validator.isLength(state.name, { max: 50, min: 1 }),
+      category: restaurant.categories.includes(state.category),
+      price: validator.isAlphanumeric(state.price),
+    };
+
+    setState({
+      ...state,
+      nameError: !validation.name,
+      categoryError: !validation.category,
+      priceError: !validation.price,
+    });
+
+    return validation.name && validation.category && validation.price;
+  };
+
+  const sendForm = () => {
+    const data = {
+      restaurantId: restaurantID,
+      name: state.name,
+      category: state.category,
+      price: state.price,
+      notes: state.notes,
+      imgUrl: state.imgUrl,
+      hidden: false,
+      weight: state.weight,
+      allergens: state.allergens,
+      ingredients: state.ingredients,
+      glicemicIndex: state.glicemicIndex,
+      kCal: state.kCal,
+      vegan: state.vegan,
+      vegetarian: state.vegetarian,
+    };
+    dispatch(showBackdrop());
+    axios({
+      url: "http://localhost:4000/dish",
+      method: "POST",
+      data: data,
+      headers: {
+        "x-auth-token": token,
+      },
+    })
+      .then((response) => {
+        dispatch(hideBackdrop());
+        dispatch(notification("Danie dodane pomyślnie.", "success"));
+        dispatch(refreshUserData(token));
+        history.push(`/editRestaurant/${restaurantID}`);
+      })
+      .catch((error) => {
+        dispatch(hideBackdrop());
+        dispatch(
+          notification(
+            "Wystąpił nieoczekiwany błąd, przepraszamy za utrudnienia. Spróbuj ponownie za chwilę.",
+            "error"
+          )
+        );
+      });
+  };
+
+  const handleImageUploaded = (link) => {
+    setState({ ...state, imgUrl: link });
+  };
+
+  const handleDescriptionChange = (event) => {
+    let stringLength = event.target.value.length;
+    let charleft = 200 - stringLength;
+    setState({ ...state, notes: event.target.value, charLeft: charleft });
+  };
+
+  // COMPONENTS
+
+  return (
+    <div>
+      <Dialog
+        className={styles.root}
+        open={true}
+        aria-labelledby="newRestaurant-title"
+      >
+        <DialogTitle id="newRestaurant-title">Dodaj danie</DialogTitle>
+        <IconButton
+          className={styles.closeButton}
+          onClick={() => history.goBack()}
+          aria-label="close"
+        >
+          <CloseIcon />
+        </IconButton>
+        <Divider />
+        <DialogContent>
+          <p>Danie zostanie dodane do: {restaurant.name}</p>
+          <Paper variant="outlined">
+            <div className="newRestaurant-content">
+              <TextField
+                className={styles.textInput}
+                required
+                value={state.name}
+                error={state.nameError}
+                label="Nazwa"
+                variant="outlined"
+                placeholder="np. Schabowy"
+                onChange={(event) =>
+                  setState({ ...state, name: event.target.value })
+                }
+                InputProps={{
+                  startAdornment: (
+                    <InputAdornment position="start">
+                      <TextFieldsIcon color="primary" />
+                    </InputAdornment>
+                  ),
+                }}
+              />
+              <FormControl
+                variant="outlined"
+                required
+                className={styles.formControl}
+              >
+                <InputLabel id="category-select">Kategoria</InputLabel>
+                <Select
+                  labelId="category-select"
+                  id="category"
+                  value={state.category}
+                  error={state.categoryError}
+                  required
+                  onChange={handleCategoryChange}
+                >
+                  {Categories}
+                </Select>
+              </FormControl>
+              <TextField
+                className={styles.textInput}
+                required
+                label="Cena"
+                placeholder="np. 18,50"
+                type="number"
+                error={state.priceError}
+                value={state.price}
+                variant="outlined"
+                onChange={(event) =>
+                  setState({ ...state, price: event.target.value })
+                }
+                InputProps={{
+                  startAdornment: (
+                    <InputAdornment position="start">
+                      <AttachMoneyIcon color="primary" />
+                    </InputAdornment>
+                  ),
+                }}
+              />
+              <TextField
+                className={styles.textInput}
+                label="Waga (g)"
+                type="number"
+                placeholder="np. 150"
+                value={state.weight}
+                variant="outlined"
+                onChange={(event) =>
+                  setState({ ...state, weight: event.target.value })
+                }
+                InputProps={{
+                  startAdornment: (
+                    <InputAdornment position="start">
+                      <FitnessCenterIcon color="primary" />
+                    </InputAdornment>
+                  ),
+                }}
+              />
+              <TextField
+                className={styles.textInput}
+                label="Indeks glikemiczny"
+                placeholder="np. 70"
+                type="number"
+                value={state.glicemicIndex}
+                variant="outlined"
+                onChange={(event) =>
+                  setState({ ...state, glicemicIndex: event.target.value })
+                }
+                InputProps={{
+                  startAdornment: (
+                    <InputAdornment position="start">
+                      <LocalHospitalIcon color="primary" />
+                    </InputAdornment>
+                  ),
+                }}
+              />
+              <TextField
+                className={styles.textInput}
+                label="Kaloryczność (kcal)"
+                value={state.kCal}
+                placeholder="np. 1000"
+                variant="outlined"
+                onChange={(event) =>
+                  setState({ ...state, kCal: event.target.value })
+                }
+                InputProps={{
+                  startAdornment: (
+                    <InputAdornment position="start">
+                      <FavoriteBorderIcon color="primary" />
+                    </InputAdornment>
+                  ),
+                }}
+              />
+            </div>
+            <div className="newRestaurant-content-fullwidth">
+              <TextField
+                className={styles.textInputFullWidth}
+                fullWidth
+                multiline
+                rows={2}
+                rowsMax={4}
+                value={state.ingredients}
+                placeholder="np. ziemniaki, mąka, filet z dorsza, pieprz, sól..."
+                label="Składniki"
+                variant="outlined"
+                onChange={(event) =>
+                  setState({ ...state, ingredients: event.target.value })
+                }
+              />
+              <TextField
+                className={styles.textInputFullWidth}
+                fullWidth
+                multiline
+                rows={2}
+                rowsMax={4}
+                value={state.note}
+                label="Uwagi"
+                variant="outlined"
+                onChange={handleDescriptionChange}
+                helperText={"Pozostałe znaki: " + state.charLeft}
+                FormHelperTextProps={{
+                  style: { color: "#bbbbbb" },
+                }}
+              />
+              <Checkboxes
+                allergens={state.allergens}
+                vegan={state.vegan}
+                vegetarian={state.vegetarian}
+                onVegan={() => setState({ ...state, vegan: !state.vegan })}
+                onVegetarian={() =>
+                  setState({ ...state, vegetarian: !state.vegetarian })
+                }
+                onUpdate={(updated) =>
+                  setState({ ...state, allergens: updated })
+                }
+              />
+            </div>
+          </Paper>
+          <Paper>
+            <h4>Dodaj zdjęcie.</h4>
+            <ImageUpload
+              img={state.imgUrl}
+              onUpload={(link) => handleImageUploaded(link)}
+            />
+          </Paper>
+          <div className="newRestaurant-bottom">
+            <ButtonSecondary onClick={handleAdd} text="Dodaj" />
+          </div>
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+}

src/components/Dialogs/NewRestaurant.js

@@ -39,7 +39,7 @@ const useStyles = makeStyles((theme) => ({
   root: {
     margin: "auto",
     textAlign: "center",
-    maxHeight: "700px",
+    maxHeight: "90vh",
     "& .MuiPaper-root": {
       width: "auto",
       backgroundColor: "#262626",

src/components/Dialogs/YesNo.js

@@ -0,0 +1,56 @@
+import React from "react";
+import { makeStyles } from "@material-ui/core/styles";
+import DialogTitle from "@material-ui/core/DialogTitle";
+import DialogContent from "@material-ui/core/DialogContent";
+import Dialog from "@material-ui/core/Dialog";
+import Divider from "@material-ui/core/Divider";
+import ButtonSecondary from "../Input/ButtonSecondary";
+import ButtonPrimary from "../Input/ButtonPrimary";
+import IconButton from "@material-ui/core/IconButton";
+import CloseIcon from "@material-ui/icons/Close";
+
+export default function PasswordConfirmation(props) {
+  const loginStyles = makeStyles((theme) => ({
+    root: {
+      textAlign: "center",
+      "& .MuiPaper-root": {
+        backgroundColor: "#262626",
+        color: "#bbbbbb",
+      },
+      minWidth: "250px",
+    },
+    closeButton: {
+      color: "#bbbbbb",
+      position: "absolute",
+      right: theme.spacing(1),
+      top: theme.spacing(1),
+    },
+  }));
+
+  const loginClass = loginStyles();
+
+  return (
+    <Dialog
+      className={loginClass.root}
+      onClose={props.cancel}
+      open={props.open}
+      aria-labelledby="login-title"
+    >
+      <DialogTitle id="login-title">Na pewno?</DialogTitle>
+      <IconButton
+        className={loginClass.closeButton}
+        onClick={props.cancel}
+        aria-label="close"
+      >
+        <CloseIcon />
+      </IconButton>
+      <Divider />
+      <DialogContent>
+        <div className="yesno-dialog-buttons">
+          <ButtonPrimary onClick={props.cancel} text="Anuluj" />
+          <ButtonSecondary onClick={props.accept} text="Potwierdź" />
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}

src/components/EditRestaurant/EditRestaurantMenu.js

@@ -3,18 +3,14 @@ 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 EditCategoriesList from "../Output/EditCategoriesList";
 import { notification, refreshUserData } from "../../actions";
 import { showBackdrop, hideBackdrop } from "../../actions/toggles.js";
 
@@ -30,6 +26,7 @@ const useStyles = makeStyles((theme) => ({
   textInputFullWidth: {
     marginTop: theme.spacing(2),
     marginBottom: theme.spacing(2),
+    flexGrow: 5,
     "& .MuiInputBase-root": {
       color: "#bbbbbb",
     },
@@ -77,38 +74,31 @@ export default function EditRestaurantMenu(props) {
     }
   };
 
-  const filterDishes = (dishes, category) => {
-    var result = [];
-    dishes.map((dish) => {
-      if (dish.category === category) {
-        result.push(dish);
-      }
-      return true;
-    });
-    return result;
+  const removeCategory = (categoryName) => {
+    dispatch(showBackdrop());
+    const data = {
+      restaurantId: props.restaurant._id,
+      category: categoryName,
+      action: "delete",
     };
-
-  const CategoriesList = categories.map((category) => {
-    return (
-      <Accordion key={category} className={classes.root}>
-        <AccordionSummary
-          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>
-    );
+    axios({
+      url: "http://localhost:4000/restaurant/category",
+      method: "POST",
+      data: data,
+      headers: {
+        "x-auth-token": token,
+      },
+    })
+      .then((res) => {
+        dispatch(hideBackdrop());
+        dispatch(notification("Usunięto kategorię.", "success"));
+        dispatch(refreshUserData(token));
+      })
+      .catch((e) => {
+        dispatch(hideBackdrop());
+        dispatch(notification("Nie udało się usunąć kategorii :(", "error"));
       });
+  };
 
   return (
     <div className="editRestaurant-tab">
@@ -116,7 +106,10 @@ export default function EditRestaurantMenu(props) {
         <h4>Menu</h4>
         <Divider />
       </div>
-      {CategoriesList}
+      <EditCategoriesList
+        categories={categories}
+        deleteCategory={removeCategory}
+      />
       <Accordion className={classes.root}>
         <AccordionSummary
           expandIcon={<AddIcon className={classes.expandIcon} />}

src/components/EditRestaurant/LunchMenu.js

@@ -1,31 +1,96 @@
-import React from "react";
+import React, { useState } from "react";
+import Accordion from "@material-ui/core/Accordion";
+import AccordionSummary from "@material-ui/core/AccordionSummary";
+import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
 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 { makeStyles } from "@material-ui/core/styles";
+import YesNo from "../Dialogs/YesNo";
+import ButtonSecondary from "../Input/ButtonSecondary";
+import TextField from "@material-ui/core/TextField";
+import AddIcon from "@material-ui/icons/Add";
 
-export default function LunchMenu(props) {
-  const { lunchMenu } = props;
-  const LunchDishes = () => {
-    if (lunchMenu.length > 0) {
-      lunchMenu.map((dish) => {
+const useStyles = makeStyles((theme) => ({
+  root: {
+    backgroundColor: "#262626",
+    color: "#bbbbbb",
+    width: "100%",
+    marginBottom: "24px",
+  },
+  expandIcon: {
+    color: "#bbbbbb",
+  },
+  textInputFullWidth: {
+    marginTop: theme.spacing(2),
+    marginBottom: theme.spacing(2),
+    flexGrow: 5,
+    "& .MuiInputBase-root": {
+      color: "#bbbbbb",
+    },
+    "& .MuiInputLabel-root": {
+      color: "#bbbbbb",
+    },
+    "$ .MuiFormHelperText-root": {
+      color: "#bbbbbb",
+    },
+  },
+}));
+
+export default function EditCategoriesList(props) {
+  const [open, setOpen] = useState(false);
+  const [newSet, setNewSet] = useState("");
+  const classes = useStyles();
+  const handleDeleteButton = (set) => {
+    setOpen(true);
+  };
+  const onCancel = () => {
+    setOpen(false);
+  };
+  const onAccept = () => {
+    setOpen(false);
+  };
+  const SetList = props.lunchMenu.map((set) => {
     return (
-          <ListItem key={dish}>
-            Dish name
+      <Accordion key={set.id} className={classes.root}>
+        <AccordionSummary
+          expandIcon={<ExpandMoreIcon className={classes.expandIcon} />}
+        >
+          <h4>{set.name}</h4>
+          <div className="editRestaurant-categorySpan">
             <IconButton
               color="primary"
-              aria-label="upload picture"
               component="span"
+              onClick={() => handleDeleteButton(set)}
             >
               <DeleteIcon />
             </IconButton>
-          </ListItem>
+          </div>
+        </AccordionSummary>
+      </Accordion>
     );
   });
-    } else {
-      return <ListItem>Lunch menu puste</ListItem>;
-    }
-  };
 
-  return <List>{LunchDishes}</List>;
+  return (
+    <div style={{ width: "100%" }}>
+      <YesNo open={open} cancel={onCancel} accept={onAccept} />
+      {props.lunchMenu.length === 0 ? <p>Lunch menu puste</p> : SetList}
+      <Accordion className={classes.root}>
+        <AccordionSummary
+          expandIcon={<AddIcon className={classes.expandIcon} />}
+        >
+          <h4>Dodaj zestaw</h4>
+        </AccordionSummary>
+        <div className="editRestaurant-addCategory">
+          <TextField
+            className={classes.textInputFullWidth}
+            value={newSet}
+            onChange={(event) => setNewSet(event.target.value)}
+            label="Nazwa zestawu"
+            variant="outlined"
+          ></TextField>
+          <ButtonSecondary onClick={() => {}} text="Dodaj" />
+        </div>
+      </Accordion>
+    </div>
+  );
 }

src/components/Input/ButtonPrimary.js

@@ -6,7 +6,7 @@ const StyledButton = withStyles({
   root: {
     backgroundColor: "#696969",
     color: "#262626",
-    margin: "16px 16px 16px 0px",
+    margin: "16px 16px 16px 16px",
     padding: "8px 12px 8px 12px",
     "&:hover": {
       backgroundColor: "#808080",

src/components/Input/Checkboxes.js

@@ -0,0 +1,175 @@
+import React, { useState } from "react";
+import { makeStyles } from "@material-ui/core/styles";
+import FormLabel from "@material-ui/core/FormLabel";
+import FormControl from "@material-ui/core/FormControl";
+import FormGroup from "@material-ui/core/FormGroup";
+import FormControlLabel from "@material-ui/core/FormControlLabel";
+import Checkbox from "@material-ui/core/Checkbox";
+import FormHelperText from "@material-ui/core/FormHelperText";
+
+const useStyles = makeStyles((theme) => ({
+  root: {
+    "& .MuiFormLabel-root": {
+      color: "#e99800",
+      marginBottom: theme.spacing(2),
+      marginLeft: "auto",
+      marginRight: "auto",
+    },
+    "& .MuiFormHelperText-root": {
+      color: "#7e7e7e",
+    },
+    "& .MuiFormGroup-root": {
+      display: "inline",
+    },
+    border: "1px solid #1c1c1c",
+    borderRadius: "6px",
+    marginBottom: theme.spacing(2),
+  },
+  formControl: {
+    margin: theme.spacing(2),
+    alignItems: "center",
+  },
+}));
+
+export default function Checkboxes(props) {
+  const classes = useStyles();
+  const initialState = {
+    gluten: props.allergens.gluten,
+    lactose: props.allergens.lactose,
+    soy: props.allergens.soy,
+    eggs: props.allergens.eggs,
+    seaFood: props.allergens.seaFood,
+    peanuts: props.allergens.peanuts,
+    sesame: props.allergens.sesame,
+  };
+  const [state, setState] = useState(initialState);
+
+  return (
+    <div className={classes.root}>
+      <FormControl component="fieldset" className={classes.formControl}>
+        <FormLabel component="legend">Alergeny</FormLabel>
+        <FormGroup>
+          <FormControlLabel
+            control={
+              <Checkbox
+                checked={state.gluten}
+                onChange={() => {
+                  setState({ ...state, gluten: !state.gluten });
+                  props.onUpdate(state);
+                }}
+                name="gluten"
+              />
+            }
+            label="Gluten"
+          />
+          <FormControlLabel
+            control={
+              <Checkbox
+                checked={state.lactose}
+                onChange={() => {
+                  setState({ ...state, lactose: !state.lactose });
+                  props.onUpdate(state);
+                }}
+                name="lactose"
+              />
+            }
+            label="Laktoza"
+          />
+          <FormControlLabel
+            control={
+              <Checkbox
+                checked={state.soy}
+                onChange={() => {
+                  setState({ ...state, soy: !state.soy });
+                  props.onUpdate(state);
+                }}
+                name="soy"
+              />
+            }
+            label="Soja"
+          />
+          <FormControlLabel
+            control={
+              <Checkbox
+                checked={state.eggs}
+                onChange={() => {
+                  setState({ ...state, eggs: !state.eggs });
+                  props.onUpdate(state);
+                }}
+                name="eggs"
+              />
+            }
+            label="Jaja"
+          />
+          <FormControlLabel
+            control={
+              <Checkbox
+                checked={state.seaFood}
+                onChange={() => {
+                  setState({ ...state, seaFood: !state.seaFood });
+                  props.onUpdate(state);
+                }}
+                name="seaFood"
+              />
+            }
+            label="Owoce morza"
+          />
+          <FormControlLabel
+            control={
+              <Checkbox
+                checked={state.peanuts}
+                onChange={() => {
+                  setState({ ...state, peanuts: !state.peanuts });
+                  props.onUpdate(state);
+                }}
+                name="peanuts"
+              />
+            }
+            label="Orzechy"
+          />
+          <FormControlLabel
+            control={
+              <Checkbox
+                checked={state.sesame}
+                onChange={() => {
+                  setState({ ...state, sesame: !state.sesame });
+                  props.onUpdate(state);
+                }}
+                name="sesame"
+              />
+            }
+            label="Sezam"
+          />
+        </FormGroup>
+        <FormHelperText>
+          Jeżeli nie masz pewności, czy danie zawiera alergen, zaznacz go :)
+        </FormHelperText>
+      </FormControl>
+      <FormControl component="fieldset" className={classes.formControl}>
+        <FormLabel component="legend">Inne</FormLabel>
+        <FormGroup>
+          <FormControlLabel
+            control={
+              <Checkbox
+                checked={props.vegan}
+                onChange={() => props.onVegan()}
+                name="vegan"
+              />
+            }
+            label="Danie wegańskie"
+          />
+          <FormControlLabel
+            control={
+              <Checkbox
+                checked={props.vegetarian}
+                onChange={() => props.onVegetarian()}
+                name="vegetarian"
+              />
+            }
+            label="Danie wegetariańskie"
+          />
+        </FormGroup>
+      </FormControl>
+    </div>
+  );
+}

src/components/Output/EditCategoriesList.js

@@ -0,0 +1,78 @@
+import React, { useState } from "react";
+import Accordion from "@material-ui/core/Accordion";
+import AccordionSummary from "@material-ui/core/AccordionSummary";
+import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
+import IconButton from "@material-ui/core/IconButton";
+import DeleteIcon from "@material-ui/icons/Delete";
+import EditDishList from "./EditDishList";
+import { makeStyles } from "@material-ui/core/styles";
+import YesNo from "../Dialogs/YesNo";
+
+const useStyles = makeStyles((theme) => ({
+  root: {
+    backgroundColor: "#262626",
+    color: "#bbbbbb",
+    width: "100%",
+  },
+  expandIcon: {
+    color: "#bbbbbb",
+  },
+  textInputFullWidth: {
+    marginTop: theme.spacing(2),
+    marginBottom: theme.spacing(2),
+    "& .MuiInputBase-root": {
+      color: "#bbbbbb",
+    },
+    "& .MuiInputLabel-root": {
+      color: "#bbbbbb",
+    },
+    "$ .MuiFormHelperText-root": {
+      color: "#bbbbbb",
+    },
+  },
+}));
+
+export default function EditCategoriesList(props) {
+  const [open, setOpen] = useState(false);
+  const [selectedCategory, selectCategory] = useState("");
+  const classes = useStyles();
+  const handleDeleteButton = (category) => {
+    selectCategory(category);
+    setOpen(true);
+  };
+  const onCancel = () => {
+    setOpen(false);
+  };
+  const onAccept = () => {
+    setOpen(false);
+    props.deleteCategory(selectedCategory);
+  };
+  const CategoriesList = props.categories.map((category) => {
+    return (
+      <Accordion key={category} className={classes.root}>
+        <AccordionSummary
+          expandIcon={<ExpandMoreIcon className={classes.expandIcon} />}
+        >
+          <h4>{category}</h4>
+          <div className="editRestaurant-categorySpan">
+            <IconButton
+              color="primary"
+              component="span"
+              onClick={() => handleDeleteButton(category)}
+            >
+              <DeleteIcon />
+            </IconButton>
+          </div>
+        </AccordionSummary>
+        <EditDishList category={category} />
+      </Accordion>
+    );
+  });
+
+  return (
+    <div style={{ width: "100%" }}>
+      <YesNo open={open} cancel={onCancel} accept={onAccept} />
+      {CategoriesList}
+    </div>
+  );
+}

src/components/Output/EditDishList.js

@@ -0,0 +1,33 @@
+import React from "react";
+import { useSelector } from "react-redux";
+import List from "@material-ui/core/List";
+import ListItem from "@material-ui/core/ListItem";
+
+export default function EditDishList(props) {
+  const filterDishes = (dishes, category) => {
+    var result = [];
+    dishes.map((dish) => {
+      if (dish.category === category) {
+        result.push(dish);
+      }
+      return true;
+    });
+    return result;
+  };
+
+  const allDishes = useSelector((state) => state.dishes);
+  const thisCategoryDishes = filterDishes(allDishes, props.category);
+  const Dishes = thisCategoryDishes.map((dish) => {
+    return <ListItem key={dish._id}>{dish.name}</ListItem>;
+  });
+
+  return (
+    <List>
+      {thisCategoryDishes.length === 0 ? (
+        <ListItem>Kategoria pusta</ListItem>
+      ) : (
+        Dishes
+      )}
+    </List>
+  );
+}

src/styles/Dialogs.scss

@@ -11,6 +11,13 @@
   }
 }
 
+.yesno-dialog-buttons {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: row;
+}
+
 .register-dialog-actions {
   display: flex;
   justify-content: center;

src/styles/EditRestaurant.scss

@@ -1,7 +1,8 @@
 .editRestaurant-container {
   min-width: 70%;
   min-height: 600px;
-  max-width: 100%;
+  max-height: 80vh;
+  max-width: 80%;
   background-color: $dark-gray;
   border-radius: 15px;
   display: flex;
@@ -27,7 +28,6 @@
   justify-content: space-between;
   align-items: center;
   width: 100%;
-  max-height: 600px;
   overflow: auto;
   h3 {
     font-weight: 400;
@@ -53,6 +53,7 @@
   grid-column-start: 1;
   grid-column-end: 3;
   margin-bottom: 16px;
+  width: 100%;
 }
 
 .workingHours-container {