Fakultas Ilmu Komputer UI

TopMenu.jsx 2.03 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
8
const defaultImage = 'http://semantic-ui.com/images/avatar/small/elliot.jpg';

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

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

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

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

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

35
36


37
  render() {
sirinbaisa's avatar
sirinbaisa committed
38
    const { activeItem } = this.state;
sirinbaisa's avatar
sirinbaisa committed
39

40
    return (
sirinbaisa's avatar
sirinbaisa committed
41
42
43
44
45
46
47
48
      <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
49
50
                as={Link} to="/profil"
                src={this.props.photo ? this.props.photo : defaultImage} avatar
sirinbaisa's avatar
sirinbaisa committed
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
                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>
68
69
70
    );
  }
}