Fakultas Ilmu Komputer UI

ProfilePage.jsx 30.7 KB
Newer Older
1
import React from 'react';
2
3
4
5
6
7
8
9
10
11
12
import PropTypes from 'prop-types';
import {
  Segment,
  Image,
  Header,
  Icon,
  Container,
  Button,
  Form,
  Grid,
  Message,
13
  Tab
14
} from 'semantic-ui-react';
15
import Server from './lib/Server';
16
import Storage from './lib/Storage';
Juan Alexander Hamonangan's avatar
Juan Alexander Hamonangan committed
17
import ProfileHandler from './ProfileHandler';
18
import Dumper from './lib/Dumper';
PRIAMBUDI LINTANG BAGASKARA's avatar
PRIAMBUDI LINTANG BAGASKARA committed
19
import { isFromGithubLinkValid, gotoLink } from './Utils';
20

Juan Alexander Hamonangan's avatar
Juan Alexander Hamonangan committed
21
export default class ProfilePage extends ProfileHandler {
22
  static propTypes = {
23
24
25
    route: PropTypes.object.isRequired,
    params: PropTypes.object.isRequired,
    user: PropTypes.object.isRequired,
26
27
28
29
30
31
  };

  constructor(props) {
    super(props);
    /* istanbul ignore next */
    this.state = {
32
33
      id: '',
      npm: '',
34
35
36
37
      name: '',
      major: '',
      batch: '',
      email: '',
Fannyah Dita Cahya's avatar
Fannyah Dita Cahya committed
38
      gender: '',
PRIAMBUDI LINTANG BAGASKARA's avatar
PRIAMBUDI LINTANG BAGASKARA committed
39
      region: '',
40
41
42
      cityOfBirth: '',
      dateOfBirth: '',
      resume: '',
43
      phone_number: '',
Metta Anantha Pindika's avatar
Metta Anantha Pindika committed
44
      portfolio_link: '',
45
46
      show_transcript: '',
      photo: '',
INDRA SEPTAMA's avatar
INDRA SEPTAMA committed
47
48
      age: '',
      intro: '',
49
      alamat: '',
50
      expected_salary: '',
Nixi Sendya Putri's avatar
Nixi Sendya Putri committed
51
      job_seeking_status: '',
52
      volunteer: '',
Tyagita Larasati's avatar
Tyagita Larasati committed
53
      skills: '',
54
55
      form: {
        picture: '',
56
        email: '',
57
        phone_number: '',
58
        alamat: '',
Fannyah Dita Cahya's avatar
Fannyah Dita Cahya committed
59
        gender: '',
PRIAMBUDI LINTANG BAGASKARA's avatar
PRIAMBUDI LINTANG BAGASKARA committed
60
        region: '',
Tyagita Larasati's avatar
Tyagita Larasati committed
61
        skills: '',
62
        resume: '',
Metta Anantha Pindika's avatar
Metta Anantha Pindika committed
63
        portfolio_link: '',
64
        show_transcript: '',
65
        volunteer: '',
HANIF AGUNG PRAYOGA's avatar
HANIF AGUNG PRAYOGA committed
66
        intro: '',
Nixi Sendya Putri's avatar
Nixi Sendya Putri committed
67
        job_seeking_status: '',
68
69
        latest_work: '',
        latest_work_desc: '',
70
        github_url: '',
Khoirul Khuluqi Abdulloh's avatar
Khoirul Khuluqi Abdulloh committed
71
        gitlab_url: '',
Farah Alhaniy Efendi's avatar
Farah Alhaniy Efendi committed
72
        awards: '',
Arga Ghulam Ahmad's avatar
Arga Ghulam Ahmad committed
73
        sertifikat: '',
Aviliani Pramestya's avatar
Aviliani Pramestya committed
74
        projects: '',
Fannyah Dita Cahya's avatar
Fannyah Dita Cahya committed
75
        certification: '',
Tyagita Larasati's avatar
Tyagita Larasati committed
76
        languages: '',
Nixi Sendya Putri's avatar
Nixi Sendya Putri committed
77
        seminar: '',
Hema Mitta Kalyani's avatar
Hema Mitta Kalyani committed
78
        interests: '',
Farah Alhaniy Efendi's avatar
Farah Alhaniy Efendi committed
79
        related_course: '',
80
      },
81
      bagikanTranskrip: '',
82
      acceptedNo: 0,
83
      readNo: 0,
84
      refresh: 1,
Zamil Majdy's avatar
Zamil Majdy committed
85
      loading: false,
86
      linkedin_url: '',
87
      hackerrank_url: '',
88
      self_description: '',
89
      student_gpa: 0.0,
90
      student_toefl: 0,
Fannyah Dita Cahya's avatar
Fannyah Dita Cahya committed
91
      student_toefl_file: '',
Muhammad Fauzan Fikri's avatar
Muhammad Fauzan Fikri committed
92
      website_url: '',
93
94
      latest_work: '',
      latest_work_desc: '',
95
      github_url: '',
Khoirul Khuluqi Abdulloh's avatar
Khoirul Khuluqi Abdulloh committed
96
      gitlab_url: '',
Farah Alhaniy Efendi's avatar
Farah Alhaniy Efendi committed
97
      awards: '',
Tyagita Larasati's avatar
Tyagita Larasati committed
98
      sertifikat: '',
Aviliani Pramestya's avatar
Aviliani Pramestya committed
99
      projects: '',
Fannyah Dita Cahya's avatar
Fannyah Dita Cahya committed
100
      certification: '',
Tyagita Larasati's avatar
Tyagita Larasati committed
101
      languages: '',
Nixi Sendya Putri's avatar
Nixi Sendya Putri committed
102
      semimar: '',
Hema Mitta Kalyani's avatar
Hema Mitta Kalyani committed
103
      interests: '',
Dwi Nanda Susanto's avatar
Dwi Nanda Susanto committed
104
      dependants: '',
Farah Alhaniy Efendi's avatar
Farah Alhaniy Efendi committed
105
      related_course: '',
Dwi Nanda Susanto's avatar
Dwi Nanda Susanto committed
106
      ielts: 1.0,
107
108
    };
    this.getProfile = this.getProfile.bind(this);
109
    this.handleChange = this.handleChange.bind(this);
110
    this.handleCheckbox = this.handleCheckbox.bind(this);
111
112
    this.handleSubmit = this.handleSubmit.bind(this);
    this.handleFile = this.handleFile.bind(this);
M. Reza Qorib's avatar
M. Reza Qorib committed
113
    this.gotoStudentResume = this.gotoStudentResume.bind(this);
Zamil Majdy's avatar
Zamil Majdy committed
114
    this.gotoStudentTranscript = this.gotoStudentTranscript.bind(this);
Fannyah Dita Cahya's avatar
Fannyah Dita Cahya committed
115
    this.gotoStudentToeflFile = this.gotoStudentToeflFile.bind(this);
116
    this.getProfile();
117
118

    Storage.set('menu-active-state', 'Profil');
119
120
121
  }

