Add Restaurant almost done

src/components/Input/ImageUpload.js

@@ -1,14 +1,16 @@
 import React, { useState } from "react";
 import CircularProgress from "@material-ui/core/CircularProgress";
+import { useSelector } from "react-redux";
 import axios from "axios";
 
-export default function ImageUpload() {
-  const [imagePreviewURL, setPreviewURL] = useState("");
+export default function ImageUpload(props) {
+  const [imagePreviewURL, setPreviewURL] = useState(props.img);
   let showCircle = false;
+  const token = useSelector((state) => state.data.jwt);
 
   const handleInputChange = (event) => {
     let data = new FormData();
-    data.append("menuiImage", new Blob([event.target.files[0]]));
+    data.append("menuiImage", event.target.files[0]);
 
     axios({
       url: "http://localhost:4000/img",
@@ -17,20 +19,16 @@ export default function ImageUpload() {
       headers: {
         Accept: "application/json",
         "Content-Type": "multipart/form-data",
+        "x-auth-token": token,
       },
     })
       .then((response) => {
-        console.log(response);
+        setPreviewURL(response.data.imgURL);
+        props.onUpload(response.data.imgURL);
       })
       .catch((error) => {
-        console.log(error);
+        console.log("Wystąpił błąd podczas wgrywania pliku.");
       });
-
-    let reader = new FileReader();
-    reader.onloadend = () => {
-      setPreviewURL(reader.result);
-    };
-    reader.readAsDataURL(event.target.files[0]);
   };
 
   let imagePreview = (

src/components/Input/InputGoogleMaps.js

@@ -0,0 +1,47 @@
+import React, { useState } from "react";
+import { GoogleMap, LoadScript, Marker } from "@react-google-maps/api";
+
+function InputGoogleMaps(props) {
+  const containerStyle = {
+    width: "500px",
+    height: "500px",
+  };
+
+  const center = {
+    lat: props.coordinates[0],
+    lng: props.coordinates[1],
+  };
+  const [visibility, setVisibility] = useState(true);
+
+  const handleMapClick = (event) => {
+    const location = {
+      lat: event.latLng.lat(),
+      lng: event.latLng.lng(),
+    };
+    if (event.placeId) {
+      setVisibility(false);
+      props.setCoordinates([location.lat, location.lng], event.placeId);
+    } else {
+      setVisibility(true);
+      props.setCoordinates([location.lat, location.lng]);
+    }
+  };
+
+  return (
+    <LoadScript googleMapsApiKey="AIzaSyDAlZSiBanP52qpZ1kaH06XkuA2zndLUd8">
+      <GoogleMap
+        mapContainerStyle={containerStyle}
+        center={center}
+        zoom={7}
+        onClick={handleMapClick}
+      >
+        <Marker
+          position={{ lat: props.coordinates[0], lng: props.coordinates[1] }}
+          visible={visibility}
+        />
+      </GoogleMap>
+    </LoadScript>
+  );
+}
+
+export default React.memo(InputGoogleMaps);