web client v0.5
//notifications //delete restaurant //change picture //redesigned data store
This commit is contained in:
@@ -1,4 +1,5 @@
|
||||
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";
|
||||
@@ -10,8 +11,18 @@ 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";
|
||||
|
||||
const useStyles = makeStyles((theme) => ({
|
||||
textInput: {
|
||||
@@ -36,6 +47,9 @@ const useStyles = makeStyles((theme) => ({
|
||||
color: "#bbbbbb",
|
||||
},
|
||||
},
|
||||
link: {
|
||||
cursor: "pointer",
|
||||
},
|
||||
}));
|
||||
|
||||
const calculateCharLeft = (from) => {
|
||||
@@ -43,6 +57,7 @@ const calculateCharLeft = (from) => {
|
||||
};
|
||||
|
||||
export default function EditRestaurantInfo(props) {
|
||||
const history = useHistory();
|
||||
const initialState = {
|
||||
name: props.restaurant.name,
|
||||
city: props.restaurant.city,
|
||||
@@ -54,9 +69,17 @@ export default function EditRestaurantInfo(props) {
|
||||
tags: decodeTags(props.restaurant.tags),
|
||||
workingHours: props.restaurant.workingHours,
|
||||
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;
|
||||
@@ -72,8 +95,112 @@ export default function EditRestaurantInfo(props) {
|
||||
"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,
|
||||
description: state.description,
|
||||
tags: formattedTags,
|
||||
links: state.links,
|
||||
phone: state.phone,
|
||||
hidden: props.restaurant.hidden,
|
||||
};
|
||||
dispatch(showBackdrop());
|
||||
axios({
|
||||
url: "http://localhost:4000/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>
|
||||
@@ -84,10 +211,18 @@ export default function EditRestaurantInfo(props) {
|
||||
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"
|
||||
/>
|
||||
@@ -96,18 +231,34 @@ export default function EditRestaurantInfo(props) {
|
||||
<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"
|
||||
/>
|
||||
@@ -117,6 +268,7 @@ export default function EditRestaurantInfo(props) {
|
||||
fullWidth
|
||||
label="Opis"
|
||||
value={state.description}
|
||||
error={state.descriptionError}
|
||||
onChange={handleDescriptionChange}
|
||||
multiline
|
||||
rows={3}
|
||||
@@ -230,10 +382,17 @@ export default function EditRestaurantInfo(props) {
|
||||
),
|
||||
}}
|
||||
/>
|
||||
<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" />
|
||||
<ButtonSecondary text="Zapisz" />
|
||||
<ButtonPrimary text="Anuluj" onClick={cancelChanges} />
|
||||
<ButtonSecondary onClick={handleSendForm} text="Zapisz" />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user