From 4ec91d0e43dc52a76a9670abb85e7f2a7139c647 Mon Sep 17 00:00:00 2001
From: Fadhlan Hazmi <fadhlanhazmi@gmail.com>
Date: Sun, 1 Dec 2019 22:10:50 +0700
Subject: [PATCH 1/6] move the sorting dropdown from vacancyPage to vacancyList
---
assets/js/VacancyPage.jsx | 20 --------------------
assets/js/components/VacancyList.jsx | 17 +++++++++++++++++
2 files changed, 17 insertions(+), 20 deletions(-)
diff --git a/assets/js/VacancyPage.jsx b/assets/js/VacancyPage.jsx
index 96fee2dc..8aea69ec 100755
--- a/assets/js/VacancyPage.jsx
+++ b/assets/js/VacancyPage.jsx
@@ -38,13 +38,7 @@ export default class VacancyPage extends React.Component {
this.state = {
vacancies: [],
id: VacancyPage.getId(this.props.user),
- sort: '',
- sortBy: [
- { key: 'ASC', text: 'Ascending', value: 'ASC' },
- { key: 'DESC', text: 'Descending', value: 'DESC' },
- ],
};
- this.handleChange = this.handleChange.bind(this);
console.log('vacancy');
Storage.set('menu-active-state', 'Beranda');
@@ -63,7 +57,6 @@ export default class VacancyPage extends React.Component {
user={this.props.user}
key={1}
userId={this.state.id}
- sort={this.state.sort}
/>
}
/>
@@ -207,23 +200,10 @@ export default class VacancyPage extends React.Component {
return '';
}
- handleChange = (e, data) => {
- this.setState({ sort: data.value });
- };
-
render() {
console.log(this.props.user);
return (
<div className="applicant">
- <Container textAlign="right">
- <Dropdown
- placeholder="Urutkan Berdasarkan"
- className="dropdownApplicant"
- selection
- options={this.state.sortBy}
- onChange={this.handleChange}
- />
- </Container>
<br />
{this.props.user.role === 'student' || (
<div
diff --git a/assets/js/components/VacancyList.jsx b/assets/js/components/VacancyList.jsx
index 819b8191..6a849382 100755
--- a/assets/js/components/VacancyList.jsx
+++ b/assets/js/components/VacancyList.jsx
@@ -41,6 +41,11 @@ export default class VacancyList extends React.Component {
{ key: 1, text: 'Masih Menerima', value: 1 },
{ key: 2, text: 'Sudah Tutup', value: 2 },
],
+ sort: '',
+ sortBy: [
+ { key: 'ASC', text: 'Ascending', value: 'ASC' },
+ { key: 'DESC', text: 'Descending', value: 'DESC' },
+ ],
};
this.generateVacancies = this.generateVacancies.bind(this);
this.updateStatus = this.updateStatus.bind(this);
@@ -48,6 +53,7 @@ export default class VacancyList extends React.Component {
this.handleChangeVacancyStateFilter = this.handleChangeVacancyStateFilter.bind(
this,
);
+ this.handleChangeSortVacancy = this.handleChangeSortVacancy.bind(this);
}
updateStatus(id, status) {
@@ -127,6 +133,10 @@ export default class VacancyList extends React.Component {
this.setState({ vacancyStateFilter: data.value });
};
+ handleChangeSortVacancy = (e, data) => {
+ this.setState({ sort: data.value });
+ };
+
generateVacancies() {
if (this.state.vacancies.length === 0) {
return (
@@ -205,6 +215,13 @@ export default class VacancyList extends React.Component {
options={this.state.vacancyStateFilterBy}
onChange={this.handleChangeVacancyStateFilter}
/>
+ <Dropdown
+ placeholder="Urutkan Berdasarkan"
+ className="dropdownApplicant"
+ selection
+ options={this.state.sortBy}
+ onChange={this.handleChangeSortVacancy}
+ />
<Grid container columns="eleven" doubling style={{ display: 'block' }}>
<Item.Group relaxed style={{ width: '100%' }}>
{this.generateVacancies()}
--
GitLab
From 6fb58477f8f655c3a3297d1301da2e0aefa0b40c Mon Sep 17 00:00:00 2001
From: Fadhlan Hazmi <fadhlanhazmi@gmail.com>
Date: Sun, 1 Dec 2019 22:12:58 +0700
Subject: [PATCH 2/6] configure sort state in vacancyList
---
assets/js/components/VacancyList.jsx | 7 +++----
1 file changed, 3 insertions(+), 4 deletions(-)
diff --git a/assets/js/components/VacancyList.jsx b/assets/js/components/VacancyList.jsx
index 6a849382..f48a1229 100755
--- a/assets/js/components/VacancyList.jsx
+++ b/assets/js/components/VacancyList.jsx
@@ -12,7 +12,6 @@ export default class VacancyList extends React.Component {
user: PropTypes.object.isRequired,
userId: PropTypes.number.isRequired,
items: PropTypes.array,
- sort: PropTypes.string.isRequired,
};
static defaultProps = {
@@ -162,11 +161,11 @@ export default class VacancyList extends React.Component {
salary={this.props.salary}
/>
));
- if (this.props.sort === 'ASC') {
+ if (this.state.sort === 'ASC') {
return vacancies.sort((vac1, vac2) => {
return vac1.props.data.name.localeCompare(vac2.props.data.name);
});
- } else if (this.props.sort === 'DESC') {
+ } else if (this.state.sort === 'DESC') {
return vacancies.sort((vac1, vac2) => {
return vac2.props.data.name.localeCompare(vac1.props.data.name);
});
@@ -219,7 +218,7 @@ export default class VacancyList extends React.Component {
placeholder="Urutkan Berdasarkan"
className="dropdownApplicant"
selection
- options={this.state.sortBy}
+ options={this.state.sort}
onChange={this.handleChangeSortVacancy}
/>
<Grid container columns="eleven" doubling style={{ display: 'block' }}>
--
GitLab
From 7f44c48582d08ea63e3214551395430db0a246c2 Mon Sep 17 00:00:00 2001
From: Fadhlan Hazmi <fadhlanhazmi@gmail.com>
Date: Sun, 1 Dec 2019 22:16:57 +0700
Subject: [PATCH 3/6] make vacancies sort a function
---
assets/js/components/VacancyList.jsx | 30 +++++++++++++++++-----------
1 file changed, 18 insertions(+), 12 deletions(-)
diff --git a/assets/js/components/VacancyList.jsx b/assets/js/components/VacancyList.jsx
index f48a1229..f133e68d 100755
--- a/assets/js/components/VacancyList.jsx
+++ b/assets/js/components/VacancyList.jsx
@@ -42,8 +42,8 @@ export default class VacancyList extends React.Component {
],
sort: '',
sortBy: [
- { key: 'ASC', text: 'Ascending', value: 'ASC' },
- { key: 'DESC', text: 'Descending', value: 'DESC' },
+ { key: 'ASC', text: 'Nama (Ascending)', value: 'ASC' },
+ { key: 'DESC', text: 'Nama (Descending)', value: 'DESC' },
],
};
this.generateVacancies = this.generateVacancies.bind(this);
@@ -124,6 +124,20 @@ export default class VacancyList extends React.Component {
return filteredVacancies;
};
+ sortVacancies = (vacancies) => {
+ if (this.state.sort === 'ASC') {
+ return vacancies.sort((vac1, vac2) => {
+ return vac1.props.data.name.localeCompare(vac2.props.data.name);
+ });
+ } else if (this.state.sort === 'DESC') {
+ return vacancies.sort((vac1, vac2) => {
+ return vac2.props.data.name.localeCompare(vac1.props.data.name);
+ });
+ } else {
+ return vacancies;
+ }
+ };
+
handleChangeSalaryFilter = (e, data) => {
this.setState({ salaryFilter: data.value });
};
@@ -161,15 +175,7 @@ export default class VacancyList extends React.Component {
salary={this.props.salary}
/>
));
- if (this.state.sort === 'ASC') {
- return vacancies.sort((vac1, vac2) => {
- return vac1.props.data.name.localeCompare(vac2.props.data.name);
- });
- } else if (this.state.sort === 'DESC') {
- return vacancies.sort((vac1, vac2) => {
- return vac2.props.data.name.localeCompare(vac1.props.data.name);
- });
- }
+ vacancies = this.sortVacancies(vacancies);
vacancies = this.filterVacanciesBasedOnSalary(vacancies);
vacancies = this.filterVacanciesBasedOnVacancyStatus(vacancies);
return vacancies;
@@ -218,7 +224,7 @@ export default class VacancyList extends React.Component {
placeholder="Urutkan Berdasarkan"
className="dropdownApplicant"
selection
- options={this.state.sort}
+ options={this.state.sortBy}
onChange={this.handleChangeSortVacancy}
/>
<Grid container columns="eleven" doubling style={{ display: 'block' }}>
--
GitLab
From 8d00520d5c58d7f092ce9f204b434a1fc10ee8ab Mon Sep 17 00:00:00 2001
From: Fadhlan Hazmi <fadhlanhazmi@gmail.com>
Date: Sun, 1 Dec 2019 22:45:22 +0700
Subject: [PATCH 4/6] refactor sortBy options and change if-else to switch in
sort function
---
assets/js/components/VacancyList.jsx | 25 +++++++++++++------------
1 file changed, 13 insertions(+), 12 deletions(-)
diff --git a/assets/js/components/VacancyList.jsx b/assets/js/components/VacancyList.jsx
index f133e68d..d3c6939e 100755
--- a/assets/js/components/VacancyList.jsx
+++ b/assets/js/components/VacancyList.jsx
@@ -42,8 +42,8 @@ export default class VacancyList extends React.Component {
],
sort: '',
sortBy: [
- { key: 'ASC', text: 'Nama (Ascending)', value: 'ASC' },
- { key: 'DESC', text: 'Nama (Descending)', value: 'DESC' },
+ { key: 'NAME-ASC', text: 'Nama (Ascending)', value: 'NAME-ASC' },
+ { key: 'NAME-DESC', text: 'Nama (Descending)', value: 'NAME-DESC' },
],
};
this.generateVacancies = this.generateVacancies.bind(this);
@@ -125,16 +125,17 @@ export default class VacancyList extends React.Component {
};
sortVacancies = (vacancies) => {
- if (this.state.sort === 'ASC') {
- return vacancies.sort((vac1, vac2) => {
- return vac1.props.data.name.localeCompare(vac2.props.data.name);
- });
- } else if (this.state.sort === 'DESC') {
- return vacancies.sort((vac1, vac2) => {
- return vac2.props.data.name.localeCompare(vac1.props.data.name);
- });
- } else {
- return vacancies;
+ switch (this.state.sort) {
+ case 'NAME-ASC':
+ return vacancies.sort((vac1, vac2) => {
+ return vac1.props.data.name.localeCompare(vac2.props.data.name);
+ });
+ case 'NAME-DESC':
+ return vacancies.sort((vac1, vac2) => {
+ return vac2.props.data.name.localeCompare(vac1.props.data.name);
+ });
+ default:
+ return vacancies;
}
};
--
GitLab
From 3e0412795e586fcf3e301bc66d25b8c9fb508354 Mon Sep 17 00:00:00 2001
From: Fadhlan Hazmi <fadhlanhazmi@gmail.com>
Date: Sun, 1 Dec 2019 22:56:33 +0700
Subject: [PATCH 5/6] move vacancies length checking after filter
---
assets/js/components/VacancyList.jsx | 24 ++++++++++++------------
1 file changed, 12 insertions(+), 12 deletions(-)
diff --git a/assets/js/components/VacancyList.jsx b/assets/js/components/VacancyList.jsx
index d3c6939e..db672433 100755
--- a/assets/js/components/VacancyList.jsx
+++ b/assets/js/components/VacancyList.jsx
@@ -152,18 +152,6 @@ export default class VacancyList extends React.Component {
};
generateVacancies() {
- if (this.state.vacancies.length === 0) {
- return (
- <Item className="vacancyItems">
- <Grid.Row>
- <Container textAlign="center">
- <p>Tidak ada</p>
- <br />
- </Container>
- </Grid.Row>
- </Item>
- );
- }
if (this.props.user.role === 'student') {
let vacancies = this.state.vacancies.map((vacancy) => (
<Vacancy
@@ -179,6 +167,18 @@ export default class VacancyList extends React.Component {
vacancies = this.sortVacancies(vacancies);
vacancies = this.filterVacanciesBasedOnSalary(vacancies);
vacancies = this.filterVacanciesBasedOnVacancyStatus(vacancies);
+ if (vacancies.length === 0) {
+ return (
+ <Item className="vacancyItems">
+ <Grid.Row>
+ <Container textAlign="center">
+ <p>Tidak ada</p>
+ <br />
+ </Container>
+ </Grid.Row>
+ </Item>
+ );
+ }
return vacancies;
} else if (
(this.props.user.role === 'admin' &&
--
GitLab
From d4f1873879748a163522682285fee96a5c7653eb Mon Sep 17 00:00:00 2001
From: Fadhlan Hazmi <fadhlanhazmi@gmail.com>
Date: Sun, 1 Dec 2019 23:13:51 +0700
Subject: [PATCH 6/6] move sorting test from vacancyPage to vacancyList
---
assets/js/__test__/VacancyPage-test.jsx | 8 --------
assets/js/__test__/components/VacancyList-test.jsx | 11 +++++++++++
2 files changed, 11 insertions(+), 8 deletions(-)
diff --git a/assets/js/__test__/VacancyPage-test.jsx b/assets/js/__test__/VacancyPage-test.jsx
index 65165a81..593d95b0 100755
--- a/assets/js/__test__/VacancyPage-test.jsx
+++ b/assets/js/__test__/VacancyPage-test.jsx
@@ -41,14 +41,6 @@ describe('VacancyPage', () => {
expect(vacancyPage).to.exist;
});
- it('renders sort feature without problem', () => {
- const vacancyPage = ReactTestUtils.renderIntoDocument(
- <VacancyPage user={errorUser} />);
- vacancyPage.handleChange({}, { value: 'ASC' });
- expect(vacancyPage).to.exist;
- expect(vacancyPage.state.sort).to.equals('ASC');
- });
-
it('sets top menu active item according to page', () => {
ReactTestUtils.renderIntoDocument(<VacancyPage user={studentUser} />);
const topmenu = ReactTestUtils.renderIntoDocument(
diff --git a/assets/js/__test__/components/VacancyList-test.jsx b/assets/js/__test__/components/VacancyList-test.jsx
index 5a340a3a..0f10faae 100755
--- a/assets/js/__test__/components/VacancyList-test.jsx
+++ b/assets/js/__test__/components/VacancyList-test.jsx
@@ -372,6 +372,17 @@ describe('VacancyList', () => {
expect(vacancyList).to.exist;
});
+ it('sorts without problem for student user', () => {
+ const vacancyList = ReactTestUtils.renderIntoDocument(
+ <VacancyList items={newResponse} userId={3} user={studentUser} />,
+ );
+ vacancyList.state.vacancies = newResponse;
+ vacancyList.state.sort = 'NAME-ASC';
+ expect(vacancyList.generateVacancies()).to.exist;
+ vacancyList.state.sort = 'NAME-DESC';
+ expect(vacancyList.generateVacancies()).to.exist;
+ });
+
it('renders without problem for company', () => {
const vacancyList = ReactTestUtils.renderIntoDocument(
<VacancyList items={newResponse} userId={1} user={companyUser} />,
--
GitLab