Fakultas Ilmu Komputer UI

TopMenu.jsx 1.9 KB
Newer Older
1
import React from 'react';
sirinbaisa's avatar
sirinbaisa committed
2
import { Menu, Image, Popup, Button, Card } from 'semantic-ui-react';
3
import { Link, browserHistory } from 'react-router';
4
import Server from '../lib/Server';
5
import Storage from '../lib/Storage';
6
7

export default class TopMenu extends React.Component {
sirinbaisa's avatar
sirinbaisa committed
8

9
  static propTypes = {
sirinbaisa's avatar
sirinbaisa committed
10
11
12
13
    // user: React.PropTypes.object.isRequired,
    name: React.PropTypes.string.isRequired,
    email: React.PropTypes.string.isRequired,
    photo: React.PropTypes.any.isRequired,
14
15
  };

16
17
18
  constructor(props) {
    super(props);
    /* istanbul ignore next */
sirinbaisa's avatar
sirinbaisa committed
19
    // console.log(this.props.user);
20
    this.state = { activeItem: 'home' };
21
22
    this.logout = this.logout.bind(this);
  }
sirinbaisa's avatar
sirinbaisa committed
23

24
25
  handleItemClick = (e, { name }) => this.setState({ activeItem: name });

sirinbaisa's avatar
sirinbaisa committed
26
  logout = () => {
27
28
29
30
31
    Server.get('/api-auth/logout/?next=/', true).then(() => {
      Storage.clear();
      browserHistory.push('/login');
    });
  };
32

33
  render() {
sirinbaisa's avatar
sirinbaisa committed
34
    const { activeItem } = this.state;
sirinbaisa's avatar
sirinbaisa committed
35

36
    return (
sirinbaisa's avatar
sirinbaisa committed
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
      <Menu color="blue" pointing secondary>
        <Image as="a" size="small" src="/assets/img/logo.png" href="/" />
        <Menu.Menu position="right">
          <Menu.Item as={Link} to="/home" name="home" active={activeItem === 'home'} onClick={this.handleItemClick} />
          <Menu.Item as={Link} to="/profil" name="profile" onClick={this.handleItemClick} />
          <Menu.Item>
            <Popup
              trigger={<Image
                as={Link} to="/profil" src={this.props.photo} avatar
                onClick={this.handleItemClick}
              />}
              flowing
              hoverable
            >

              <Card
                header={this.props.name}
                description={this.props.email}
              />
              <Button as={Link} onClick={this.logout} name="logout" color="blue" size="tiny">Logout</Button>

            </Popup>

          </Menu.Item>
        </Menu.Menu>
      </Menu>
63
64
65
    );
  }
}