diff --git a/src/actions/index.js b/src/actions/index.js index 236c4e9..e34be57 100644 --- a/src/actions/index.js +++ b/src/actions/index.js @@ -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", + }; +}; diff --git a/src/components/Dialogs/NewRestaurant.js b/src/components/Dialogs/NewRestaurant.js index acaceaf..c71135d 100644 --- a/src/components/Dialogs/NewRestaurant.js +++ b/src/components/Dialogs/NewRestaurant.js @@ -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: ( @@ -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: ( @@ -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: ( @@ -204,9 +238,11 @@ export default function NewRestaurant() { (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() { (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() { 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: ( @@ -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: ( @@ -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: ( @@ -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: ( @@ -316,6 +368,7 @@ export default function NewRestaurant() { )} {activeStep === 1 && ( +

Dodaj zdjęcie lokalu.

)} diff --git a/src/components/Input/ImageUpload.js b/src/components/Input/ImageUpload.js index 3790339..b02720a 100644 --- a/src/components/Input/ImageUpload.js +++ b/src/components/Input/ImageUpload.js @@ -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 =
Proszę wybrać obraz.
; if (imagePreviewURL) { imagePreview = ( -
- Obraz -
+
); } @@ -39,7 +51,7 @@ export default function ImageUpload() { className="input-image" onChange={handleInputChange} > - + ); } diff --git a/src/reducers/data.js b/src/reducers/data.js index d438717..fc78101 100644 --- a/src/reducers/data.js +++ b/src/reducers/data.js @@ -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; } diff --git a/src/styles/NewRestaurant.scss b/src/styles/NewRestaurant.scss index 112da2d..1e11e3b 100644 --- a/src/styles/NewRestaurant.scss +++ b/src/styles/NewRestaurant.scss @@ -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 {