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

backend/index.js

@@ -5,50 +5,52 @@ 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.json()); // to support JSON-encoded bodies
-app.use(bodyParser.urlencoded({     // to support URL-encoded bodies
-  extended: true
-})); 
 app.use(
-  cors({
+    bodyParser.urlencoded({
-    origin: "*",
+        // to support URL-encoded bodies
-  })
+        extended: true,
+    })
+);
+app.use(
+    cors({
+        origin: "*",
+    })
 );
 mongoose
-  .connect(MONGO_URI, {
+    .connect(MONGO_URI, {
-    useNewUrlParser: true,
+        useNewUrlParser: true,
-    useUnifiedTopology: true,
+        useUnifiedTopology: true,
-  })
+    })
-  .then(() => console.log("connected"))
+    .then(() => console.log("connected"))
-  .catch((err) => console.log(err));
+    .catch((err) => console.log(err));
 app.get("/api/getEvents", async (req, res) => {
-  try {
+    try {
-    const event = await events.find();
+        const event = await events.find();
-    if (!event) throw Error("something went wrong");
+        if (!event) throw Error("something went wrong");
-    console.log(event);
+        console.log(event);
-    res.status(200).json(event);
+        res.status(200).json(event);
-  } catch (err) {
+    } catch (err) {
-    res.status(400).json({ msg: err });
+        res.status(400).json({ msg: err });
-  }
+    }
 });
 app.post("/api/createEvent", (req, res) => {
     let data = {
-        name:req.body.name,
+        name: req.body.name,
-        type:req.body.type,
+        type: req.body.type,
-        time:req.body.time,
+        time: req.body.time,
-        created:{time:Date.now()},
+        created: { time: Date.now() },
-        lat:req.body.lat,
+        lat: req.body.lat,
-        lot:req.body.lat
+        lon: req.body.lon,
-    }
+    };
-  events.create(data, (err) => {
+    events.create(data, (err) => {
-    if (err) return res.status(400).json({ msg: err });
+        if (err) return res.status(400).json({ msg: err });
-    // saved!
+        // saved!
-    res.status(200).json("ok");
+        res.status(200).json("ok");
-  });
+    });
-
 });
 
 app.listen(port, () => {
-  console.log(`Example app listening at http://localhost:${port}`);
+    console.log(`Example app listening at http://localhost:${port}`);
 });

src/pages/CreateEvent/index.js

@@ -1,84 +1,105 @@
-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
+            <form onSubmit={formik.handleSubmit}>
-                initialValues={{
+                <Stack gap={2}>
-                    type: 0,
+                    <h1 className={styles.title}>Tworzenie nowego wydarzenia</h1>
-                    name: "",
+                    <select onChange={formik.handleChange} defaultValue={0} id="type">
-                    description: "",
+                        <option hidden disabled value={0}>
-                    phoneNumber: "",
+                            Wybierz typ wydarzenia
-                }}
+                        </option>
-                onSubmit={(data) => {
+                        <option value={1}>Sprzątanie świata</option>
-                    const cords = toLonLat([center[0], center[1]]);
+                        <option value={2}>Sadzenie drzew</option>
-                    console.log({ ...data, lon: cords[0], lat: cords[1] });
+                        <option value={3}>Happening/meeting</option>
-                    history.push("/");
+                        <option value={4}>Inne</option>
-                }}
+                    </select>
-            >
+                    <input onChange={formik.handleChange} type="text" id="name" placeholder="Nazwa wydarzenia" />
-                <Form>
+                    <textarea onChange={formik.handleChange} type="textarea" id="description" placeholder="Opis wydarzenia" />
                     <Stack gap={2}>
-                        <h1 className={styles.title}>Tworzenie nowego wydarzenia</h1>
-                        <Field as="select" name="type">
-                            <option hidden disabled value={0}>
-                                Wybierz typ wydarzenia
-                            </option>
-                            <option value={1}>Sprzątanie świata</option>
-                            <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" />
-                        <Stack gap={2}>
-                            <Stack direction="horizontal" gap={2}>
-                                <input placeholder="Wyszukaj adres..." style={{ width: "95%" }} type="text" ref={mapSearchBox} />
-                                <button
-                                    type="button"
-                                    onClick={async () => {
-                                        const value = mapSearchBox.current.value;
-                                        const results = await searchLocation(value);
-                                        if (results[0]) {
-                                            setCenter(fromLonLat([results[0].lon, results[0].lat]));
-                                            setZoom(18);
-                                        }
-                                    }}
-                                >
-                                    Szukaj
-                                </button>
-                            </Stack>
-                            <Map
-                                onCenterChange={(c) => {
-                                    center = c;
-                                }}
-                                showMarker={true}
-                                width="100%"
-                                height="500px"
-                                center={center}
-                                zoom={zoom}
-                            ></Map>
-                        </Stack>
                         <Stack direction="horizontal" gap={2}>
-                            <input type="date" style={{ width: "50%" }} />
+                            <input
-                            <input type="time" style={{ width: "50%" }} />
+                                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;
+                                    const results = await searchLocation(value);
+                                    if (results[0]) {
+                                        setCenter(fromLonLat([results[0].lon, results[0].lat]));
+                                        setZoom(18);
+                                    }
+                                }}
+                            >
+                                Szukaj
+                            </button>
                         </Stack>
-                        <button type="submit">Utwórz wydarzenie</button>
+                        <Map
+                            onCenterChange={(c) => {
+                                center = c;
+                            }}
+                            showMarker={true}
+                            width="100%"
+                            height="500px"
+                            center={center}
+                            zoom={zoom}
+                        ></Map>
                     </Stack>
-                </Form>
+                    <Stack direction="horizontal" gap={2}>
-            </Formik>
+                        <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>
         </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");