created contact page and component

package-lock.json

@@ -5651,7 +5651,7 @@
         },
         "core-js": {
           "version": "2.5.5",
-          "resolved": "http://registry.npmjs.org/core-js/-/core-js-2.5.5.tgz",
+          "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.5.5.tgz",
           "integrity": "sha1-sU3ek2xkDAV5prUMq8wTLdYSfjs="
         },
         "firebase": {

src/components/ContactForm.js

@@ -0,0 +1,57 @@
+import React, { Component } from 'react';
+
+const encode = (data) => {
+  return Object.keys(data)
+      .map(key => encodeURIComponent(key) + "=" + encodeURIComponent(data[key]))
+      .join("&");
+}
+
+class ContactForm extends Component {
+    constructor(props) {
+      super(props);
+      this.state = { name: "", email: "", message: "" };
+    }
+
+
+    handleSubmit = e => {
+      fetch("/", {
+        method: "POST",
+        headers: { "Content-Type": "application/x-www-form-urlencoded" },
+        body: encode({ "form-name": "contact", ...this.state })
+      })
+        .then(() => alert("Success!"))
+        .catch(error => alert(error));
+
+      e.preventDefault();
+    };
+
+    handleChange = e => this.setState({ [e.target.name]: e.target.value });
+
+    render() {
+      const { name, email, message } = this.state;
+      return (
+        <form onSubmit={this.handleSubmit}>
+          <p>
+            <label>
+              Your Name: <input type="text" name="name" value={name} onChange={this.handleChange} />
+            </label>
+          </p>
+          <p>
+            <label>
+              Your Email: <input type="email" name="email" value={email} onChange={this.handleChange} />
+            </label>
+          </p>
+          <p>
+            <label>
+              Message: <textarea name="message" value={message} onChange={this.handleChange} />
+            </label>
+          </p>
+          <p>
+            <button type="submit">Send</button>
+          </p>
+        </form>
+      );
+    }
+  }
+
+  export default ContactForm;

src/components/Main.js

@@ -18,6 +18,7 @@ import AssignmentIcon from '@material-ui/icons/Assignment';
 import MapIcon from '@material-ui/icons/Map';
 import InfoIcon from '@material-ui/icons/Info';
 import ListIcon from '@material-ui/icons/List';
+import ContactIcon from '@material-ui/icons/MailOutline';
 import SlideshowIcon from '@material-ui/icons/Slideshow';
 import Home from '../pages/Home';
 import ViewMap from '../pages/ViewMap';
@@ -25,6 +26,7 @@ import Info from '../pages/Info';
 import Quiz from '../pages/QuizPage';
 import SightingList from '../pages/SightingList';
 import Report from '../pages/Report';
+import Contact from '../pages/ContactPage';
 import CssBaseline from '@material-ui/core/CssBaseline';
 import ExpandLess from '@material-ui/icons/ExpandLess';
 import ExpandMore from '@material-ui/icons/ExpandMore';
@@ -116,6 +118,10 @@ class ResponsiveDrawer extends React.Component {
                         <ListItemIcon><InfoIcon /></ListItemIcon>
                         <ListItemText primary='About' />
                     </ListItem>
+                    <ListItem button key='Contact' onClick={() => this.nav('Contact')}>
+                        <ListItemIcon><ContactIcon /></ListItemIcon>
+                        <ListItemText primary='Contact' />
+                    </ListItem>
                     <ListItem button onClick={this.handleClick}>
                         <ListItemIcon>
                             <SlideshowIcon />
@@ -196,6 +202,7 @@ class ResponsiveDrawer extends React.Component {
                     {this.state.key === 'Map' && <ViewMap />}
                     {this.state.key === 'List' && <SightingList />}
                     {this.state.key === 'About' && <Info />}
+                    {this.state.key === 'Contact' && <Contact />}
                     {this.state.key === 'Easy-Quiz' && <Quiz difficulty='Easy'/>}
                     {this.state.key === 'Medium-Quiz' && <Quiz difficulty='Medium'/>}
                     {this.state.key === 'Hard-Quiz' && <Quiz difficulty='Hard'/>}

src/pages/ContactPage.js

@@ -0,0 +1,16 @@
+import React, { Component } from 'react';
+import ContactForm from '../components/ContactForm';
+
+class ContactPage extends Component {
+    componentDidMount() {
+        document.title = 'Marten Tracker | Contact';
+    }
+
+    render() {
+        return (
+            <ContactForm/>
+        );
+    }
+}
+
+    export default ContactPage;