From 2082dc1866226fbd88b9867eacc6d6fd5270d88b Mon Sep 17 00:00:00 2001
From: franciszek <prostyfranek@protonmail.com>
Date: Fri, 15 Jan 2021 22:59:06 +0100
Subject: [PATCH] Working form and selecting photos

---
 package-lock.json   |  43 +++++++++++++-
 package.json        |   2 +
 src/app.tsx         | 142 ++++++++++++++++++++++++++++++++++++++------
 src/fileReducer.ts  |   3 +
 src/formReducer.ts  |  60 +++++++++++++++++++
 src/http.ts         |  18 ++++++
 src/location.ts     |  22 +++++++
 src/styles/app.scss |  30 +++++++++-
 8 files changed, 296 insertions(+), 24 deletions(-)
 create mode 100644 src/formReducer.ts
 create mode 100644 src/http.ts
 create mode 100644 src/location.ts

diff --git a/package-lock.json b/package-lock.json
index 56c1f88..7087af4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1061,6 +1061,12 @@
         "@types/node": "*"
       }
     },
+    "@types/caseless": {
+      "version": "0.12.2",
+      "resolved": "https://registry.npmjs.org/@types/caseless/-/caseless-0.12.2.tgz",
+      "integrity": "sha512-6ckxMjBBD8URvjB6J3NcnuAn5Pkl7t3TizAg+xdlzzQGSPSmBcXf8KoIH0ua/i+tio+ZRUHEXp0HEmvaR4kt0w==",
+      "dev": true
+    },
     "@types/connect": {
       "version": "3.4.34",
       "resolved": "https://registry.npmjs.org/@types/connect/-/connect-3.4.34.tgz",
@@ -1198,9 +1204,9 @@
       "integrity": "sha512-Jus9s4CDbqwocc5pOAnh8ShfrnMcPHuJYzVcSUU7lrh8Ni5HuIqX3oilL86p3dlTrk0LzHRCgA/GQ7uNCw6l2Q=="
     },
     "@types/node": {
-      "version": "14.14.19",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-14.14.19.tgz",
-      "integrity": "sha512-4nhBPStMK04rruRVtVc6cDqhu7S9GZai0fpXgPXrFpcPX6Xul8xnrjSdGB4KPBVYG/R5+fXWdCM8qBoiULWGPQ=="
+      "version": "14.14.20",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-14.14.20.tgz",
+      "integrity": "sha512-Y93R97Ouif9JEOWPIUyU+eyIdyRqQR0I8Ez1dzku4hDx34NWh4HbtIc3WNzwB1Y9ULvNGeu5B8h8bVL5cAk4/A=="
     },
     "@types/prop-types": {
       "version": "15.7.3",
@@ -1239,6 +1245,31 @@
         "@types/react": "*"
       }
     },
+    "@types/request": {
+      "version": "2.48.5",
+      "resolved": "https://registry.npmjs.org/@types/request/-/request-2.48.5.tgz",
+      "integrity": "sha512-/LO7xRVnL3DxJ1WkPGDQrp4VTV1reX9RkC85mJ+Qzykj2Bdw+mG15aAfDahc76HtknjzE16SX/Yddn6MxVbmGQ==",
+      "dev": true,
+      "requires": {
+        "@types/caseless": "*",
+        "@types/node": "*",
+        "@types/tough-cookie": "*",
+        "form-data": "^2.5.0"
+      },
+      "dependencies": {
+        "form-data": {
+          "version": "2.5.1",
+          "resolved": "https://registry.npmjs.org/form-data/-/form-data-2.5.1.tgz",
+          "integrity": "sha512-m21N3WOmEEURgk6B9GLOE4RuWOFf28Lhh9qGYeNlGq4VDXUlJy2th2slBNU8Gp8EzloYZOibZJ7t5ecIrFSjVA==",
+          "dev": true,
+          "requires": {
+            "asynckit": "^0.4.0",
+            "combined-stream": "^1.0.6",
+            "mime-types": "^2.1.12"
+          }
+        }
+      }
+    },
     "@types/serve-static": {
       "version": "1.13.8",
       "resolved": "https://registry.npmjs.org/@types/serve-static/-/serve-static-1.13.8.tgz",
@@ -1248,6 +1279,12 @@
         "@types/node": "*"
       }
     },
