import * as React from 'react' import { connect } from 'react-redux' import { Route } from 'react-router' import { push, RouterAction } from 'react-router-redux' import { Dispatch } from 'redux' import { RootState } from './../reducers' import Navbar from './Navbar' import LeftMenu from './LeftMenu' import Recipes from './Recipes' import Home from './Home' import NewRecipe from './NewRecipe' import Api, { User } from './../api' import { storeUser } from '../actions' interface Props { user: User | undefined, api: Api, storeUser: (user: User) => void, redirect: () => {} } class Dasboard extends React.Component<Props> { componentWillMount() { const token = localStorage.getItem('accessToken') if (token != null) { this.props.api.setToken(token) this.props.api.getUser('me').then(user => { this.props.storeUser(user) }) } else { this.props.redirect() } } render() { if (this.props.user == null) return (<div></div>) return ( <div className="main-container"> <Navbar /> <div className="wrapper"> <LeftMenu /> <div className="content-wrapper"> <Route exact path="/dashboard" component={Home} /> <Route exact path="/dashboard/recipes" component={Recipes} /> <Route exact path="/dashboard/recipes/add" component={NewRecipe} />   </div> </div> </div> ) } } export default connect( (state: RootState) => ({ user: state.app.user, api: state.app.api }), (dispatch: Dispatch<any>) => ({ storeUser: (user: User) => { dispatch(storeUser(user)) }, redirect: () => { dispatch(push('/dashboard/login')) } }) )(Dasboard)