Merge branch 'master' of https://github.com/makoteq/eco-hack

backend/index.js

@@ -5,11 +5,14 @@ const port = process.env.PORT || 3000;
 const { MONGO_URI } = require("./config");
 const mongoose = require("mongoose");
 const events = require("./models/events");
-const bodyParser = require('body-parser')
+const bodyParser = require("body-parser");
 app.use(bodyParser.json()); // to support JSON-encoded bodies
-app.use(bodyParser.urlencoded({     // to support URL-encoded bodies
-  extended: true
-})); 
+app.use(
+    bodyParser.urlencoded({
+        // to support URL-encoded bodies
+        extended: true,
+    })
+);
 app.use(
     cors({
         origin: "*",
@@ -39,14 +42,13 @@ app.post("/api/createEvent", (req, res) => {
         time: req.body.time,
         created: { time: Date.now() },
         lat: req.body.lat,
-        lot:req.body.lat
-    }
+        lon: req.body.lon,
+    };
     events.create(data, (err) => {
         if (err) return res.status(400).json({ msg: err });
         // saved!
         res.status(200).json("ok");
     });
-
 });
 
 app.listen(port, () => {

src/pages/CreateEvent/index.js

@@ -1,37 +1,48 @@
-import { Field, Form, Formik } from "formik";
+import { useFormik } from "formik";
 import { useRef, useState } from "react";
 import { Stack } from "react-bootstrap";
 import { Map } from "../../components/Map";
 import { searchLocation } from "../../utils/map/searchLocation";
 import { fromLonLat, toLonLat } from "ol/proj";
 import { useHistory } from "react-router";
+import { API_CLIENT } from "../../constants";
 import styles from "./index.module.scss";
 
 export const CreateEvent = () => {
     const mapSearchBox = useRef(null);
+    const mapSearchBtn = useRef(null);
     let [center, setCenter] = useState(fromLonLat([18.667, 54.35]));
     const [zoom, setZoom] = useState(15);
     const history = useHistory();
+    const formik = useFormik({
+        initialValues: {
+            name: "",
+            type: 0,
+            time: "0",
+            date: "0",
+            description: "",
+        },
+        onSubmit: (data) => {
+            const cords = toLonLat([center[0], center[1]]);
+            const rqObj = {
+                name: data.name,
+                type: parseInt(data.type),
+                description: data.description,
+                lon: cords[0],
+                lat: cords[1],
+                time: new Date(`${data.date} ${data.time}`).getTime(),
+            };
+            API_CLIENT.createEvent(rqObj);
+            history.push("/");
+        },
+    });
 
     return (
         <div className={styles.formContainer}>
-            <Formik
-                initialValues={{
-                    type: 0,
-                    name: "",
-                    description: "",
-                    phoneNumber: "",
-                }}
-                onSubmit={(data) => {
-                    const cords = toLonLat([center[0], center[1]]);
-                    console.log({ ...data, lon: cords[0], lat: cords[1] });
-                    history.push("/");
-                }}
-            >
-                <Form>
+            <form onSubmit={formik.handleSubmit}>
                 <Stack gap={2}>
                     <h1 className={styles.title}>Tworzenie nowego wydarzenia</h1>
-                        <Field as="select" name="type">
+                    <select onChange={formik.handleChange} defaultValue={0} id="type">
                         <option hidden disabled value={0}>
                             Wybierz typ wydarzenia
                         </option>
@@ -39,14 +50,25 @@ export const CreateEvent = () => {
                         <option value={2}>Sadzenie drzew</option>
                         <option value={3}>Happening/meeting</option>
                         <option value={4}>Inne</option>
-                        </Field>
-                        <Field type="text" name="name" placeholder="Nazwa wydarzenia" />
-                        <Field type="text" name="description" placeholder="Opis wydarzenia" />
-                        <Field type="tel" name="phoneNumber" placeholder="Numer telefonu" />
+                    </select>
+                    <input onChange={formik.handleChange} type="text" id="name" placeholder="Nazwa wydarzenia" />
+                    <textarea onChange={formik.handleChange} type="textarea" id="description" placeholder="Opis wydarzenia" />
                     <Stack gap={2}>
                         <Stack direction="horizontal" gap={2}>
-                                <input placeholder="Wyszukaj adres..." style={{ width: "95%" }} type="text" ref={mapSearchBox} />
+                            <input
+                                onKeyDown={(e) => {
+                                    if (e.key === "Enter") {
+                                        e.preventDefault();
+                                        mapSearchBtn.current.click();
+                                    }
+                                }}
+                                placeholder="Wyszukaj adres..."
+                                style={{ width: "95%" }}
+                                type="text"
+                                ref={mapSearchBox}
+                            />
                             <button
+                                ref={mapSearchBtn}
                                 type="button"
                                 onClick={async () => {
                                     const value = mapSearchBox.current.value;
@@ -72,13 +94,12 @@ export const CreateEvent = () => {
                         ></Map>
                     </Stack>
                     <Stack direction="horizontal" gap={2}>
-                            <input type="date" style={{ width: "50%" }} />
-                            <input type="time" style={{ width: "50%" }} />
+                        <input onChange={formik.handleChange} type="date" id="date" style={{ width: "50%" }} />
+                        <input onChange={formik.handleChange} type="time" id="time" style={{ width: "50%" }} />
                     </Stack>
                     <button type="submit">Utwórz wydarzenie</button>
                 </Stack>
-                </Form>
-            </Formik>
+            </form>
         </div>
     );
 };

src/utils/APIClient.js

@@ -23,8 +23,6 @@ export class APIClient {
         if (typeof data.name !== "string") throw new TypeError("Name property must be a string");
         if (typeof data.type !== "number" || data.type === 0) throw new TypeError("Invalid event type");
         if (typeof data.time !== "number") throw new TypeError("Invalid date format");
-        if (typeof data.created !== "object") throw new TypeError("created property must be present");
-        if (typeof data.created.time !== "number") throw new TypeError("Invalid created date format");
         if (typeof data.lat !== "number") throw new TypeError("Invalid lattitude");
         if (typeof data.lon !== "number") throw new TypeError("Invalid longtitude");