add pin

src/api/constants/index.ts

@@ -9,6 +9,6 @@ export const Y_COORD = "y";
 export const GROUP = "group";
 export const USER_ID = "userId";
 export const LAT = "lat";
-export const LONG = "long";
+export const LNG = "lng";
 export const TITLE = "title";
 export const USERNAME = "username";

src/api/methods/pins.ts

@@ -13,7 +13,7 @@ export function createPin(pin: Pin) {
       .set({
         description: pin.description,
         lat: pin.lat,
-        long: pin.long,
+        lng: pin.lng,
         creator: pin.creator,
       });
   } catch (e) {

src/api/models/index.ts

@@ -6,7 +6,7 @@ import {
   TITLE,
   USER_ID,
   LAT,
-  LONG,
+  LNG,
   CREATOR,
 } from "../constants";
 
@@ -24,7 +24,7 @@ export type Pin = {
   [TITLE]: string;
   [DESCRIPTION]: string;
   [LAT]: number;
-  [LONG]: number;
+  [LNG]: number;
   [GROUP_NAME]: string;
   [CREATOR]: User;
 };

src/components/map/map.tsx

@@ -1,13 +1,18 @@
-import { useState, useCallback, memo } from "react";
+import { useState, useCallback, memo, useRef, useContext } from "react";
 import {
   GoogleMap,
   useJsApiLoader,
   MarkerClusterer,
   Marker,
 } from "@react-google-maps/api";
+import { Button, Form, Modal, TextArea } from "semantic-ui-react";
 import useGeolocation from "../../custom-hooks/use-geolocation";
 import PlaceholderWrapper from "../placeholder-wrapper";
 import styles from "./map.module.scss";
+import { createPin } from "../../api/methods/pins";
+import { AuthContext } from "../../context/AuthContext";
+import { User } from "../../api/models";
+import { GroupContext } from "../../context-provider/group-provider";
 
 const DEFAULT_CENTER: google.maps.LatLngLiteral = {
   lat: 1.2949,
@@ -35,10 +40,82 @@ function Map() {
     googleMapsApiKey: `${process.env.REACT_APP_GOOGLE_API_KEY}`,
   });
   const [map, setMap] = useState<google.maps.Map>();
+  const [isModalOpen, setModalOpen] = useState(false);
+  const [currLatLong, setCurrLatLong] = useState(DEFAULT_CENTER);
+
+  const inputRef = useRef<HTMLInputElement>();
+  const descRef = useRef<HTMLTextAreaElement>();
+  const { user } = useContext(AuthContext);
+  const { selectedGroup } = useContext(GroupContext);
 
   const onUnmount = useCallback(() => setMap(undefined), []);
 
+  const openModal = ({ latLng }: google.maps.MapMouseEvent) => {
+    if (latLng?.lat && latLng.lng) {
+      setCurrLatLong({ lat: latLng.lat(), lng: latLng.lng() });
+    } else {
+      alert("cannot get coordinates.");
+    }
+    setModalOpen(true);
+  };
+
+  const closeModal = () => {
+    setModalOpen(false);
+  };
+
+  const addPin = () => {
+    const newtitle = inputRef?.current?.value;
+    const desc = descRef?.current?.value;
+
+    if (newtitle && desc) {
+      const currentUser: User = {
+        userId: user?.user.uid ?? "",
+        name: user?.name ?? "",
+      };
+      const newPin = {
+        title: newtitle,
+        description: desc,
+        ...currLatLong,
+        creator: currentUser,
+        group_name: "",
+      };
+      createPin(newPin);
+      closeModal();
+    } else {
+      alert("Fields must be entered.");
+    }
+  };
+
   return (
+    <>
+      <Modal size="tiny" open={isModalOpen}>
+        <Modal.Header>
+          Adding a pin to {currLatLong.lat}, {currLatLong.lng}
+        </Modal.Header>
+        <Modal.Content>
+          <Form.Field>
+            <Form.Input
+              input={{ ref: inputRef }}
+              size="large"
+              placeholder="Title"
+            />
+          </Form.Field>
+          <Form.Field>
+            <Form.Input
+              input={{ ref: descRef }}
+              rows="3"
+              placeholder="Description ..."
+            />
+          </Form.Field>
+        </Modal.Content>
+        <Modal.Actions>
+          <Button onClick={closeModal}>Cancel</Button>
+          <Button positive type="submit" onClick={addPin}>
+            Start
+          </Button>
+        </Modal.Actions>
+      </Modal>
+
     <PlaceholderWrapper
       className={styles.placeholder}
       placeholder
@@ -49,31 +126,36 @@ function Map() {
         loadError?.message ?? "An error has occurred while loading the map"
       }
     >
-      <GoogleMap
-        mapContainerClassName={styles.map}
-        onLoad={setMap}
-        onUnmount={onUnmount}
-        zoom={DEFAULT_ZOOM}
-        center={
-          geolocation
-            ? { lat: geolocation.latitude, lng: geolocation.longitude }
-            : DEFAULT_CENTER
-        }
-      >
-        <MarkerClusterer options={MARKER_CLUSTERER_OPTIONS}>
-          {(clusterer) =>
-            locations.map((location, index) => (
-              <Marker
-                key={index}
-                position={location}
-                label={labels[index % labels.length]}
-                clusterer={clusterer}
-              />
-            ))
+        <GoogleMap
+          mapContainerClassName={styles.map}
+          onLoad={setMap}
+          onUnmount={onUnmount}
+          onClick={openModal}
+          zoom={DEFAULT_ZOOM}
+          center={
+            geolocation
+              ? { lat: geolocation.latitude, lng: geolocation.longitude }
+              : DEFAULT_CENTER
           }
-        </MarkerClusterer>
-      </GoogleMap>
-    </PlaceholderWrapper>
+        >
+          {selectedGroup && (
+            <MarkerClusterer options={MARKER_CLUSTERER_OPTIONS}>
+              {(clusterer) =>
+                Object.values(selectedGroup.pins).map(({ lat, lng }, index) => (
+                  <Marker
+                    key={index}
+                    position={{ lat, lng }}
+                    label={labels[index % labels.length]}
+                    clusterer={clusterer}
+                  />
+                ))
+              }
+            </MarkerClusterer>
+          )}
+          <Marker position={currLatLong} />
+        </GoogleMap>
+      </PlaceholderWrapper>
+    </>
   );
 }