added sighting list, and custom comment thread
This commit is contained in:
Al Duncanson
parent
16f6dde825
commit
4d0188d144
44
package-lock.json
generated
44
package-lock.json
generated
@ -3051,6 +3051,16 @@
|
||||
"sha.js": "^2.4.8"
|
||||
}
|
||||
},
|
||||
"create-react-class": {
|
||||
"version": "15.6.3",
|
||||
"resolved": "https://registry.npmjs.org/create-react-class/-/create-react-class-15.6.3.tgz",
|
||||
"integrity": "sha512-M+/3Q6E6DLO6Yx3OwrWjwHBnvfXXYA7W+dFjt/ZDBemHO1DDZhsalX/NUtnTYclN6GfnBDRh4qRHjcDHmlJBJg==",
|
||||
"requires": {
|
||||
"fbjs": "^0.8.9",
|
||||
"loose-envify": "^1.3.1",
|
||||
"object-assign": "^4.1.1"
|
||||
}
|
||||
},
|
||||
"cross-spawn": {
|
||||
"version": "5.1.0",
|
||||
"resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-5.1.0.tgz",
|
||||
@ -3567,6 +3577,40 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"disqus-react": {
|
||||
"version": "1.0.5",
|
||||
"resolved": "https://registry.npmjs.org/disqus-react/-/disqus-react-1.0.5.tgz",
|
||||
"integrity": "sha1-go6hhr0kHF4qbf66tRNeUqLZHRE=",
|
||||
"requires": {
|
||||
"react": "^15.6.1",
|
||||
"react-dom": "^15.6.1"
|
||||
},
|
||||
"dependencies": {
|
||||
"react": {
|
||||
"version": "15.6.2",
|
||||
"resolved": "https://registry.npmjs.org/react/-/react-15.6.2.tgz",
|
||||
"integrity": "sha1-26BDSrQ5z+gvEI8PURZjkIF5qnI=",
|
||||
"requires": {
|
||||
"create-react-class": "^15.6.0",
|
||||
"fbjs": "^0.8.9",
|
||||
"loose-envify": "^1.1.0",
|
||||
"object-assign": "^4.1.0",
|
||||
"prop-types": "^15.5.10"
|
||||
}
|
||||
},
|
||||
"react-dom": {
|
||||
"version": "15.6.2",
|
||||
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-15.6.2.tgz",
|
||||
"integrity": "sha1-Qc+t9pO3V/rycIRDodH9WgK+9zA=",
|
||||
"requires": {
|
||||
"fbjs": "^0.8.9",
|
||||
"loose-envify": "^1.1.0",
|
||||
"object-assign": "^4.1.0",
|
||||
"prop-types": "^15.5.10"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"dns-equal": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/dns-equal/-/dns-equal-1.0.0.tgz",
|
||||
|
||||
@ -5,6 +5,7 @@
|
||||
"dependencies": {
|
||||
"@material-ui/core": "^3.1.0",
|
||||
"@material-ui/icons": "^3.0.1",
|
||||
"disqus-react": "^1.0.5",
|
||||
"firebase": "^5.5.2",
|
||||
"firebase-admin": "^6.0.0",
|
||||
"flamelink": "^0.19.2",
|
||||
|
||||
27
src/components/SightingDetail.js
Normal file
27
src/components/SightingDetail.js
Normal file
@ -0,0 +1,27 @@
|
||||
import React, { Component, Fragment } from 'react';
|
||||
import Disqus from 'disqus-react';
|
||||
|
||||
class SightingDetail extends Component {
|
||||
|
||||
componentDidUpdate() {
|
||||
window.history.pushState("", "", this.props.detail.id);
|
||||
}
|
||||
|
||||
render() {
|
||||
const disqusShortname = 'https-marten-application-netlify-com';
|
||||
const disqusConfig = {
|
||||
url: `http://localhost:3000/${this.props.detail.id}`,
|
||||
identifier: this.props.detail.id,
|
||||
title: this.props.detail.id
|
||||
}
|
||||
|
||||
return (
|
||||
<Fragment>
|
||||
<p>{this.props.detail.type}</p>
|
||||
<Disqus.DiscussionEmbed shortname={disqusShortname} config={disqusConfig} />
|
||||
</Fragment>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default SightingDetail;
|
||||
@ -1,232 +1,97 @@
|
||||
import React, {Fragment} from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import React, { Component, Fragment } from 'react';
|
||||
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';
|
||||
import List from '@material-ui/core/List';
|
||||
import ListItem from '@material-ui/core/ListItem';
|
||||
import ListItemIcon from '@material-ui/core/ListItemIcon';
|
||||
import ListItemText from '@material-ui/core/ListItemText';
|
||||
import HomeIcon from '@material-ui/icons/Home';
|
||||
import SightingDetail from './SightingDetail';
|
||||
|
||||
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,
|
||||
},
|
||||
class ViewSightings extends Component {
|
||||
|
||||
componentDidMount() {
|
||||
const sightingsRef = firebase.database().ref('sightings');
|
||||
|
||||
sightingsRef.on('value', (snapshot) => {
|
||||
let sightings = snapshot.val();
|
||||
let newState = [];
|
||||
|
||||
for (let sighting in sightings) {
|
||||
newState.push({
|
||||
id: sighting,
|
||||
lat: sightings[sighting].lat,
|
||||
lng: sightings[sighting].lng,
|
||||
desc: sightings[sighting].desc,
|
||||
type: sightings[sighting].type,
|
||||
confidence: sightings[sighting].confidence,
|
||||
date: sightings[sighting].date,
|
||||
time: sightings[sighting].time
|
||||
});
|
||||
|
||||
/**
|
||||
* 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;
|
||||
}
|
||||
this.setState({
|
||||
sightings: newState
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* 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);
|
||||
getDetail = (id, lat, lng, desc, type, confidence, date, time) => {
|
||||
this.setState({
|
||||
selectedSighting: {
|
||||
id: id,
|
||||
lat: lat,
|
||||
lng: lng,
|
||||
desc: desc,
|
||||
type: type,
|
||||
confidence: confidence,
|
||||
date: date,
|
||||
time: time
|
||||
},
|
||||
clicked: true
|
||||
})
|
||||
}
|
||||
|
||||
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;
|
||||
sightings: [],
|
||||
selectedSighting: {
|
||||
id: null,
|
||||
lat: null,
|
||||
lng: null,
|
||||
desc: null,
|
||||
type: null,
|
||||
confidence: null,
|
||||
date: null,
|
||||
time: null
|
||||
},
|
||||
clicked: false
|
||||
}
|
||||
|
||||
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;
|
||||
render() {
|
||||
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 container>
|
||||
<Grid item xs={12} md={6}>
|
||||
<Fragment>
|
||||
<List>
|
||||
{
|
||||
this.state.sightings.map((sighting) => {
|
||||
return (
|
||||
<ListItem button key={ sighting.id } onClick={() => this.getDetail(sighting.id, sighting.lat, sighting.lng, sighting.desc, sighting.type, sighting.confidence, sighting.date, sighting.time)}>
|
||||
<ListItemIcon><HomeIcon/></ListItemIcon>
|
||||
<ListItemText primary={`Type: ${sighting.type}`}/>
|
||||
</ListItem>
|
||||
)
|
||||
})}
|
||||
</List>
|
||||
</Fragment>
|
||||
</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 item xs={12} md={6}>
|
||||
{this.state.clicked === true && <SightingDetail detail={ this.state.selectedSighting }/>}
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Fragment>
|
||||
)
|
||||
|
||||
);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
ViewSightings.propTypes = {
|
||||
classes: PropTypes.object.isRequired,
|
||||
};
|
||||
|
||||
export default withStyles(styles)(ViewSightings);
|
||||
export default ViewSightings;
|
||||
|
||||
@ -1,13 +1,10 @@
|
||||
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>
|
||||
<ViewSightings/>
|
||||
</Typography>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user