jonaszbigda/menui_web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Jonasz Bigda
2020-10-01 20:21:46 +02:00
parent e242e01320
commit 62702521ee
16 changed files with 605 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

409
src/components/Dialogs/EditDish.js Normal file
View File

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

5
src/components/Dialogs/EditRestaurant.js
View File

@@ -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);

3
src/components/Dialogs/NewDish.js
View File

@@ -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: {

3
src/components/Dialogs/NewRestaurant.js
View File

@@ -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: {

3
src/components/EditRestaurant/EditRestaurantInfo.js
View File

@@ -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: {

3
src/components/EditRestaurant/EditRestaurantLocation.js
View File

@@ -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: {

4
src/components/EditRestaurant/EditRestaurantMenu.js
View File

@@ -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}
/>

3
src/components/EditRestaurant/EditRestaurantPhoto.js
View File

@@ -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: {

14
src/components/Input/Checkboxes.js
View File

@@ -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"
/>

3
src/components/Input/ImageUpload.js
View File

@@ -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: {

3
src/components/Input/ImageUploadWide.js
View File

@@ -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: {

26
src/components/Output/EditCategoriesList.js
View File

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

112
src/components/Output/EditDishList.js
View File

@@ -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
)}