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

assets/js/ApplicantPage.jsx

@@ -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>
     );
   }

assets/js/CompanyPage.jsx

@@ -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>
     );

assets/js/__test__/components/ApplicantList-test.jsx

@@ -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);

assets/js/__test__/components/CompanyList-test.jsx

@@ -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();
 

assets/js/components/ApplicantList.jsx

 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);
   }

assets/js/components/CompanyList.jsx

 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>