1506757352 191

.eslintrc

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

assets/js/AdminVacancyPage.jsx

@@ -4,17 +4,15 @@ import Tabs from './components/Tabs';
 import Pane from './components/Pane';
 import AdminVacancy from './components/AdminVacancy';
 
-export default class AdminVacancyPage extends React.Component {
-  render() {
-    return (
-      <Tabs selected={0}>
-        <Pane label="Lowongan Belum Terferivikasi">
-          <Item.Group>
-            <AdminVacancy />
-          </Item.Group>
-        </Pane>
-        <Pane label=" Semua Lamaran" />
-      </Tabs>
-    );
-  }
-}
+const AdminVacancyPage = () => (
+  <Tabs selected={0}>
+    <Pane label="Lowongan Belum Terferivikasi">
+      <Item.Group>
+        <AdminVacancy />
+      </Item.Group>
+    </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,43 +21,56 @@ export default class ApplicantPage extends React.Component {
     this.getVacancyList();
   }
 
-  getVacancyList = () => Server.get(
-    `/companies/${this.props.user.data.company.id}/vacancies/`,
-    false,
-  ).then(
-    (data) => {
-      const { results } = data;
-      const urls = [
-        {
-          key: 0,
-          value: `/companies/${this.props.user.data.company.id}/applications/`,
-          text: 'Semua Lowongan',
+  getVacancyList = () => {
+    const {
+      user: {
+        data: {
+          company: { id },
         },
-      ];
-      results.map((vacancy) => {
-        names.push(vacancy.name);
-        const url = `/companies/${this.props.user.data.company.id}/applications/${vacancy.id}/by_vacancy/`;
-        const info = {
-          key: vacancy.id,
-          value: url,
-          text: vacancy.name,
-        };
-        urls.push(info);
-        return urls;
-      });
-      this.setState({ urls });
-    },
-    (error) => error.then((r) => {
-      this.modalAlert.open('Gagal mendapatkan daftar lowongan', r.detail);
-    }),
-  );
+      },
+    } = this.props;
+
+    Server.get(`/companies/${id}/vacancies/`, false).then(
+      (data) => {
+        const { results } = data;
+        const urls = [
+          {
+            key: 0,
+            value: `/companies/${id}/applications/`,
+            text: 'Semua Lowongan',
+          },
+        ];
+        results.map((vacancy) => {
+          const url = `/companies/${id}/applications/${vacancy.id}/by_vacancy/`;
+          const info = {
+            key: vacancy.id,
+            value: url,
+            text: vacancy.name,
+          };
+          urls.push(info);
+          return urls;
+        });
+        this.setState({ urls });
+      },
+      (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}>
-          <Pagination
-            key={0 + this.state.refresh}
-            url={`${this.state.selected}`}
-            label="Semua Lamaran"
-            child={(
-              <ApplicantList
-                companyId={company.id}
-                status={Applicant.APPLICATION_STATUS.ALL}
-              />
-            )}
-          />
-          <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}
-              />
-            )}
-          />
+          {Object.keys(APPLICATION_STATUS).map((status) => (
+            <Pagination
+              key={status + refresh}
+              url={`${selected}${status.isUsingQuery &&
+                `?status=${APPLICATION_STATUS[status]}`}`}
+              label={status.label}
+              child={
+                <ApplicantList
+                  companyId={company.id}
+                  status={APPLICATION_STATUS[status]}
+                />
+              }
+            />
+          ))}
         </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}
-            icon="dashboard"
-            labelPosition="left"
-            color="facebook"
-            content="Buka Menu Administrasi"
-          />
-        </div>
-
-        <Tabs selected={0}>
+  return (
+    <div>
+      <div className="administrationButtons">
+        <Button
+          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} />}
+            child={<CompanyList status={COMPANY_STATUS[status]} />}
           />
-          <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>
-    );
-  }
-}
+        ))}
+      </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,189 +70,217 @@ 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) => {
-        this.modalAlert.open('Gagal Membuat Lowongan', r.error);
-        this.setState({ formLoading: false });
-      }),
+      (error) =>
+        error.then((r) => {
+          this.modalAlert.open('Gagal Membuat Lowongan', r.error);
+          this.setState({ formLoading: false });
+        }),
     );
   };
 
-  render = () => (
-    <div className="create-lowongan">
-      <ModalAlert
-        ref={(modal) => {
-          this.modalAlert = modal;
-        }}
-      />
-      <Segment className="form-segment">
-        <Header as="h2" icon textAlign="center">
-          <Icon name="briefcase" circular />
-          <Header.Content>Lowongan KP</Header.Content>
-        </Header>
-        <Form loading={this.state.formLoading} onSubmit={this.handleSubmit}>
-          <Form.Field
-            label="Posisi"
-            name="name"
-            control={Input}
-            onChange={this.handleChange}
-            value={this.state.name}
-            required
-          />
-          <label htmlFor="description">
-            {' '}
-            <b> Deskripsi Lowongan </b>
-            {' '}
-          </label>
-          {!this.state.loading && (
-            <CKEditor
-              value={this.state.description}
-              onChange={this.handleDescription}
-            />
-          )}
-          <script>CKEDITOR.replace( 'description' );</script>
-          <Form.Field
-            label="Periode Kerja"
-            name="working_period"
-            control={Input}
-            onChange={this.handleChange}
-            value={this.state.working_period}
-          />
-          <label htmlFor="responsibilities">
-            {' '}
-            <b> Tanggung Jawab Lowongan </b>
-            {' '}
-          </label>
-          {!this.state.loading && (
-            <CKEditor
-              value={this.state.responsibilities}
-              onChange={this.handleResponsibilities}
-            />
-          )}
-          <script>CKEDITOR.replace( 'responsibilities' );</script>
-          <br />
-          <Form.Field
-            label="Jumlah yang Diterima"
-            name="max_accepted_applicants"
-            type="number"
-            min="1"
-            control={Input}
-            onChange={this.handleChange}
-            value={this.state.max_accepted_applicants}
-            required
-          />
-          <label htmlFor="benefits">
-            {' '}
-            <b> Keuntungan </b>
-            {' '}
-          </label>
-          {!this.state.loading && (
-            <CKEditor
-              value={this.state.benefits}
-              onChange={this.handleBenefits}
-            />
-          )}
-          <script>CKEDITOR.replace( 'benefits' );</script>
-          <br />
-          <label htmlFor="requirements">
-            {' '}
-            <b> Persyaratan </b>
-            {' '}
-          </label>
-          {!this.state.loading && (
-            <CKEditor
-              value={this.state.requirements}
-              onChange={this.handleRequirements}
-            />
-          )}
-          <script>CKEDITOR.replace( 'requirements' );</script>
-          <br />
+  handleResponsibilities(value) {
+    this.setState({ responsibilities: value });
+  }
+
+  handleRequirements(value) {
+    this.setState({ requirements: value });
+  }
+
+  handleBenefits(value) {
+    this.setState({ benefits: value });
+  }
 
-          <Form.Field
-            label="Tag"
-            name="tag"
-            control={Input}
-            onChange={this.handleChange}
-            value={this.state.tag}
-          />
-          <br />
+  handleDescription(value) {
+    this.setState({ description: value });
+  }
 
-          <Form.Field
-            label="Gaji / Insentif (Rupiah per bulan)"
-            type="number"
-            min="0"
-            name="salary"
-            control={Input}