Fakultas Ilmu Komputer UI

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

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

11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
  static getInfo(user) {
    const adminRole = {
      name: 'admin',
      user: {
        email: '',
      },
      photo: null,
    };
    const role = user.role;
    if (role === 'student') {
      return user.data.student;
    } else if (role === 'company') {
      return user.data.company;
    } else if (role === 'supervisor') {
      return user.data.supervisor;
    }

    return adminRole;
  }

31
  static propTypes = {
32
    user: React.PropTypes.object.isRequired,
33
34
  };

35
36
37
  constructor(props) {
    super(props);
    /* istanbul ignore next */
38
    this.state = { activeItem: 'home' };
39
    this.logout = this.logout.bind(this);
40
    this.logoutCompany = this.logoutCompany.bind(this);
41
  }
sirinbaisa's avatar
sirinbaisa committed
42

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

45
46
  logout = (e) => {
    e.preventDefault();
47
48
49
50
51
    Server.get('/api-auth/logout/?next=/', true).then(() => {
      Storage.clear();
      browserHistory.push('/login');
    });
  };
52

53
54
55
56
57
58
59
  logoutCompany = /* istanbul ignore next */ (e) => {
    e.preventDefault();
    const userData = Storage.get('user-data');
    userData.company = null;
    Storage.set('user-data', userData);
    window.location.replace('/home');
  };
60

61
  render() {
sirinbaisa's avatar
sirinbaisa committed
62
    const { activeItem } = this.state;
63
    const data = TopMenu.getInfo(this.props.user);
64
    return (
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
      <div>
        { this.props.user.data.is_staff && this.props.user.data.company && (
          <div className="admin-bar">
            Anda login sebagai perusahaan: {this.props.user.data.company.name} (#{this.props.user.data.company.id}).
            Untuk keluar, silahkan klik <a href="#" onClick={this.logoutCompany}> link ini</a>
          </div>
        )}
        <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>
              <Popup
                trigger={<Image
                  as={Link} to="/profil" src={data.photo || defaultPicture} avatar
                  onClick={this.handleItemClick}
                />}
                flowing
                hoverable
              >
                <Card
                  header={data.name}
                  description={data.user.email}
                />
                <Button as={Link} onClick={this.logout} name="logout" color="blue" size="tiny">Logout</Button>
sirinbaisa's avatar
sirinbaisa committed
90

91
              </Popup>
sirinbaisa's avatar
sirinbaisa committed
92

93
94
95
96
            </Menu.Item>
          </Menu.Menu>
        </Menu>
      </div>
97
98
99
    );
  }
}