diff --git a/package.json b/package.json index c7c5f72..7a7448a 100644 --- a/package.json +++ b/package.json @@ -4,6 +4,7 @@ "private": true, "dependencies": { "@material-ui/core": "^3.1.0", + "firebase": "^5.5.1", "react": "^16.5.1", "react-dom": "^16.5.1", "react-router": "^4.3.1", diff --git a/src/components/ReportForm.js b/src/components/ReportForm.js index 6fd3be1..4dd046e 100644 --- a/src/components/ReportForm.js +++ b/src/components/ReportForm.js @@ -5,6 +5,7 @@ import { withStyles } from '@material-ui/core/styles'; 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'; /** * Styles that the different @@ -116,9 +117,19 @@ const confidenceLevels = [ ]; /** - * The form compnent. + * The form component. */ class ReportForm extends React.Component { + /** + * Component contructor. Currently + * only used to bind event + * handlers. + */ + constructor() { + super(); + this.handleSubmit = this.handleSubmit.bind(this); + } + /** * State of form components. */ @@ -126,7 +137,8 @@ class ReportForm extends React.Component { date: formatDate(new Date()), time: '00:00', type: 'visual', - confidence: '1' + confidence: '1', + desc: '' }; /** @@ -139,6 +151,33 @@ class ReportForm extends React.Component { }); }; + /** + * Event listener for form. + * When the form is submitted, + * this function passes the + * data along to Firebase. + */ + handleSubmit(e) { + e.preventDefault(); + const sightingsRef = firebase.database().ref('sightings'); + const sighting = { + type: this.state.type, + confidence: this.state.confidence, + date: this.state.date, + time: this.state.time, + desc: this.state.desc + } + sightingsRef.push(sighting); + this.setState({ + date: formatDate(new Date()), + time: '00:00', + type: 'visual', + confidence: '1', + desc: '' + }); + }; + + /** * The render method for this component. */ @@ -149,7 +188,7 @@ class ReportForm extends React.Component { * The actual form. */ return ( -
+ ); - } + } } ReportForm.propTypes = { diff --git a/src/firebase.js b/src/firebase.js new file mode 100644 index 0000000..f26bb7a --- /dev/null +++ b/src/firebase.js @@ -0,0 +1,14 @@ +import firebase from 'firebase/app'; +import 'firebase/database'; + +const config = { + apiKey: "AIzaSyAYf9AbeYwLY892NRiQfn0AMtG9xIFAJbo", + authDomain: "marten-application.firebaseapp.com", + databaseURL: "https://marten-application.firebaseio.com", + projectId: "marten-application", + storageBucket: "marten-application.appspot.com", + messagingSenderId: "659856510832" +}; + +firebase.initializeApp(config); +export default firebase; \ No newline at end of file