Uploading images and pining location

src/app.tsx

@@ -1,19 +1,114 @@
-import * as React from "react";
+import React, { useState, useReducer } from "react";
 import * as ReactDOM from "react-dom";
+import "regenerator-runtime/runtime";
+import {
+  MapContainer,
+  TileLayer,
+  Marker,
+  Popup,
+  useMapEvents,
+} from "react-leaflet";
 import "./styles/reset.css";
 import "./styles/app.scss";
 
-const App = () => {
+const App: React.FC = () => {
+  const [files, setFiles] = useState([]);
+  const [mapPin, setMapPin] = useState([52.39663, 16.89866]);
+
+  const handleSubmit = async (
+    event: React.FormEvent<HTMLFormElement>
+  ): Promise<void> => {
+    event.preventDefault();
+  };
+
+  const handleUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const files = e.target.files;
+    const newstate = [];
+    const readAndPreview = (file) => {
+      // Make sure `file.name` matches our extensions criteria
+      if (/\.(jpe?g|png|svg)$/i.test(file.name)) {
+        let reader = new FileReader();
+        reader.addEventListener(
+          "load",
+          function () {
+            newstate.push(this.result);
+            setFiles([...newstate]);
+          },
+          false
+        );
+        reader.readAsDataURL(file);
+      }
+    };
+    if (files) {
+      [].forEach.call(files, readAndPreview);
+    }
+  };
+  const MapComponent = () => {
+    useMapEvents({
+      click: (e) => {
+        setMapPin([e.latlng.lat, e.latlng.lng]);
+        console.log(mapPin);
+      },
+    });
+    return null;
+  };
   return (
     <div className="container">
       <section className="container__section">
-        <h2>Photos</h2>
+        <h2 className="container__section__title">Zdjęcia</h2>
+        <div className="container__section__photos">
+          {files.map((file) => (
+            <div className="section__photos__item">
+              <img src={file} id="img" className="img" />
+            </div>
+          ))}
+        </div>
+        <input
+          type="file"
+          name="image-upload"
+          id="input"
+          accept="image/*"
+          multiple
+          onChange={(e) => handleUpload(e)}
+        />
       </section>
       <section className="container__section">
-        <h2>Map</h2>
+        <h2 className="container__section__title">Mapa</h2>
+        <div>
+          <MapContainer
+            center={[52.39663, 16.89866]}
+            className="container__section__map"
+            zoom={18}
+            scrollWheelZoom={true}
+          >
+            <TileLayer
+              attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
+              url="http://{s}.tile.osm.org/{z}/{x}/{y}.png"
+            />
+            <Marker position={mapPin}></Marker>
+            <MapComponent />
+          </MapContainer>
+        </div>
       </section>
       <section className="container__section">
-        <h2>Form</h2>
+        <h2 className="container__section__title">Formularz zgłoszeniowy</h2>
+        <form
+          className="container__section__form"
+          onSubmit={(e) => handleSubmit(e)}
+        >
+          <label htmlFor="name">Twoje imię i nazwisko</label>
+          <input type="text" className="input" id="name" />
+          <label htmlFor="email">Twój adres email</label>
+          <input type="text" className="input" id="email" />
+          <label htmlFor="plate">Numer tablicy rejestracyjnej</label>
+          <input type="text" className="input" id="plate" />
+          <label htmlFor="message">Wiadomość dla straży miejskiej</label>
+          <textarea className="input input--textarea" id="message" />
+          <select className="input" id="reason">
+            <option value="0">Wybierz powód wysłania zgłoszenia</option>
+          </select>
+          <button className="button">Wysłanie zgłoszenia</button>
+        </form>
       </section>
     </div>
   );

src/styles/app.scss

@@ -29,9 +29,13 @@
 .section__photos__item {
   width: 150px;
   height: 150px;
-  border: black solid 1px;
+}
+.section__photos__item--active {
+  width: 150px;
+  height: 150px;
 }
 .container__section__map {
+  cursor: default;
   height: 600px;
   width: 100%;
 }
@@ -51,6 +55,7 @@
   height: 350px;
   resize: none;
   font-size: 1.2em;
+  padding: 3px 8px;
 }
 .label {
   width: 100%;
@@ -60,6 +65,11 @@
   width: 100%;
   height: 100%;
 }
+.img--active {
+  width: 100%;
+  height: 100%;
+  border: 3px solid seagreen;
+}
 /*breakpoint for mobile*/
 @media (max-width: 1200px) {
   body {