+    "@types/tough-cookie": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/@types/tough-cookie/-/tough-cookie-4.0.0.tgz",
+      "integrity": "sha512-I99sngh224D0M7XgW1s120zxCt3VYQ3IQsuw3P3jbq5GG4yc79+ZjyKznyOGIQrflfylLgcfekeZW/vk0yng6A==",
+      "dev": true
+    },
     "abab": {
       "version": "2.0.5",
       "resolved": "https://registry.npmjs.org/abab/-/abab-2.0.5.tgz",
diff --git a/package.json b/package.json
index cb6fe60..1fea6b2 100644
--- a/package.json
+++ b/package.json
@@ -35,6 +35,8 @@
   },
   "devDependencies": {
     "@types/leaflet": "^1.5.19",
+    "@types/node": "^14.14.20",
+    "@types/request": "^2.48.5",
     "sass": "^1.32.0",
     "typescript": "^4.1.3"
   }
diff --git a/src/app.tsx b/src/app.tsx
index 84b5190..2fe1b35 100644
--- a/src/app.tsx
+++ b/src/app.tsx
@@ -5,32 +5,39 @@ import React, {
   FC,
   ChangeEvent,
   FormEvent,
+  useEffect,
 } from "react";
 import * as ReactDOM from "react-dom";
 import { offenses } from "./offenses";
 //Importing fileReducer to use in useReducer hook, and File interface to use in looping over array of files
-import { fileReducer, File } from "./fileReducer";
+import { fileReducer, filesInitialState, File } from "./fileReducer";
+import { formReducer, fromInitialState } from "./formReducer";
 import "regenerator-runtime/runtime";
 import { MapContainer, TileLayer, Marker, useMapEvents } from "react-leaflet";
 import "./styles/reset.css";
 import "./styles/app.scss";
