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

src/App.js

@@ -22,6 +22,7 @@ import Contact from "./components/Output/Contact";
 import Settings from "./components/Dialogs/Settings";
 import EditRestaurant from "./components/Dialogs/EditRestaurant";
 import NewDish from "./components/Dialogs/NewDish";
+import EditDish from "./components/Dialogs/EditDish";
 
 const theme = createMuiTheme({
   palette: {
@@ -73,7 +74,7 @@ function App(props) {
                   path="/newDish/:restaurantID"
                   component={<NewDish />}
                 />
-                <Route path="/dish">
+                <Route path="/dish/:id">
                   <LogoMain />
                 </Route>
                 <Route path="/login">
@@ -94,6 +95,7 @@ function App(props) {
                   path="/editRestaurant/:id"
                   component={<EditRestaurant />}
                 />
+                <PrivateRoute path="/editDish/:id" component={<EditDish />} />
                 <Route path="/forgotpassword">
                   <ForgotPassword />
                 </Route>

src/components/Dialogs/EditDish.js

@@ -0,0 +1,409 @@
+import React, { useState } from "react";
+import { useSelector, useDispatch } from "react-redux";
+import { useParams, useHistory } from "react-router-dom";
+import Divider from "@material-ui/core/Divider";
+import ButtonSecondary from "../Input/ButtonSecondary";
+import ButtonPrimary from "../Input/ButtonPrimary";
+import TextField from "@material-ui/core/TextField";
+import { makeStyles } from "@material-ui/core/styles";
+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";
+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";
+import axios from "axios";
+import { backend } from "../../config";
+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 Paper from "@material-ui/core/Paper";
+import validator from "validator";
+import DialogTitle from "@material-ui/core/DialogTitle";
+import DialogContent from "@material-ui/core/DialogContent";
+import Dialog from "@material-ui/core/Dialog";
+
+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 EditDish() {
+  const styles = useStyles();
+  const token = useSelector((state) => state.data.userData.jwt);
+  const { id } = useParams();
+  const dishes = useSelector((state) => state.dishes);
+  const history = useHistory();
+  const dispatch = useDispatch();
+  const dish = dishes.find((element) => element._id === id);
+  if (dish === undefined) history.push("/");
+  const initialState = {
+    restaurantId: dish.restaurantId,
+    name: dish.name,
+    category: dish.category,
+    price: dish.price,
+    notes: dish.notes,
+    imgUrl: dish.imgUrl,
+    hidden: false,
+    weight: dish.weight,
+    allergens: {
+      gluten: dish.allergens.gluten,
+      lactose: dish.allergens.lactose,
+      soy: dish.allergens.soy,
+      eggs: dish.allergens.eggs,
+      seaFood: dish.allergens.seaFood,
+      peanuts: dish.allergens.peanuts,
+      sesame: dish.allergens.sesame,
+    },
+    ingredients: dish.ingredients,
+    glicemicIndex: dish.glicemicIndex,
+    kCal: dish.kCal,
+    vegan: dish.vegan,
+    vegetarian: dish.vegetarian,
+    charLeft: 200 - dish.notes.length,
+    nameError: false,
+    categoryError: false,
+    priceError: false,
+  };
+  const [state, setState] = useState(initialState);
+
+  const restaurants = useSelector((state) => state.data.userData.restaurants);
+  function matchId(element) {
+    return element._id === dish.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 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 });
+  };
+
+  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 = {
+      dishId: id,
+      restaurantId: state.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: backend + "/dish",
+      method: "PUT",
+      data: data,
+      headers: {
+        "x-auth-token": token,
+      },
+    })
+      .then((response) => {
+        dispatch(hideBackdrop());
+        dispatch(notification("Danie zmienione.", "success"));
+        dispatch(refreshUserData(token));
+        history.push(`/dish/${dish._id}`);
+      })
+      .catch((error) => {
+        dispatch(hideBackdrop());
+        dispatch(
+          notification("Wystąpił nieoczekiwany błąd, przepraszamy.", "error")
+        );
+      });
+  };
+
+  return (
+    <div>
+      <Dialog
+        className={styles.root}
+        open={true}
+        aria-labelledby="newRestaurant-title"
+      >
+        <DialogTitle id="newRestaurant-title">{state.name}</DialogTitle>
+        <Divider />
+        <DialogContent>
+          <div className="editDish-content">
+            <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.notes}
+                  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>
+          <div className="editRestaurant-bottom">
+            <ButtonPrimary text="Anuluj" onClick={() => history.push("/")} />
+            <ButtonSecondary text="Zapisz" onClick={() => handleAdd()} />
+          </div>
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+}

src/components/Dialogs/EditRestaurant.js

@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import { useSelector } from "react-redux";
+import { useSelector, useDispatch } from "react-redux";
 import { useParams, useHistory } from "react-router-dom";
 import { makeStyles } from "@material-ui/core/styles";
 import List from "@material-ui/core/List";
@@ -20,6 +20,7 @@ import EditRestaurantLocation from "../EditRestaurant/EditRestaurantLocation";
 import EditRestaurantMenu from "../EditRestaurant/EditRestaurantMenu";
 import EditRestaurantPhoto from "../EditRestaurant/EditRestaurantPhoto";
 import EditRestaurantSubscription from "../EditRestaurant/EditRestaurantSubscription";
+import { fetchAllDishes } from "../../actions";
 
 const useStyles = makeStyles((theme) => ({
   main: {
@@ -44,6 +45,7 @@ const useStyles = makeStyles((theme) => ({
 }));
 
 export default function EditRestaurant(props) {
+  const dispatch = useDispatch();
   const classes = useStyles();
   const [tab, setTab] = useState(0);
   const history = useHistory();
@@ -67,6 +69,7 @@ export default function EditRestaurant(props) {
       badgeData.secondaryText = `Aktywna do: ${restaurant.subscriptionDue}`;
     }
   };
+  dispatch(fetchAllDishes(restaurant._id));
 
   const handleListItemClick = (event, index) => {
     setTab(index);

src/components/Dialogs/NewDish.js

@@ -22,6 +22,7 @@ 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";
+import { backend } from "../../config";
 
 // ICONS
 
@@ -192,7 +193,7 @@ export default function NewRestaurant() {
     };
     dispatch(showBackdrop());
     axios({
-      url: "http://localhost:4000/dish",
+      url: backend + "/dish",
       method: "POST",
       data: data,
       headers: {

src/components/Dialogs/NewRestaurant.js

@@ -24,6 +24,7 @@ import { useSelector, useDispatch } from "react-redux";
 import { notification, refreshUserData } from "../../actions";
 import { showBackdrop, hideBackdrop } from "../../actions/toggles.js";
 import InputWorkingHours from "../Input/InputWorkingHours";
+import { backend } from "../../config";
 // ICONS
 import FastfoodIcon from "@material-ui/icons/Fastfood";
 import LocationCityIcon from "@material-ui/icons/LocationCity";
@@ -152,7 +153,7 @@ export default function NewRestaurant() {
     };
     dispatch(showBackdrop());
     axios({
-      url: "http://localhost:4000/restaurant",
+      url: backend + "/restaurant",
       method: "POST",
       data: data,
       headers: {

src/components/EditRestaurant/EditRestaurantInfo.js

@@ -23,6 +23,7 @@ import { showBackdrop, hideBackdrop } from "../../actions/toggles.js";
 import { prepareTags } from "../../Services.js";
 import axios from "axios";
 import PasswordConfirmation from "../Dialogs/PasswordConfirmation";
+import { backend } from "../../config";
 
 const useStyles = makeStyles((theme) => ({
   textInput: {
@@ -174,7 +175,7 @@ export default function EditRestaurantInfo(props) {
       };
       dispatch(showBackdrop());
       axios({
-        url: "http://localhost:4000/restaurant",
+        url: backend + "/restaurant",
         method: "PUT",
         data: data,
         headers: {

src/components/EditRestaurant/EditRestaurantLocation.js

@@ -5,6 +5,7 @@ import { useDispatch, useSelector } from "react-redux";
 import { notification } from "../../actions";
 import { showBackdrop, hideBackdrop } from "../../actions/toggles.js";
 import axios from "axios";
+import { backend } from "../../config";
 
 export default function EditRestaurantLocation(props) {
   const {
@@ -52,7 +53,7 @@ export default function EditRestaurantLocation(props) {
       hidden: hidden,
     };
     axios({
-      url: "http://localhost:4000/restaurant",
+      url: backend + "/restaurant",
       method: "PUT",
       data: data,
       headers: {

src/components/EditRestaurant/EditRestaurantMenu.js

@@ -13,6 +13,7 @@ import axios from "axios";
 import EditCategoriesList from "../Output/EditCategoriesList";
 import { notification, refreshUserData } from "../../actions";
 import { showBackdrop, hideBackdrop } from "../../actions/toggles.js";
+import { backend } from "../../config";
 
 const useStyles = makeStyles((theme) => ({
   root: {
@@ -55,7 +56,7 @@ export default function EditRestaurantMenu(props) {
         action: "add",
       };
       axios({
-        url: "http://localhost:4000/restaurant/category",
+        url: backend + "/restaurant/category",
         method: "POST",
         data: data,
         headers: {
@@ -107,6 +108,7 @@ export default function EditRestaurantMenu(props) {
         <Divider />
       </div>
       <EditCategoriesList
+        restaurantId={props.restaurant._id}
         categories={categories}
         deleteCategory={removeCategory}
       />

src/components/EditRestaurant/EditRestaurantPhoto.js

@@ -6,6 +6,7 @@ import { useDispatch, useSelector } from "react-redux";
 import { notification } from "../../actions";
 import { showBackdrop, hideBackdrop } from "../../actions/toggles.js";
 import axios from "axios";
+import { backend } from "../../config";
 
 export default function EditRestaurantPhoto(props) {
   const {
@@ -49,7 +50,7 @@ export default function EditRestaurantPhoto(props) {
       hidden: hidden,
     };
     axios({
-      url: "http://localhost:4000/restaurant",
+      url: backend + "/restaurant",
       method: "PUT",
       data: data,
       headers: {

src/components/Input/Checkboxes.js

@@ -54,8 +54,8 @@ export default function Checkboxes(props) {
               <Checkbox
                 checked={state.gluten}
                 onChange={() => {
+                  props.onUpdate({ ...state, gluten: !state.gluten });
                   setState({ ...state, gluten: !state.gluten });
-                  props.onUpdate(state);
                 }}
                 name="gluten"
               />
@@ -67,8 +67,8 @@ export default function Checkboxes(props) {
               <Checkbox
                 checked={state.lactose}
                 onChange={() => {
+                  props.onUpdate({ ...state, lactose: !state.lactose });
                   setState({ ...state, lactose: !state.lactose });
-                  props.onUpdate(state);
                 }}
                 name="lactose"
               />
@@ -80,8 +80,8 @@ export default function Checkboxes(props) {
               <Checkbox
                 checked={state.soy}
                 onChange={() => {
+                  props.onUpdate({ ...state, soy: !state.soy });
                   setState({ ...state, soy: !state.soy });
-                  props.onUpdate(state);
                 }}
                 name="soy"
               />
@@ -93,8 +93,8 @@ export default function Checkboxes(props) {
               <Checkbox
                 checked={state.eggs}
                 onChange={() => {
+                  props.onUpdate({ ...state, eggs: !state.eggs });
                   setState({ ...state, eggs: !state.eggs });
-                  props.onUpdate(state);
                 }}
                 name="eggs"
               />
@@ -106,8 +106,8 @@ export default function Checkboxes(props) {
               <Checkbox
                 checked={state.seaFood}
                 onChange={() => {
+                  props.onUpdate({ ...state, seaFood: !state.seaFood });
                   setState({ ...state, seaFood: !state.seaFood });
-                  props.onUpdate(state);
                 }}
                 name="seaFood"
               />
@@ -119,8 +119,8 @@ export default function Checkboxes(props) {
               <Checkbox
                 checked={state.peanuts}
                 onChange={() => {
+                  props.onUpdate({ ...state, peanuts: !state.peanuts });
                   setState({ ...state, peanuts: !state.peanuts });
-                  props.onUpdate(state);
                 }}
                 name="peanuts"
               />
@@ -132,8 +132,8 @@ export default function Checkboxes(props) {
               <Checkbox
                 checked={state.sesame}
                 onChange={() => {
+                  props.onUpdate({ ...state, sesame: !state.sesame });
                   setState({ ...state, sesame: !state.sesame });
-                  props.onUpdate(state);
                 }}
                 name="sesame"
               />

src/components/Input/ImageUpload.js

@@ -2,6 +2,7 @@ import React, { useState } from "react";
 import CircularProgress from "@material-ui/core/CircularProgress";
 import { useSelector } from "react-redux";
 import axios from "axios";
+import { backend } from "../../config";
 
 export default function ImageUpload(props) {
   const { img } = props;
@@ -13,7 +14,7 @@ export default function ImageUpload(props) {
     data.append("menuiImage", event.target.files[0]);
     setLoading(true);
     axios({
-      url: "http://localhost:4000/img",
+      url: backend + "/img",
       method: "POST",
       data: data,
       headers: {

src/components/Input/ImageUploadWide.js

@@ -2,6 +2,7 @@ import React, { useState } from "react";
 import CircularProgress from "@material-ui/core/CircularProgress";
 import { useSelector } from "react-redux";
 import axios from "axios";
+import { backend } from "../../config";
 
 export default function ImageUpload(props) {
   const { img } = props;
@@ -13,7 +14,7 @@ export default function ImageUpload(props) {
     data.append("menuiImage", event.target.files[0]);
     setLoading(true);
     axios({
-      url: "http://localhost:4000/img",
+      url: backend + "/img",
       method: "POST",
       data: data,
       headers: {

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) => {
+    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 React, { useState } from "react";
-import { useSelector } from "react-redux";
+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
       )}

src/config.js

@@ -0,0 +1 @@
+export const backend = "http://localhost:4000";

src/styles/EditRestaurant.scss

@@ -92,3 +92,36 @@
     font-size: 14px;
   }
 }
+
+.editRestaurant-dish {
+  background-color: #323232;
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  margin: 0px 8px 0px 8px;
+  padding: 4px;
+  border-radius: 5px;
+  h3 {
+    font-size: 15px;
+    margin-left: 14px;
+  }
+}
+
+.editRestaurant-dishImg {
+  height: 60px;
+  width: 60px;
+  border-radius: 5px;
+  background-size: cover;
+}
+
+.editRestaurant-dishLeft {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.editRestaurant-dish:hover {
+  background-color: #3b3b3b;
+}