This commit is contained in:
2020-08-16 17:04:17 +02:00
parent add6225d93
commit 2b378fab25
5 changed files with 115 additions and 34 deletions

View File

@@ -87,14 +87,17 @@ export default function NewRestaurant() {
name: "",
city: "",
adress: "",
hoursFrom: "",
hoursTo: "",
hoursFrom: "07:00",
hoursTo: "23:00",
description: "",
tags: [],
phone: "",
facebook: "",
twitter: "",
www: "",
nameError: false,
cityError: false,
adressError: false,
};
const steps = ["Informacje", "Zdjęcie", "Lokalizacja"];
const [state, setState] = useState(initialState);
@@ -115,9 +118,10 @@ export default function NewRestaurant() {
// HANDLERS
const handleNextButton = () => {
if (activeStep < 2) {
setActiveStep(activeStep + 1);
console.log(activeStep);
if (activeStep === 0) {
if (validateForm()) {
setActiveStep(1);
}
}
};
@@ -126,6 +130,24 @@ export default function NewRestaurant() {
console.log(activeStep);
};
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 }),
};
setState({
...state,
nameError: !validation.nameValid,
cityError: !validation.cityValid,
adressError: !validation.adressValid,
});
return (
validation.nameValid && validation.cityValid && validation.adressValid
);
};
// COMPONENTS
return (
@@ -160,9 +182,13 @@ export default function NewRestaurant() {
className={styles.textInputFullWidth}
fullWidth
required
error={state.nameError}
value={state.name}
label="Nazwa lokalu"
variant="outlined"
onChange={(event) => (state.name = event.target.value)}
onChange={(event) =>
setState({ ...state, name: event.target.value })
}
InputProps={{
startAdornment: (
<InputAdornment position="start">
@@ -177,8 +203,12 @@ export default function NewRestaurant() {
className={styles.textInput}
required
label="Miasto"
error={state.cityError}
value={state.city}
variant="outlined"
onChange={(event) => (state.city = event.target.value)}
onChange={(event) =>
setState({ ...state, city: event.target.value })
}
InputProps={{
startAdornment: (
<InputAdornment position="start">
@@ -192,7 +222,11 @@ export default function NewRestaurant() {
required
label="Adres"
variant="outlined"
onChange={(event) => (state.adress = event.target.value)}
error={state.adressError}
value={state.adress}
onChange={(event) =>
setState({ ...state, adress: event.target.value })
}
InputProps={{
startAdornment: (
<InputAdornment position="start">
@@ -204,9 +238,11 @@ export default function NewRestaurant() {
<TextField
label="Otwarcie"
type="time"
defaultValue="07:00"
onChange={(event) => (state.hoursFrom = event.target.value)}
onChange={(event) =>
setState({ ...state, hoursFrom: event.target.value })
}
variant="outlined"
value={state.hoursFrom}
className={styles.timePicker}
InputLabelProps={{
shrink: true,
@@ -218,9 +254,11 @@ export default function NewRestaurant() {
<TextField
label="Zamknięcie"
type="time"
defaultValue="22:00"
onChange={(event) => (state.hoursTo = event.target.value)}
onChange={(event) =>
setState({ ...state, hoursTo: event.target.value })
}
variant="outlined"
value={state.hoursTo}
className={styles.timePicker}
InputLabelProps={{
shrink: true,
@@ -234,8 +272,9 @@ export default function NewRestaurant() {
className={styles.textInputFullWidth}
fullWidth
label="Opis"
value={state.description}
onChange={(event) =>
(state.description = event.target.value)
setState({ ...state, description: event.target.value })
}
multiline
rows={3}
@@ -244,6 +283,7 @@ export default function NewRestaurant() {
<Autocomplete
multiple
options={availableTags}
value={state.tags}
onChange={(event, values) =>
setState({ ...state, tags: values })
}
@@ -263,7 +303,10 @@ export default function NewRestaurant() {
label="Telefon"
type="tel"
variant="outlined"
onChange={(event) => (state.phone = event.target.value)}
value={state.phone}
onChange={(event) =>
setState({ ...state, phone: event.target.value })
}
InputProps={{
startAdornment: (
<InputAdornment position="start">
@@ -276,7 +319,10 @@ export default function NewRestaurant() {
className={styles.textInput}
label="Facebook"
variant="outlined"
onChange={(event) => (state.facebook = event.target.value)}
value={state.facebook}
onChange={(event) =>
setState({ ...state, facebook: event.target.value })
}
InputProps={{
startAdornment: (
<InputAdornment position="start">
@@ -289,7 +335,10 @@ export default function NewRestaurant() {
className={styles.textInput}
label="Twitter"
variant="outlined"
onChange={(event) => (state.twitter = event.target.value)}
value={state.twitter}
onChange={(event) =>
setState({ ...state, twitter: event.target.value })
}
InputProps={{
startAdornment: (
<InputAdornment position="start">
@@ -302,7 +351,10 @@ export default function NewRestaurant() {
className={styles.textInput}
label="www"
variant="outlined"
onChange={(event) => (state.www = event.target.value)}
value={state.www}
onChange={(event) =>
setState({ ...state, www: event.target.value })
}
InputProps={{
startAdornment: (
<InputAdornment position="start">
@@ -316,6 +368,7 @@ export default function NewRestaurant() {
)}
{activeStep === 1 && (
<Paper>
<h4>Dodaj zdjęcie lokalu.</h4>
<ImageUpload />
</Paper>
)}