web client v0.7 (edit dish / visibility / delete/ routes)

src/components/Output/EditCategoriesList.js

@@ -1,4 +1,5 @@
 import React, { useState } from "react";
+import { useDispatch, useSelector } from "react-redux";
 import Accordion from "@material-ui/core/Accordion";
 import AccordionSummary from "@material-ui/core/AccordionSummary";
 import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
@@ -7,6 +8,7 @@ import DeleteIcon from "@material-ui/icons/Delete";
 import EditDishList from "./EditDishList";
 import { makeStyles } from "@material-ui/core/styles";
 import YesNo from "../Dialogs/YesNo";
+import { notification } from "../../actions";
 
 const useStyles = makeStyles((theme) => ({
   root: {
@@ -32,13 +34,31 @@ const useStyles = makeStyles((theme) => ({
   },
 }));
 
+const filterDishes = (dishes, category) => {
+  var result = [];
+  dishes.map((dish) => {
+    if (dish.category === category) {
+      result.push(dish);
+    }
+    return true;
+  });
+  return result;
+};
+
 export default function EditCategoriesList(props) {
+  const dispatch = useDispatch();
   const [open, setOpen] = useState(false);
   const [selectedCategory, selectCategory] = useState("");
+  const dishes = useSelector((state) => state.dishes);
   const classes = useStyles();
   const handleDeleteButton = (category) => {
-    selectCategory(category);
-    setOpen(true);
+    const dishesInCategory = filterDishes(dishes, category);
+    if (dishesInCategory.length === 0) {
+      selectCategory(category);
+      setOpen(true);
+    } else {
+      dispatch(notification("Kategoria nie jest pusta!", "error"));
+    }
   };
   const onCancel = () => {
     setOpen(false);
@@ -64,7 +84,7 @@ export default function EditCategoriesList(props) {
             </IconButton>
           </div>
         </AccordionSummary>
-        <EditDishList category={category} />
+        <EditDishList restaurantId={props.restaurantId} category={category} />
       </Accordion>
     );
   });

src/components/Output/EditDishList.js

@@ -1,9 +1,23 @@
-import React from "react";
-import { useSelector } from "react-redux";
+import React, { useState } from "react";
+import { useSelector, useDispatch } from "react-redux";
+import { useHistory } from "react-router-dom";
 import List from "@material-ui/core/List";
 import ListItem from "@material-ui/core/ListItem";
+import IconButton from "@material-ui/core/IconButton";
+import DeleteIcon from "@material-ui/icons/Delete";
+import EditIcon from "@material-ui/icons/Edit";
+import Switch from "@material-ui/core/Switch";
+import axios from "axios";
+import { backend } from "../../config";
+import YesNo from "../Dialogs/YesNo";
+import { notification, fetchAllDishes } from "../../actions";
 
 export default function EditDishList(props) {
+  const [open, setOpen] = useState(false);
+  const [selectedDish, setDish] = useState("");
+  const history = useHistory();
+  const dispatch = useDispatch();
+  const token = useSelector((state) => state.data.userData.jwt);
   const filterDishes = (dishes, category) => {
     var result = [];
     dishes.map((dish) => {
@@ -15,16 +29,106 @@ export default function EditDishList(props) {
     return result;
   };
 
+  const handleSetDishVisibility = (dishId, visible) => {
+    const data = {
+      dishId: dishId,
+      visible: visible,
+    };
+    axios({
+      method: "POST",
+      url: backend + "/dish/hidden",
+      data: data,
+      headers: {
+        "x-auth-token": token,
+      },
+    })
+      .then((res) => {
+        dispatch(fetchAllDishes(props.restaurantId));
+        dispatch(notification("Zmieniono widoczność dania.", "success"));
+      })
+      .catch((error) => {
+        dispatch(notification("Nie udało się zmienić :(", "error"));
+      });
+  };
+
+  const selectDish = (dishId) => {
+    setDish(dishId);
+    setOpen(true);
+  };
+
+  const onCancel = () => {
+    setOpen(false);
+  };
+  const onAccept = () => {
+    setOpen(false);
+    axios({
+      method: "DELETE",
+      url: backend + "/dish",
+      data: {
+        dishId: selectedDish,
+      },
+      headers: {
+        "x-auth-token": token,
+      },
+    })
+      .then((res) => {
+        dispatch(fetchAllDishes(props.restaurantId));
+        dispatch(notification("Usunięto.", "success"));
+      })
+      .catch((error) => {
+        dispatch(notification("Nie udało się usunąć :(", "error"));
+      });
+  };
+
   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 (
+      <ListItem key={dish._id}>
+        <div className="editRestaurant-dish">
+          <div className="editRestaurant-dishLeft">
+            <div
+              className="editRestaurant-dishImg"
+              style={
+                dish.imgUrl !== "empty"
+                  ? { backgroundImage: `url(${dish.imgUrl})` }
+                  : { backgroundColor: "#7e7e7e" }
+              }
+            ></div>
+            <h3>{dish.name}</h3>
+          </div>
+          <div className="editRestaurant-dishRight">
+            <Switch
+              checked={!dish.hidden}
+              onClick={() => handleSetDishVisibility(dish._id, dish.hidden)}
+            />
+            <IconButton
+              color="primary"
+              component="span"
+              onClick={() => selectDish(dish._id)}
+            >
+              <DeleteIcon />
+            </IconButton>
+            <IconButton
+              color="primary"
+              component="span"
+              onClick={() => history.push(`/editDish/${dish._id}`)}
+            >
+              <EditIcon />
+            </IconButton>
+          </div>
+        </div>
+      </ListItem>
+    );
   });
 
   return (
     <List>
+      <YesNo open={open} cancel={onCancel} accept={onAccept} />
       {thisCategoryDishes.length === 0 ? (
-        <ListItem>Kategoria pusta</ListItem>
+        <ListItem style={{ marginLeft: "14px", fontSize: "12px" }}>
+          Kategoria pusta
+        </ListItem>
       ) : (
         Dishes
       )}