From d0d9820699b7a7c6e5153aa4ffeaea45e2720df8 Mon Sep 17 00:00:00 2001
From: Al Duncanson <alexjduncanson@gmail.com>
Date: Tue, 2 Oct 2018 14:51:26 -0400
Subject: [PATCH] map renders markers on click, sends lat and lng to firebase,
 yeet

---
 package-lock.json            |  13 +-
 src/App.css                  |   1 +
 src/components/ReportForm.js | 252 ++++++++++++++++++++---------------
 src/pages/Map.js             |  48 +++----
 src/pages/Report.js          |   3 -
 5 files changed, 171 insertions(+), 146 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index fd17bd1..87e56ca 100644
--- a/package-lock.json
+++ b/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
         }
       }
     },
diff --git a/src/App.css b/src/App.css
index 2d57aaa..2134e4d 100644
--- a/src/App.css
+++ b/src/App.css
@@ -4,4 +4,5 @@ body {
 
 .google-map-container > div {
     height: 92% !important;
+    width: 50% !important;
 }
\ No newline at end of file
diff --git a/src/components/ReportForm.js b/src/components/ReportForm.js
index 4dd046e..15e607f 100644
--- a/src/components/ReportForm.js
+++ b/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,118 +209,127 @@ class ReportForm extends React.Component {
      * The actual form.
      */
     return (
-      <form className={classes.container} autoComplete="off" onSubmit={this.handleSubmit}>
-        <Grid container spacing={8}>
-                <Grid item xs={12} xl={2}>
-                    <TextField
-                    id="select-sighting-type"
-                    select
-                    required
-                    name="sighting-type"
-                    label="Select"
-                    className={classes.textField}
-                    value={this.state.type}
-                    onChange={this.handleChange('type')}
-                    SelectProps={{
-                        MenuProps: {
-                        className: classes.menu,
-                        },
-                    }}
-                    helperText="Please select type of sighting"
-                    >
-                    {sightingTypes.map(option => (
-                        <MenuItem key={option.value} value={option.value}>
-                        {option.label}
-                        </MenuItem>
-                    ))}
-                    </TextField>
-                </Grid>
+        <Fragment>
+            <form className={classes.container} autoComplete="off" onSubmit={this.handleSubmit}>
+                <Grid container>
+                    <Grid item xs={6}>
+                        <Grid container spacing={8}>
+                            <Grid item xs={12}>
+                                <TextField
+                                id="select-sighting-type"
+                                select
+                                required
+                                name="sighting-type"
+                                label="Select"
+                                className={classes.textField}
+                                value={this.state.type}
+                                onChange={this.handleChange('type')}
+                                SelectProps={{
+                                    MenuProps: {
+                                    className: classes.menu,
+                                    },
+                                }}
+                                helperText="Please select type of sighting"
+                                >
+                                {sightingTypes.map(option => (
+                                    <MenuItem key={option.value} value={option.value}>
+                                    {option.label}
+                                    </MenuItem>
+                                ))}
+                                </TextField>
+                            </Grid>
 
-                <Grid item xs={12} xl={2}>
-                    <TextField
-                    id="select-confidence"
-                    select
-                    required
-                    name="sighting-confidence"
-                    label="Select"
-                    className={classes.textField}
-                    value={this.state.confidence}
-                    onChange={this.handleChange('confidence')}
-                    SelectProps={{
-                        MenuProps: {
-                        className: classes.menu,
-                        },
-                    }}
-                    helperText="Please select confidence in sighting"
-                    >
-                    {confidenceLevels.map(option => (
-                        <MenuItem key={option.value} value={option.value}>
-                        {option.label}
-                        </MenuItem>
-                    ))}
-                    </TextField>
-                </Grid>
+                            <Grid item xs={12}>
+                                <TextField
+                                id="select-confidence"
+                                select
+                                required
+                                name="sighting-confidence"
+                                label="Select"
+                                className={classes.textField}
+                                value={this.state.confidence}
+                                onChange={this.handleChange('confidence')}
+                                SelectProps={{
+                                    MenuProps: {
+                                    className: classes.menu,
+                                    },
+                                }}
+                                helperText="Please select confidence in sighting"
+                                >
+                                {confidenceLevels.map(option => (
+                                    <MenuItem key={option.value} value={option.value}>
+                                    {option.label}
+                                    </MenuItem>
+                                ))}
+                                </TextField>
+                            </Grid>
 
-                <Grid item xs={12}>
-                    <TextField
-                        id="sighting-date"
-                        required
-                        label="Sighting date"
-                        name="sighting-date"
-                        type="date"
-                        value={this.state.date}
-                        className={classes.textField}
-                        onChange={this.handleChange('date')}
-                        InputLabelProps={{
-                        shrink: true,
-                        }}
-                    />
-                </Grid>
+                            <Grid item xs={12}>
+                                <TextField
+                                    id="sighting-date"
+                                    required
+                                    label="Sighting date"
+                                    name="sighting-date"
+                                    type="date"
+                                    value={this.state.date}
+                                    className={classes.textField}
+                                    onChange={this.handleChange('date')}
+                                    InputLabelProps={{
+                                    shrink: true,
+                                    }}
+                                />
+                            </Grid>
 
-                <Grid item xs={12}>
-                    <TextField
-                        id="sighting-time"
-                        required
-                        label="Sighting time"
-                        name="sighting-time"
-                        type="time"
-                        margin="normal"
-                        value={this.state.time}
-                        className={classes.textField}
-                        onChange={this.handleChange('time')}
-                        InputLabelProps={{
-                        shrink: true,
-                        }}
-                    />
-                </Grid>
+                            <Grid item xs={12}>
+                                <TextField
+                                    id="sighting-time"
+                                    required
+                                    label="Sighting time"
+                                    name="sighting-time"
+                                    type="time"
+                                    margin="normal"
+                                    value={this.state.time}
+                                    className={classes.textField}
+                                    onChange={this.handleChange('time')}
+                                    InputLabelProps={{
+                                    shrink: true,
+                                    }}
+                                />
+                            </Grid>
 
-                <Grid item xs={12}>
-                    <TextField
-                    id="sighting-description"
-                    required
-                    label="Description"
-                    name="sighting-desc"
-                    multiline
-                    rows="5"
-                    placeholder="Describe the sighting to the best of your ability."
-                    value={this.state.desc}
-                    className={classes.textField}
-                    onChange={this.handleChange('desc')}
-                    margin="normal"
-                    variant="outlined"
-                    InputLabelProps={{
-                        shrink: true,
-                    }}
-                    />
+                            <Grid item xs={12}>
+                                <TextField
+                                id="sighting-description"
+                                required
+                                label="Description"
+                                name="sighting-desc"
+                                multiline
+                                rows="5"
+                                placeholder="Describe the sighting to the best of your ability."
+                                value={this.state.desc}
+                                className={classes.textField}
+                                onChange={this.handleChange('desc')}
+                                margin="normal"
+                                variant="outlined"
+                                InputLabelProps={{
+                                    shrink: true,
+                                }}
+                                />
+                            </Grid>
+                            
+                            <Grid item xs={12}>
+                                <Button variant="contained" type="submit" color="primary" className={classes.button}>
+                                    Submit
+                                </Button>
+                            </Grid>
+                    </Grid>
+                        </Grid>
+                    <Grid item xs={6}>
+                        <MapContainer onClick={this.getCoordinates}/>
+                    </Grid>
                 </Grid>
-                
-                <Grid item xs={12}>
-                    <Button variant="contained" type="submit" color="primary" className={classes.button}>
-                        Submit
-                    </Button>
-                </Grid>
-        </Grid>
-      </form>
+            </form>
+        </Fragment>
     );
   }  
 }
diff --git a/src/pages/Map.js b/src/pages/Map.js
index 58fbd06..806b961 100644
--- a/src/pages/Map.js
+++ b/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}
-        `);
+        let lng =  e.latLng.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 } >
diff --git a/src/pages/Report.js b/src/pages/Report.js
index 8a7909d..c9042d9 100644
--- a/src/pages/Report.js
+++ b/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>
         );
     }
 }