From 26c87b92d33ddcf4a08cf1564defa6bf1dc825c3 Mon Sep 17 00:00:00 2001
From: Joey Coscarelli <38106822+malfecient@users.noreply.github.com>
Date: Wed, 3 Oct 2018 23:55:29 -0400
Subject: [PATCH 1/4] Sightings component - FIXME
---
package-lock.json | 13 ++++--
src/components/ViewSightings.js | 80 +++++++++++++++++++++++++++++++++
src/pages/Sighting.js | 3 +-
3 files changed, 91 insertions(+), 5 deletions(-)
create mode 100644 src/components/ViewSightings.js
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/components/ViewSightings.js b/src/components/ViewSightings.js
new file mode 100644
index 0000000..46da41a
--- /dev/null
+++ b/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;
\ No newline at end of file
diff --git a/src/pages/Sighting.js b/src/pages/Sighting.js
index d6d8594..9d035b9 100644
--- a/src/pages/Sighting.js
+++ b/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 (
- Sightings
+
);
}
From 8c69f5351aa89b431da8550e8fbf2c50997479c5 Mon Sep 17 00:00:00 2001
From: malfecient
Date: Sun, 7 Oct 2018 23:14:57 -0400
Subject: [PATCH 2/4] Created a component for pulling in a single sighting.
---
src/components/ViewSightings.js | 261 +++++++++++++++++++++++++-------
1 file changed, 204 insertions(+), 57 deletions(-)
diff --git a/src/components/ViewSightings.js b/src/components/ViewSightings.js
index 46da41a..4e62ace 100644
--- a/src/components/ViewSightings.js
+++ b/src/components/ViewSightings.js
@@ -1,80 +1,227 @@
-import React from 'react';
+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';
-class ViewSightings extends React.Component {
+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,
+ },
+ });
- /*TODO:
- * Constructor in case functions
- * need to be state bound
- */
+ /**
+ * 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.state = {
- type:[],
- confidence: [],
- date: [],
- time: [],
- desc: [],
- items: []
- };
- this.handleChange = this.handleChange.bind(this);
-// this.handleSubmit = this.handleSubmit.bind(this);
+ this.handleSubmit = this.handleSubmit.bind(this);
}
- handleChange(e) {
+ 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 in form
+ * components.
+ */
+ handleChange = name => event => {
this.setState({
- [e.target.name]: e.target.value
+ [name]: event.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
- });
- }
+ /**
+ * Handles submit on search.
+ */
+ handleSubmit(e){
+ e.preventDefault();
+ const itemSighting = firebase.database().ref("sightings/" + this.state.id);
+ itemSighting.once("value").then((snapshot) => {
+ let data = snapshot.val();
this.setState({
- items: newState
+ date: data.date,
+ time: data.time,
+ type: getType(data.type),
+ confidence: getConfidence(data.confidence),
+ desc: data.desc,
+ lat: data.lat,
+ lng: data.lng
});
});
-
- }
- render(){
+ };
+ render(){
+ const { classes } = this.props;
return (
- console.log("hello"),
- null
- );
+ /**
+ * The below houses the search
+ * and submit button along with
+ * the sighting information
+ * it pulls.
+ */
+
+
+
+
+
+
+ Sighting
+
+
+ Type: {this.state.type} {
}
+ Confidence: {this.state.confidence} {
}
+ Date: {this.state.date} {
}
+ Time: {this.state.time} {
}
+ Latitude: {this.state.lat} {
}
+ Longitude: {this.state.lng} {
}
+ Description: {this.state.desc}
+
+
+
+
+
+ )
}
}
-export default ViewSightings;
\ No newline at end of file
+ViewSightings.propTypes = {
+ classes: PropTypes.object.isRequired,
+ };
+
+export default withStyles(styles)(ViewSightings);
\ No newline at end of file
From 74cd0ec307b010f83c75c075353ba5913b67ea6f Mon Sep 17 00:00:00 2001
From: wildscotsmen
Date: Mon, 8 Oct 2018 00:30:06 -0400
Subject: [PATCH 3/4] Updated comment to reflect its component.
---
src/components/ViewSightings.js | 3 +--
1 file changed, 1 insertion(+), 2 deletions(-)
diff --git a/src/components/ViewSightings.js b/src/components/ViewSightings.js
index 4e62ace..5e0482c 100644
--- a/src/components/ViewSightings.js
+++ b/src/components/ViewSightings.js
@@ -139,8 +139,7 @@ class ViewSightings extends React.Component {
/**
- * Handles state change in form
- * components.
+ * Handles state change.
*/
handleChange = name => event => {
this.setState({
From e792bb3483befe133485a1b82c5c4ac22cf23a59 Mon Sep 17 00:00:00 2001
From: wildscotsmen
Date: Mon, 8 Oct 2018 00:47:24 -0400
Subject: [PATCH 4/4] Made sure that we don't try to fetch IDs that aren't in
the database.
---
src/components/ViewSightings.js | 8 +++++++-
1 file changed, 7 insertions(+), 1 deletion(-)
diff --git a/src/components/ViewSightings.js b/src/components/ViewSightings.js
index 5e0482c..822cf8e 100644
--- a/src/components/ViewSightings.js
+++ b/src/components/ViewSightings.js
@@ -121,7 +121,7 @@ const styles = theme => ({
class ViewSightings extends React.Component {
constructor(props){
- super(props);
+ super(props);
this.handleSubmit = this.handleSubmit.bind(this);
}
@@ -154,7 +154,13 @@ class ViewSightings extends React.Component {
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,