Merge pull request #29 from alDuncanson/feature/single-sighting

feature/single-sighting

package-lock.json

@@ -6076,7 +6076,8 @@
         },
         "ansi-regex": {
           "version": "2.1.1",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         },
         "aproba": {
           "version": "1.2.0",
@@ -6428,7 +6429,8 @@
         },
         "safe-buffer": {
           "version": "5.1.1",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         },
         "safer-buffer": {
           "version": "2.1.2",
@@ -6475,6 +6477,7 @@
         "strip-ansi": {
           "version": "3.0.1",
           "bundled": true,
+          "optional": true,
           "requires": {
             "ansi-regex": "^2.0.0"
           }
@@ -6513,11 +6516,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,232 @@
+import React, {Fragment} from 'react';
+import PropTypes from 'prop-types';
+import Grid from '@material-ui/core/Grid';
+import TextField from '@material-ui/core/TextField'
+import Button from '@material-ui/core/Button'
+import Paper from '@material-ui/core/Paper'
+import { withStyles } from '@material-ui/core/styles';
+import Typography from '@material-ui/core/Typography';
+import firebase from '../firebase.js';
+
+const styles = theme => ({
+    root: {
+      ...theme.mixins.gutters(),
+      paddingTop: theme.spacing.unit * 2,
+      paddingBottom: theme.spacing.unit * 2,
+    },
+    container: {
+        display: 'flex',
+        flexWrap: 'wrap',
+      },
+    textField: {
+        marginLeft: theme.spacing.unit * 2,
+        marginRight: theme.spacing.unit * 2,
+        marginTop: theme.spacing.unit * 2,
+        flexBasis: 280,
+    },
+    button: {
+        marginLeft: theme.spacing.unit * 3,
+        marginRight: theme.spacing.unit * 3,
+        marginTop: theme.spacing.unit * 3,
+      },
+    paper: {
+        marginLeft: theme.spacing.unit * 2,
+        marginRight: theme.spacing.unit,
+        marginTop: theme.spacing.unit * 2,
+      },
+  });
+
+  /** 
+  * Types of sightings. Label is what is
+  * viewed in the application, value is
+  * what is stored in the database.
+  */
+  const sightingTypes = [
+    {
+      value: 'visual',
+      label: 'Visual',
+    },
+    {
+      value: 'roadkill',
+      label: 'Roadkill',
+    },
+    {
+      value: 'trapped',
+      label: 'Trapped',
+    },
+    {
+      value: 'viewed_tracks',
+      label: 'Viewed Tracks',
+    },
+    {
+      value: 'photo',
+      label: 'Photo',
+    },
+    {
+      value: 'other',
+      label: 'Other',
+    },
+  ];
+  
+  /** 
+   * Levels of confidence. Label is what is
+   * viewed in the application, value is
+   * what is stored in the database.
+  */
+  const confidenceLevels = [
+      {
+        value: '1',
+        label: '1 - Strongly unconfident',
+      },
+      {
+        value: '2',
+        label: '2 - Unconfident',
+      },
+      {
+        value: '3',
+        label: '3 - Somewhat confident',
+      },
+      {
+        value: '4',
+        label: '4 - Confident',
+      },
+      {
+        value: '5',
+        label: '5 - Very confident',
+      },
+    ];
+
+    /**
+     * Gets formatted confidence value.
+     */
+    function getConfidence(item) {
+        for (var i = 0; i < confidenceLevels.length; i++) {
+            if (confidenceLevels[i].value === item) {
+                return confidenceLevels[i].label;
+            }
+        }
+        
+    }
+
+    /**
+     * Gets formatted type value.
+     */
+    function getType(item) {
+        for (var i = 0; i < sightingTypes.length; i++) {
+            if (sightingTypes[i].value === item) {
+                return sightingTypes[i].label;
+            }
+        }
+    }
+
+class ViewSightings extends React.Component {
+    constructor(props){
+       super(props);
+
+       this.handleSubmit = this.handleSubmit.bind(this);
+    }
+
+    state = {
+        id: '',
+        type: 'N/A',
+        confidence: 'N/A',
+        date: 'N/A',
+        time: 'N/A',
+        desc: 'N/A',
+        lat: 'N/A',
+        lng: 'N/A'
+    };
+    
+
+    /**
+     * Handles state change.
+     */
+    handleChange = name => event => {
+        this.setState({
+        [name]: event.target.value,
+        });
+    };
+
+    /**
+     * Handles submit on search.
+     */
+    handleSubmit(e){
+        e.preventDefault();
+        const itemSighting = firebase.database().ref("sightings/" + this.state.id);
+        itemSighting.once("value").then((snapshot) => {
+            // Die if there's no data for that ID.
+            if (!snapshot.exists()) {
+                return;
+            }
+            
+            let data = snapshot.val();
+
+            this.setState({
+                date: data.date,
+                time: data.time,
+                type: getType(data.type),
+                confidence: getConfidence(data.confidence),
+                desc: data.desc,
+                lat: data.lat,
+                lng: data.lng
+            });
+        });
+    };
+
+    render(){
+        const { classes } = this.props;
+        return (
+            /**
+             * The below houses the search
+             * and submit button along with
+             * the sighting information
+             * it pulls.
+             */
+            <Fragment>
+                <Grid container justify="center">
+                    <form className={classes.container} onSubmit={this.handleSubmit}>
+                    <Grid item xs={6}>
+                        <TextField
+                        id="sighting-id"
+                        name="sighting-id"
+                        label="Input ID"
+                        value={this.state.id}
+                        margin="normal"
+                        onChange={this.handleChange('id')}
+                        />
+                    </Grid>
+                    <Grid item xs={6}>
+                        <Button variant="contained" type="submit" color="primary" className={classes.button}>
+                            Submit
+                        </Button>
+                    </Grid>
+                    </form>
+                    <Grid item xs={12}>
+                        <Paper elevation={2}>
+                            <Typography variant="headline" component="h3">
+                            Sighting
+                            </Typography>
+                            <Typography component="p">
+                            <b>Type:</b> {this.state.type} {<br/>}
+                            <b>Confidence:</b> {this.state.confidence} {<br/>}
+                            <b>Date:</b> {this.state.date} {<br/>}
+                            <b>Time:</b> {this.state.time} {<br/>}
+                            <b>Latitude:</b> {this.state.lat} {<br/>}
+                            <b>Longitude:</b> {this.state.lng} {<br/>}
+                            <b>Description:</b> {this.state.desc}
+                            </Typography>
+                        </Paper>
+                    </Grid>
+                </Grid>
+            </Fragment>
+        )
+
+    }
+
+}
+
+ViewSightings.propTypes = {
+    classes: PropTypes.object.isRequired,
+  };
+
+export default withStyles(styles)(ViewSightings);

src/pages/SightingList.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>
         );
     }