Fakultas Ilmu Komputer UI

VacancyList.jsx 3.46 KB
Newer Older
1
import React from 'react';
Zamil Majdy's avatar
Zamil Majdy committed
2
import { Item, Grid, Container } from 'semantic-ui-react';
3
import Vacancy from './Vacancy';
4
import CompanyVacancy from './CompanyVacancy';
5
import AdminVacancy from './AdminVacancy';
6
import Server from '../lib/Server';
7
8
9
10

export default class VacancyList extends React.Component {

  static propTypes = {
11
    user: React.PropTypes.object.isRequired,
12
    userId: React.PropTypes.number.isRequired,
13
    items: React.PropTypes.array,
14
    sort: React.PropTypes.string.isRequired,
15
16
17
  };

  static defaultProps = {
18
    items: [],
19
20
  };

21
22
  constructor(props) {
    super(props);
M. Reza Qorib's avatar
M. Reza Qorib committed
23
    /* istanbul ignore next */
24
25
26
27
28
29
    this.state = {
      vacancies: this.props.items,
      bookmarkList: [],
      appliedList: [],
      loading: true,
    };
30
    this.generateVacancies = this.generateVacancies.bind(this);
31
    this.updateStatus = this.updateStatus.bind(this);
32
  }
33

34
35
36
37
38
39
40
  updateStatus(id, status) {
    const obj = [];
    this.state.vacancies.map((vacancy) => {
      if (vacancy.id !== id) return obj.push(vacancy);
      return null;
    });
    this.setState({ vacancies: obj });
41
42
  }

43
44
45
46
47
48
49
50
51
  deleteVacancy = id => Server.delete(`/vacancies/${id}/`, this.state).then(() => {
    this.modalAlert.open('Hapus Lowongan', 'Lowongan berhasil dihapus');
    const newVacancies = [];
    this.state.vacancies.map(vacancy => vacancy.id !== id && newVacancies.push(vacancy));
    this.setState({ vacancies: newVacancies });
  }, error => error.then((r) => {
    this.modalAlert.open('Gagal Menghapus Lowongan', r.error);
  }));

52
  generateVacancies() {
Zamil Majdy's avatar
Zamil Majdy committed
53
54
55
56
57
58
59
60
61
62
63
    if (this.state.vacancies.length === 0) {
      return (
        <Item className="vacancyItems">
          <Grid.Row>
            <Container textAlign="center">
              <p>Tidak ada</p><br />
            </Container>
          </Grid.Row>
        </Item>
      );
    }
64
    if (this.props.user.role === 'student') {
65
      const vacancies = this.state.vacancies.map(vacancy =>
66
67
        (
          <Vacancy
68
69
70
71
72
            key={vacancy.id}
            status={vacancy.status}
            user={this.props.user}
            bookmarked={vacancy.bookmarked ? 1 : 0}
            data={vacancy}
73
            studentId={this.props.userId}
74
            salary={this.props.salary}
75
          />
76
77
        ),
      );
78
79
80
81
82
83
84
85
86
87
      if (this.props.sort === 'ASC') {
        return vacancies.sort((vac1, vac2) => {
          return vac1.props.data.name.localeCompare(vac2.props.data.name);
        });
      } else if (this.props.sort === 'DESC') {
        return vacancies.sort((vac1, vac2) => {
          return vac2.props.data.name.localeCompare(vac1.props.data.name);
        });
      }
      return vacancies;
Zamil Majdy's avatar
Zamil Majdy committed
88
    } else if ((this.props.user.role === 'admin' && this.props.user.data.company != null)
89
      || this.props.user.role === 'company') {
90
      return this.state.vacancies.map(vacancy => (
Zamil Majdy's avatar
Zamil Majdy committed
91
92
93
94
95
96
97
98
        <Item.Group key={vacancy.id} relaxed style={{ width: '100%' }}>
          <CompanyVacancy
            key={vacancy.id}
            data={vacancy}
            deleteCallback={() => this.deleteVacancy(vacancy.id)}
          />
        </Item.Group>
      ),
99
      );
100
    }
101

sirinbaisa's avatar
sirinbaisa committed
102
    return this.state.vacancies.map(vacancy => (
103
104
105
106
107
      <AdminVacancy
        key={vacancy.id}
        data={vacancy}
        updateStatus={this.updateStatus}
      />),
108
109
110
    );
  }

111
  render = () => (
112
    <div>
Zamil Majdy's avatar
Zamil Majdy committed
113
      <Grid container columns="eleven" doubling style={{ display: 'block' }}>
114
115
116
        <Item.Group relaxed style={{ width: '100%' }}>
          { this.generateVacancies() }
        </Item.Group>
117
      </Grid>
118
    </div>
119
  );
120
}