From 37f53ecf85ef4e0264f4c7973462d02ca904ad66 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tam=C3=A1s=20Szab=C3=B3?= <tamas@szaboo.com>
Date: Sat, 3 Feb 2018 20:38:46 +0100
Subject: [PATCH] pages shows profile if user is logged in
---
src/components/Header.js | 98 +++++++++++++++++++++++-------------
src/components/pages/Home.js | 52 +++++++++++++------
2 files changed, 102 insertions(+), 48 deletions(-)
diff --git a/src/components/Header.js b/src/components/Header.js
index 7f62d8c..c35d7b1 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 304e332..95d92e6 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);
--
GitLab