Fakultas Ilmu Komputer UI

TopMenu.jsx 6.28 KB
Newer Older
1
import React from 'react';
2
3
import PropTypes from 'prop-types';
import { Menu, Image, Popup, Card, Button } from 'semantic-ui-react';
4
import { Link, browserHistory } from 'react-router';
5
import Server from '../lib/Server';
6
import Storage from '../lib/Storage';
7
import moment from 'moment';
Vitosavero Avila Wibisono's avatar
Vitosavero Avila Wibisono committed
8
import ModalAlert from './ModalAlert';
9

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

13
export default class TopMenu extends React.Component {
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
  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;
  }

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

38
39
40
  constructor(props) {
    super(props);
    /* istanbul ignore next */
41
42
43
44
    moment.locale('id');
    this.state = {
      activeItem: 'Beranda',
      logoutLoading: false,
45
46
47
48
      currentDate:
        moment(new Date()).format('dddd') +
        ', ' +
        moment(new Date()).format('LL'),
49
      todayQuote: quotes(),
50
51
52
53
      isOpen: false,
      applianceInformation: 
        "1. Pastikan anda sudah mengupdate profile anda\n" +
        "2. Cari lowongan internship yang ada di tab lowongan\n" +
Vitosavero Avila Wibisono's avatar
Vitosavero Avila Wibisono committed
54
        "3. Klik tombol 'Detail'\n" +
55
56
        "4. Pastikan persyaratan sudah terpenuhi\n" +
        "5. Jelaskan mengapa anda ingin mengikuti lowongan internship tersebut di 'Cover Letter'\n"+
57
        "6. Klik tombol 'Daftar'\n",
58
59
60
        kapeDescription: "Kanal Akses Pendaftaran KP Elektronik"
      

61
    };
62
    this.logout = this.logout.bind(this);
63
    this.logoutCompany = this.logoutCompany.bind(this);
Vitosavero Avila Wibisono's avatar
Vitosavero Avila Wibisono committed
64
    this.handleModalClick = this.handleModalClick.bind(this);
65
    console.log(this.state.todayQuote);
66
  }
sirinbaisa's avatar
sirinbaisa committed
67

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

70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
  handleOpen = () => {

    this.setState({
      isOpen: true
    });

    };

  handleClose = () => {
    this.setState({
      isOpen: false
    });
    clearTimeout(this.timeout)
  };


Vitosavero Avila Wibisono's avatar
Vitosavero Avila Wibisono committed
86
87
  handleModalClick() {
    this.modalAlert.open(
88
89
      'Cara mendaftar di lowongan yang ada:',
      this.state.applianceInformation,
Vitosavero Avila Wibisono's avatar
Vitosavero Avila Wibisono committed
90
91
92
    );
  }

93

94
95
  logout = (e) => {
    e.preventDefault();
Zamil Majdy's avatar
Zamil Majdy committed
96
    this.setState({ logoutLoading: true });
97
98
99
100
101
102
103
    Server.get('/api-auth/logout/?next=/', true).then(
      () => {
        Storage.clear();
        browserHistory.push('/login');
      },
      () => this.setState({ logoutLoading: false }),
    );
104
  };
105

106
107
108
109
110
111
112
  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');
  };
113

114
  render() {
sirinbaisa's avatar
sirinbaisa committed
115
    const { activeItem } = this.state;
116
    const data = TopMenu.getInfo(this.props.user);
Vitosavero Avila Wibisono's avatar
Vitosavero Avila Wibisono committed
117
118
    const btn = (
      <Button color="blue" inverted onClick={this.handleModalClick}>
119
        Cara Apply
Vitosavero Avila Wibisono's avatar
Vitosavero Avila Wibisono committed
120
      </Button>
121
    );
122
    return (
123
      <div>
124
125
126
127
128
129
130
131
        <div
          style={{
            padding: '10px 0',
            fontStyle: 'italic',
            textAlign: 'center',
          }}
        >
          {this.state.todayQuote}
132
        </div>
133
        {this.props.user.data.is_staff && this.props.user.data.company && (
134
          <div className="admin-bar">
135
136
            <p>
              Anda login sebagai perusahaan:
137
138
139
140
141
142
143
              <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>
144
            </p>
145
146
          </div>
        )}
Vitosavero Avila Wibisono's avatar
Vitosavero Avila Wibisono committed
147
148
149
150
151
        <ModalAlert
          ref={(modal) => {
            this.modalAlert = modal;
          }}
        />
152
        <Menu color="blue" pointing secondary>
153
154
155
156
157
158
159
          <Menu.Menu position="left">
          <Menu.Item>
            <Image as={Link} size="small" src="/assets/img/logo.png" to="/home" />
            {this.state.kapeDescription}
          </Menu.Item>
          </Menu.Menu>
          
160
          <Menu.Menu position="right">
161
          {this.props.user.role === 'student' && (
162
            <Menu.Item>{btn}</Menu.Item>
163
          )}
164
            <Menu.Item style={{ margin: '3px' }}>
165
              {this.state.currentDate}
166
            </Menu.Item>
167
168
169
170
171
172
173
            <Menu.Item as={Link} to="/home" name="Beranda" active={activeItem === 'Beranda'} onClick={this.handleItemClick} />
            
            { this.props.user.role === 'company' &&
            <Menu.Item as={Link} to="/profil-perusahaan" name="Profil" active={activeItem === 'Profil'} onClick={this.handleItemClick} /> }
            { this.props.user.data.is_staff &&
            <Menu.Item as={Link} to="/lowongan" name="Lowongan" active={activeItem === 'Lowongan'} onClick={this.handleItemClick} /> }
            <Menu.Item as={Link} to="/notifikasi" name="Notifikasi" active={activeItem === 'Notifikasi'} onClick={this.handleItemClick} />
Zamil Majdy's avatar
Zamil Majdy committed
174
            <Menu.Item style={{ padding: '10px 0' }}>
175
              <Popup
176
177
178
179
180
                trigger={<Image src={(this.props.user.role === 'company' ? data.logo : data.photo) || defaultPicture} avatar />}
                open={this.state.isOpen}
                on='click'
                    onClose={this.handleClose}
                    onOpen={this.handleOpen}
181
              >
182
183
184
185
186
187
188
189
190
                <Card
                  header={data.name}
                  description={data.user.email}
                />
                { this.props.user.role === 'student' &&
            <Menu.Item as={Link} to="/profil-mahasiswa" style={{ margin: '10px' }} name="Profil" active={activeItem === 'Profil'} onClick={this.handleItemClick} /> }
            <Menu.Item as={Link} to="/edit-profil-mahasiswa" style={{ margin: '10px' }} name="Edit Profil" active={activeItem === 'EditProfil'} onClick={this.handleItemClick} /> 
            <Button.Group floated="right">
                <Button as={Link} onClick={this.logout} loading={this.state.logoutLoading} name="logout" color="blue" size="tiny">Keluar</Button></Button.Group>
191
192
193
194
195
              </Popup>
            </Menu.Item>
          </Menu.Menu>
        </Menu>
      </div>
196
197
198
    );
  }
}