map renders markers on click, sends lat and lng to firebase, yeet

package-lock.json

@@ -4294,7 +4294,8 @@
         },
         "ansi-regex": {
           "version": "2.1.1",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         },
         "aproba": {
           "version": "1.2.0",
@@ -4659,7 +4660,8 @@
         },
         "safe-buffer": {
           "version": "5.1.1",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         },
         "safer-buffer": {
           "version": "2.1.2",
@@ -4707,6 +4709,7 @@
         "strip-ansi": {
           "version": "3.0.1",
           "bundled": true,
+          "optional": true,
           "requires": {
             "ansi-regex": "^2.0.0"
           }
@@ -4745,11 +4748,13 @@
         },
         "wrappy": {
           "version": "1.0.2",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         },
         "yallist": {
           "version": "3.0.2",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         }
       }
     },

src/App.css

@@ -4,4 +4,5 @@ body {
 
 .google-map-container > div {
     height: 92% !important;
+    width: 50% !important;
 }

src/components/ReportForm.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {Fragment} from 'react';
 import PropTypes from 'prop-types';
 import Grid from '@material-ui/core/Grid';
 import { withStyles } from '@material-ui/core/styles';
@@ -6,6 +6,7 @@ import MenuItem from '@material-ui/core/MenuItem';
 import TextField from '@material-ui/core/TextField';
 import Button from '@material-ui/core/Button';
 import firebase from '../firebase.js';
+import MapContainer from '../pages/Map';
 
 /**
  * Styles that the different
@@ -138,7 +139,9 @@ class ReportForm extends React.Component {
     time: '00:00',
     type: 'visual',
     confidence: '1',
-    desc: ''
+    desc: '',
+    lat: '',
+    lng: ''
   };
 
   /**
@@ -151,6 +154,20 @@ class ReportForm extends React.Component {
     });
   };
 
+  /*
+  * Get the coordinates 
+  * 
+  */
+ getCoordinates = (lat,lng) => {
+    let latitude = lat;
+    let longitude = lng;
+
+    this.setState({
+        lat: latitude,
+        lng: longitude
+    });
+  }
+
   /**
    * Event listener for form.
    * When the form is submitted,
@@ -165,7 +182,9 @@ class ReportForm extends React.Component {
       confidence: this.state.confidence,
       date: this.state.date,
       time: this.state.time,
-      desc: this.state.desc
+      desc: this.state.desc,
+      lat: this.state.lat,
+      lng: this.state.lng
     }
     sightingsRef.push(sighting);
     this.setState({
@@ -173,7 +192,9 @@ class ReportForm extends React.Component {
       time: '00:00',
       type: 'visual',
       confidence: '1',
-      desc: ''
+      desc: '',
+      lat: '',
+      lng: ''
     });
   };
   
@@ -188,9 +209,12 @@ class ReportForm extends React.Component {
      * The actual form.
      */
     return (
+        <Fragment>
             <form className={classes.container} autoComplete="off" onSubmit={this.handleSubmit}>
+                <Grid container>
+                    <Grid item xs={6}>
                         <Grid container spacing={8}>
-                <Grid item xs={12} xl={2}>
+                            <Grid item xs={12}>
                                 <TextField
                                 id="select-sighting-type"
                                 select
@@ -215,7 +239,7 @@ class ReportForm extends React.Component {
                                 </TextField>
                             </Grid>
 
-                <Grid item xs={12} xl={2}>
+                            <Grid item xs={12}>
                                 <TextField
                                 id="select-confidence"
                                 select
@@ -299,7 +323,13 @@ class ReportForm extends React.Component {
                                 </Button>
                             </Grid>
                     </Grid>
+                        </Grid>
+                    <Grid item xs={6}>
+                        <MapContainer onClick={this.getCoordinates}/>
+                    </Grid>
+                </Grid>
             </form>
+        </Fragment>
     );
   }  
 }

src/pages/Map.js

@@ -63,12 +63,17 @@ export class MapContainer extends Component {
             });
         }
 
+        this.setState({
+            markerLatLng: {
+                lat: e.latLng.lat(),
+                lng: e.latLng.lng()
+            }
+        })
+
         let lat = e.latLng.lat();
         let lng =  e.latLng.lng();
-        console.log(`
-            latitude: ${lat}
-            longitude: ${lng}
-        `);
+
+        this.props.onClick(lat,lng);
     }
 
     // Set the state of the component to contain user coordinates and initial 
@@ -78,6 +83,10 @@ export class MapContainer extends Component {
             lat: 42.9634,
             lng: 85.6681
         },
+        markerLatLng: {
+            lat: 0,
+            lng: 0
+        },
         showingInfoWindow: false,
         activeMarker: {},
         selectedPlace: {}
@@ -99,11 +108,15 @@ export class MapContainer extends Component {
                     defaultZoom = { 15 }
                     onClick = { this.onMapClick } >
 
+                    <Marker 
+                        position = { this.state.markerLatLng }
+                    />
+
                     <Marker 
                         position = { this.state.myLatLng }
                         onClick = { this.onMarkerClick }
-                        title = { 'Marker One' }
-                        name = { 'blah blah blah' } 
+                        title = { 'You are here' }
+                        name = { '' } 
                         // FIXME: fix custom icon
                         // icon={{
                         //     url: "../images/marten-icon.png",
@@ -112,27 +125,6 @@ export class MapContainer extends Component {
                         // }}
                     />
 
-                    <Marker 
-                        position = {{ lat: 42.755011162859724, lng: -84.57320350394787 }}
-                        onClick = { this.onMarkerClick }
-                        title = { 'Marker Two' }
-                        name = { 'yay another marker' } 
-                    />
-
-                    <Marker 
-                        position = {{ lat: 43.548480610783194, lng: -84.28206580863537 }}
-                        onClick = { this.onMarkerClick }
-                        title = { 'Marker Three' }
-                        name = { 'three markers :D' } 
-                    />
-
-                    <Marker 
-                        position = {{ lat: 42.24878276258738, lng: -85.72127479301037 }}
-                        onClick = { this.onMarkerClick }
-                        title = { 'Marker Four' }
-                        name = { 'YEET' } 
-                    />
-
                     <InfoWindow
                         marker = { this.state.activeMarker }
                         visible = { this.state.showingInfoWindow } >

src/pages/Report.js

@@ -1,13 +1,10 @@
 import React, { Component } from 'react';
 import ReportForm from '../components/ReportForm';
-import Typography from '@material-ui/core/Typography';
 
 class Report extends Component {
     render() {
         return (
-            <Typography variant='display1' align='left' gutterBottom>
             <ReportForm/>
-            </Typography>
         );
     }
 }