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

fixes

Browse Source
This commit is contained in:
Jonasz Bigda
2020-08-16 17:04:17 +02:00
parent add6225d93
commit 2b378fab25
5 changed files with 115 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
src/actions/index.js
View File

@@ -184,3 +184,16 @@ export const tryRegister = (data) => {
});
};
};
export const setTempData = (data) => {
return {
type: "SET_TEMP_DATA",
payload: data,
};
};
export const clearTempData = () => {
return {
type: "CLEAR_TEMP_DATA",
};
};

87
src/components/Dialogs/NewRestaurant.js
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>
)}

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

@@ -1,31 +1,43 @@
import React, { useState } from "react";
import axios from "axios";
export default function ImageUpload() {
const [file, setFile] = useState(null);
const [imagePreviewURL, setPreviewURL] = useState("");
const handleInputChange = (event) => {
setFile(event.target.files[0]);
let reader = new FileReader();
let data = new FormData();
data.append("menuiImage", new Blob([event.target.files[0]]));
axios({
url: "http://localhost:4000/img",
method: "POST",
data: data,
headers: {
Accept: "application/json",
"Content-Type": "multipart/form-data",
},
})
.then((response) => {
console.log(response);
})
.catch((error) => {
console.log(error);
});
let reader = new FileReader();
reader.onloadend = () => {
setPreviewURL(reader.result);
};
reader.readAsDataURL(event.target.files[0]);
};
let imagePreview = <div className="image-preview">Proszę wybrać obraz.</div>;
if (imagePreviewURL) {
imagePreview = (
<div className="image-preview">
<img
className="preview"
src={imagePreviewURL}
width="200"
alt="Obraz"
></img>
</div>
<div
className="image-preview"
style={{ backgroundImage: `url(${imagePreviewURL})` }}
></div>
);
}
@@ -39,7 +51,7 @@ export default function ImageUpload() {
className="input-image"
onChange={handleInputChange}
></input>
<label for="file">Wybierz plik...</label>
<label htmlFor="file">Wybierz plik...</label>
</div>
);
}

5
src/reducers/data.js
View File

@@ -17,6 +17,7 @@ const initialState = {
registerResult: "",
loginResult: "",
},
tempData: {},
};
const data = (state = initialState, action) => {
@@ -105,6 +106,10 @@ const data = (state = initialState, action) => {
...state,
dialogs: { ...state.dialogs, newRestaurant: true },
});
case "SET_TEMP_DATA":
return (state = { ...state, tempData: action.payload });
case "CLEAR_TEMP_DATA":
return (state = { ...state, tempData: {} });
default:
return state;
}

6
src/styles/NewRestaurant.scss
View File

@@ -26,10 +26,8 @@
align-items: center;
justify-content: center;
font-size: 0.8rem;
}
.preview {
border-radius: 15px;
background-size: contain;
background-position: center;
}
.input-image {