1506757352 191

.eslintrc

 {
-  "extends": ["airbnb", "prettier"],
+  "extends": ["airbnb", "prettier", "prettier/react"],
   "env": {
     "amd": true,
     "browser": true,

assets/js/AdminVacancyPage.jsx

@@ -4,9 +4,7 @@ import Tabs from './components/Tabs';
 import Pane from './components/Pane';
 import AdminVacancy from './components/AdminVacancy';
 
-export default class AdminVacancyPage extends React.Component {
-  render() {
-    return (
+const AdminVacancyPage = () => (
   <Tabs selected={0}>
     <Pane label="Lowongan Belum Terferivikasi">
       <Item.Group>
@@ -15,6 +13,6 @@ export default class AdminVacancyPage extends React.Component {
     </Pane>
     <Pane label=" Semua Lamaran" />
   </Tabs>
-    );
-  }
-}
+);
+
+export default AdminVacancyPage;

assets/js/ApplicantPage.jsx

@@ -3,25 +3,17 @@ import PropTypes from 'prop-types';
 import { Dropdown } from 'semantic-ui-react';
 import Tabs from './components/Tabs';
 import ApplicantList from './components/ApplicantList';
-import Applicant from './components/Applicant';
 import Pagination from './components/Pagination';
 import Server from './lib/Server';
+import { APPLICATION_STATUS } from './constants';
 
 export default class ApplicantPage extends React.Component {
-  static propTypes = {
-    user: PropTypes.object.isRequired,
-  };
-
   constructor(props) {
     super(props);
     /* istanbul ignore next */
     this.state = {
-      email: '',
-      password: '',
-      errorFlag: false,
-      company: { id: 1 },
       urls: [],
-      selected: `/companies/${this.props.user.data.company.id}/applications/`,
+      selected: `/companies/${props.user.data.company.id}/applications/`,
       refresh: 0,
     };
     this.getVacancyList = this.getVacancyList.bind(this);
@@ -29,22 +21,27 @@ export default class ApplicantPage extends React.Component {
     this.getVacancyList();
   }
 
-  getVacancyList = () => Server.get(
-    `/companies/${this.props.user.data.company.id}/vacancies/`,
-    false,
-  ).then(
+  getVacancyList = () => {
+    const {
+      user: {
+        data: {
+          company: { id },
+        },
+      },
+    } = this.props;
+
+    Server.get(`/companies/${id}/vacancies/`, false).then(
       (data) => {
         const { results } = data;
         const urls = [
           {
             key: 0,
-          value: `/companies/${this.props.user.data.company.id}/applications/`,
+            value: `/companies/${id}/applications/`,
             text: 'Semua Lowongan',
           },
         ];
         results.map((vacancy) => {
-        names.push(vacancy.name);
-        const url = `/companies/${this.props.user.data.company.id}/applications/${vacancy.id}/by_vacancy/`;
+          const url = `/companies/${id}/applications/${vacancy.id}/by_vacancy/`;
           const info = {
             key: vacancy.id,
             value: url,
@@ -55,17 +52,25 @@ export default class ApplicantPage extends React.Component {
         });
         this.setState({ urls });
       },
-    (error) => error.then((r) => {
+      (error) =>
+        error.then((r) => {
           this.modalAlert.open('Gagal mendapatkan daftar lowongan', r.detail);
         }),
     );
+  };
 
   handleChange = (e, data) => {
-    this.setState({ selected: data.value, refresh: this.state.refresh + 6 });
+    const { refresh } = this.state;
+    this.setState({ selected: data.value, refresh: refresh + 6 });
   };
 
   render() {
-    const { company } = this.props.user.data;
+    const { refresh, selected, urls } = this.state;
+    const {
+      user: {
+        data: { company },
+      },
+    } = this.props;
     return (
       <div>
         <div className="dropdownApplicant">
@@ -73,90 +78,31 @@ export default class ApplicantPage extends React.Component {
             placeholder="Semua Lowongan"
             search
             selection
-            options={this.state.urls}
+            options={urls}
             onChange={this.handleChange}
           />
         </div>
         <Tabs selected={0}>
+          {Object.keys(APPLICATION_STATUS).map((status) => (
             <Pagination
-            key={0 + this.state.refresh}
-            url={`${this.state.selected}`}
-            label="Semua Lamaran"
-            child={(
+              key={status + refresh}
+              url={`${selected}${status.isUsingQuery &&
+                `?status=${APPLICATION_STATUS[status]}`}`}
+              label={status.label}
+              child={
                 <ApplicantList
                   companyId={company.id}
-                status={Applicant.APPLICATION_STATUS.ALL}
-              />
-            )}
+                  status={APPLICATION_STATUS[status]}
                 />
-          <Pagination
-            key={1 + this.state.refresh}
-            url={`${this.state.selected}?status=${Applicant.APPLICATION_STATUS.NEW}`}
-            label="Lamaran Baru"
-            child={(
-              <ApplicantList
-                companyId={company.id}
-                status={Applicant.APPLICATION_STATUS.NEW}
-              />
-            )}
-          />
-          <Pagination
-            key={2 + this.state.refresh}
-            url={`${this.state.selected}?status=${Applicant.APPLICATION_STATUS.READ}`}
-            label="Lamaran Dibaca"
-            child={(
-              <ApplicantList
-                companyId={company.id}
-                status={Applicant.APPLICATION_STATUS.READ}
-              />
-            )}
-          />
-          <Pagination
-            key={3 + this.state.refresh}
-            url={`${this.state.selected}?status=${Applicant.APPLICATION_STATUS.BOOKMARKED}`}
-            label="Lamaran Ditandai"
-            child={(
-              <ApplicantList
-                companyId={company.id}
-                status={Applicant.APPLICATION_STATUS.BOOKMARKED}
-              />
-            )}
-          />
-          <Pagination
-            key={4 + this.state.refresh}
-            url={`${this.state.selected}?status=${Applicant.APPLICATION_STATUS.ACCEPTED}`}
-            label="Lamaran Diterima"
-            child={(
-              <ApplicantList
-                companyId={company.id}
-                status={Applicant.APPLICATION_STATUS.ACCEPTED}
-              />
-            )}
-          />
-          <Pagination
-            key={5 + this.state.refresh}
-            url={`${this.state.selected}?status=${Applicant.APPLICATION_STATUS.REJECTED}`}
-            label="Lamaran Ditolak"
-            child={(
-              <ApplicantList
-                companyId={company.id}
-                status={Applicant.APPLICATION_STATUS.REJECTED}
-              />
-            )}
-          />
-          <Pagination
-            key={6 + this.state.refresh}
-            url={`${this.state.selected}?status=${Applicant.APPLICATION_STATUS.FINISHED}`}
-            label="Lamaran Selesai"
-            child={(
-              <ApplicantList
-                companyId={company.id}
-                status={Applicant.APPLICATION_STATUS.FINISHED}
-              />
-            )}
+              }
             />
+          ))}
         </Tabs>
       </div>
     );
   }
 }
+
+ApplicantPage.propTypes = {
+  user: PropTypes.object.isRequired,
+};

assets/js/CompanyPage.jsx

 import React from 'react';
-import PropTypes from 'prop-types';
 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';
+import { COMPANY_STATUS } from './constants';
 
-export default class CompanyPage extends React.Component {
-  static propTypes = {
-    user: PropTypes.object.isRequired,
-  };
+const CompanyPage = () => {
+  const handleClick = () => window.open('/admin/');
 
-  handleClick = () => window.open('/admin/');
-
-  render() {
   return (
     <div>
       <div className="administrationButtons">
         <Button
-            onClick={this.handleClick}
+          onClick={handleClick}
           icon="dashboard"
           labelPosition="left"
           color="facebook"
           content="Buka Menu Administrasi"
         />
       </div>
-
       <Tabs selected={0}>
+        {Object.keys(COMPANY_STATUS).map((status) => (
           <Pagination
-            key={1}
-            url={`/companies/?status=${Company.COMPANY_STATUS.NEW}`}
+            key={status}
+            url={`/companies/?status=${COMPANY_STATUS[status]}`}
             label="Belum Diverifikasi"
-            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} />}
+            child={<CompanyList status={COMPANY_STATUS[status]} />}
           />
+        ))}
       </Tabs>
     </div>
   );
-  }
-}
+};
+
+export default CompanyPage;

assets/js/CreateVacancy.jsx

 import React from 'react';
 import PropTypes from 'prop-types';
-import {
-  Segment, Button, Form, Header, Icon, Input,
-} from 'semantic-ui-react';
+import { Segment, Button, Form, Header, Icon, Input } from 'semantic-ui-react';
 import { browserHistory } from 'react-router';
 import DatePicker from 'react-datepicker';
 import moment from 'moment';
@@ -11,11 +9,6 @@ import ModalAlert from './components/ModalAlert';
 import Server from './lib/Server';
 
 export default class CreateVacancy extends React.Component {
-  static propTypes = {
-    params: PropTypes.object.isRequired,
-    user: PropTypes.object.isRequired,
-  };
-
   constructor(props) {
     super(props);
     /* istanbul ignore next */
@@ -31,9 +24,9 @@ export default class CreateVacancy extends React.Component {
 
     this.state = {
       formLoading: false,
-      loading: !!this.props.params.id,
-      company: this.props.user.data.company,
-      vacancyId: this.props.params.id,
+      loading: !!props.params.id,
+      company: props.user.data.company,
+      vacancyId: props.params.id,
       open_time: moment(),
       close_time: moment(),
       name: '',
@@ -45,8 +38,8 @@ export default class CreateVacancy extends React.Component {
       responsibilities: '',
     };
 
-    if (this.state.vacancyId) {
-      Server.get(`/vacancies/${this.state.vacancyId}/`).then((r) => {
+    if (props.params.id) {
+      Server.get(`/vacancies/${props.params.id}/`).then((r) => {
         this.setState({
           description: r.description,
           benefits: r.benefits,
@@ -77,59 +70,91 @@ export default class CreateVacancy extends React.Component {
     this.setState({ [e.target.name]: e.target.value });
   };
 
-  handleDescription(value) {
-    this.setState({ description: value });
-  }
-
-  handleBenefits(value) {
-    this.setState({ benefits: value });
-  }
-
-  handleRequirements(value) {
-    this.setState({ requirements: value });
-  }
-
-  handleResponsibilities(value) {
-    this.setState({ responsibilities: value });
-  }
-
   handleSubmit = (e) => {
+    const {
+      name,
+      tag,
+      responsibilities,
+      description,
+      benefits,
+      requirements,
+      salary,
+      open_time,
+      close_time,
+      max_accepted_applicants,
+      working_period,
+      company,
+      vacancyId,
+    } = this.state;
     e.preventDefault();
     this.setState({ formLoading: true });
 
     const data = {};
-    data.name = this.state.name;
-    data.tag = this.state.tag;
-    data.responsibilities = this.state.responsibilities;
-    data.description = this.state.description;
-    data.benefits = this.state.benefits;
-    data.requirements = this.state.requirements;
-    data.salary = this.state.salary;
-    data.open_time = this.state.open_time.format();
-    data.close_time = this.state.close_time.format();
-    data.max_accepted_applicants = this.state.max_accepted_applicants;
-    data.working_period = this.state.working_period;
-    if (!this.state.vacancyId) {
-      data.company = this.state.company.id;
+    data.name = name;
+    data.tag = tag;
+    data.responsibilities = responsibilities;
+    data.description = description;
+    data.benefits = benefits;
+    data.requirements = requirements;
+    data.salary = salary;
+    data.open_time = open_time.format();
+    data.close_time = close_time.format();
+    data.max_accepted_applicants = max_accepted_applicants;
+    data.working_period = working_period;
+    if (!vacancyId) {
+      data.company = company.id;
     }
 
-    const url = this.state.vacancyId
-      ? `/vacancies/${this.state.vacancyId}/`
-      : '/vacancies/';
-    const method = this.state.vacancyId ? 'PATCH' : 'POST';
+    const url = vacancyId ? `/vacancies/${vacancyId}/` : '/vacancies/';
+    const method = vacancyId ? 'PATCH' : 'POST';
 
     Server.sendRequest(url, method, data).then(
       () => {
         browserHistory.push('/lowongan');
       },
-      (error) => error.then((r) => {
+      (error) =>
+        error.then((r) => {
           this.modalAlert.open('Gagal Membuat Lowongan', r.error);
           this.setState({ formLoading: false });
         }),
     );
   };
 
-  render = () => (
+  handleResponsibilities(value) {
+    this.setState({ responsibilities: value });
+  }
+
+  handleRequirements(value) {
+    this.setState({ requirements: value });
+  }
+
+  handleBenefits(value) {
+    this.setState({ benefits: value });
+  }
+
+  handleDescription(value) {
+    this.setState({ description: value });
+  }
+
+  render = () => {
+    const {
+      name,
+      tag,
+      responsibilities,
+      description,
+      benefits,
+      requirements,
+      salary,
+      open_time,
+      close_time,
+      max_accepted_applicants,
+      working_period,
+      company,
+      vacancyId,
+      loading,
+      formLoading,
+    } = this.state;
+    return (
       <div className="create-lowongan">
         <ModalAlert
           ref={(modal) => {
@@ -141,46 +166,41 @@ export default class CreateVacancy extends React.Component {
             <Icon name="briefcase" circular />
             <Header.Content>Lowongan KP</Header.Content>
           </Header>
-        <Form loading={this.state.formLoading} onSubmit={this.handleSubmit}>
+          <Form loading={formLoading} onSubmit={this.handleSubmit}>
             <Form.Field
               label="Posisi"
               name="name"
               control={Input}
               onChange={this.handleChange}
-            value={this.state.name}
+              value={name}
               required
             />
             <label htmlFor="description">
               {' '}
-            <b> Deskripsi Lowongan </b>
-            {' '}
+              <b> Deskripsi Lowongan </b>{' '}
             </label>
-          {!this.state.loading && (
-            <CKEditor
-              value={this.state.description}
-              onChange={this.handleDescription}
-            />
+            {!loading && (
+              <CKEditor value={description} onChange={this.handleDescription} />
             )}
-          <script>CKEDITOR.replace( 'description' );</script>
+            <script>CKEDITOR.replace( &lsquo;description&rsquo; );</script>
             <Form.Field
               label="Periode Kerja"
               name="working_period"
               control={Input}
               onChange={this.handleChange}
-            value={this.state.working_period}
+              value={working_period}
             />
             <label htmlFor="responsibilities">
               {' '}
-            <b> Tanggung Jawab Lowongan </b>
-            {' '}
+              <b> Tanggung Jawab Lowongan </b>{' '}
             </label>
-          {!this.state.loading && (
+            {!loading && (
               <CKEditor
-              value={this.state.responsibilities}
+                value={responsibilities}
                 onChange={this.handleResponsibilities}
               />
             )}
-          <script>CKEDITOR.replace( 'responsibilities' );</script>
+            <script>CKEDITOR.replace( &lsquo;responsibilities&rsquo; );</script>
             <br />
             <Form.Field
               label="Jumlah yang Diterima"
@@ -189,34 +209,29 @@ export default class CreateVacancy extends React.Component {
               min="1"
               control={Input}
               onChange={this.handleChange}
-            value={this.state.max_accepted_applicants}
+              value={max_accepted_applicants}
               required
             />
             <label htmlFor="benefits">
               {' '}
-            <b> Keuntungan </b>
-            {' '}
+              <b> Keuntungan </b>{' '}
             </label>
-          {!this.state.loading && (
-            <CKEditor
-              value={this.state.benefits}
-              onChange={this.handleBenefits}
-            />
+            {!loading && (
+              <CKEditor value={benefits} onChange={this.handleBenefits} />
             )}
-          <script>CKEDITOR.replace( 'benefits' );</script>
+            <script>CKEDITOR.replace( &lsquo;benefits&rsquo; );</script>
             <br />
             <label htmlFor="requirements">
               {' '}
-            <b> Persyaratan </b>
-            {' '}
+              <b> Persyaratan </b>{' '}
             </label>
-          {!this.state.loading && (
+            {!loading && (
               <CKEditor
-              value={this.state.requirements}
+                value={requirements}
                 onChange={this.handleRequirements}
               />
             )}
-          <script>CKEDITOR.replace( 'requirements' );</script>
+            <script>CKEDITOR.replace( &lsquo;requirements&rsquo; );</script>
             <br />
 
             <Form.Field
@@ -224,7 +239,7 @@ export default class CreateVacancy extends React.Component {
               name="tag"
               control={Input}
               onChange={this.handleChange}
-            value={this.state.tag}
+              value={tag}
             />
             <br />
 
@@ -235,14 +250,14 @@ export default class CreateVacancy extends React.Component {
               name="salary"
               control={Input}
               onChange={this.handleChange}
-            value={this.state.salary}
+              value={salary}
             />
             <Form.Group widths="equal">
               <Form.Field
                 className="open-time-field"
                 control={DatePicker}
                 label="Waktu Buka Lowongan"
-              selected={this.state.open_time}
+                selected={open_time}
                 onChange={this.setOpenTime}
                 required
               />
@@ -250,7 +265,7 @@ export default class CreateVacancy extends React.Component {
                 className="close-time-field"
                 control={DatePicker}
                 label="Waktu Tutup Lowongan"
-              selected={this.state.close_time}
+                selected={close_time}
                 onChange={this.setCloseTime}
                 required
               />
@@ -262,4 +277,10 @@ export default class CreateVacancy extends React.Component {
         </Segment>
       </div>