Fakultas Ilmu Komputer UI

Commit 92640561 authored by M. Reza Qorib's avatar M. Reza Qorib
Browse files

[#144502159] [Refactor] #37 refactor applicant and company list related components

parent 92e44a34
......@@ -2,6 +2,7 @@ import React from 'react';
import Tabs from './components/Tabs';
import ApplicantList from './components/ApplicantList';
import Applicant from './components/Applicant';
import Pagination from './components/Pagination';
export default class ApplicantPage extends React.Component {
......@@ -24,11 +25,49 @@ export default class ApplicantPage extends React.Component {
const company = this.props.user.data.company;
return (
<Tabs selected={0}>
<ApplicantList label="Lamaran Baru" key={1} companyId={company.id} url={`/companies/${company.id}/applications/?status=${Applicant.APPLICATION_STATUS.NEW}`} status={Applicant.APPLICATION_STATUS.NEW} />
<ApplicantList label="Lamaran Dibaca" key={2} companyId={company.id} url={`/companies/${company.id}/applications/?status=${Applicant.APPLICATION_STATUS.READ}`} status={Applicant.APPLICATION_STATUS.READ} />
<ApplicantList label="Lamaran Ditandai" key={3} companyId={company.id} url={`/companies/${company.id}/applications/?status=${Applicant.APPLICATION_STATUS.BOOKMARKED}`} status={Applicant.APPLICATION_STATUS.BOOKMARKED} />
<ApplicantList label="Lamaran Diterima" key={4} companyId={company.id} url={`/companies/${company.id}/applications/?status=${Applicant.APPLICATION_STATUS.ACCEPTED}`} status={Applicant.APPLICATION_STATUS.ACCEPTED} />
<ApplicantList label="Lamaran Ditolak" key={5} companyId={company.id} url={`/companies/${company.id}/applications/?status=${Applicant.APPLICATION_STATUS.REJECTED}`} status={Applicant.APPLICATION_STATUS.REJECTED} />
<Pagination
key={1}
url={`/companies/${company.id}/applications/?status=${Applicant.APPLICATION_STATUS.NEW}`}
label="Lamaran Baru"
child={
<ApplicantList companyId={company.id} status={Applicant.APPLICATION_STATUS.NEW} />
}
/>
<Pagination
key={2}
url={`/companies/${company.id}/applications/?status=${Applicant.APPLICATION_STATUS.READ}`}
label="Lamaran Dibaca"
child={
<ApplicantList companyId={company.id} status={Applicant.APPLICATION_STATUS.READ} />
}
/>
<Pagination
key={3}
url={`/companies/${company.id}/applications/?status=${Applicant.APPLICATION_STATUS.BOOKMARKED}`}
label="Lamaran Ditandai"
child={
<ApplicantList
companyId={company.id}
status={Applicant.APPLICATION_STATUS.BOOKMARKED}
/>
}
/>
<Pagination
key={4}
url={`/companies/${company.id}/applications/?status=${Applicant.APPLICATION_STATUS.ACCEPTED}`}
label="Lamaran Diterima"
child={
<ApplicantList companyId={company.id} status={Applicant.APPLICATION_STATUS.ACCEPTED} />
}
/>
<Pagination
key={5}
url={`/companies/${company.id}/applications/?status=${Applicant.APPLICATION_STATUS.REJECTED}`}
label="Lamaran Ditolak"
child={
<ApplicantList companyId={company.id} status={Applicant.APPLICATION_STATUS.REJECTED} />
}
/>
</Tabs>
);
}
......
......@@ -3,6 +3,7 @@ import { Button } from 'semantic-ui-react';
import Tabs from './components/Tabs';
import CompanyList from './components/CompanyList';
import Company from './components/Company';
import Pagination from './components/Pagination';
export default class CompanyPage extends React.Component {
......@@ -19,10 +20,38 @@ export default class CompanyPage extends React.Component {
<Button onClick={this.handleClick} icon="dashboard" labelPosition="left" color="facebook" content="Buka Menu Administrasi" />
</div>
<Tabs selected={0}>
<CompanyList label="Baru" key={1} url={`/companies/?status=${Company.COMPANY_STATUS.NEW}`} status={Company.COMPANY_STATUS.NEW} />
<CompanyList label="Terverifikasi" key={2} url={`/companies/?status=${Company.COMPANY_STATUS.VERIFIED}`} status={Company.COMPANY_STATUS.VERIFIED} />
<CompanyList label="Ditolak" key={3} url={`/companies/?status=${Company.COMPANY_STATUS.UNVERIFIED}`} status={Company.COMPANY_STATUS.UNVERIFIED} />
<CompanyList label="Semua Perusahaan" key={4} url={'/companies/'} status={Company.COMPANY_STATUS.ALL} />
<Pagination
key={1}
url={`/companies/?status=${Company.COMPANY_STATUS.NEW}`}
label="Baru"
child={
<CompanyList status={Company.COMPANY_STATUS.NEW} />
}
/>
<Pagination
key={2}
url={`/companies/?status=${Company.COMPANY_STATUS.VERIFIED}`}
label="Terverifikasi"
child={
<CompanyList status={Company.COMPANY_STATUS.VERIFIED} />
}
/>
<Pagination
key={3}
url={`/companies/?status=${Company.COMPANY_STATUS.UNVERIFIED}`}
label="Ditolak"
child={
<CompanyList status={Company.COMPANY_STATUS.UNVERIFIED} />
}
/>
<Pagination
key={4}
url={'/companies/'}
label="Semua Perusahaan"
child={
<CompanyList status={Company.COMPANY_STATUS.ALL} />
}
/>
</Tabs>
</div>
);
......
......@@ -69,14 +69,14 @@ describe('ApplicantList', () => {
it('renders without problem', () => {
const applicantList = ReactTestUtils.renderIntoDocument(
<ApplicantList status={Applicant.APPLICATION_STATUS.ACCEPTED} url="test" />);
<ApplicantList status={Applicant.APPLICATION_STATUS.ACCEPTED} />);
expect(applicantList).to.exist;
});
it('can update status', () => {
const applicantList = ReactTestUtils.renderIntoDocument(
<ApplicantList status={Applicant.APPLICATION_STATUS.ACCEPTED} url="test" />);
applicantList.setState({applications : response });
<ApplicantList status={Applicant.APPLICATION_STATUS.ACCEPTED} />);
applicantList.setState({applications: response });
expect(applicantList.state).to.not.equal(response);
applicantList.updateStatus(1, Applicant.APPLICATION_STATUS.BOOKMARKED);
......
......@@ -38,13 +38,13 @@ describe('CompanyList', () => {
it('renders without problem', () => {
const companyList = ReactTestUtils.renderIntoDocument(
<CompanyList status={Company.COMPANY_STATUS.VERIFIED} url="test" />);
<CompanyList status={Company.COMPANY_STATUS.VERIFIED} items={response} />);
expect(companyList).to.exist;
});
it('can update status', () => {
const companyList = ReactTestUtils.renderIntoDocument(
<CompanyList status={Company.COMPANY_STATUS.VERIFIED} url="test" />);
<CompanyList status={Company.COMPANY_STATUS.VERIFIED} items={response} />);
companyList.setState({ companies: response });
companyList.generateCompanies();
......
import React from 'react';
import { Item, Grid } from 'semantic-ui-react';
import Applicant from './Applicant';
import Server from '../lib/Server';
export default class ApplicantList extends React.Component {
static propTypes = {
url: React.PropTypes.string.isRequired,
items: React.PropTypes.array,
status: React.PropTypes.number.isRequired,
};
static defaultProps = {
items: [],
};
constructor(props) {
super(props);
/* istanbul ignore next */
this.state = { applications: [] };
Server.get(this.props.url, false).then((data) => {
this.setState({ applications: data });
});
this.state = { applications: this.props.items };
this.generateApplicants = this.generateApplicants.bind(this);
this.updateStatus = this.updateStatus.bind(this);
}
......
import React from 'react';
import { Item, Grid, Loader } from 'semantic-ui-react';
import { Item, Grid } from 'semantic-ui-react';
import Company from '../components/Company';
import Server from '../lib/Server';
export default class CompanyList extends React.Component {
static propTypes = {
url: React.PropTypes.string.isRequired,
items: React.PropTypes.array,
status: React.PropTypes.number.isRequired,
};
static defaultProps = {
items: [],
};
constructor(props) {
super(props);
/* istanbul ignore next */
this.state = { companies: [], loading: true };
Server.get(this.props.url, false).then((data) => {
this.setState({ companies: data.results, loading: false });
});
this.state = { companies: this.props.items };
this.generateCompanies = this.generateCompanies.bind(this);
this.updateStatus = this.updateStatus.bind(this);
......@@ -36,7 +35,8 @@ export default class CompanyList extends React.Component {
generateCompanies() {
return this.state.companies.map(company =>
(company.status === this.props.status || Company.COMPANY_STATUS.ALL === this.props.status) && (<Company
(company.status === this.props.status || Company.COMPANY_STATUS.ALL === this.props.status) &&
(<Company
key={company.id} data={company}
updateStatus={this.updateStatus}
/>),
......@@ -45,9 +45,8 @@ export default class CompanyList extends React.Component {
render = () => (
<div>
<Loader active={this.state.loading} />
<Grid>
<Item.Group style={{ width: '100%' }}>
<Grid container doubling>
<Item.Group relaxed style={{ width: '100%' }}>
{ this.generateCompanies() }
</Item.Group>
</Grid>
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment