413 lines
13 KiB
JavaScript
413 lines
13 KiB
JavaScript
import React, { useState } from "react";
|
|
import { useHistory } from "react-router-dom";
|
|
import ButtonPrimary from "../Input/ButtonPrimary";
|
|
import ButtonSecondary from "../Input/ButtonSecondary";
|
|
import TextField from "@material-ui/core/TextField";
|
|
import { makeStyles } from "@material-ui/core/styles";
|
|
import InputWorkingHours from "../Input/InputWorkingHours";
|
|
import Autocomplete from "@material-ui/lab/Autocomplete";
|
|
import InputAdornment from "@material-ui/core/InputAdornment";
|
|
import PhoneIcon from "@material-ui/icons/Phone";
|
|
import FacebookIcon from "@material-ui/icons/Facebook";
|
|
import InstagramIcon from "@material-ui/icons/Instagram";
|
|
import LanguageIcon from "@material-ui/icons/Language";
|
|
import FastfoodIcon from "@material-ui/icons/Fastfood";
|
|
import LocationCityIcon from "@material-ui/icons/LocationCity";
|
|
import Divider from "@material-ui/core/Divider";
|
|
import Link from "@material-ui/core/Link";
|
|
import { decodeTags } from "../../Services";
|
|
import validator from "validator";
|
|
import { useSelector, useDispatch } from "react-redux";
|
|
import { notification, refreshUserData, updateRestaurant } from "../../actions";
|
|
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";
|
|
import InputLunchMenuHours from "../Input/InputLunchMenuHours";
|
|
|
|
const useStyles = makeStyles((theme) => ({
|
|
textInput: {
|
|
margin: theme.spacing(2),
|
|
"& .MuiInputBase-root": {
|
|
color: "#bbbbbb",
|
|
},
|
|
"& .MuiInputLabel-root": {
|
|
color: "#bbbbbb",
|
|
},
|
|
},
|
|
textInputFullWidth: {
|
|
marginTop: theme.spacing(2),
|
|
marginBottom: theme.spacing(2),
|
|
"& .MuiInputBase-root": {
|
|
color: "#bbbbbb",
|
|
},
|
|
"& .MuiInputLabel-root": {
|
|
color: "#bbbbbb",
|
|
},
|
|
"$ .MuiFormHelperText-root": {
|
|
color: "#bbbbbb",
|
|
},
|
|
},
|
|
link: {
|
|
cursor: "pointer",
|
|
},
|
|
}));
|
|
|
|
const calculateCharLeft = (from) => {
|
|
return 400 - from.length;
|
|
};
|
|
|
|
export default function EditRestaurantInfo(props) {
|
|
const history = useHistory();
|
|
const initialState = {
|
|
name: props.restaurant.name,
|
|
city: props.restaurant.city,
|
|
adress: props.restaurant.adress,
|
|
description: props.restaurant.description,
|
|
phone: props.restaurant.phone,
|
|
hidden: props.restaurant.hidden,
|
|
links: props.restaurant.links,
|
|
tags: decodeTags(props.restaurant.tags),
|
|
workingHours: props.restaurant.workingHours,
|
|
lunchHours: props.lunchHours,
|
|
charleft: calculateCharLeft(props.restaurant.description),
|
|
nameError: false,
|
|
cityError: false,
|
|
adressError: false,
|
|
descriptionError: false,
|
|
};
|
|
const [state, setState] = useState(initialState);
|
|
const [passwordDialog, setPasswordDialog] = useState(false);
|
|
const styles = useStyles();
|
|
const dispatch = useDispatch();
|
|
const jwt = useSelector((state) => state.data.userData.jwt);
|
|
const email = useSelector((state) => state.data.userData.userEmail);
|
|
const handleDescriptionChange = (event) => {
|
|
let stringLength = event.target.value.length;
|
|
let charleft = 400 - stringLength;
|
|
setState({ ...state, description: event.target.value, charLeft: charleft });
|
|
};
|
|
const availableTags = [
|
|
"Płatność kartą",
|
|
"Lubimy zwierzaki",
|
|
"Bezglutenowe",
|
|
"Wegańskie",
|
|
"Wegetariańskie",
|
|
"Podajemy alkohol",
|
|
"Dowozimy",
|
|
];
|
|
|
|
const validateForm = () => {
|
|
const validation = {
|
|
nameValid: validator.isLength(state.name, { min: 1, max: 40 }),
|
|
cityValid: validator.isLength(state.city, { min: 1, max: 40 }),
|
|
adressValid: validator.isLength(state.name, { min: 1, max: 40 }),
|
|
descriptionValid: validator.isLength(state.description, {
|
|
min: 1,
|
|
max: 400,
|
|
}),
|
|
};
|
|
setState({
|
|
...state,
|
|
nameError: !validation.nameValid,
|
|
cityError: !validation.cityValid,
|
|
adressError: !validation.adressValid,
|
|
descriptionError: !validation.descriptionValid,
|
|
});
|
|
|
|
return (
|
|
validation.nameValid &&
|
|
validation.cityValid &&
|
|
validation.adressValid &&
|
|
validation.descriptionValid
|
|
);
|
|
};
|
|
|
|
const cancelChanges = () => {
|
|
setState(initialState);
|
|
};
|
|
|
|
const handleDelete = (password) => {
|
|
axios({
|
|
url: "http://localhost:4000/restaurant/delete",
|
|
method: "POST",
|
|
data: {
|
|
restaurantId: props.restaurant._id,
|
|
password: password,
|
|
email: email,
|
|
},
|
|
headers: {
|
|
"x-auth-token": jwt,
|
|
},
|
|
})
|
|
.then((response) => {
|
|
dispatch(refreshUserData(jwt));
|
|
dispatch(hideBackdrop());
|
|
dispatch(notification("Restauracja została usunięta", "success"));
|
|
history.push("/");
|
|
})
|
|
.catch((err) => {
|
|
console.log(err);
|
|
dispatch(hideBackdrop());
|
|
dispatch(notification("Wystąpił nieoczekiwany błąd :(", "error"));
|
|
});
|
|
};
|
|
|
|
const handleSendForm = () => {
|
|
if (validateForm()) {
|
|
const formattedTags = prepareTags(state.tags);
|
|
const data = {
|
|
restaurantId: props.restaurant._id,
|
|
dishes: props.restaurant.dishes,
|
|
categories: props.restaurant.categories,
|
|
lunchMenu: props.restaurant.lunchMenu,
|
|
name: state.name,
|
|
city: state.city,
|
|
adress: state.adress,
|
|
coordinates: props.restaurant.location.coordinates,
|
|
placesId: props.restaurant.placesId,
|
|
imgUrl: props.restaurant.imgUrl,
|
|
workingHours: state.workingHours,
|
|
lunchHours: state.lunchHours,
|
|
description: state.description,
|
|
tags: formattedTags,
|
|
links: state.links,
|
|
phone: state.phone,
|
|
hidden: props.restaurant.hidden,
|
|
};
|
|
dispatch(showBackdrop());
|
|
axios({
|
|
url: backend + "/restaurant",
|
|
method: "PUT",
|
|
data: data,
|
|
headers: {
|
|
"x-auth-token": jwt,
|
|
},
|
|
})
|
|
.then((response) => {
|
|
dispatch(hideBackdrop());
|
|
dispatch(notification("Dane zostały zapisane.", "success"));
|
|
dispatch(updateRestaurant(response));
|
|
})
|
|
.catch((err) => {
|
|
console.log(err);
|
|
dispatch(hideBackdrop());
|
|
dispatch(notification("Wystąpił nieoczekiwany błąd :(", "error"));
|
|
});
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="editRestaurant-tab">
|
|
<PasswordConfirmation
|
|
open={passwordDialog}
|
|
onCancel={() => setPasswordDialog(false)}
|
|
onSubmit={handleDelete}
|
|
/>
|
|
<div className="editRestaurant-doubleColumn">
|
|
<div className="editRestaurant-sectiontitle">
|
|
<h4>Podstawowe dane</h4>
|
|
<Divider />
|
|
</div>
|
|
<div className="editRestaurant-fullWidth">
|
|
<TextField
|
|
className={styles.textInputFullWidth}
|
|
fullWidth
|
|
value={state.name}
|
|
error={state.nameError}
|
|
onChange={(event) =>
|
|
setState({ ...state, name: event.target.value })
|
|
}
|
|
InputLabelProps={{ shrink: true }}
|
|
InputProps={{
|
|
startAdornment: (
|
|
<InputAdornment position="start">
|
|
<FastfoodIcon color="primary" />
|
|
</InputAdornment>
|
|
),
|
|
}}
|
|
label="Nazwa lokalu"
|
|
variant="outlined"
|
|
/>
|
|
</div>
|
|
|
|
<TextField
|
|
className={styles.textInput}
|
|
value={state.city}
|
|
error={state.cityError}
|
|
onChange={(event) => setState({ ...state, city: event.target.value })}
|
|
InputLabelProps={{ shrink: true }}
|
|
InputProps={{
|
|
startAdornment: (
|
|
<InputAdornment position="start">
|
|
<LocationCityIcon color="primary" />
|
|
</InputAdornment>
|
|
),
|
|
}}
|
|
label="Miasto"
|
|
variant="outlined"
|
|
/>
|
|
<TextField
|
|
className={styles.textInput}
|
|
value={state.adress}
|
|
error={state.adressError}
|
|
onChange={(event) =>
|
|
setState({ ...state, adress: event.target.value })
|
|
}
|
|
InputLabelProps={{ shrink: true }}
|
|
InputProps={{
|
|
startAdornment: (
|
|
<InputAdornment position="start">
|
|
<LocationCityIcon color="primary" />
|
|
</InputAdornment>
|
|
),
|
|
}}
|
|
label="Adres"
|
|
variant="outlined"
|
|
/>
|
|
<div className="editRestaurant-fullWidth">
|
|
<TextField
|
|
className={styles.textInputFullWidth}
|
|
fullWidth
|
|
label="Opis"
|
|
value={state.description}
|
|
error={state.descriptionError}
|
|
onChange={handleDescriptionChange}
|
|
multiline
|
|
rows={3}
|
|
rowsMax={8}
|
|
variant="outlined"
|
|
helperText={`Pozostałe znaki: ${state.charleft}`}
|
|
InputLabelProps={{ shrink: true }}
|
|
FormHelperTextProps={{
|
|
style: { color: "#bbbbbb" },
|
|
}}
|
|
/>
|
|
<Autocomplete
|
|
multiple
|
|
options={availableTags}
|
|
value={state.tags}
|
|
onChange={(event, values) => setState({ ...state, tags: values })}
|
|
renderInput={(params) => (
|
|
<TextField
|
|
{...params}
|
|
className={styles.textInputFullWidth}
|
|
variant="outlined"
|
|
label="Tagi"
|
|
placeholder="Wybierz tagi"
|
|
/>
|
|
)}
|
|
/>
|
|
</div>
|
|
<div className="editRestaurant-sectiontitle">
|
|
<h4>Godziny otwarcia</h4>
|
|
<Divider />
|
|
</div>
|
|
<InputWorkingHours
|
|
setHours={(hours) => setState({ ...state, workingHours: hours })}
|
|
hours={state.workingHours}
|
|
/>
|
|
<div className="editRestaurant-sectiontitle">
|
|
<h4>Dane kontaktowe</h4>
|
|
<Divider />
|
|
</div>
|
|
<TextField
|
|
className={styles.textInput}
|
|
label="Telefon"
|
|
type="tel"
|
|
variant="outlined"
|
|
value={state.phone}
|
|
onChange={(event) =>
|
|
setState({ ...state, phone: event.target.value })
|
|
}
|
|
InputProps={{
|
|
startAdornment: (
|
|
<InputAdornment position="start">
|
|
<PhoneIcon color="primary" />
|
|
</InputAdornment>
|
|
),
|
|
}}
|
|
/>
|
|
<TextField
|
|
className={styles.textInput}
|
|
label="Facebook"
|
|
variant="outlined"
|
|
value={state.links.facebook}
|
|
onChange={(event) =>
|
|
setState({
|
|
...state,
|
|
links: { ...state.links, facebook: event.target.value },
|
|
})
|
|
}
|
|
InputProps={{
|
|
startAdornment: (
|
|
<InputAdornment position="start">
|
|
<FacebookIcon color="primary" />
|
|
</InputAdornment>
|
|
),
|
|
}}
|
|
/>
|
|
<TextField
|
|
className={styles.textInput}
|
|
label="Instagram"
|
|
variant="outlined"
|
|
value={state.links.instagram}
|
|
onChange={(event) =>
|
|
setState({
|
|
...state,
|
|
links: { ...state.links, instagram: event.target.value },
|
|
})
|
|
}
|
|
InputProps={{
|
|
startAdornment: (
|
|
<InputAdornment position="start">
|
|
<InstagramIcon color="primary" />
|
|
</InputAdornment>
|
|
),
|
|
}}
|
|
/>
|
|
<TextField
|
|
className={styles.textInput}
|
|
label="www"
|
|
variant="outlined"
|
|
value={state.links.www}
|
|
onChange={(event) =>
|
|
setState({
|
|
...state,
|
|
links: { ...state.links, www: event.target.value },
|
|
})
|
|
}
|
|
InputProps={{
|
|
startAdornment: (
|
|
<InputAdornment position="start">
|
|
<LanguageIcon color="primary" />
|
|
</InputAdornment>
|
|
),
|
|
}}
|
|
/>
|
|
<div className="editRestaurant-sectiontitle">
|
|
<h4>Lunch menu</h4>
|
|
<Divider />
|
|
<InputLunchMenuHours
|
|
off={!state.lunchHours}
|
|
hours={state.lunchHours}
|
|
changeValue={(value) => setState({ ...state, lunchHours: value })}
|
|
/>
|
|
</div>
|
|
<div className="editRestaurant-sectiontitle">
|
|
<h4>Zaawansowane</h4>
|
|
<Divider />
|
|
</div>
|
|
<Link className={styles.link} onClick={() => setPasswordDialog(true)}>
|
|
Usuń restaurację
|
|
</Link>
|
|
</div>
|
|
<div className="editRestaurant-bottom">
|
|
<ButtonPrimary text="Anuluj" onClick={cancelChanges} />
|
|
<ButtonSecondary onClick={handleSendForm} text="Zapisz" />
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|