Fakultas Ilmu Komputer UI

TopMenu.jsx 4.14 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
import moment from 'moment';
7

8
var quotes = require('starwars');
Zamil Majdy's avatar
Zamil Majdy committed
9
const defaultPicture = 'https://semantic-ui.com/images/avatar/small/elliot.jpg';
10

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

13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
  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;
  }

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

37
38
39
  constructor(props) {
    super(props);
    /* istanbul ignore next */
40
41
42
43
44
    moment.locale('id');
    this.state = {
      activeItem: 'Beranda',
      logoutLoading: false,
      currentDate: moment(new Date()).format('dddd') + ', ' + moment(new Date()).format('LL'),
45
      todayQuote: quotes(),
46
    };
47
    this.logout = this.logout.bind(this);
48
    this.logoutCompany = this.logoutCompany.bind(this);
49
    console.log(this.state.todayQuote);
50
  }
sirinbaisa's avatar
sirinbaisa committed
51

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

54
55
  logout = (e) => {
    e.preventDefault();
Zamil Majdy's avatar
Zamil Majdy committed
56
    this.setState({ logoutLoading: true });
57
58
59
    Server.get('/api-auth/logout/?next=/', true).then(() => {
      Storage.clear();
      browserHistory.push('/login');
Zamil Majdy's avatar
Zamil Majdy committed
60
    }, () => this.setState({ logoutLoading: false }));
61
  };
62

63
64
65
66
67
68
69
  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');
  };
70

71
  render() {
sirinbaisa's avatar
sirinbaisa committed
72
    const { activeItem } = this.state;
73
    const data = TopMenu.getInfo(this.props.user);
74
    return (
75
      <div>
76
77
78
        <div style={{ padding: '10px 0', fontStyle: 'italic', textAlign: 'center' }}>
          { this.state.todayQuote }
        </div>
79
80
        { this.props.user.data.is_staff && this.props.user.data.company && (
          <div className="admin-bar">
81
82
83
84
85
            <p>
              Anda login sebagai perusahaan:
              <b> {this.props.user.data.company.name}</b> (#{this.props.user.data.company.id}).
              Untuk kembali menjadi admin, klik <a href="#" onClick={this.logoutCompany}> link ini</a>
            </p>
86
87
88
          </div>
        )}
        <Menu color="blue" pointing secondary>
Zamil Majdy's avatar
Zamil Majdy committed
89
          <Image as={Link} size="small" src="/assets/img/logo.png" to="/home" />
90
          <Menu.Menu position="right">
91
92
93
            <Menu.Item style={{ margin: '3px' }}>
              { this.state.currentDate }
            </Menu.Item>
M. Reza Qorib's avatar
M. Reza Qorib committed
94
            <Menu.Item as={Link} to="/home" name="Beranda" active={activeItem === 'Beranda'} onClick={this.handleItemClick} />
Zamil Majdy's avatar
Zamil Majdy committed
95
            { this.props.user.role === 'student' &&
96
97
98
            <Menu.Item as={Link} to="/profil-mahasiswa" name="Profil" active={activeItem === 'Profil'} onClick={this.handleItemClick} /> }
            { this.props.user.role === 'company' &&
            <Menu.Item as={Link} to="/profil-perusahaan" name="Profil" active={activeItem === 'Profil'} onClick={this.handleItemClick} /> }
Zamil Majdy's avatar
Zamil Majdy committed
99
100
            { this.props.user.data.is_staff &&
            <Menu.Item as={Link} to="/lowongan" name="Lowongan" active={activeItem === 'Lowongan'} onClick={this.handleItemClick} /> }
Zamil Majdy's avatar
Zamil Majdy committed
101
            <Menu.Item style={{ padding: '10px 0' }}>
102
              <Popup
Zamil Majdy's avatar
Zamil Majdy committed
103
104
                trigger={<Image src={(this.props.user.role === 'company' ? data.logo : data.photo) || defaultPicture} avatar />}
                flowing hoverable
105
106
107
108
109
              >
                <Card
                  header={data.name}
                  description={data.user.email}
                />
Zamil Majdy's avatar
Zamil Majdy committed
110
                <Button as={Link} onClick={this.logout} loading={this.state.logoutLoading} name="logout" color="blue" size="tiny">Keluar</Button>
111
112
113
114
115
              </Popup>
            </Menu.Item>
          </Menu.Menu>
        </Menu>
      </div>
116
117
118
    );
  }
}