Fakultas Ilmu Komputer UI

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