+import { getAddress } from "./location";
 
 const App: FC = () => {
   //This reducer handles adding and selecting files.
-  //I'm passing in initial state "{files: []}" which can be changed by using dispatch function with object contaning right type and payload.
+  //I'm passing in initial state "{files: []}" from fileReducer file.
+  //State can be changed by using dispatch function with object contaning right type and payload.
   //Example: dispatch({type: "ADD_FILE", payload: {img: thisIsImgURL, selected: false})
   //State can be accsesed by using fileState object
   //Example: fileState.files
   //Reducer it self is imported from fileReducer.ts in src/ dir
-  const [fileState, dispatch] = useReducer(fileReducer, { files: [] });
+  const [fileState, fileDispatch] = useReducer(fileReducer, filesInitialState);
+
+  const [formState, formDispatch] = useReducer(formReducer, fromInitialState);
 
   //This hook handles pining location on the map
-  const [mapPin, setMapPin] = useState([52, 16]);
+  const [mapPin, setMapPin] = useState({ lat: 52.39663, lon: 16.89866 });
 
   const handleSubmit = async (
     event: FormEvent<HTMLFormElement> | MouseEvent<HTMLButtonElement>
   ): Promise<void> => {
     event.preventDefault();
+    console.log(fileState, formState);
   };
 
   const handleUpload = (e: ChangeEvent<HTMLInputElement>) => {
@@ -42,11 +49,10 @@ const App: FC = () => {
         reader.addEventListener(
           "load",
           function () {
-            dispatch({
+            fileDispatch({
               type: "ADD_FILE",
               payload: {
                 img: this.result,
-                //
                 id: Date.now().toString(),
                 selected: false,
               },
@@ -61,15 +67,38 @@ const App: FC = () => {
       [].forEach.call(files, readAndPreview);
     }
   };
-
+  useEffect(() => {
+    getAddress(mapPin).then((blob) =>
+      formDispatch({
+        type: "CHANGE_FIELD",
+        payload: {
+          field: "address",
+          value: blob,
+        },
+      })
+    );
+  }, [mapPin]);
   const MapComponent = () => {
     useMapEvents({
-      click: (e) => {
-        setMapPin([e.latlng.lat, e.latlng.lng]);
+      click: async (e) => {
+        setMapPin({ lat: e.latlng.lat, lon: e.latlng.lng });
       },
     });
     return null;
   };
+  // console.log(getAddress(mapPin));
+  const formMessage = `Rejestracja: ${formState.plate}\nMiejsce: ${
+    formState.address.road === undefined ? "" : formState.address.road
+  } ${
+    formState.address.house_number === undefined
+      ? ""
+      : formState.address.house_number
+  }\nData: ${new Date().toLocaleString()}\nMoje dane: ${formState.name + ","} ${
+    formState.email
+  }\n${formState.my_address}\nPowód: ${formState.offenses.join(
+    ", \n"
+  )}\nKomentarz: ${formState.comment}
+  `;
 
   return (
     <div className="container">
@@ -80,7 +109,7 @@ const App: FC = () => {
             <div
               key={index}
               onClick={(e: MouseEvent) =>
-                dispatch({
+                fileDispatch({
                   type: "SELECT_FILE",
                   payload: { id: (e.target as any).id },
                 })
@@ -111,14 +140,14 @@ const App: FC = () => {
           <MapContainer
             center={[52.39663, 16.89866]}
             className="container__section__map"
-            zoom={18}
+            zoom={16}
             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 as any}></Marker>
+            <Marker position={[mapPin.lat, mapPin.lon]}></Marker>
             <MapComponent />
           </MapContainer>
         </div>
@@ -130,14 +159,58 @@ const App: FC = () => {
           onSubmit={(e) => handleSubmit(e)}
         >
           <label htmlFor="name">Twoje imię i nazwisko</label>
-          <input type="text" className="input" id="name" />
+          <input
+            type="text"
+            className="input"
+            id="name"
+            value={formState.name}
+            onChange={(e) =>
+              formDispatch({
+                type: "CHANGE_FIELD",
+                payload: { field: e.target.id, value: e.target.value },
+              })
+            }
+          />
           <label htmlFor="email">Twój adres email</label>
-          <input type="text" className="input" id="email" />
+          <input
+            type="text"
+            className="input"
+            id="email"
+            value={formState.email}
+            onChange={(e) =>
+              formDispatch({
+                type: "CHANGE_FIELD",
+                payload: { field: e.target.id, value: e.target.value },
+              })
+            }
+          />
+          <label htmlFor="my_address">Twój adres zamieszkania</label>
+          <input
+            type="text"
+            className="input"
+            id="my_address"
+            value={formState.my_address}
+            onChange={(e) =>
+              formDispatch({
+                type: "CHANGE_FIELD",
+                payload: { field: e.target.id, value: e.target.value },
+              })
+            }
+          />
           <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" />
-          <div>
+          <input
+            type="text"
+            className="input"
+            id="plate"
+            value={formState.plate}
+            onChange={(e) =>
+              formDispatch({
+                type: "CHANGE_FIELD",
+                payload: { field: e.target.id, value: e.target.value },
+              })
+            }
+          />
+          <div className="container__section__form__offenses">
             {offenses.map((offence, index) => (
               <div key={index}>
                 <input
@@ -145,14 +218,45 @@ const App: FC = () => {
                   id={offence.id}
                   value={offence.car_is}
                   name={offence.car_is}
+                  className="chceckbox"
+                  onChange={(e) =>
+                    e.target.checked === true
+                      ? formDispatch({
+                          type: "ADD_OFFENCE",
+                          payload: { value: e.target.value, field: "checkbox" },
+                        })
+                      : formDispatch({
+                          type: "DELETE_OFFENCE",
+                          payload: { value: e.target.value, field: "checkbox" },
+                        })
+                  }
                 />
                 <label htmlFor={offence.id} className="label">
                   {offence.name}
                 </label>
-                ;
               </div>
             ))}
           </div>
+          <label htmlFor="comment">Twój komentarz do zgłoszenia</label>
+          <textarea
+            className="textarea textarea--small"
+            id="comment"
+            name="comment"
+            value={formState.comment}
+            onChange={(e) =>
+              formDispatch({
+                type: "CHANGE_FIELD",
+                payload: { field: e.target.id, value: e.target.value },
+              })
+            }
+          />
+          <label htmlFor="message">Wiadomość dla straży miejskiej</label>
+          <textarea
+            className="textarea"
+            id="message"
+            disabled={true}
+            value={formMessage}
+          />
 
           <button className="button" onClick={(e) => handleSubmit(e)}>
             Wysłanie zgłoszenia
diff --git a/src/fileReducer.ts b/src/fileReducer.ts
index 769db9b..a42ede4 100644
--- a/src/fileReducer.ts
+++ b/src/fileReducer.ts
@@ -14,6 +14,9 @@ interface FilesAction {
     selected?: boolean;
   };
 }
+export const filesInitialState = {
+  files: [],
+};
 export function fileReducer(state: FilesState, action: FilesAction) {
   switch (action.type) {
     case "ADD_FILE":
diff --git a/src/formReducer.ts b/src/formReducer.ts
new file mode 100644
index 0000000..eed16a1
--- /dev/null
+++ b/src/formReducer.ts
@@ -0,0 +1,60 @@
+import { Address } from "./location";
+interface FormState {
+  name: string;
+  email: string;
+  plate: string;
+  offenses: string[];
+  comment: string;
+  my_address: string;
+  address: Address;
+}
+interface FormAction {
+  type: string;
+  payload: {
+    field: string;
+    value: string | Address;
+  };
+}
+export const fromInitialState = {
+  name: "",
+  email: "",
+  plate: "",
+  my_address: "",
+  offenses: [],
+  comment: "",
+  address: {
+    house_number: "",
+    road: "",
+    suburb: "",
+    neighbourhood: "",
+    hamlet: "",
+  },
+};
+export function formReducer(state: FormState, action: FormAction) {
+  switch (action.type) {
+    case "CHANGE_FIELD":
+      return {
+        ...state,
+        //action.payload.field is equal to name of the imput, example: e.target.name = plate
+        [action.payload.field]: action.payload.value,
+      };
+    case "ADD_OFFENCE":
+      return {
+        ...state,
+        offenses: [...state.offenses, action.payload.value],
+      };
+    case "DELETE_OFFENCE":
+      return {
+        ...state,
+        offenses: state.offenses.filter(
+          (offence: string) => offence !== action.payload.value
+        ),
+      };
+    case "CHANGE_ADDRESS":
+      return {
+        ...state,
+      };
+    default:
+      throw new Error();
+  }
+}
diff --git a/src/http.ts b/src/http.ts
new file mode 100644
index 0000000..3aa852a
--- /dev/null
+++ b/src/http.ts
@@ -0,0 +1,18 @@
+import request from "request";
+
+export async function getJSON(uri: string): Promise<Object> {
+	return new Promise(function (resolve, reject) {
+		let data = "";
+		const reply = request({
+			uri,
+			headers: {
+				"User-Agent": "Poznanski Parkingowy Patrol - telegram bot",
+			},
+		});
+		reply.on("data", (chunk) => {
+			data += chunk;
+		});
+		reply.on("error", reject);
+		reply.on("end", () => resolve(JSON.parse(data)));
+	});
+}
diff --git a/src/location.ts b/src/location.ts
new file mode 100644
index 0000000..2660907
--- /dev/null
+++ b/src/location.ts
@@ -0,0 +1,22 @@
+import { getJSON } from "./http";
+
+export type Location = {
+  lat: number;
+  lon: number;
+};
+
+export type Address = {
+  house_number: string;
+  road: string;
+  suburb: string;
+  neighbourhood: string;
+  hamlet: string;
+};
+
+export async function getAddress(location: Location): Promise<Address> {
+  const nominatim_url = `https://nominatim.openstreetmap.org/reverse?lat=${location.lat}&lon=${location.lon}&format=jsonv2`;
+  const nominatim_data = (await getJSON(nominatim_url)) as {
+    address: Address;
+  };
+  return nominatim_data.address;
+}
diff --git a/src/styles/app.scss b/src/styles/app.scss
index ac69de9..8a273b6 100644
--- a/src/styles/app.scss
+++ b/src/styles/app.scss
@@ -43,23 +43,35 @@
   width: 100%;
   height: 600px;
 }
+
 .input {
-  width: 80%;
+  width: 100%;
   height: 30px;
   margin-bottom: 15px;
   margin-top: 5px;
   display: block;
   box-sizing: border-box;
 }
-.input--textarea {
+.textarea {
+  width: 100%;
   height: 350px;
+  margin-bottom: 15px;
+  margin-top: 5px;
+  display: block;
+  box-sizing: border-box;
   resize: none;
   font-size: 1.2em;
   padding: 3px 8px;
 }
+.textarea--small {
+  height: 150px;
+}
 .label {
   width: 100%;
 }
+.container__section__form__offenses {
+  margin-bottom: 15px;
+}
 //to change name
 .img {
   width: 100%;
@@ -70,6 +82,20 @@
   height: 100%;
   border: 3px solid seagreen;
 }
+.chceckbox {
+  appearance: none;
+  vertical-align: middle;
+  font-size: inherit;
+  cursor: pointer;
+  width: 1.5em;
+  height: 1.5em;
+  background: white;
+  border: 0.1em solid #000000;
+  position: relative;
+}
+input[type="checkbox"]:checked {
+  background: #000000;
+}
 /*breakpoint for mobile*/
 @media (max-width: 1200px) {
   body {