@@ -7,9 +7,8 @@ import Paper from 'material-ui/Paper';
import RaisedButton from 'material-ui/RaisedButton';
import Snackbar from 'material-ui/Snackbar';

import * as firebase from 'firebase';

import NewRequest from '../components/dashboard/NewRequest';
import { Stitch } from 'mongodb-stitch-browser-sdk';
import { Line } from 'react-chartjs-2';

import '../css/Dashboard.css';

@@ -18,30 +17,171 @@ class Dashboard extends Component {
super(props);

this.state = {
user: firebase.auth().currentUser,
user: Stitch.defaultAppClient.auth.currentUser,
};
}

componentWillMount() {
this.authListener = firebase.auth().onAuthStateChanged((user) => {
if (!user) {
this.props.history.push('/');
} else {
this.setState({ user });
}
});
}

componentWillUnmount() {
this.authListener = undefined;
if (!this.state.user) {
this.props.history.push('/');
}
}

render() {
const data = {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [
{
label: 'Sugar',
fill: false,
lineTension: 0.1,
backgroundColor: 'rgba(75,192,192,0.4)',
borderColor: 'rgba(75,192,192,1)',
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: 'rgba(75,192,192,1)',
pointBackgroundColor: '#fff',
pointBorderWidth: 1,
pointHoverRadius: 5,
pointHoverBackgroundColor: 'rgba(75,192,192,1)',
pointHoverBorderColor: 'rgba(220,220,220,1)',
pointHoverBorderWidth: 2,
pointRadius: 1,
pointHitRadius: 10,
data: [65, 59, 80, 81, 56, 55, 40],
},
{
label: 'Salt',
fill: false,
lineTension: 0.1,
backgroundColor: 'rgba(202, 219, 52,0.4)',
borderColor: 'rgba(202, 219, 52,1)',
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: 'rgba(202, 219, 52,1)',
pointBackgroundColor: '#fff',
pointBorderWidth: 1,
pointHoverRadius: 5,
pointHoverBackgroundColor: 'rgba(229, 255, 0,1)',
pointHoverBorderColor: 'rgba(202, 219, 52,1)',
pointHoverBorderWidth: 2,
pointRadius: 1,
pointHitRadius: 10,
data: [10, 87, 43, 32, 34, 42, 14],
},
{
label: 'Fat',
fill: false,
lineTension: 0.1,
backgroundColor: 'rgba(224, 42, 212,0.4)',
borderColor: 'rgba(224, 42, 212,1)',
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: 'rgba(224, 42, 212,1)',
pointBackgroundColor: '#fff',
pointBorderWidth: 1,
pointHoverRadius: 5,
pointHoverBackgroundColor: 'rgba(229, 255, 0,1)',
pointHoverBorderColor: 'rgba(224, 42, 212,1)',
pointHoverBorderWidth: 2,
pointRadius: 1,
pointHitRadius: 10,
data: [45, 34, 34, 53, 19, 23, 43],
},
],
};
return (
<div className="dashboard">
<div className="new-request">
<Paper className="new-request-container" zDepth={1}>
hi
<h1 style={{ textTransform: 'uppercase' }}>đź’© you ate</h1>
<Row>
<Col md={6}>
<h3 className="jesse" > This is the name of the food you just ate</h3>
<ul>
<li><b> onthunetohu</b>: netouhoentuheong</li>
<li><b> onthunetohu</b>: netouhoentuheong</li>
<li><b> onthunetohu</b>: netouhoentuheong</li>
<li><b> onthunetohu</b>: netouhoentuheong</li>
</ul>
</Col>
<Col md={6}>
<h3 className="jesse" > This is the name of the food you just ate</h3>
<li><b> onthunetohu</b>: netouhoentuheong</li>
<li><b> onthunetohu</b>: netouhoentuheong</li>
<li><b> onthunetohu</b>: netouhoentuheong</li>
<li><b> onthunetohu</b>: netouhoentuheong</li>
</Col>
</Row>
<hr />
<Row>
<Col md={6}>
<h3 className="jesse" > This is the name of the food you just ate</h3>
<ul>
<li><b> onthunetohu</b>: netouhoentuheong</li>
<li><b> onthunetohu</b>: netouhoentuheong</li>
<li><b> onthunetohu</b>: netouhoentuheong</li>
<li><b> onthunetohu</b>: netouhoentuheong</li>
</ul>
</Col>
<Col md={6}>
<h3 className="jesse" > This is the name of the food you just ate</h3>
<li><b> onthunetohu</b>: netouhoentuheong</li>
<li><b> onthunetohu</b>: netouhoentuheong</li>
<li><b> onthunetohu</b>: netouhoentuheong</li>
<li><b> onthunetohu</b>: netouhoentuheong</li>
</Col>
</Row>
<hr />
<h1 style={{ textTransform: 'uppercase' }}>đź’© you didn't eat</h1>
<Row>
<Col md={6}>
<h3 className="jesse" > This is the name of the food you just ate</h3>
<ul>
<li><b> onthunetohu</b>: netouhoentuheong</li>
<li><b> onthunetohu</b>: netouhoentuheong</li>
<li><b> onthunetohu</b>: netouhoentuheong</li>
<li><b> onthunetohu</b>: netouhoentuheong</li>
</ul>
</Col>
<Col md={6}>
<h3 className="jesse" > This is the name of the food you just ate</h3>
<li><b> onthunetohu</b>: netouhoentuheong</li>
<li><b> onthunetohu</b>: netouhoentuheong</li>
<li><b> onthunetohu</b>: netouhoentuheong</li>
<li><b> onthunetohu</b>: netouhoentuheong</li>
</Col>
</Row>
<hr />
<Row>
<Col md={6}>
<h3 className="jesse" > This is the name of the food you just ate</h3>
<ul>
<li><b> onthunetohu</b>: netouhoentuheong</li>
<li><b> onthunetohu</b>: netouhoentuheong</li>
<li><b> onthunetohu</b>: netouhoentuheong</li>
<li><b> onthunetohu</b>: netouhoentuheong</li>
</ul>
</Col>
<Col md={6}>
<h3 className="jesse" > This is the name of the food you just ate</h3>
<li><b> onthunetohu</b>: netouhoentuheong</li>
<li><b> onthunetohu</b>: netouhoentuheong</li>
<li><b> onthunetohu</b>: netouhoentuheong</li>
<li><b> onthunetohu</b>: netouhoentuheong</li>
</Col>
</Row>
<hr />

<h1 style={{ textTransform: 'uppercase' }}>đź’© you ate in graph format</h1>
<Line data={data} />

</Paper>
</div>
</div>

This file was deleted.

This file was deleted.

This file was deleted.

@@ -28,7 +28,26 @@
.new-request-input {
width: 100px;
}
ul {
list-style-type: circle;
}
.jesse {
font-size: 1.5em;
font-weight: normal;
text-transform: uppercase;
}
hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #ccc;
margin: 1em 0;
padding: 0;
}

.yikes input{
color: white!important;
}
.pprofile-pic-container {
display: flex;
flex-direction: column;