diff --git a/src/components/Header.js b/src/components/Header.js index 7f62d8c989c88a214be3e144efdef59e95558588..c35d7b121e35d99841665bad9871345ea3453c28 100644 --- a/src/components/Header.js +++ b/src/components/Header.js @@ -1,81 +1,105 @@ -import React from "react"; -import { NavLink } from "react-router-dom"; +import React, { Component } from 'react'; +import { NavLink, Link } from 'react-router-dom'; import { Menu, Container, Button, Segment, Visibility, - Image -} from "semantic-ui-react"; -import { Component } from "react"; -import KSZKlogo from "./images/kszk_logo.svg"; + Image, +} from 'semantic-ui-react'; +import { connect } from 'react-redux'; +import { getUserData } from '../actions'; +import KSZKlogo from './images/kszk_logo.svg'; -const FixedMenu = () => ( - <Menu fixed="top" size="large" pointing> +const FixedMenu = ({ user }) => ( + <Menu fixed='top' size='large' pointing> <Container> - <Menu.Item as={NavLink} to="/home"> + <Menu.Item as={NavLink} to='/home'> FĹoldal </Menu.Item> - <Menu.Item as={NavLink} to="/circles"> + <Menu.Item as={NavLink} to='/circles'> KĂśreink </Menu.Item> - <Menu.Item as={NavLink} to="/trainers"> + <Menu.Item as={NavLink} to='/trainers'> KĂŠpzĹk </Menu.Item> - <Menu.Item as={NavLink} to="/schedule"> + <Menu.Item as={NavLink} to='/schedule'> Ătemterv </Menu.Item> - <Menu.Menu position="right"> - <Menu.Item className="item"> - <Button href="/api/v1/login/authsch/">BejelentkezĂŠs</Button> + <Menu.Menu position='right'> + <Menu.Item className='item'> + { + user.id ? + <Button as={Link} to='/profile'>Profilom</Button> + : + <Button href='/api/v1/login/authsch/'>BejelentkezĂŠs</Button> + } </Menu.Item> </Menu.Menu> </Container> </Menu> ); -export default class Header extends Component { - state = {}; +class Header extends Component { + constructor(props) { + super(props); + this.state = { + visible: false, + }; + } + componentWillMount() { + this.props.getUserData(); + } - hideFixedMenu = () => this.setState({ visible: false }); - showFixedMenu = () => this.setState({ visible: true }); + hideFixedMenu() { + this.setState({ visible: false }); + } + + showFixedMenu() { + this.setState({ visible: true }); + } render() { const { visible } = this.state; return ( <div> - {visible ? <FixedMenu /> : null} + {visible ? <FixedMenu user={this.props.user} /> : null} <Visibility - onBottomPassed={this.showFixedMenu} - onBottomVisible={this.hideFixedMenu} + onBottomPassed={() => this.showFixedMenu()} + onBottomVisible={() => this.hideFixedMenu()} once={false} > - <Segment inverted textAlign="center" vertical> + <Segment inverted textAlign='center' vertical> <Container> - <Menu inverted secondary size="large"> - <Menu.Item as={NavLink} to="/home"> + <Menu inverted secondary size='large'> + <Menu.Item as={NavLink} to='/home'> <Image - size="mini" + size='mini' src={KSZKlogo} - style={{ marginRight: "1.5em" }} + style={{ marginRight: '1.5em' }} /> FĹoldal </Menu.Item> - <Menu.Item as={NavLink} to="/circles"> + <Menu.Item as={NavLink} to='/circles'> KĂśreink </Menu.Item> - <Menu.Item as={NavLink} to="/trainers"> + <Menu.Item as={NavLink} to='/trainers'> KĂŠpzĹk </Menu.Item> - <Menu.Item as={NavLink} to="/schedule"> + <Menu.Item as={NavLink} to='/schedule'> Ătemterv </Menu.Item> - <Menu.Item position="right"> - <Button as="a" href="/api/v1/login/authsch/" inverted> - BejelentkezĂŠs - </Button> + <Menu.Item position='right'> + { + this.props.user.id ? + <Button as={Link} to='/profile'>Profil</Button> + : + <Button as='a' href='/api/v1/login/authsch/' inverted> + BejelentkezĂŠs + </Button> + } </Menu.Item> </Menu> </Container> @@ -85,3 +109,9 @@ export default class Header extends Component { ); } } + +const mapStateToProps = ({ user }) => ({ + user, +}); + +export default connect(mapStateToProps, { getUserData })(Header); diff --git a/src/components/pages/Home.js b/src/components/pages/Home.js index 304e3325da9e5c5b5a3449379dac5442a8fdbf51..95d92e637ef557520324bd713c3895cf33a26739 100644 --- a/src/components/pages/Home.js +++ b/src/components/pages/Home.js @@ -8,6 +8,7 @@ import { Image, Divider, } from 'semantic-ui-react'; +import { connect } from 'react-redux'; import Slider from 'react-slick'; import './Home.css'; import KSZKbiglogo from '../images/kszk_big_logo.png'; @@ -33,7 +34,7 @@ const range = (count) => { return newArray; }; -export default class Home extends Component { +class Home extends Component { render() { return ( <div> @@ -100,19 +101,36 @@ export default class Home extends Component { }} /> <Container> - <Button - href='/api/v1/login/authsch/' - primary - size='huge' - style={{ - fontSize: '2em', - marginTop: '1em', - marginBottom: '1em', - }} - > - JelentkezĂŠs - <Icon name='right arrow' /> - </Button> + { + this.props.user.id ? + <Button + href='/profile' + primary + size='huge' + style={{ + fontSize: '2em', + marginTop: '1em', + marginBottom: '1em', + }} + > + Profilom + <Icon name='right arrow' /> + </Button> + : + <Button + href='/api/v1/login/authsch/' + primary + size='huge' + style={{ + fontSize: '2em', + marginTop: '1em', + marginBottom: '1em', + }} + > + BejelentkezĂŠs + <Icon name='right arrow' /> + </Button> + } </Container> </Segment> </div> @@ -168,3 +186,9 @@ export default class Home extends Component { ); } } + +const mapStateToProps = ({ user }) => ({ + user, +}); + +export default connect(mapStateToProps, {})(Home);