  getProfile() {
122
123
124
125
126
127
128
    const id = this.props.route.own
      ? this.props.user.data.student.id
      : this.props.params.id;
    return Server.get(`/students/${id}/`).then(
      (data) => {
        this.setState({
          id: data.id,
129
          name: data.full_name,
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
          npm: data.npm,
          resume: data.resume,
          major: data.major,
          batch: data.batch,
          email: data.user.email,
          gender: data.gender,
          region: data.region,
          cityOfBirth: data.birth_place,
          dateOfBirth: this.parseIndonesianDateFormat(data.birth_date),
          phone_number: data.phone_number,
          portfolio_link: data.portfolio_link,
          photo: data.photo,
          show_transcript: data.show_transcript,
          acceptedNo: data.accepted_no,
          readNo: data.read_no,
          bagikanTranskrip: data.show_transcript,
          refresh: this.state.refresh + 1,
          age: data.age,
          intro: data.intro,
          expected_salary: data.expected_salary,
          job_seeking_status: data.job_seeking_status,
          volunteer: data.volunteer,
          linkedin_url: data.linkedin_url,
153
          lastLoggedIn: this.convertDateTime(data.user.last_login),
154
155
156
          hackerrank_url: data.hackerrank_url,
          self_description: data.self_description,
          student_gpa: data.student_gpa,
157
          student_toefl: data.student_toefl,
Fannyah Dita Cahya's avatar
Fannyah Dita Cahya committed
158
          student_toefl_file: data.student_toefl_file,
159
160
161
162
163
164
          website_url: data.website_url,
          latest_work: data.latest_work,
          alamat: data.alamat,
          latest_work_desc: data.latest_work_desc,
          skills: data.skills,
          github_url: data.github_url,
Khoirul Khuluqi Abdulloh's avatar
Khoirul Khuluqi Abdulloh committed
165
          gitlab_url: data.gitlab_url,
166
          awards: data.awards,
Yumna Pratista Tastaftian's avatar
Yumna Pratista Tastaftian committed
167
          sertifikat: data.sertifikat,
168
169
170
171
          projects: data.projects,
          certification: data.certification,
          languages: data.languages,
          seminar: data.seminar,
Hema Mitta Kalyani's avatar
Hema Mitta Kalyani committed
172
          interests: data.interests,
173
          dependants: data.dependants,
Farah Alhaniy Efendi's avatar
Farah Alhaniy Efendi committed
174
          related_course: data.related_course,
Dwi Nanda Susanto's avatar
Dwi Nanda Susanto committed
175
          ielts: data.ielts,
176
177
178
179
180
181
182
183
        });
        if (this.props.route.own) {
          const newSession = this.props.user.data;
          newSession.student = data;
          Storage.set('user-data', newSession);
          window.scrollTo(0, 0);
        }
      },
Arga Ghulam Ahmad's avatar
Arga Ghulam Ahmad committed
184
185
186
      (error) => error.then(() => {
        this.state.name = 'Gagal mendapatkan informasi';
      }),
187
    );
188
  }
189

Khoirul Khuluqi Abdulloh's avatar
Khoirul Khuluqi Abdulloh committed
190
191
  gitlabURL_is_valid = () => {
    if (this.state.form.gitlab_url != null) {
Arga Ghulam Ahmad's avatar
Arga Ghulam Ahmad committed
192
      return this.state.form.gitlab_url.includes('https://gitlab.com/');
Khoirul Khuluqi Abdulloh's avatar
Khoirul Khuluqi Abdulloh committed
193
194
195
    }
  }

196
197
198
199
200
201
202
203
204
205
206
  convertDateTime = (dateTime) => {
    const monthNameIndex = {
      '01': 'Januari',
      '02': 'Februari',
      '03': 'Maret',
      '04': 'April',
      '05': 'Mei',
      '06': 'Juni',
      '07': 'Juli',
      '08': 'Agustus',
      '09': 'September',
207
208
209
      '10': 'Oktober',
      '11': 'November',
      '12': 'Desember',
210
211
    };

Arga Ghulam Ahmad's avatar
Arga Ghulam Ahmad committed
212
    const timeSt = dateTime.split('T');
213
214
215
216
    const date = new Date(dateTime);

    const newTime = `${date.getDate()} ${monthNameIndex[date.getMonth() + 1]} ${date.getFullYear()} | ${
      date.getHours() + timeSt[1].substr(2, 3)}`;
217
218
219
    return newTime;
  };

220
221
  parseIndonesianDateFormat(dateIndex) {
    const monthNameIndex = {
222
      '01': 'Januari',
223
224
225
226
227
228
229
230
      '02': 'Februari',
      '03': 'Maret',
      '04': 'April',
      '05': 'Mei',
      '06': 'Juni',
      '07': 'Juli',
      '08': 'Agustus',
      '09': 'September',
231
232
233
      '10': 'Oktober',
      '11': 'November',
      '12': 'Desember',
234
235
236
237
238
239
240
241
    };

    const dateIndexArray = dateIndex.split('-');
    dateIndexArray[1] = monthNameIndex[dateIndexArray[1]];

    return dateIndexArray.reverse().join(' ');
  }

242
243
  handleSubmit = (e) => {
    e.preventDefault();
PRIAMBUDI LINTANG BAGASKARA's avatar
PRIAMBUDI LINTANG BAGASKARA committed
244
    if (!isFromGithubLinkValid(this.state.form.github_url)) {
245
246
247
      this.modalAlert.open(
        'Pembaharuan profil gagal',
        'Pastikan link github yang anda tulis benar.(Berpola : https://github.com/<username>',
248
      );
Khoirul Khuluqi Abdulloh's avatar
Khoirul Khuluqi Abdulloh committed
249
    } else if (!this.gitlabURL_is_valid()) {
emil farisan's avatar
emil farisan committed
250
      this.modalAlert.open(
Arga Ghulam Ahmad's avatar
Arga Ghulam Ahmad committed
251
        'Link gitlab tidak sesuai. Contoh : https://gitlab.com/<your-username>',
emil farisan's avatar
emil farisan committed
252
      );
Khoirul Khuluqi Abdulloh's avatar
Khoirul Khuluqi Abdulloh committed
253
254
255
      return;
    }
    {
256
257
258
259
260
261
262
263
264
265
266
267
268
      const submitForm = {};
      Object.keys(this.state.form).forEach((key) => {
        if (this.state.form[key] !== '') {
          submitForm[key] = this.state.form[key];
        }
      });
      this.setState({ loading: true });
      Server.submit(
        `/students/${this.state.id}/profile/`,
        submitForm,
        'PATCH',
      ).then(
        () => {
269
          this.setState({ loading: false });
270
271
272
273
274
275
          this.modalAlert.open(
            'Profil berhasil diperbaharui',
            'Silakan periksa kembali profil anda',
            this.getProfile,
          );
        },
Arga Ghulam Ahmad's avatar
Arga Ghulam Ahmad committed
276
277
278
279
        (error) => error.then((r) => {
          this.setState({ loading: false });
          this.modalAlert.open('Pembaharuan profil gagal', Dumper.dump(r));
        }),
280
281
      );
    }
282
283
  };

PRIAMBUDI LINTANG BAGASKARA's avatar
PRIAMBUDI LINTANG BAGASKARA committed
284
  gotoStudentResume = () => gotoLink(this.state.resume || '#');
M. Reza Qorib's avatar
M. Reza Qorib committed
285

Fannyah Dita Cahya's avatar
Fannyah Dita Cahya committed
286
287
  gotoStudentToeflFile = () => gotoLink(this.state.student_toefl_file || '#');

PRIAMBUDI LINTANG BAGASKARA's avatar
PRIAMBUDI LINTANG BAGASKARA committed
288
  gotoStudentTranscript = () => gotoLink(`transkrip/${this.state.id}`);
Zamil Majdy's avatar
Zamil Majdy committed
289

290
  render() {
291
292
293
294
295
296
297
298
299
300
301
302
303
304
    const detailTab = [
      {
        menuItem: 'Experience', render: () =>
          <Tab.Pane>
            <Grid stackable>
              <Grid.Column width={6}>
                <Segment basic vertical>
                  <Grid>
                    <Grid.Column width={2}>
                      <Icon name="suitcase" size="big" />
                    </Grid.Column>
                    <Grid.Column width={13}>
                      <p>
                        Latest working experience as:
Arga Ghulam Ahmad's avatar
Arga Ghulam Ahmad committed
305
                          {' '}
306
307
308
309
310
311
312
313
314
315
                        <span>
                          <b>
                            {' '}
                            {this.state.latest_work || 'N/A'}
                            {' '}
                          </b>
                        </span>
                      </p>
                      <p>
                        Description:
Arga Ghulam Ahmad's avatar
Arga Ghulam Ahmad committed
316
                          {' '}
317
                        <span>
Arga Ghulam Ahmad's avatar
Arga Ghulam Ahmad committed
318
                          {' '}
319
                          {this.state.latest_work_desc || 'N/A'}
Arga Ghulam Ahmad's avatar
Arga Ghulam Ahmad committed
320
                          {' '}
321
322
323
324
325
                        </span>
                      </p>
                    </Grid.Column>
                  </Grid>
                </Segment>
Izzatul Muttaqin's avatar
Izzatul Muttaqin committed
326

327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
                <Segment basic vertical>
                  <Grid>
                    <Grid.Column width={2}>
                      <Icon name="trophy" size="big" />
                    </Grid.Column>
                    <Grid.Column width={13}>
                      <p>
                        {' '}
                        {this.state.awards || 'Awards belum ditambahkan'}
                        {' '}
                      </p>
                    </Grid.Column>
                  </Grid>
                </Segment>
                <Segment basic vertical>
                  <Grid>
                    <Grid.Column width={2}>
                      <Icon name="trophy" size="big" />
                    </Grid.Column>
                    <Grid.Column width={13}>
                      {sertifikat_state}
                    </Grid.Column>
                  </Grid>
                </Segment>
                <Segment basic vertical>
                  <Grid>
                    <Grid.Column width={2}>
                      <Icon name="folder open" size="big" />
                    </Grid.Column>
                    <Grid.Column width={13}>
                      <p>
                        {' '}
                        {this.state.projects
                          || 'Projects belum ditambahkan'}
                        {' '}
                      </p>
                    </Grid.Column>
                  </Grid>
                </Segment>
                <Segment basic vertical>
                  <Grid>
                    <Grid.Column width={2}>
                      <Icon name="hand peace outline" size="big" />
                    </Grid.Column>
                    <Grid.Column width={13}>
                      <p>
                        {' '}
                        {this.state.volunteer || 'N/A'}
                        {' '}
                      </p>
                    </Grid.Column>
                  </Grid>
                </Segment>
M. Reza Qorib's avatar
M. Reza Qorib committed
380

381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
                <Segment basic vertical>
                  <Grid>
                    <Grid.Column width={2}>
                      <Icon name="slideshare" size="big" />
                    </Grid.Column>
                    <Grid.Column width={13}>
                      <p>
                        {' '}
                        {this.state.seminar
                          || 'Seminar dan Training kosong'}
                        {' '}
                      </p>
                    </Grid.Column>
                  </Grid>
                </Segment>
              </Grid.Column>
            </Grid>
          </Tab.Pane>
      },
      {
        menuItem: 'Skills',
        render: () =>
          <Tab.Pane>
            <Grid stackable>
              <Grid.Column width={6}>
                <Segment basic vertical>
                  <Grid>
                    <Grid.Column width={2}>
                      <Icon name="cogs" size="big" />
                    </Grid.Column>
                    <Grid.Column width={13}>
                      <p>
                        {' '}
                        {this.state.skills || 'Skills belum ditambahkan'}
                        {' '}
                      </p>
                    </Grid.Column>
                  </Grid>
                </Segment>
                <Segment basic vertical>
                  <Grid>
                    <Grid.Column width={2}>
                      <Icon name="comment" size="big" />
                    </Grid.Column>
                    <Grid.Column width={13}>
                      <p>
                        {' '}
                        {this.state.languages || 'N/A'}
                        {' '}
                      </p>
                    </Grid.Column>
                  </Grid>
                </Segment>
                <Segment basic vertical>
                  <Grid>
                    <Grid.Column width={2}>
                      <Icon name="certificate" size="big" />
                    </Grid.Column>
                    <Grid.Column width={13}>
                      <p>
                        {' '}
                        {this.state.certification || 'N/A'}
                        {' '}
                      </p>
                    </Grid.Column>
                  </Grid>
                </Segment>
                <Segment basic vertical>
                  <Grid>
                    <Grid.Column width={2}>
                      <Icon name="pencil alternate" size="big" />
                    </Grid.Column>
                    <Grid.Column width={13}>
                      <p href={this.state.student_toefl}>
                        {' '}
                        {this.state.student_toefl || 'N/A'}
                        {' '}
                      </p>
                    </Grid.Column>
                  </Grid>
                </Segment>
                <Segment basic vertical>
                  <Grid>
                    <Grid.Column width={2}>
                      <Icon name="pencil alternate" size="big" />
                    </Grid.Column>
                    <Grid.Column width={13}>
                      <p href={this.state.ielts}>
                        {' '}
                        {this.state.ielts || 'N/A'}
                        {' '}
                      </p>
                    </Grid.Column>
                  </Grid>
                </Segment>
              </Grid.Column>
            </Grid>
          </Tab.Pane>
      },
      {
        menuItem: 'Links',
        render: () =>
          <Tab.Pane>
            <Grid stackable>
              <Grid.Column width={6}>
                <Segment basic vertical>
                  <Grid>
                    <Grid.Column width={2}>
                      <Icon name="linkify" size="big" />
                    </Grid.Column>
                    <Grid.Column width={13}>
                      <a href={this.state.portfolio_link}>
                        {' '}
                        {this.state.portfolio_link || 'Portofolio belum ditambahkan'}
                        {' '}
                      </a>
                    </Grid.Column>
                  </Grid>
                </Segment>
M. Reza Qorib's avatar
M. Reza Qorib committed
500

501
502
503
504
505
506
507
508
509
510
511
512
513
514
                <Segment basic vertical>
                  <Grid>
                    <Grid.Column width={2}>
                      <Icon name="linkedin" size="big" />
                    </Grid.Column>
                    <Grid.Column width={13}>
                      <a href={this.state.linkedin_url}>
                        {' '}
                        {this.state.linkedin_url || 'N/A'}
                        {' '}
                      </a>
                    </Grid.Column>
                  </Grid>
                </Segment>
PRIAMBUDI LINTANG BAGASKARA's avatar
PRIAMBUDI LINTANG BAGASKARA committed
515

516
517
518
519
520
521
522
523
524
525
526
527
528
529
                <Segment basic vertical>
                  <Grid>
                    <Grid.Column width={2}>
                      <Icon name="hackerrank" size="big" />
                    </Grid.Column>
                    <Grid.Column width={13}>
                      <a href={this.state.hackerrank_url}>
                        {' '}
                        {this.state.hackerrank_url || 'N/A'}
                        {' '}
                      </a>
                    </Grid.Column>
                  </Grid>
                </Segment>
Hema Mitta Kalyani's avatar
Hema Mitta Kalyani committed
530

531
532
533
534
535
536
537
538
539
540
541
542
543
544
                <Segment basic vertical>
                  <Grid>
                    <Grid.Column width={2}>
                      <Icon name="globe" size="big" />
                    </Grid.Column>
                    <Grid.Column width={13}>
                      <a href={this.state.website_url}>
                        {' '}
                        {this.state.website_url || 'N/A'}
                        {' '}
                      </a>
                    </Grid.Column>
                  </Grid>
                </Segment>
Muhammad Fauzan Fikri's avatar
Muhammad Fauzan Fikri committed
545

546
                <Segment basic vertical>
547
548
                  <Grid>
                    <Grid.Column width={2}>
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
                      <Icon name="github" size="big" />
                    </Grid.Column>
                    <Grid.Column width={13}>
                      {this.state.github_url ? (
                        <a href={this.state.github_url}>
                          {' '}
                          {this.state.github_url}
                          {' '}
                        </a>
                      ) : (
                          <p> N/A </p>
                        )}
                    </Grid.Column>
                  </Grid>
                </Segment>
                <Segment basic vertical>
                  <Grid>
                    <Grid.Column width={2}>
                      <Icon name="gitlab" size="big" />
568
569
                    </Grid.Column>
                    <Grid.Column width={13}>
570
571
572
573
574
575
576
577
578
579
580
                      {
                        this.state.gitlab_url
                          ? (
                            <a href={this.state.gitlab_url}>
                              {' '}
                              {this.state.gitlab_url}
                              {' '}
                            </a>
                          )
                          : <p> N/A </p>
                      }
581
582
583
                    </Grid.Column>
                  </Grid>
                </Segment>
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
              </Grid.Column>
            </Grid>
          </Tab.Pane>
      },
      {
        menuItem: 'Other',
        render: () =>
          <Tab.Pane>
            <Segment basic vertical>
              <Grid>
                <Grid.Column width={2}>
                  <Icon name="venus mars" size="big" />
                </Grid.Column>
                <Grid.Column width={13}>
                  <p>
                    {' '}
                    {this.state.gender || 'Gender belum ditambahkan'}
                  </p>
                </Grid.Column>
              </Grid>
            </Segment>

            <Segment basic vertical>
              <Grid>
                <Grid.Column width={2}>
                  <Icon name="gift" size="big" />
                </Grid.Column>
                <Grid.Column width={13}>
                  <p>
                    {' '}
                    {this.state.cityOfBirth || 'N/A'}
                    ,
Arga Ghulam Ahmad's avatar
Arga Ghulam Ahmad committed
616
                          {' '}
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
                    {this.state.dateOfBirth || 'N/A'}
                    {' '}
                  </p>
                </Grid.Column>
              </Grid>
            </Segment>

            <Segment basic vertical>
              <Grid>
                <Grid.Column width={2}>
                  <Icon name="address book" size="big" />
                </Grid.Column>
                <Grid.Column width={13}>
                  <p>
                    {' '}
                    {this.state.alamat || 'Alamat belum dimasukkan'}
                    {' '}
                  </p>
                </Grid.Column>
              </Grid>
            </Segment>
Yumna Pratista Tastaftian's avatar
Yumna Pratista Tastaftian committed
638
639


640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
            <Segment basic vertical>
              <Grid>
                <Grid.Column width={2}>
                  <Icon name="map pin" size="big" />
                </Grid.Column>
                <Grid.Column width={13}>
                  <p>
                    {' '}
                    {this.state.region || 'Provinsi belum dimasukkan'}
                    {' '}
                  </p>
                </Grid.Column>
              </Grid>
            </Segment>
            <Segment basic vertical>
              <Grid>
                <Grid.Column width={2}>
                  <Icon name="child" size="big" />
                </Grid.Column>
                <Grid.Column width={13}>
                  <a href={this.state.dependants}>
                    {' '}
                    {this.state.dependants || 'Tidak ada tanggungan'}
                    {' '}
                  </a>
                </Grid.Column>
              </Grid>
            </Segment>
            <Segment basic vertical>
              <Grid>
                <Grid.Column width={2}>
                  <Icon name="money bill alternate" size="big" />
                </Grid.Column>
                <Grid.Column width={13}>
                  <p>
                    {' '}
                    {this.state.expected_salary || 'Belum ada Expected Salary'}
                    {' '}
                  </p>
                </Grid.Column>
              </Grid>
            </Segment>
            <Segment basic vertical>
              <Grid>
                <Grid.Column width={2}>
                  <Icon name="map pin" size="big" />
                </Grid.Column>
                <Grid.Column width={13}>
                  <p>
                    {' '}
                    {this.state.region || 'N/A'}
                    {' '}
                  </p>
                </Grid.Column>
              </Grid>
            </Segment>
            <Segment basic vertical>
              <Grid>
                <Grid.Column width={2}>
                  <Icon name="time" size="big" />
                </Grid.Column>
                <Grid.Column width={13}>
                  <p>
                    {' '}
                    {`${this.state.age} years` || 'N/A'}
                    {' '}
                  </p>
                </Grid.Column>
              </Grid>
            </Segment>
            <Segment basic vertical>
              <Grid>
                <Grid.Column width={2}>
                  <Icon name="lightbulb" size="big" />
                </Grid.Column>
                <Grid.Column width={13}>
                  <p>
                    {' '}
                    {this.state.interests
                      || 'Interests belum ditambahkan'}
                    {' '}
                  </p>
                </Grid.Column>
              </Grid>
            </Segment>
            <Segment basic vertical>
              <Grid>
                <Grid.Column width={2}>
                  <Icon name="book" size="big" />
                </Grid.Column>
                <Grid.Column width={13}>
                  <p>
                    {' '}
                    {this.state.related_course || 'Related Course belum ditambahkan'}
                    {' '}
                  </p>
                </Grid.Column>
              </Grid>
            </Segment>
            <Segment basic vertical>
              <Grid>
                <Grid.Column width={2}>
                  <h3 className="lastSeen">Last Seen</h3>
                </Grid.Column>
                <Grid.Column width={13}>
                  <p>
                    {' '}
                    {this.state.lastLoggedIn}
                    {' '}
                  </p>
                </Grid.Column>
              </Grid>
            </Segment>
          </Tab.Pane>
      }
    ]
Yumna Pratista Tastaftian's avatar
Yumna Pratista Tastaftian committed
756

757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
    const sertifikat_exists = this.state.sertifikat;
    let sertifikat_state;
    if (sertifikat_exists == '') {
      sertifikat_state = <p>Sertifikat belum ada</p>;
    } else {
      sertifikat_state = <p>Sertifikat sudah ada</p>;
    }
    const defaultPicture = 'https://semantic-ui.com/images/wireframe/square-image.png';
    return (
      <div className="profilePage">
        <Segment className="biodata-section">
          <Grid stackable columns={2}>
            <Grid.Column>
              <Header as="h2" icon textAlign="center">
                <br />
                <Image src={this.state.photo || defaultPicture} size="medium" />
              </Header>
            </Grid.Column>
Yumna Pratista Tastaftian's avatar
Yumna Pratista Tastaftian committed
775

776
777
778
779
780
781
782
783
784
            <Grid.Column>
              <Container textAlign="left" className="profile-biodata">
                <div className="biodata">
                  <Segment basic textAlign="center">
                    <h1>
                      {' '}
                      {this.state.name}
                      {' '}
                    </h1>
Yumna Pratista Tastaftian's avatar
Yumna Pratista Tastaftian committed
785
786
787
788
789
                  </Segment>

                  <Segment basic vertical>
                    <Grid>
                      <Grid.Column width={2}>
790
                        <Icon name="university" size="big" />
Yumna Pratista Tastaftian's avatar
Yumna Pratista Tastaftian committed
791
792
793
794
                      </Grid.Column>
                      <Grid.Column width={13}>
                        <p>
                          {' '}
795
796
                          {this.state.major || 'N/A'}
                          ,
Yumna Pratista Tastaftian's avatar
Yumna Pratista Tastaftian committed
797
                          {' '}
798
                          {this.state.batch || 'N/A'}
Yumna Pratista Tastaftian's avatar
Yumna Pratista Tastaftian committed
799
800
801
802
803
804
805
806
807
                          {' '}
                        </p>
                      </Grid.Column>
                    </Grid>
                  </Segment>

                  <Segment basic vertical>
                    <Grid>
                      <Grid.Column width={2}>
808
                        <Icon name="mail" size="big" />
Yumna Pratista Tastaftian's avatar
Yumna Pratista Tastaftian committed
809
810
811
812
                      </Grid.Column>
                      <Grid.Column width={13}>
                        <p>
                          {' '}
813
                          {this.state.email || 'N/A'}
Yumna Pratista Tastaftian's avatar
Yumna Pratista Tastaftian committed
814
815
816
817
818
819
                          {' '}
                        </p>
                      </Grid.Column>
                    </Grid>
                  </Segment>

Hema Mitta Kalyani's avatar
Hema Mitta Kalyani committed
820
821
822
                  <Segment basic vertical>
                    <Grid>
                      <Grid.Column width={2}>
823
                        <Icon name="phone" size="big" />
Farah Alhaniy Efendi's avatar
Farah Alhaniy Efendi committed
824
825
826
827
                      </Grid.Column>
                      <Grid.Column width={13}>
                        <p>
                          {' '}
828
                          {this.state.phone_number || 'Nomor Telepon belum ditambahkan'}
Farah Alhaniy Efendi's avatar
Farah Alhaniy Efendi committed
829
830
831
832
                        </p>
                      </Grid.Column>
                    </Grid>
                  </Segment>
833

INDRA SEPTAMA's avatar
INDRA SEPTAMA committed
834
835
836
                  <Segment basic vertical>
                    <Grid>
                      <Grid.Column width={2}>
837
                        <Icon name="user" size="big" />
838
839
                      </Grid.Column>
                      <Grid.Column width={13}>
Arga Ghulam Ahmad's avatar
Arga Ghulam Ahmad committed
840
841
                        <p>
                          {' '}
842
                          {this.state.self_description || 'Belum ada deskripsi diri'}
Arga Ghulam Ahmad's avatar
Arga Ghulam Ahmad committed
843
                        </p>
844
845
846
                      </Grid.Column>
                    </Grid>
                  </Segment>
847

848
849
850
                  <Segment basic vertical>
                    <Grid>
                      <Grid.Column width={2}>
851
                        <Icon name="pencil alternate" size="big" />
INDRA SEPTAMA's avatar
INDRA SEPTAMA committed
852
853
                      </Grid.Column>
                      <Grid.Column width={13}>
854
                        <p href={this.state.student_gpa}>
Arga Ghulam Ahmad's avatar
Arga Ghulam Ahmad committed
855
                          {' '}
856
                          {("GPA :" + this.state.student_gpa) || 'Nilai GPA belum dimasukkan'}
Arga Ghulam Ahmad's avatar
Arga Ghulam Ahmad committed
857
858
                          {' '}
                        </p>
INDRA SEPTAMA's avatar
INDRA SEPTAMA committed
859
860
861
                      </Grid.Column>
                    </Grid>
                  </Segment>
862
                </div>
863
864
865

                <Segment basic vertical>
                  <Grid>
Nixi Sendya Putri's avatar
Nixi Sendya Putri committed
866
867
868
869
                    <Grid.Column width={2}>
                      <h3>Intro</h3>
                    </Grid.Column>
                    <Grid.Column width={13}>
Arga Ghulam Ahmad's avatar
Arga Ghulam Ahmad committed
870
871
872
873
874
                      <p>
                        {' '}
                        {this.state.intro || 'N/A'}
                        {' '}
                      </p>
Nixi Sendya Putri's avatar
Nixi Sendya Putri committed
875
                    </Grid.Column>
876
877
                    <p className="jumlahLamaran">
                      {' '}
Arga Ghulam Ahmad's avatar
Arga Ghulam Ahmad committed
878
879
880
                      Jumlah lamaran diterima:
                      {' '}
                      {this.state.acceptedNo || '0'}
881
                    </p>
882
883
                  </Grid>
                  <Grid>
884
885
                    <p className="jumlahLamaran">
                      {' '}
Arga Ghulam Ahmad's avatar
Arga Ghulam Ahmad committed
886
887
                      Jumlah lamaran dibaca perusahaan:
                      {' '}
888
889
                      {this.state.readNo || '0'}
                    </p>
890
891
                  </Grid>
                </Segment>
sirinbaisa's avatar
sirinbaisa committed
892
                <Container textAlign="center">
Zamil Majdy's avatar
Zamil Majdy committed
893
                  <div className="buttonProfile">
Tyagita Larasati's avatar
Tyagita Larasati committed
894
                    <Button
Fannyah Dita Cahya's avatar
Fannyah Dita Cahya committed
895
896
897
898
899
900
901
                      onClick={this.gotoStudentToeflFile}
                      disabled={!this.state.student_toefl_file}
                      primary
                      size="small"
                    >
                      TOEFL
                    </Button>
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
                    <Button
                      onClick={this.gotoStudentResume}
                      disabled={!this.state.resume}
                      primary
                      size="small"
                    >
                      Resume
                    </Button>
                    <Button
                      onClick={this.gotoStudentTranscript}
                      color="green"
                      size="small"
                    >
                      Transkrip
                    </Button>
sirinbaisa's avatar
sirinbaisa committed
917
                  </div>
918
                  <br />
sirinbaisa's avatar
sirinbaisa committed
919
                  <div>
920
921
                    <h4>
                      {' '}
Arga Ghulam Ahmad's avatar
Arga Ghulam Ahmad committed
922
923
                      Bagikan Transkrip :
                      {' '}
924
925
                      {this.state.bagikanTranskrip ? 'Ya' : 'Tidak'}
                    </h4>
sirinbaisa's avatar
sirinbaisa committed
926
927
928
                  </div>
                </Container>
              </Container>
Hema Mitta Kalyani's avatar
Hema Mitta Kalyani committed
929
            </Grid.Column>
sirinbaisa's avatar
sirinbaisa committed
930
          </Grid>
Hema Mitta Kalyani's avatar
Hema Mitta Kalyani committed
931
        </Segment>
Nixi Sendya Putri's avatar
Nixi Sendya Putri committed
932

Aviliani Pramestya's avatar
Aviliani Pramestya committed
933

Nixi Sendya Putri's avatar
Nixi Sendya Putri committed
934
935
936
        <Segment className="status-form">
          <Header as="h3" textAlign="left">
            <Icon name="search" />
937
            <Header.Content>Status Mencari Pekerjaan</Header.Content>
Nixi Sendya Putri's avatar
Nixi Sendya Putri committed
938
939
          </Header>
          <div>
940
941
942
943
944
945
946
947
948
949
950
            <h4>
              {' '}
              {this.state.job_seeking_status === 'Active' ? (
                <Message positive>
                  <Message.Header>Sedang mencari pekerjaan</Message.Header>
                  <p>
                    Saya sedang mencari pekerjaan sekarang dan saya terbuka
                    untuk mendapat informasi mengenai lowongan kerja.
                  </p>
                </Message>
              ) : (
Tyagita Larasati's avatar
Tyagita Larasati committed
951
952
953
                  <Message negative>
                    <Message.Header>Tidak mencari pekerjaan</Message.Header>
                    <p>
954
955
                      Saya sedang tidak mencari pekerjaan. Mohon jangan kirimkan
                      informasi mengenai lowongan pekerjaan.
956
                  </p>
Tyagita Larasati's avatar
Tyagita Larasati committed
957
958
                  </Message>
                )}
959
            </h4>
Nixi Sendya Putri's avatar
Nixi Sendya Putri committed
960
961
          </div>
        </Segment>
962

963
964
        <Segment>
          <Tab panes={detailTab} />
Nixi Sendya Putri's avatar
Nixi Sendya Putri committed
965
        </Segment>
Tyagita Larasati's avatar
Tyagita Larasati committed
966
      </div >
967
968
    );
  }
Khoirul Khuluqi Abdulloh's avatar
Khoirul Khuluqi Abdulloh committed
969
}