import React from 'react';
import { autobind } from 'core-decorators';
import { connect } from 'react-redux';
import { graphql, gql } from 'react-apollo';
import { withRouter, Link, Redirect } from 'react-router-dom';
import { Spinner, Button, Intent } from '@blueprintjs/core';
import { logout } from '../../../../actions/authActions';
import Title from '../../Title';

import '../../../scss/_dashboard.scss';


const mapStateToProps = (state, ownProps) => {
	return { 
		authenticated: state.auth.login.authenticated
	}
}

const QueryMe = gql`
query GetMe {
  getMe {
		firstname
		lastname
    username 
  }
}`;

const QueryMeOptions = {
	name: 'QueryMe',
	options: (props) => ({
		variables: { email: props.email }
	}),
	skip: (ownProps) => {
		return !ownProps.authenticated;
	}
}

@connect(mapStateToProps)
@graphql(QueryMe, QueryMeOptions)
@withRouter
@autobind
class Dashboard extends React.Component {
	logout() {
		this.props.dispatch(logout(new Date()));
		this.props.history.push('/');
	}

	render() {
		if (!this.props.authenticated) {
			return <Redirect to='/login'/>
		}
		else {
			let content = (
				<div className='dashboard loading'>
					<Spinner className='pt-large'/>
				</div>
			);

			if (!this.props.QueryMe.loading) {
				let { firstname } = this.props.QueryMe.getMe;

				content = (
					<div className='dashboard'>
						<h2>Hello, {firstname}!</h2>
						<p>
							Welcome to your dashboard.
							This area will be updated with more information as the event approaches,
							so watch this space!
							Be sure to remember your login details as you will need to login on the day of the event.
						</p>
						<p>
							If you haven't paid yet, please go <Link to='/pay'>here</Link> to see payment details.
						</p>
						<Button text='Log out' style={{marginTop: '2rem'}} intent={Intent.WARNING} onClick={this.logout}/>
					</div>
				);
			}
			
			return (
				<main id='dashboard'>
					<Title notAnimated/>
					{content}
				</main>
			);
		}
	}
}


export default Dashboard;

@@ -326,24 +326,79 @@
 thActions';%0A
+import ScrollAnimation from 'react-animate-on-scroll';%0A
 import Title
@@ -1992,23 +1992,92 @@
 itle
- notAnimated/
+/%3E%0A%09%09%09%09%09%3CScrollAnimation animateOnce animateIn='zoomIn' offset=%7B0%7D duration=%7B0.5%7D
 %3E%0A
+%09
 %09%09%09%09
@@ -2087,16 +2087,40 @@
 ontent%7D%0A
+%09%09%09%09%09%3C/ScrollAnimation%3E%0A
 %09%09%09%09%3C/ma

Add animation to dashboard