Fakultas Ilmu Komputer UI

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

Arga Ghulam Ahmad's avatar
Arga Ghulam Ahmad committed
12
13
const quotes = require('starwars');

Zamil Majdy's avatar
Zamil Majdy committed
14
const defaultPicture = 'https://semantic-ui.com/images/avatar/small/elliot.jpg';
15

16
export default class TopMenu extends React.Component {
17
18
19
20
21
22
23
24
  static getInfo(user) {
    const adminRole = {
      name: 'admin',
      user: {
        email: '',
      },
      photo: null,
    };
Arga Ghulam Ahmad's avatar
Arga Ghulam Ahmad committed
25
    const { role } = user;
26
27
    if (role === 'student') {
      return user.data.student;
Arga Ghulam Ahmad's avatar
Arga Ghulam Ahmad committed
28
    } if (role === 'company') {
29
      return user.data.company;
Arga Ghulam Ahmad's avatar
Arga Ghulam Ahmad committed
30
    } if (role === 'supervisor') {
31
32
33
34
35
36
      return user.data.supervisor;
    }

    return adminRole;
  }

37
  static propTypes = {
38
    user: PropTypes.object.isRequired,
39
40
  };

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

64

65
    };
66
    this.logout = this.logout.bind(this);
67
    this.logoutCompany = this.logoutCompany.bind(this);
Vitosavero Avila Wibisono's avatar
Vitosavero Avila Wibisono committed
68
    this.handleModalClick = this.handleModalClick.bind(this);
69
    console.log(this.state.todayQuote);
70
    console.log(Storage.get('menu-active-state'));
71
  }
sirinbaisa's avatar
sirinbaisa committed
72

73
  handleItemClick = (e, { name }) => {
Arga Ghulam Ahmad's avatar
Arga Ghulam Ahmad committed
74
    if (name === 'Logo') {
75
76
77
78
79
      this.setState({ activeItem: 'Beranda' });
    } else {
      this.setState({ activeItem: name });
    }
  }
80

81
82
  handleOpen = () => {
    this.setState({
Arga Ghulam Ahmad's avatar
Arga Ghulam Ahmad committed
83
      isOpen: true,
84
    });
Arga Ghulam Ahmad's avatar
Arga Ghulam Ahmad committed
85
  };
86
87
88

  handleClose = () => {
    this.setState({
Arga Ghulam Ahmad's avatar
Arga Ghulam Ahmad committed
89
      isOpen: false,
90
    });
Arga Ghulam Ahmad's avatar
Arga Ghulam Ahmad committed
91
    clearTimeout(this.timeout);
92
93
94
  };


Vitosavero Avila Wibisono's avatar
Vitosavero Avila Wibisono committed
95
96
  handleModalClick() {
    this.modalAlert.open(
97
98
      'Cara mendaftar di lowongan yang ada:',
      this.state.applianceInformation,
Vitosavero Avila Wibisono's avatar
Vitosavero Avila Wibisono committed
99
100
101
    );
  }

102

103
104
  logout = (e) => {
    e.preventDefault();
Zamil Majdy's avatar
Zamil Majdy committed
105
    this.setState({ logoutLoading: true });
106
107
108
109
110
111
112
    Server.get('/api-auth/logout/?next=/', true).then(
      () => {
        Storage.clear();
        browserHistory.push('/login');
      },
      () => this.setState({ logoutLoading: false }),
    );
113
  };
114

115
116
117
118
119
120
121
  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');
  };
122

123
124
125
126
127
128
129
  menuActiveState() {
    if (Storage.get('menu-active-state') == null) {
      return 'Beranda';
    }
    return Storage.get('menu-active-state');
  }

130
  render() {
sirinbaisa's avatar
sirinbaisa committed
131
    const { activeItem } = this.state;
132
    const data = TopMenu.getInfo(this.props.user);
Vitosavero Avila Wibisono's avatar
Vitosavero Avila Wibisono committed
133
134
    const btn = (
      <Button color="blue" inverted onClick={this.handleModalClick}>
135
        Cara Apply
Vitosavero Avila Wibisono's avatar
Vitosavero Avila Wibisono committed
136
      </Button>
137
    );
138
    return (
139
      <div>
140
141
142
143
144
145
146
147
        <div
          style={{
            padding: '10px 0',
            fontStyle: 'italic',
            textAlign: 'center',
          }}
        >
          {this.state.todayQuote}
148
        </div>
149
        {this.props.user.data.is_staff && this.props.user.data.company && (
150
          <div className="admin-bar">
151
152
            <p>
              Anda login sebagai perusahaan:
Arga Ghulam Ahmad's avatar
Arga Ghulam Ahmad committed
153
154
155
156
157
158
159
160
161
162
              <b>
                {' '}
                {this.props.user.data.company.name}
              </b>
              {' '}
(#
              {this.props.user.data.company.id}
). Untuk kembali menjadi admin,
              klik
              {' '}
163
164
165
166
              <a href="#" onClick={this.logoutCompany}>
                {' '}
                link ini
              </a>
167
            </p>
168
169
          </div>
        )}
Vitosavero Avila Wibisono's avatar
Vitosavero Avila Wibisono committed
170
171
172
173
174
        <ModalAlert
          ref={(modal) => {
            this.modalAlert = modal;
          }}
        />
175
        <Menu color="blue" pointing secondary>
176
          <Menu.Menu position="left">
Arga Ghulam Ahmad's avatar
Arga Ghulam Ahmad committed
177
178
179
180
            <Menu.Item style={{ padding: '0px' }} as={Link} to="/home" name="Logo" onClick={this.handleItemClick}>
              <Image size="small" src="/assets/img/logo.png" />
              {this.state.kapeDescription}
            </Menu.Item>
181
          </Menu.Menu>
182

183
          <Menu.Menu position="right">
Arga Ghulam Ahmad's avatar
Arga Ghulam Ahmad committed
184
            {this.props.user.role === 'student' && (
185
            <Menu.Item>{btn}</Menu.Item>
Arga Ghulam Ahmad's avatar
Arga Ghulam Ahmad committed
186
            )}
187
            <Menu.Item style={{ margin: '3px' }}>
188
              {this.state.currentDate}
189
            </Menu.Item>
190
            <Menu.Item as={Link} to="/home" name="Beranda" active={activeItem === 'Beranda'} onClick={this.handleItemClick} />
191

Arga Ghulam Ahmad's avatar
Arga Ghulam Ahmad committed
192
193
194
195
            { 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} /> }
196
            <Menu.Item as={Link} to="/notifikasi" name="Notifikasi" active={activeItem === 'Notifikasi'} onClick={this.handleItemClick} />
Zamil Majdy's avatar
Zamil Majdy committed
197
            <Menu.Item style={{ padding: '10px 0' }}>
198
              <Popup
199
200
                trigger={<Image src={(this.props.user.role === 'company' ? data.logo : data.photo) || defaultPicture} avatar />}
                open={this.state.isOpen}
Arga Ghulam Ahmad's avatar
Arga Ghulam Ahmad committed
201
202
203
                on="click"
                onClose={this.handleClose}
                onOpen={this.handleOpen}
204
              >
205
206
207
208
                <Card
                  header={data.name}
                  description={data.user.email}
                />
Arga Ghulam Ahmad's avatar
Arga Ghulam Ahmad committed
209
210
211
212
213
214
                { 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>
215
216
217
218
219
              </Popup>
            </Menu.Item>
          </Menu.Menu>
        </Menu>
      </div>
220
221
222
    );
  }
}