fixes

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",
+  };
+};

src/components/Dialogs/NewRestaurant.js

@@ -87,14 +87,17 @@ export default function NewRestaurant() {
     name: "",
     city: "",
     adress: "",
-    hoursFrom: "",
+    hoursFrom: "07:00",
-    hoursTo: "",
+    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) {
+    if (activeStep === 0) {
-      setActiveStep(activeStep + 1);
+      if (validateForm()) {
-      console.log(activeStep);
+        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) =>
-                  onChange={(event) => (state.hoursFrom = event.target.value)}
+                    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) =>
-                  onChange={(event) => (state.hoursTo = event.target.value)}
+                    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>
           )}

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 data = new FormData();
-    let reader = new FileReader();
+    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">
+      <div
-        <img
+        className="image-preview"
-          className="preview"
+        style={{ backgroundImage: `url(${imagePreviewURL})` }}
-          src={imagePreviewURL}
+      ></div>
-          width="200"
-          alt="Obraz"
-        ></img>
-      </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>
   );
 }

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;
   }

src/styles/NewRestaurant.scss

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