web client v0.6 (add dish)

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