Sightings component - FIXME

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/components/ViewSightings.js

@@ -0,0 +1,80 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Grid from '@material-ui/core/Grid';
+import firebase from '../firebase.js';
+
+class ViewSightings extends React.Component {
+
+    /*TODO:
+    * Constructor in case functions
+    * need to be state bound
+    */
+    constructor(props){
+        super(props);
+        this.state = {
+            type:[],
+            confidence: [],
+            date: [],
+            time: [],
+            desc: [],
+            items: []
+        };
+
+        this.handleChange = this.handleChange.bind(this);
+//        this.handleSubmit = this.handleSubmit.bind(this);
+    }
+
+    handleChange(e) {
+        this.setState({
+            [e.target.name]: e.target.value
+        });
+    }
+
+    //FIXME: Do I Need this function?
+    // handleSubmit(e){
+    //     e.preventDefault();
+    //     const itemsRef = firebase.database().ref('items').orderByKey();
+    //     const item = {
+    //         type: this.state.type,
+    //         confidence: this.state.confidence,
+    //         date: this.state.date,
+    //         time: this.state.time,
+    //         desc: this.state.desc
+    //     }
+    //     itemsRef.push(item);
+    // }
+
+    componentDidMount(){
+        const itemsRef = firebase.database().ref('items').orderByKey();
+        
+        itemsRef.on('value', (snapshot) => {
+            let items = snapshot.val();
+            let newState = [];
+            for (let item in items) {
+                newState.push({
+                    id: item,
+                    type: items[item].type,
+                    confidence: items[item].confidence,
+                    date: items[item].date,
+                    time: items[item].time,
+                    desc: items[item].desc
+                });
+            }
+            this.setState({
+                items: newState
+            });
+        });
+    
+    }
+    render(){
+
+        return (
+            console.log("hello"),
+            null
+        );
+
+    }
+
+}
+
+export default ViewSightings;

src/pages/Sighting.js

@@ -1,11 +1,12 @@
 import React, { Component } from 'react';
+import ViewSightings from '../components/ViewSightings.js';
 import Typography from '@material-ui/core/Typography';
 
 class Sighting extends Component {
     render() {
         return (
             <Typography variant='display1' align='center' gutterBottom>
-                Sightings
+                <ViewSightings/>
             </Typography>
         );
     }