diff --git a/.prettierrc b/.prettierrc
new file mode 100644
index 0000000000000000000000000000000000000000..f208ee05f65770d46c7c9b0328727940fd63623c
--- /dev/null
+++ b/.prettierrc
@@ -0,0 +1,5 @@
+{
+  "trailingComma": "all",
+  "singleQuote": true,
+  "arrowParens": "always"
+}
diff --git a/assets/js/AdminVacancyPage.jsx b/assets/js/AdminVacancyPage.jsx
index 55f70ae56522faba1830f97a8dc3f97eea6b5162..c9cabc858b9e2579cee32a4461998d253bb5305b 100755
--- a/assets/js/AdminVacancyPage.jsx
+++ b/assets/js/AdminVacancyPage.jsx
@@ -4,13 +4,11 @@ import Pane from './components/Pane';
 import AdminVacancy from './components/AdminVacancy';
 import { Item } from 'semantic-ui-react';
 
-
 export default class AdminVacancyPage extends React.Component {
-
   render() {
     return (
       <Tabs selected={0}>
-        <Pane label="Lowongan Belum Terferivikasi" >
+        <Pane label="Lowongan Belum Terferivikasi">
           <Item.Group>
             <AdminVacancy />
           </Item.Group>
diff --git a/assets/js/ApplicantPage.jsx b/assets/js/ApplicantPage.jsx
index 4b3e29fbd00d399094f4f1d535d5db593e4d1350..50c444fb8e04f4645a1424bb10c8828ce7844dbd 100755
--- a/assets/js/ApplicantPage.jsx
+++ b/assets/js/ApplicantPage.jsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import { Dropdown } from 'semantic-ui-react';
 import Tabs from './components/Tabs';
 import ApplicantList from './components/ApplicantList';
@@ -8,7 +9,7 @@ import Server from './lib/Server';
 
 export default class ApplicantPage extends React.Component {
   static propTypes = {
-    user: React.PropTypes.object.isRequired,
+    user: PropTypes.object.isRequired,
   };
 
   constructor(props) {
@@ -29,7 +30,10 @@ export default class ApplicantPage extends React.Component {
   }
 
   getVacancyList = () =>
-    Server.get(`/companies/${this.props.user.data.company.id}/vacancies/`, false).then(
+    Server.get(
+      `/companies/${this.props.user.data.company.id}/vacancies/`,
+      false,
+    ).then(
       (data) => {
         const results = data.results;
         const urls = [
@@ -52,7 +56,7 @@ export default class ApplicantPage extends React.Component {
         });
         this.setState({ urls });
       },
-      error =>
+      (error) =>
         error.then((r) => {
           this.modalAlert.open('Gagal mendapatkan daftar lowongan', r.detail);
         }),
@@ -81,7 +85,10 @@ export default class ApplicantPage extends React.Component {
             url={`${this.state.selected}`}
             label="Semua Lamaran"
             child={
-              <ApplicantList companyId={company.id} status={Applicant.APPLICATION_STATUS.ALL} />
+              <ApplicantList
+                companyId={company.id}
+                status={Applicant.APPLICATION_STATUS.ALL}
+              />
             }
           />
           <Pagination
@@ -89,7 +96,10 @@ export default class ApplicantPage extends React.Component {
             url={`${this.state.selected}?status=${Applicant.APPLICATION_STATUS.NEW}`}
             label="Lamaran Baru"
             child={
-              <ApplicantList companyId={company.id} status={Applicant.APPLICATION_STATUS.NEW} />
+              <ApplicantList
+                companyId={company.id}
+                status={Applicant.APPLICATION_STATUS.NEW}
+              />
             }
           />
           <Pagination
@@ -97,7 +107,10 @@ export default class ApplicantPage extends React.Component {
             url={`${this.state.selected}?status=${Applicant.APPLICATION_STATUS.READ}`}
             label="Lamaran Dibaca"
             child={
-              <ApplicantList companyId={company.id} status={Applicant.APPLICATION_STATUS.READ} />
+              <ApplicantList
+                companyId={company.id}
+                status={Applicant.APPLICATION_STATUS.READ}
+              />
             }
           />
           <Pagination
diff --git a/assets/js/CompanyPage.jsx b/assets/js/CompanyPage.jsx
index 79042cbc5a8078dda3e659854b76e1e174039e4e..aaf9ce706257bdce9d0e29f30a8c968ccd6b163e 100755
--- a/assets/js/CompanyPage.jsx
+++ b/assets/js/CompanyPage.jsx
@@ -1,4 +1,5 @@
 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';
@@ -6,9 +7,8 @@ import Company from './components/Company';
 import Pagination from './components/Pagination';
 
 export default class CompanyPage extends React.Component {
-
   static propTypes = {
-    user: React.PropTypes.object.isRequired,
+    user: PropTypes.object.isRequired,
   };
 
   handleClick = () => window.open('/admin/');
@@ -17,7 +17,13 @@ export default class CompanyPage extends React.Component {
     return (
       <div>
         <div className="administrationButtons">
-          <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>
 
         <Tabs selected={0}>
@@ -25,33 +31,25 @@ export default class CompanyPage extends React.Component {
             key={1}
             url={`/companies/?status=${Company.COMPANY_STATUS.NEW}`}
             label="Belum Diverifikasi"
-            child={
-              <CompanyList status={Company.COMPANY_STATUS.NEW} />
-            }
+            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.COMPANY_STATUS.VERIFIED} />}
           />
           <Pagination
             key={3}
             url={`/companies/?status=${Company.COMPANY_STATUS.UNVERIFIED}`}
             label="Ditolak"
-            child={
-              <CompanyList status={Company.COMPANY_STATUS.UNVERIFIED} />
-            }
+            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.COMPANY_STATUS.ALL} />}
           />
         </Tabs>
       </div>
diff --git a/assets/js/CompanyProfile.jsx b/assets/js/CompanyProfile.jsx
index 2e361f68381644396f8b9f1e79ba845f25475d67..5ba41057ad05093770b2a27fb783ddad278ac446 100755
--- a/assets/js/CompanyProfile.jsx
+++ b/assets/js/CompanyProfile.jsx
@@ -1,17 +1,26 @@
 import React from 'react';
-import { Segment, Header, Image, Container, Form, Button, Icon, TextArea } from 'semantic-ui-react';
-import TopMenu from './components/TopMenu';
+import PropTypes from 'prop-types';
+import {
+  Segment,
+  Header,
+  Image,
+  Container,
+  Form,
+  Button,
+  Icon,
+  TextArea,
+} from 'semantic-ui-react';
 import { Doughnut } from 'react-chartjs-2';
+import TopMenu from './components/TopMenu';
 import Server from './lib/Server';
 import Dumper from './lib/Dumper';
 import ModalAlert from './components/ModalAlert';
 
 export default class CompanyProfile extends React.Component {
-
   static propTypes = {
-    route: React.PropTypes.object.isRequired,
-    params: React.PropTypes.object.isRequired,
-    user: React.PropTypes.object.isRequired,
+    route: PropTypes.object.isRequired,
+    params: PropTypes.object.isRequired,
+    user: PropTypes.object.isRequired,
   };
 
   constructor(props) {
@@ -39,25 +48,41 @@ export default class CompanyProfile extends React.Component {
     this.getProfile = this.getProfile.bind(this);
     this.handleChange = this.handleChange.bind(this);
     this.handleSubmit = this.handleSubmit.bind(this);
-    Server.get(`/companies/${this.props.user.data.company.id}/vacancies/`, false).then((result) => {
+    Server.get(
+      `/companies/${this.props.user.data.company.id}/vacancies/`,
+      false,
+    ).then((result) => {
       this.setState({ vacancies: result.results });
     });
-    Server.get(`/companies/${this.props.user.data.company.id}/applications/`, false).then((result) => {
+    Server.get(
+      `/companies/${this.props.user.data.company.id}/applications/`,
+      false,
+    ).then((result) => {
       this.setState({ applications: result.results });
     });
   }
 
   getProfile() {
-    return Server.get(`/companies/${this.state.id}/`).then((result) => {
-      this.setState({name:result.name, address:result.address, category:result.category, id:result.id,
-        description:result.description, refresh: this.state.refresh + 1, website:result.website
-      });
-      if(result.logo != '') {
-        this.setState({logo: result.logo});
-      }
-    }, error => error.then(() => {
-      this.state.name = 'Gagal mendapatkan informasi';
-    }));
+    return Server.get(`/companies/${this.state.id}/`).then(
+      (result) => {
+        this.setState({
+          name: result.name,
+          address: result.address,
+          category: result.category,
+          id: result.id,
+          description: result.description,
+          refresh: this.state.refresh + 1,
+          website: result.website,
+        });
+        if (result.logo != '') {
+          this.setState({ logo: result.logo });
+        }
+      },
+      (error) =>
+        error.then(() => {
+          this.state.name = 'Gagal mendapatkan informasi';
+        }),
+    );
   }
 
   handleSubmit = (e) => {
@@ -70,13 +95,25 @@ export default class CompanyProfile extends React.Component {
       }
     });
     this.setState({ loading: true });
-    Server.submit(`/companies/${this.state.id}/profile/`, submitForm, 'PATCH').then(() => {
-      this.setState({ loading: false });
-      this.modalAlert.open('Profil berhasil diperbaharui', 'Silakan periksa kembali profil anda', this.getProfile);
-    }, error => error.then((r) => {
-      this.setState({ loading: false });
-      this.modalAlert.open('Pembaharuan profil gagal', Dumper.dump(r));
-    }));
+    Server.submit(
+      `/companies/${this.state.id}/profile/`,
+      submitForm,
+      'PATCH',
+    ).then(
+      () => {
+        this.setState({ loading: false });
+        this.modalAlert.open(
+          'Profil berhasil diperbaharui',
+          'Silakan periksa kembali profil anda',
+          this.getProfile,
+        );
+      },
+      (error) =>
+        error.then((r) => {
+          this.setState({ loading: false });
+          this.modalAlert.open('Pembaharuan profil gagal', Dumper.dump(r));
+        }),
+    );
   };
 
   handleChange = (e) => {
@@ -86,44 +123,44 @@ export default class CompanyProfile extends React.Component {
   };
 
   render() {
-    const defaultLogo = 'https://semantic-ui.com/images/wireframe/square-image.png';
+    const defaultLogo =
+      'https://semantic-ui.com/images/wireframe/square-image.png';
     const { applications } = this.state;
-    const rejectedApplications = applications.filter(apl => apl.status === 3).length;
-    const acceptedApplications = applications.filter(apl => apl.status === 4).length;
-    const sisaApplications = applications.length - rejectedApplications - acceptedApplications;
+    const rejectedApplications = applications.filter((apl) => apl.status === 3)
+      .length;
+    const acceptedApplications = applications.filter((apl) => apl.status === 4)
+      .length;
+    const sisaApplications =
+      applications.length - rejectedApplications - acceptedApplications;
 
     const chartData = {
-      labels: [
-        'Lamaran Ditolak',
-        'Lamaran Diterima',
-        'Lamaran Pending',
+      labels: ['Lamaran Ditolak', 'Lamaran Diterima', 'Lamaran Pending'],
+      datasets: [
+        {
+          data: [rejectedApplications, acceptedApplications, sisaApplications],
+          backgroundColor: ['#FF6384', '#36A2EB', '#FFCE56'],
+          hoverBackgroundColor: ['#FF6384', '#36A2EB', '#FFCE56'],
+        },
       ],
-      datasets: [{
-        data: [rejectedApplications, acceptedApplications, sisaApplications],
-        backgroundColor: [
-          '#FF6384',
-          '#36A2EB',
-          '#FFCE56',
-        ],
-        hoverBackgroundColor: [
-          '#FF6384',
-          '#36A2EB',
-          '#FFCE56',
-        ],
-      }],
-    }
+    };
     return (
       <div className="companyProfile">
-        <Segment className="segmentProfileCompany" >
+        <Segment className="segmentProfileCompany">
           <Header as="h2" icon textAlign="center">
-            <Image src={this.state.logo || defaultLogo} size="small" shape="circular" />
+            <Image
+              src={this.state.logo || defaultLogo}
+              size="small"
+              shape="circular"
+            />
           </Header>
           <Container textAlign="center" className="profile-biodata">
             <div className="biodataCompany">
-              <h2>{ this.state.name }</h2>
-              <h3>{ this.state.address }</h3>
-              <p>{ this.state.category } - { this.state.description }</p>
-              <p>{ this.state.website }</p>
+              <h2>{this.state.name}</h2>
+              <h3>{this.state.address}</h3>
+              <p>
+                {this.state.category} - {this.state.description}
+              </p>
+              <p>{this.state.website}</p>
             </div>
           </Container>
           <Container textAlign="center" className="statistik">
@@ -135,35 +172,76 @@ export default class CompanyProfile extends React.Component {
         <Segment className="profileFormCompany">
           <Header as="h3" textAlign="center">
             <Icon name="edit" />
-            <Header.Content>
-              Edit Profile Page
-            </Header.Content>
+            <Header.Content>Edit Profile Page</Header.Content>
           </Header>
-          <ModalAlert ref={(modal) => { this.modalAlert = modal; }} />
-          <Form size="small" ref={(input) => { this.form = input; }} key={this.state.refresh} onSubmit={this.handleSubmit}>
+          <ModalAlert
+            ref={(modal) => {
+              this.modalAlert = modal;
+            }}
+          />
+          <Form
+            size="small"
+            ref={(input) => {
+              this.form = input;
+            }}
+            key={this.state.refresh}
+            onSubmit={this.handleSubmit}
+          >
             <Form.Field>
               <label htmlFor="name">Nama Perusahaan</label>
-              <input placeholder="Nama Perusahaan" name="name" onChange={this.handleChange}
-                     defaultValue={this.state.name === null ? null : this.state.name}/>
+              <input
+                placeholder="Nama Perusahaan"
+                name="name"
+                onChange={this.handleChange}
+                defaultValue={this.state.name === null ? null : this.state.name}
+              />
             </Form.Field>
             <Form.Field>
               <label htmlFor="address">Alamat Perusahaan</label>
-              <input placeholder="Alamat Perusahaan" name="address" onChange={this.handleChange}
-                     defaultValue={this.state.address === null ? null : this.state.address}/>
+              <input
+                placeholder="Alamat Perusahaan"
+                name="address"
+                onChange={this.handleChange}
+                defaultValue={
+                  this.state.address === null ? null : this.state.address
+                }
+              />
             </Form.Field>
             <Form.Field>
               <label htmlFor="description">Deskripsi</label>
-              <TextArea placeholder='Try adding multiple lines' name="description" onChange={this.handleChange}
-               autoHeight
-               defaultValue={this.state.description === null ? null : this.state.description}/>
+              <TextArea
+                placeholder="Try adding multiple lines"
+                name="description"
+                onChange={this.handleChange}
+                autoHeight
+                defaultValue={
+                  this.state.description === null
+                    ? null
+                    : this.state.description
+                }
+              />
             </Form.Field>
             <Form.Field>
               <label htmlFor="website">Website</label>
-              <input placeholder="Alamat Website" name="website" onChange={this.handleChange}
-                     defaultValue={this.state.website === null ? null : this.state.website}/>
+              <input
+                placeholder="Alamat Website"
+                name="website"
+                onChange={this.handleChange}
+                defaultValue={
+                  this.state.website === null ? null : this.state.website
+                }
+              />
             </Form.Field>
-              <Button type="submit" size="small" loading={this.state.loading} primary floated="right">Submit</Button>
-            </Form>
+            <Button
+              type="submit"
+              size="small"
+              loading={this.state.loading}
+              primary
+              floated="right"
+            >
+              Submit
+            </Button>
+          </Form>
         </Segment>
       </div>
     );
diff --git a/assets/js/CreateVacancy.jsx b/assets/js/CreateVacancy.jsx
index 240b68620f119da77a51aa0f84bdee30d76e7404..484289f36be688554d8362c454cf175f197541d4 100755
--- a/assets/js/CreateVacancy.jsx
+++ b/assets/js/CreateVacancy.jsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import { Segment, Button, Form, Header, Icon, Input } from 'semantic-ui-react';
 import { browserHistory } from 'react-router';
 import DatePicker from 'react-datepicker';
@@ -8,10 +9,9 @@ import ModalAlert from './components/ModalAlert';
 import Server from './lib/Server';
 
 export default class CreateVacancy extends React.Component {
-
   static propTypes = {
-    params: React.PropTypes.object.isRequired,
-    user: React.PropTypes.object.isRequired,
+    params: PropTypes.object.isRequired,
+    user: PropTypes.object.isRequired,
   };
 
   constructor(props) {
@@ -47,7 +47,7 @@ export default class CreateVacancy extends React.Component {
         this.setState({
           description: r.description,
           benefits: r.benefits,
-          requirements : r.requirements,
+          requirements: r.requirements,
           responsibilities: r.responsibilities,
           name: r.name,
           salary: r.salary,
@@ -78,7 +78,6 @@ export default class CreateVacancy extends React.Component {
     this.setState({ description: value });
   }
 
-
   handleBenefits(value) {
     this.setState({ benefits: value });
   }
@@ -110,54 +109,127 @@ export default class CreateVacancy extends React.Component {
       data.company = this.state.company.id;
     }
 
-    const url = this.state.vacancyId ? `/vacancies/${this.state.vacancyId}/` : '/vacancies/';
+    const url = this.state.vacancyId
+      ? `/vacancies/${this.state.vacancyId}/`
+      : '/vacancies/';
     const method = this.state.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 });
-    }));
+    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 });
+        }),
+    );
   };
 
   render = () => (
-    <div className="create-lowongan" >
-      <ModalAlert ref={(modal) => { this.modalAlert = modal; }} />
+    <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.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} /> }
+          <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} /> }
+          <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>  
+          <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} /> }
+          <label htmlFor="requirements">
+            {' '}
+            <b> Persyaratan </b>{' '}
+          </label>
+          {!this.state.loading && (
+            <CKEditor
+              value={this.state.requirements}
+              onChange={this.handleRequirements}
+            />
+          )}
           <script>CKEDITOR.replace( 'requirements' );</script>
           <br />
 
-          <Form.Field label="Tag" name="tag" control={Input} onChange={this.handleChange} value={this.state.tag} />
+          <Form.Field
+            label="Tag"
+            name="tag"
+            control={Input}
+            onChange={this.handleChange}
+            value={this.state.tag}
+          />
           <br />
 
-          <Form.Field label="Gaji / Insentif (Rupiah per bulan)" type="number" min="0" name="salary" control={Input} onChange={this.handleChange} value={this.state.salary} />
+          <Form.Field
+            label="Gaji / Insentif (Rupiah per bulan)"
+            type="number"
+            min="0"
+            name="salary"
+            control={Input}
+            onChange={this.handleChange}
+            value={this.state.salary}
+          />
           <Form.Group widths="equal">
             <Form.Field
               className="open-time-field"
@@ -176,7 +248,9 @@ export default class CreateVacancy extends React.Component {
               required
             />
           </Form.Group>
-          <Button type="submit" primary floated="right">Submit</Button>
+          <Button type="submit" primary floated="right">
+            Submit
+          </Button>
         </Form>
       </Segment>
     </div>
diff --git a/assets/js/Dashboard.jsx b/assets/js/Dashboard.jsx
index 4eb0bd48813a0f3ff799127d7047367ea4013621..39a43db48440e08bc47e4566d4af8dbb3144315a 100755
--- a/assets/js/Dashboard.jsx
+++ b/assets/js/Dashboard.jsx
@@ -1,15 +1,16 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import TopMenu from './components/TopMenu';
 import Footer from './components/Footer';
 
 export default class Dashboard extends React.Component {
   static propTypes = {
-    user: React.PropTypes.object.isRequired,
-    route: React.PropTypes.object.isRequired,
-    params: React.PropTypes.object.isRequired,
-    children: React.PropTypes.oneOfType([
-      React.PropTypes.arrayOf(React.PropTypes.node),
-      React.PropTypes.node,
+    user: PropTypes.object.isRequired,
+    route: PropTypes.object.isRequired,
+    params: PropTypes.object.isRequired,
+    children: PropTypes.oneOfType([
+      PropTypes.arrayOf(PropTypes.node),
+      PropTypes.node,
     ]).isRequired,
   };
 
diff --git a/assets/js/EditProfile.jsx b/assets/js/EditProfile.jsx
index c067fce36f80f807584bf3773a3574af836d2b9e..57d663f3c8fd029c4e481751de7c37570711f16d 100644
--- a/assets/js/EditProfile.jsx
+++ b/assets/js/EditProfile.jsx
@@ -1,16 +1,24 @@
 import React from 'react';
-import { Segment, Image, Header, Icon, Checkbox, Button, Form } from 'semantic-ui-react';
+import PropTypes from 'prop-types';
+import {
+  Segment,
+  Image,
+  Header,
+  Icon,
+  Checkbox,
+  Button,
+  Form,
+} from 'semantic-ui-react';
 import Server from './lib/Server';
 import Storage from './lib/Storage';
 import ModalAlert from './components/ModalAlert';
 import Dumper from './lib/Dumper';
 
 export default class ProfilePage extends React.Component {
-
   static propTypes = {
-    route: React.PropTypes.object.isRequired,
-    params: React.PropTypes.object.isRequired,
-    user: React.PropTypes.object.isRequired,
+    route: PropTypes.object.isRequired,
+    params: PropTypes.object.isRequired,
+    user: PropTypes.object.isRequired,
   };
 
   constructor(props) {
@@ -96,65 +104,71 @@ export default class ProfilePage extends React.Component {
   }
 
   getProfile() {
-    const id = this.props.route.own ? this.props.user.data.student.id : this.props.params.id;
-    return Server.get(`/students/${id}/`).then((data) => {
-      this.setState({
-        id: data.id,
-        name: data.name,
-        npm: data.npm,
-        resume: data.resume,
-        major: data.major,
-        batch: data.batch,
-        email: data.user.email,
-        gender: data.gender,
-        region: data.region,
-        alamat: data.alamat,
-        cityOfBirth: data.birth_place,
-        dateOfBirth: this.parseIndonesianDateFormat(data.birth_date),
-        phone_number: data.phone_number,
-        portfolio_link: data.portfolio_link,
-        photo: data.photo,
-        show_transcript: data.show_transcript,
-        acceptedNo: data.accepted_no,
-        readNo: data.read_no,
-        bagikanTranskrip: data.show_transcript,
-        refresh: this.state.refresh + 1,
-        age: data.age,
-        intro: data.intro,
-        expected_salary: data.expected_salary,
-        job_seeking_status: data.job_seeking_status,
-        volunteer: data.volunteer,
-        linkedin_url: data.linkedin_url,
-        hackerrank_url: data.hackerrank_url,
-        self_description: data.self_description,
-        student_gpa: data.student_gpa,
-        website_url: data.website_url,
-        latest_work: data.latest_work,
-        latest_work_desc: data.latest_work_desc,
-        skills: data.skills,
-        github_url: data.github_url,
-        awards: data.awards,
-        projects: data.projects,
-        certification: data.certification,
-        languages: data.languages,
-        seminar: data.seminar,
-      });
-      if (this.props.route.own) {
-        const newSession = this.props.user.data;
-        newSession.student = data;
-        Storage.set('user-data', newSession);
-        window.scrollTo(0, 0);
-      }
-    }, error => error.then(() => {
-      this.state.name = 'Gagal mendapatkan informasi';
-    }));
+    const id = this.props.route.own
+      ? this.props.user.data.student.id
+      : this.props.params.id;
+    return Server.get(`/students/${id}/`).then(
+      (data) => {
+        this.setState({
+          id: data.id,
+          name: data.name,
+          npm: data.npm,
+          resume: data.resume,
+          major: data.major,
+          batch: data.batch,
+          email: data.user.email,
+          gender: data.gender,
+          region: data.region,
+          alamat: data.alamat,
+          cityOfBirth: data.birth_place,
+          dateOfBirth: this.parseIndonesianDateFormat(data.birth_date),
+          phone_number: data.phone_number,
+          portfolio_link: data.portfolio_link,
+          photo: data.photo,
+          show_transcript: data.show_transcript,
+          acceptedNo: data.accepted_no,
+          readNo: data.read_no,
+          bagikanTranskrip: data.show_transcript,
+          refresh: this.state.refresh + 1,
+          age: data.age,
+          intro: data.intro,
+          expected_salary: data.expected_salary,
+          job_seeking_status: data.job_seeking_status,
+          volunteer: data.volunteer,
+          linkedin_url: data.linkedin_url,
+          hackerrank_url: data.hackerrank_url,
+          self_description: data.self_description,
+          student_gpa: data.student_gpa,
+          website_url: data.website_url,
+          latest_work: data.latest_work,
+          latest_work_desc: data.latest_work_desc,
+          skills: data.skills,
+          github_url: data.github_url,
+          awards: data.awards,
+          projects: data.projects,
+          certification: data.certification,
+          languages: data.languages,
+          seminar: data.seminar,
+        });
+        if (this.props.route.own) {
+          const newSession = this.props.user.data;
+          newSession.student = data;
+          Storage.set('user-data', newSession);
+          window.scrollTo(0, 0);
+        }
+      },
+      (error) =>
+        error.then(() => {
+          this.state.name = 'Gagal mendapatkan informasi';
+        }),
+    );
   }
 
   isFromGithubLinkValid = () => {
     var github_link = this.state.form.github_url;
     if (github_link == null) return;
-    return github_link.includes("https://github.com/");
-  }
+    return github_link.includes('https://github.com/');
+  };
 
   parseIndonesianDateFormat(dateIndex) {
     const monthNameIndex = {
@@ -181,7 +195,9 @@ export default class ProfilePage extends React.Component {
   handleSubmit = (e) => {
     e.preventDefault();
     if (!this.isFromGithubLinkValid()) {
-      alert("Pastikan link github yang anda tulis benar. (Berpola : https://github.com/<username>");
+      alert(
+        'Pastikan link github yang anda tulis benar. (Berpola : https://github.com/<username>',
+      );
       return;
     }
 
@@ -192,13 +208,25 @@ export default class ProfilePage extends React.Component {
       }
     });
     this.setState({ loading: true });
-    Server.submit(`/students/${this.state.id}/profile/`, submitForm, 'PATCH').then(() => {
-      this.setState({ loading: false });
-      this.modalAlert.open('Profil berhasil diperbaharui', 'Silakan periksa kembali profil anda', this.getProfile);
-    }, error => error.then((r) => {
-      this.setState({ loading: false });
-      this.modalAlert.open('Pembaharuan profil gagal', Dumper.dump(r));
-    }));
+    Server.submit(
+      `/students/${this.state.id}/profile/`,
+      submitForm,
+      'PATCH',
+    ).then(
+      () => {
+        this.setState({ loading: false });
+        this.modalAlert.open(
+          'Profil berhasil diperbaharui',
+          'Silakan periksa kembali profil anda',
+          this.getProfile,
+        );
+      },
+      (error) =>
+        error.then((r) => {
+          this.setState({ loading: false });
+          this.modalAlert.open('Pembaharuan profil gagal', Dumper.dump(r));
+        }),
+    );
   };
 
   handleFile = (e) => {
@@ -222,14 +250,14 @@ export default class ProfilePage extends React.Component {
   handleRadioGender = (e, { value }) => {
     const form = this.state.form;
     form.gender = value;
-    this.setState({ form })
-  }
+    this.setState({ form });
+  };
 
   handleRadio = (e, { value }) => {
     const form = this.state.form;
     form.job_seeking_status = value;
     this.setState({ form });
-  }
+  };
 
   gotoLink = (url) => {
     const win = window.open(url);
@@ -246,22 +274,42 @@ export default class ProfilePage extends React.Component {
         <Segment className="profile-form">
           <Header as="h3" textAlign="center">
             <Icon name="edit" />
-            <Header.Content>
-              Edit Profile Page
-            </Header.Content>
+            <Header.Content>Edit Profile Page</Header.Content>
           </Header>
-          <ModalAlert ref={(modal) => { this.modalAlert = modal; }} />
-          <Form ref={(input) => { this.form = input; }} key={this.state.refresh} size="small" onSubmit={this.handleSubmit}>
+          <ModalAlert
+            ref={(modal) => {
+              this.modalAlert = modal;
+            }}
+          />
+          <Form
+            ref={(input) => {
+              this.form = input;
+            }}
+            key={this.state.refresh}
+            size="small"
+            onSubmit={this.handleSubmit}
+          >
             <Form.Field>
               <label htmlFor="photo">Profile Picture</label>
-              <input onChange={this.handleFile} placeholder="Profile Photo.jpg" name="photo" type="File" />
+              <input
+                onChange={this.handleFile}
+                placeholder="Profile Photo.jpg"
+                name="photo"
+                type="File"
+              />
             </Form.Field>
             <Form.Field>
               <label htmlFor="email">Email</label>
               <input
                 onChange={this.handleChange}
-                placeholder={this.state.email === null ? 'jojon@email.com' : this.state.email}
-                defaultValue={this.state.email === null ? null : this.state.email}
+                placeholder={
+                  this.state.email === null
+                    ? 'jojon@email.com'
+                    : this.state.email
+                }
+                defaultValue={
+                  this.state.email === null ? null : this.state.email
+                }
                 name="email"
               />
             </Form.Field>
@@ -269,8 +317,16 @@ export default class ProfilePage extends React.Component {
               <label htmlFor="phone_number">No. Hp</label>
               <input
                 onChange={this.handleChange}
-                placeholder={this.state.phone_number === null ? '08123456789' : this.state.phone_number}
-                defaultValue={this.state.phone_number === null ? null : this.state.phone_number}
+                placeholder={
+                  this.state.phone_number === null
+                    ? '08123456789'
+                    : this.state.phone_number
+                }
+                defaultValue={
+                  this.state.phone_number === null
+                    ? null
+                    : this.state.phone_number
+                }
                 name="phone_number"
               />
             </Form.Field>
@@ -278,27 +334,39 @@ export default class ProfilePage extends React.Component {
               <label htmlFor="gender">Jenis Kelamin</label>
               <Form.Radio
                 label="Perempuan"
-                name='gender'
+                name="gender"
                 value="Perempuan"
                 onClick={this.handleRadioGender}
               />
               <Form.Radio
                 label="Laki-laki"
-                name='gender'
+                name="gender"
                 value="Laki-laki"
                 onClick={this.handleRadioGender}
               />
             </Form.Field>
             <Form.Field>
               <label htmlFor="self_description">Deskripsi Diri</label>
-              <input onChange={this.handleChange} placeholder="Saya suka belajar" name="self_description" />
+              <input
+                onChange={this.handleChange}
+                placeholder="Saya suka belajar"
+                name="self_description"
+              />
             </Form.Field>
             <Form.Field>
               <label htmlFor="linkedin_url">URL Profile LinkedIn</label>
               <input
                 onChange={this.handleChange}
-                placeholder={this.state.linkedin_url === null ? 'https://www.linkedin.com/in/jojo/' : this.state.linkedin_url}
-                defaultValue={this.state.linkedin_url === null ? null : this.state.linkedin_url}
+                placeholder={
+                  this.state.linkedin_url === null
+                    ? 'https://www.linkedin.com/in/jojo/'
+                    : this.state.linkedin_url
+                }
+                defaultValue={
+                  this.state.linkedin_url === null
+                    ? null
+                    : this.state.linkedin_url
+                }
                 name="linkedin_url"
               />
             </Form.Field>
@@ -306,8 +374,16 @@ export default class ProfilePage extends React.Component {
               <label htmlFor="hackerrank_url">URL Profile Hackerrank</label>
               <input
                 onChange={this.handleChange}
-                placeholder={this.state.hackerrank_url === null ? 'https://www.hackerrank.com/james' : this.state.hackerrank_url}
-                defaultValue={this.state.hackerrank_url === null ? null : this.state.hackerrank_url}
+                placeholder={
+                  this.state.hackerrank_url === null
+                    ? 'https://www.hackerrank.com/james'
+                    : this.state.hackerrank_url
+                }
+                defaultValue={
+                  this.state.hackerrank_url === null
+                    ? null
+                    : this.state.hackerrank_url
+                }
                 name="hackerrank_url"
               />
             </Form.Field>
@@ -315,9 +391,16 @@ export default class ProfilePage extends React.Component {
               <label htmlFor="portfolio_link">Portfolio Link</label>
               <input
                 onChange={this.handleChange}
-                placeholder={this.state.portfolio_link === null ? 'https://www.example.com/myproject/' :
-                  this.state.portfolio_link}
-                defaultValue={this.state.portfolio_link === null ? null : this.state.portfolio_link}
+                placeholder={
+                  this.state.portfolio_link === null
+                    ? 'https://www.example.com/myproject/'
+                    : this.state.portfolio_link
+                }
+                defaultValue={
+                  this.state.portfolio_link === null
+                    ? null
+                    : this.state.portfolio_link
+                }
                 name="portfolio_link"
               />
             </Form.Field>
@@ -325,21 +408,37 @@ export default class ProfilePage extends React.Component {
               <label htmlFor="website_url">Website URL</label>
               <input
                 onChange={this.handleChange}
-                placeholder={this.state.website_url === null ? 'https://www.example.com/' : this.state.website_url}
-                defaultValue={this.state.website_url === null ? null : this.state.website_url}
+                placeholder={
+                  this.state.website_url === null
+                    ? 'https://www.example.com/'
+                    : this.state.website_url
+                }
+                defaultValue={
+                  this.state.website_url === null
+                    ? null
+                    : this.state.website_url
+                }
                 name="website_url"
               />
             </Form.Field>
             <Form.Field>
               <label htmlFor="linkedin_url">URL Profile Github</label>
-              <input onChange={this.handleChange} placeholder="https://github.com/bob" name="github_url" />
+              <input
+                onChange={this.handleChange}
+                placeholder="https://github.com/bob"
+                name="github_url"
+              />
             </Form.Field>
             <Form.Field>
               <label htmlFor="region">Region</label>
               <input
                 onChange={this.handleChange}
-                placeholder={this.state.region === null ? 'Indonesia' : this.state.region}
-                defaultValue={this.state.region === null ? null : this.state.region}
+                placeholder={
+                  this.state.region === null ? 'Indonesia' : this.state.region
+                }
+                defaultValue={
+                  this.state.region === null ? null : this.state.region
+                }
                 name="region"
               />
             </Form.Field>
@@ -347,30 +446,58 @@ export default class ProfilePage extends React.Component {
               <label htmlFor="alamat">Alamat</label>
               <input
                 onChange={this.handleChange}
-                placeholder={this.state.alamat === null ? 'JL. Satya Raya No.41' : this.state.alamat}
-                defaultValue={this.state.alamat === null ? null : this.state.alamat}
+                placeholder={
+                  this.state.alamat === null
+                    ? 'JL. Satya Raya No.41'
+                    : this.state.alamat
+                }
+                defaultValue={
+                  this.state.alamat === null ? null : this.state.alamat
+                }
                 name="alamat"
               />
             </Form.Field>
             <Form.Field>
               <label htmlFor="skills">Skills</label>
-              <input onChange={this.handleChange} placeholder="Isi sesuai dengan keahlian anda" name="skills" />
+              <input
+                onChange={this.handleChange}
+                placeholder="Isi sesuai dengan keahlian anda"
+                name="skills"
+              />
             </Form.Field>
             <Form.Field>
               <label htmlFor="latest_work">Latest Working Experience</label>
               <input
                 onChange={this.handleChange}
-                placeholder={this.state.latest_work === null ? 'Teaching Asssistant at Fasilkom UI' : this.state.latest_work}
-                defaultValue={this.state.latest_work === null ? null : this.state.latest_work}
+                placeholder={
+                  this.state.latest_work === null
+                    ? 'Teaching Asssistant at Fasilkom UI'
+                    : this.state.latest_work
+                }
+                defaultValue={
+                  this.state.latest_work === null
+                    ? null
+                    : this.state.latest_work
+                }
                 name="latest_work"
               />
             </Form.Field>
             <Form.Field>
-              <label htmlFor="latest_work_desc">Latest Working Experience Description</label>
+              <label htmlFor="latest_work_desc">
+                Latest Working Experience Description
+              </label>
               <input
                 onChange={this.handleChange}
-                placeholder={this.state.latest_work_desc === null ? 'Evaluate weekly assignment for 15 students' : this.state.latest_work_desc}
-                defaultValue={this.state.latest_work_desc === null ? null : this.state.latest_work_desc}
+                placeholder={
+                  this.state.latest_work_desc === null
+                    ? 'Evaluate weekly assignment for 15 students'
+                    : this.state.latest_work_desc
+                }
+                defaultValue={
+                  this.state.latest_work_desc === null
+                    ? null
+                    : this.state.latest_work_desc
+                }
                 name="latest_work_desc"
               />
             </Form.Field>
@@ -378,8 +505,14 @@ export default class ProfilePage extends React.Component {
               <label htmlFor="awards">Awards and Achievements</label>
               <input
                 onChange={this.handleChange}
-                placeholder={this.state.awards === null ? 'Juara 2 UIUX Gemastik 2019' : this.state.awards}
-                defaultValue={this.state.awards === null ? null : this.state.awards}
+                placeholder={
+                  this.state.awards === null
+                    ? 'Juara 2 UIUX Gemastik 2019'
+                    : this.state.awards
+                }
+                defaultValue={
+                  this.state.awards === null ? null : this.state.awards
+                }
                 name="awards"
               />
             </Form.Field>
@@ -387,8 +520,14 @@ export default class ProfilePage extends React.Component {
               <label htmlFor="projects">Projects</label>
               <input
                 onChange={this.handleChange}
-                placeholder={this.state.projects === null ? 'Ow-Jek - Android Mobile Project' : this.state.projects}
-                defaultValue={this.state.projects === null ? null : this.state.projects}
+                placeholder={
+                  this.state.projects === null
+                    ? 'Ow-Jek - Android Mobile Project'
+                    : this.state.projects
+                }
+                defaultValue={
+                  this.state.projects === null ? null : this.state.projects
+                }
                 name="projects"
               />
             </Form.Field>
@@ -396,8 +535,16 @@ export default class ProfilePage extends React.Component {
               <label htmlFor="certification">Sertifikasi</label>
               <input
                 onChange={this.handleChange}
-                placeholder={this.state.certification === null ? 'TOEFL' : this.state.certification}
-                defaultValue={this.state.certification === null ? null : this.state.certification}
+                placeholder={
+                  this.state.certification === null
+                    ? 'TOEFL'
+                    : this.state.certification
+                }
+                defaultValue={
+                  this.state.certification === null
+                    ? null
+                    : this.state.certification
+                }
                 name="certification"
               />
             </Form.Field>
@@ -405,41 +552,73 @@ export default class ProfilePage extends React.Component {
               <label htmlFor="languages">Bahasa yang dikuasai</label>
               <input
                 onChange={this.handleChange}
-                placeholder={this.state.languages === null ? 'Indonesia' : this.state.languages}
-                defaultValue={this.state.languages === null ? null : this.state.languages}
-                name="languages" />
+                placeholder={
+                  this.state.languages === null
+                    ? 'Indonesia'
+                    : this.state.languages
+                }
+                defaultValue={
+                  this.state.languages === null ? null : this.state.languages
+                }
+                name="languages"
+              />
             </Form.Field>
 
             <Form.Field>
               <label htmlFor="seminar">Seminar dan Training</label>
               <input
                 onChange={this.handleChange}
-                placeholder={this.state.seminar === null ? 'Seminar CompFest' : this.state.seminar}
-                defaultValue={this.state.seminar === null ? null : this.state.seminar}
+                placeholder={
+                  this.state.seminar === null
+                    ? 'Seminar CompFest'
+                    : this.state.seminar
+                }
+                defaultValue={
+                  this.state.seminar === null ? null : this.state.seminar
+                }
                 name="seminar"
               />
             </Form.Field>
-            
+
             <Form.Field>
               <label htmlFor="resume">Resume</label>
-              <input onChange={this.handleFile} placeholder="Resume" name="resume" type="File" />
+              <input
+                onChange={this.handleFile}
+                placeholder="Resume"
+                name="resume"
+                type="File"
+              />
             </Form.Field>
             <Form.Field>
               <label htmlFor="phone_number">Expected Salary</label>
-              <input onChange={this.handleChange} placeholder="2000000" name="expected_salary" />
+              <input
+                onChange={this.handleChange}
+                placeholder="2000000"
+                name="expected_salary"
+              />
             </Form.Field>
             <Form.Field>
               <label htmlFor="intro">Intro</label>
               <input
                 onChange={this.handleChange}
-                placeholder={this.state.intro === null ? 'Ceritakan dirimu secara singkat' : this.state.intro}
-                defaultValue={this.state.intro === null ? null : this.state.intro}
+                placeholder={
+                  this.state.intro === null
+                    ? 'Ceritakan dirimu secara singkat'
+                    : this.state.intro
+                }
+                defaultValue={
+                  this.state.intro === null ? null : this.state.intro
+                }
                 name="intro"
               />
             </Form.Field>
             <Form.Field>
               <label htmlFor="volunteer">Volunteering Experience</label>
-              <input onChange={this.handleChange} placeholder="Ketua Organisasi A - 2020" name="volunteer" />
+              <input
+                onChange={this.handleChange}
+                placeholder="Ketua Organisasi A - 2020"
+                name="volunteer"
+              />
             </Form.Field>
             <Form.Field>
               <label htmlFor="intro">Status Pencarian Kerja</label>
@@ -468,8 +647,16 @@ export default class ProfilePage extends React.Component {
               <label htmlFor="student_gpa">GPA</label>
               <input
                 onChange={this.handleChange}
-                placeholder={this.state.student_gpa === null ? '3.50' : this.state.student_gpa}
-                defaultValue={this.state.student_gpa === null ? null : this.state.student_gpa}
+                placeholder={
+                  this.state.student_gpa === null
+                    ? '3.50'
+                    : this.state.student_gpa
+                }
+                defaultValue={
+                  this.state.student_gpa === null
+                    ? null
+                    : this.state.student_gpa
+                }
                 name="student_gpa"
               />
             </Form.Field>
@@ -477,26 +664,36 @@ export default class ProfilePage extends React.Component {
               <label htmlFor="dependants">Dependants</label>
               <input
                 onChange={this.handleChange}
-                placeholder={this.state.dependants === null ? '0' : this.state.dependants}
-                defaultValue={this.state.dependants === null ? null : this.state.dependants}
+                placeholder={
+                  this.state.dependants === null ? '0' : this.state.dependants
+                }
+                defaultValue={
+                  this.state.dependants === null ? null : this.state.dependants
+                }
                 name="dependants"
               />
             </Form.Field>
 
-            <Button type="submit" size="small" loading={this.state.loading} primary floated="right">Submit</Button>
+            <Button
+              type="submit"
+              size="small"
+              loading={this.state.loading}
+              primary
+              floated="right"
+            >
+              Submit
+            </Button>
           </Form>
         </Segment>
       );
     }
 
-    return (<div />);
+    return <div />;
   }
 
   render() {
     return (
-      <div className="profilePage">
-        {this.updateForm(this.props.route.own)}
-      </div>
+      <div className="profilePage">{this.updateForm(this.props.route.own)}</div>
     );
   }
-}
\ No newline at end of file
+}
diff --git a/assets/js/Login.jsx b/assets/js/Login.jsx
index 427149a0c599d5b86db0716eb6306603de8cb51b..a8c98a1e8bebe07f94ce8f17a91ac052e60451f4 100755
--- a/assets/js/Login.jsx
+++ b/assets/js/Login.jsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import { Grid, Segment, Header, Card, Image, Button } from 'semantic-ui-react';
 import LoginForm from './components/LoginForm';
 import CompanyRegisterModal from './components/CompanyRegisterModal';
@@ -6,7 +7,6 @@ import Footer from './components/Footer';
 import InfoModal from './components/InfoModal';
 
 export default class Login extends React.Component {
-
   constructor() {
     super();
     this.state = {
@@ -19,9 +19,9 @@ export default class Login extends React.Component {
   };
 
   static propTypes = {
-    children: React.PropTypes.oneOfType([
-      React.PropTypes.arrayOf(React.PropTypes.node),
-      React.PropTypes.node,
+    children: PropTypes.oneOfType([
+      PropTypes.arrayOf(PropTypes.node),
+      PropTypes.node,
     ]),
   };
 
@@ -30,28 +30,59 @@ export default class Login extends React.Component {
       return (
         <Segment basic>
           <LoginForm
-              type="company"
-              header="Company Login"
-              imgSrc="logo.png"
-              imgSize="small"
-              usernameLabel="Email"
-            />
+            type="company"
+            header="Company Login"
+            imgSrc="logo.png"
+            imgSize="small"
+            usernameLabel="Email"
+          />
           {this.props.children}
-          <div style={{display: 'flex',  justifyContent:'center', alignItems:'center', marginTop:'5px'}}>
-            <Button primary onClick={() => this.setState({activeForm : 'user'})}> Login as User </Button>
+          <div
+            style={{
+              display: 'flex',
+              justifyContent: 'center',
+              alignItems: 'center',
+              marginTop: '5px',
+            }}
+          >
+            <Button
+              primary
+              onClick={() => this.setState({ activeForm: 'user' })}
+            >
+              {' '}
+              Login as User{' '}
+            </Button>
           </div>
-        </Segment >
-      )
+        </Segment>
+      );
     } else if (this.state.activeForm == 'user') {
       return (
         <Segment basic>
-          <LoginForm type="sso-ui" header="SSO Login" imgSrc="UI.png" imgSize="tiny" />
+          <LoginForm
+            type="sso-ui"
+            header="SSO Login"
+            imgSrc="UI.png"
+            imgSize="tiny"
+          />
           {this.props.children}
-          <div style={{display: 'flex',  justifyContent:'center', alignItems:'center', marginTop:'5px'}}>
-            <Button primary onClick={() => this.setState({activeForm : 'company'})}> Login as Company </Button>
+          <div
+            style={{
+              display: 'flex',
+              justifyContent: 'center',
+              alignItems: 'center',
+              marginTop: '5px',
+            }}
+          >
+            <Button
+              primary
+              onClick={() => this.setState({ activeForm: 'company' })}
+            >
+              {' '}
+              Login as Company{' '}
+            </Button>
           </div>
         </Segment>
-      )
+      );
     }
   }
 
@@ -65,10 +96,15 @@ export default class Login extends React.Component {
         </Header>
       </div>
 
-      <Grid stackable columns={2} padded style={{ display: 'flex', justifyContent: 'center' }}>
+      <Grid
+        stackable
+        columns={2}
+        padded
+        style={{ display: 'flex', justifyContent: 'center' }}
+      >
         <Grid.Column width="seven">
           {this.renderForm()}
-          
+
           <div className="register">
             <Card centered className="register">
               <Card.Content>
diff --git a/assets/js/NotificationPage.jsx b/assets/js/NotificationPage.jsx
index 5925424690f734c1b7aad92a85ca0f601bb4f4d0..6ed36316474845a5145f53caf2973b5d55046564 100644
--- a/assets/js/NotificationPage.jsx
+++ b/assets/js/NotificationPage.jsx
@@ -1,36 +1,27 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import { Segment } from 'semantic-ui-react';
 import Notification from './components/Notification';
 
 export default class NotificationPage extends React.Component {
-
   static propTypes = {
-    user: React.PropTypes.object.isRequired,
+    user: PropTypes.object.isRequired,
   };
 
   constructor(props) {
     super(props);
-    
-  };
+  }
 
   generateNotifications() {
-      return (
-          <Segment className="notifikasi" >
-              <Notification
-                text="Hehe"
-              />
-              <Notification
-                text="The Notification should be like this"
-              />
-          </Segment>
-      );
+    return (
+      <Segment className="notifikasi">
+        <Notification text="Hehe" />
+        <Notification text="The Notification should be like this" />
+      </Segment>
+    );
   }
 
   render() {
-    return (
-      <div>
-        {this.generateNotifications()}
-      </div>
-    );
+    return <div>{this.generateNotifications()}</div>;
   }
 }
diff --git a/assets/js/ProfilePage.jsx b/assets/js/ProfilePage.jsx
index 5f764ee0940e873e4ad4d162b3a193fcbcdf570c..90d72a253aae0f1aa12ce1e3cb66cf55d48eca7e 100755
--- a/assets/js/ProfilePage.jsx
+++ b/assets/js/ProfilePage.jsx
@@ -1,16 +1,27 @@
 import React from 'react';
-import { Segment, Image, Header, Icon, Checkbox, Container, Button, Form, Grid, Message } from 'semantic-ui-react';
+import PropTypes from 'prop-types';
+import {
+  Segment,
+  Image,
+  Header,
+  Icon,
+  Checkbox,
+  Container,
+  Button,
+  Form,
+  Grid,
+  Message,
+} from 'semantic-ui-react';
 import Server from './lib/Server';
 import Storage from './lib/Storage';
 import ModalAlert from './components/ModalAlert';
 import Dumper from './lib/Dumper';
 
 export default class ProfilePage extends React.Component {
-
   static propTypes = {
-    route: React.PropTypes.object.isRequired,
-    params: React.PropTypes.object.isRequired,
-    user: React.PropTypes.object.isRequired,
+    route: PropTypes.object.isRequired,
+    params: PropTypes.object.isRequired,
+    user: PropTypes.object.isRequired,
   };
 
   constructor(props) {
@@ -34,7 +45,7 @@ export default class ProfilePage extends React.Component {
       photo: '',
       age: '',
       intro: '',
-      alamat:'',
+      alamat: '',
       expected_salary: '',
       job_seeking_status: '',
       volunteer: '',
@@ -43,7 +54,7 @@ export default class ProfilePage extends React.Component {
         picture: '',
         email: '',
         phone_number: '',
-        alamat:'',
+        alamat: '',
         gender: '',
         region: '',
         skills: '',
@@ -94,66 +105,72 @@ export default class ProfilePage extends React.Component {
   }
 
   getProfile() {
-    const id = this.props.route.own ? this.props.user.data.student.id : this.props.params.id;
-    return Server.get(`/students/${id}/`).then((data) => {
-      this.setState({
-        id: data.id,
-        name: data.name,
-        npm: data.npm,
-        resume: data.resume,
-        major: data.major,
-        batch: data.batch,
-        email: data.user.email,
-        gender: data.gender,
-        region: data.region,
-        cityOfBirth: data.birth_place,
-        dateOfBirth: this.parseIndonesianDateFormat(data.birth_date),
-        phone_number: data.phone_number,
-        portfolio_link: data.portfolio_link,
-        photo: data.photo,
-        show_transcript: data.show_transcript,
-        acceptedNo: data.accepted_no,
-        readNo: data.read_no,
-        bagikanTranskrip: data.show_transcript,
-        refresh: this.state.refresh + 1,
-        age: data.age,
-        intro: data.intro,
-        expected_salary: data.expected_salary,
-        job_seeking_status: data.job_seeking_status,
-        volunteer: data.volunteer,
-        linkedin_url: data.linkedin_url,
-        hackerrank_url: data.hackerrank_url,
-        self_description: data.self_description,
-        student_gpa: data.student_gpa,
-        website_url: data.website_url,
-        latest_work: data.latest_work,
-        alamat: data.alamat,
-        latest_work_desc: data.latest_work_desc,
-        skills: data.skills,
-        github_url: data.github_url,
-        awards: data.awards,
-        projects: data.projects,
-        certification: data.certification,
-        languages: data.languages,
-        seminar: data.seminar,
-        dependants: data.dependants,
-      });
-      if (this.props.route.own) {
-        const newSession = this.props.user.data;
-        newSession.student = data;
-        Storage.set('user-data', newSession);
-        window.scrollTo(0, 0);
-      }
-    }, error => error.then(() => {
-      this.state.name = 'Gagal mendapatkan informasi';
-    }));
+    const id = this.props.route.own
+      ? this.props.user.data.student.id
+      : this.props.params.id;
+    return Server.get(`/students/${id}/`).then(
+      (data) => {
+        this.setState({
+          id: data.id,
+          name: data.name,
+          npm: data.npm,
+          resume: data.resume,
+          major: data.major,
+          batch: data.batch,
+          email: data.user.email,
+          gender: data.gender,
+          region: data.region,
+          cityOfBirth: data.birth_place,
+          dateOfBirth: this.parseIndonesianDateFormat(data.birth_date),
+          phone_number: data.phone_number,
+          portfolio_link: data.portfolio_link,
+          photo: data.photo,
+          show_transcript: data.show_transcript,
+          acceptedNo: data.accepted_no,
+          readNo: data.read_no,
+          bagikanTranskrip: data.show_transcript,
+          refresh: this.state.refresh + 1,
+          age: data.age,
+          intro: data.intro,
+          expected_salary: data.expected_salary,
+          job_seeking_status: data.job_seeking_status,
+          volunteer: data.volunteer,
+          linkedin_url: data.linkedin_url,
+          hackerrank_url: data.hackerrank_url,
+          self_description: data.self_description,
+          student_gpa: data.student_gpa,
+          website_url: data.website_url,
+          latest_work: data.latest_work,
+          alamat: data.alamat,
+          latest_work_desc: data.latest_work_desc,
+          skills: data.skills,
+          github_url: data.github_url,
+          awards: data.awards,
+          projects: data.projects,
+          certification: data.certification,
+          languages: data.languages,
+          seminar: data.seminar,
+          dependants: data.dependants,
+        });
+        if (this.props.route.own) {
+          const newSession = this.props.user.data;
+          newSession.student = data;
+          Storage.set('user-data', newSession);
+          window.scrollTo(0, 0);
+        }
+      },
+      (error) =>
+        error.then(() => {
+          this.state.name = 'Gagal mendapatkan informasi';
+        }),
+    );
   }
-  
+
   isFromGithubLinkValid = () => {
     var github_link = this.state.form.github_url;
     if (github_link == null) return;
-    return github_link.includes("https://github.com/");
-  }  
+    return github_link.includes('https://github.com/');
+  };
 
   parseIndonesianDateFormat(dateIndex) {
     const monthNameIndex = {
@@ -180,7 +197,9 @@ export default class ProfilePage extends React.Component {
   handleSubmit = (e) => {
     e.preventDefault();
     if (!this.isFromGithubLinkValid()) {
-      alert("Pastikan link github yang anda tulis benar. (Berpola : https://github.com/<username>");
+      alert(
+        'Pastikan link github yang anda tulis benar. (Berpola : https://github.com/<username>',
+      );
       return;
     }
 
@@ -191,13 +210,25 @@ export default class ProfilePage extends React.Component {
       }
     });
     this.setState({ loading: true });
-    Server.submit(`/students/${this.state.id}/profile/`, submitForm, 'PATCH').then(() => {
-      this.setState({ loading: false });
-      this.modalAlert.open('Profil berhasil diperbaharui', 'Silakan periksa kembali profil anda', this.getProfile);
-    }, error => error.then((r) => {
-      this.setState({ loading: false });
-      this.modalAlert.open('Pembaharuan profil gagal', Dumper.dump(r));
-    }));
+    Server.submit(
+      `/students/${this.state.id}/profile/`,
+      submitForm,
+      'PATCH',
+    ).then(
+      () => {
+        this.setState({ loading: false });
+        this.modalAlert.open(
+          'Profil berhasil diperbaharui',
+          'Silakan periksa kembali profil anda',
+          this.getProfile,
+        );
+      },
+      (error) =>
+        error.then((r) => {
+          this.setState({ loading: false });
+          this.modalAlert.open('Pembaharuan profil gagal', Dumper.dump(r));
+        }),
+    );
   };
 
   handleFile = (e) => {
@@ -218,17 +249,17 @@ export default class ProfilePage extends React.Component {
     this.setState({ form, show_transcript: d.checked });
   };
 
-  handleRadioGender = (e, {value}) => {
+  handleRadioGender = (e, { value }) => {
     const form = this.state.form;
     form.gender = value;
-    this.setState({ form })
-  }
+    this.setState({ form });
+  };
 
   handleRadio = (e, { value }) => {
     const form = this.state.form;
     form.job_seeking_status = value;
     this.setState({ form });
-  }
+  };
 
   gotoLink = (url) => {
     const win = window.open(url);
@@ -239,28 +270,48 @@ export default class ProfilePage extends React.Component {
 
   gotoStudentTranscript = () => this.gotoLink(`transkrip/${this.state.id}`);
 
-  updateForm(show){
+  updateForm(show) {
     if (show) {
       return (
         <Segment className="profile-form">
           <Header as="h3" textAlign="center">
             <Icon name="edit" />
-            <Header.Content>
-              Edit Profile Page
-            </Header.Content>
+            <Header.Content>Edit Profile Page</Header.Content>
           </Header>
-          <ModalAlert ref={(modal) => { this.modalAlert = modal; }} />
-          <Form ref={(input) => { this.form = input; }} key={this.state.refresh} size="small" onSubmit={this.handleSubmit}>
+          <ModalAlert
+            ref={(modal) => {
+              this.modalAlert = modal;
+            }}
+          />
+          <Form
+            ref={(input) => {
+              this.form = input;
+            }}
+            key={this.state.refresh}
+            size="small"
+            onSubmit={this.handleSubmit}
+          >
             <Form.Field>
               <label htmlFor="photo">Profile Picture</label>
-              <input onChange={this.handleFile} placeholder="Profile Photo.jpg" name="photo" type="File" />
+              <input
+                onChange={this.handleFile}
+                placeholder="Profile Photo.jpg"
+                name="photo"
+                type="File"
+              />
             </Form.Field>
             <Form.Field>
               <label htmlFor="email">Email</label>
               <input
                 onChange={this.handleChange}
-                placeholder={this.state.email === null ? 'jojon@email.com' : this.state.email}
-                defaultValue={this.state.email === null ? null : this.state.email}
+                placeholder={
+                  this.state.email === null
+                    ? 'jojon@email.com'
+                    : this.state.email
+                }
+                defaultValue={
+                  this.state.email === null ? null : this.state.email
+                }
                 name="email"
               />
             </Form.Field>
@@ -268,8 +319,16 @@ export default class ProfilePage extends React.Component {
               <label htmlFor="phone_number">No. Hp</label>
               <input
                 onChange={this.handleChange}
-                placeholder={this.state.phone_number === null ? '08123456789' : this.state.phone_number}
-                defaultValue={this.state.phone_number === null ? null : this.state.phone_number}
+                placeholder={
+                  this.state.phone_number === null
+                    ? '08123456789'
+                    : this.state.phone_number
+                }
+                defaultValue={
+                  this.state.phone_number === null
+                    ? null
+                    : this.state.phone_number
+                }
                 name="phone_number"
               />
             </Form.Field>
@@ -277,27 +336,39 @@ export default class ProfilePage extends React.Component {
               <label htmlFor="gender">Jenis Kelamin</label>
               <Form.Radio
                 label="Perempuan"
-                name='gender'
+                name="gender"
                 value="Perempuan"
                 onClick={this.handleRadioGender}
               />
               <Form.Radio
                 label="Laki-laki"
-                name='gender'
+                name="gender"
                 value="Laki-laki"
                 onClick={this.handleRadioGender}
               />
             </Form.Field>
             <Form.Field>
               <label htmlFor="self_description">Deskripsi Diri</label>
-              <input onChange={this.handleChange} placeholder="Saya suka belajar" name="self_description" />
+              <input
+                onChange={this.handleChange}
+                placeholder="Saya suka belajar"
+                name="self_description"
+              />
             </Form.Field>
             <Form.Field>
               <label htmlFor="linkedin_url">URL Profile LinkedIn</label>
               <input
                 onChange={this.handleChange}
-                placeholder={this.state.linkedin_url === null ? 'https://www.linkedin.com/in/jojo/' : this.state.linkedin_url}
-                defaultValue={this.state.linkedin_url === null ? null : this.state.linkedin_url}
+                placeholder={
+                  this.state.linkedin_url === null
+                    ? 'https://www.linkedin.com/in/jojo/'
+                    : this.state.linkedin_url
+                }
+                defaultValue={
+                  this.state.linkedin_url === null
+                    ? null
+                    : this.state.linkedin_url
+                }
                 name="linkedin_url"
               />
             </Form.Field>
@@ -305,8 +376,16 @@ export default class ProfilePage extends React.Component {
               <label htmlFor="hackerrank_url">URL Profile Hackerrank</label>
               <input
                 onChange={this.handleChange}
-                placeholder={this.state.hackerrank_url === null ? 'https://www.hackerrank.com/james' : this.state.hackerrank_url}
-                defaultValue={this.state.hackerrank_url === null ? null : this.state.hackerrank_url}
+                placeholder={
+                  this.state.hackerrank_url === null
+                    ? 'https://www.hackerrank.com/james'
+                    : this.state.hackerrank_url
+                }
+                defaultValue={
+                  this.state.hackerrank_url === null
+                    ? null
+                    : this.state.hackerrank_url
+                }
                 name="hackerrank_url"
               />
             </Form.Field>
@@ -314,9 +393,16 @@ export default class ProfilePage extends React.Component {
               <label htmlFor="portfolio_link">Portfolio Link</label>
               <input
                 onChange={this.handleChange}
-                placeholder={this.state.portfolio_link === null ? 'https://www.example.com/myproject/' :
-                this.state.portfolio_link}
-                defaultValue={this.state.portfolio_link === null ? null : this.state.portfolio_link}
+                placeholder={
+                  this.state.portfolio_link === null
+                    ? 'https://www.example.com/myproject/'
+                    : this.state.portfolio_link
+                }
+                defaultValue={
+                  this.state.portfolio_link === null
+                    ? null
+                    : this.state.portfolio_link
+                }
                 name="portfolio_link"
               />
             </Form.Field>
@@ -324,21 +410,37 @@ export default class ProfilePage extends React.Component {
               <label htmlFor="website_url">Website URL</label>
               <input
                 onChange={this.handleChange}
-                placeholder={this.state.website_url === null ? 'https://www.example.com/' : this.state.website_url}
-                defaultValue={this.state.website_url === null ? null : this.state.website_url}
+                placeholder={
+                  this.state.website_url === null
+                    ? 'https://www.example.com/'
+                    : this.state.website_url
+                }
+                defaultValue={
+                  this.state.website_url === null
+                    ? null
+                    : this.state.website_url
+                }
                 name="website_url"
               />
             </Form.Field>
             <Form.Field>
               <label htmlFor="linkedin_url">URL Profile Github</label>
-              <input onChange={this.handleChange} placeholder="https://github.com/bob" name="github_url" />
+              <input
+                onChange={this.handleChange}
+                placeholder="https://github.com/bob"
+                name="github_url"
+              />
             </Form.Field>
             <Form.Field>
               <label htmlFor="alamat">Alamat</label>
               <input
                 onChange={this.handleChange}
-                placeholder={this.state.alamat === null ? 'Indonesia' : this.state.alamat}
-                defaultValue={this.state.alamat === null ? null : this.state.alamat}
+                placeholder={
+                  this.state.alamat === null ? 'Indonesia' : this.state.alamat
+                }
+                defaultValue={
+                  this.state.alamat === null ? null : this.state.alamat
+                }
                 name="alamat"
               />
             </Form.Field>
@@ -346,30 +448,56 @@ export default class ProfilePage extends React.Component {
               <label htmlFor="region">Region</label>
               <input
                 onChange={this.handleChange}
-                placeholder={this.state.region === null ? 'Indonesia' : this.state.region}
-                defaultValue={this.state.region === null ? null : this.state.region}
+                placeholder={
+                  this.state.region === null ? 'Indonesia' : this.state.region
+                }
+                defaultValue={
+                  this.state.region === null ? null : this.state.region
+                }
                 name="region"
               />
             </Form.Field>
             <Form.Field>
               <label htmlFor="skills">Skills</label>
-              <input onChange={this.handleChange} placeholder="Isi sesuai dengan keahlian anda" name="skills"/>
+              <input
+                onChange={this.handleChange}
+                placeholder="Isi sesuai dengan keahlian anda"
+                name="skills"
+              />
             </Form.Field>
             <Form.Field>
               <label htmlFor="latest_work">Latest Working Experience</label>
               <input
                 onChange={this.handleChange}
-                placeholder={this.state.latest_work === null ? 'Teaching Asssistant at Fasilkom UI' : this.state.latest_work}
-                defaultValue={this.state.latest_work === null ? null : this.state.latest_work}
+                placeholder={
+                  this.state.latest_work === null
+                    ? 'Teaching Asssistant at Fasilkom UI'
+                    : this.state.latest_work
+                }
+                defaultValue={
+                  this.state.latest_work === null
+                    ? null
+                    : this.state.latest_work
+                }
                 name="latest_work"
               />
             </Form.Field>
             <Form.Field>
-              <label htmlFor="latest_work_desc">Latest Working Experience Description</label>
+              <label htmlFor="latest_work_desc">
+                Latest Working Experience Description
+              </label>
               <input
                 onChange={this.handleChange}
-                placeholder={this.state.latest_work_desc === null ? 'Evaluate weekly assignment for 15 students' : this.state.latest_work_desc}
-                defaultValue={this.state.latest_work_desc === null ? null : this.state.latest_work_desc}
+                placeholder={
+                  this.state.latest_work_desc === null
+                    ? 'Evaluate weekly assignment for 15 students'
+                    : this.state.latest_work_desc
+                }
+                defaultValue={
+                  this.state.latest_work_desc === null
+                    ? null
+                    : this.state.latest_work_desc
+                }
                 name="latest_work_desc"
               />
             </Form.Field>
@@ -377,8 +505,14 @@ export default class ProfilePage extends React.Component {
               <label htmlFor="awards">Awards and Achievements</label>
               <input
                 onChange={this.handleChange}
-                placeholder={this.state.awards === null ? 'Juara 2 UIUX Gemastik 2019' : this.state.awards}
-                defaultValue={this.state.awards === null ? null : this.state.awards}
+                placeholder={
+                  this.state.awards === null
+                    ? 'Juara 2 UIUX Gemastik 2019'
+                    : this.state.awards
+                }
+                defaultValue={
+                  this.state.awards === null ? null : this.state.awards
+                }
                 name="awards"
               />
             </Form.Field>
@@ -386,48 +520,88 @@ export default class ProfilePage extends React.Component {
               <label htmlFor="projects">Projects</label>
               <input
                 onChange={this.handleChange}
-                placeholder={this.state.projects === null ? 'Ow-Jek - Android Mobile Project' : this.state.projects}
-                defaultValue={this.state.projects === null ? null : this.state.projects}
+                placeholder={
+                  this.state.projects === null
+                    ? 'Ow-Jek - Android Mobile Project'
+                    : this.state.projects
+                }
+                defaultValue={
+                  this.state.projects === null ? null : this.state.projects
+                }
                 name="projects"
-                />
+              />
             </Form.Field>
             <Form.Field>
               <label htmlFor="certification">Sertifikasi</label>
               <input
                 onChange={this.handleChange}
-                placeholder={this.state.certification === null ? 'TOEFL' : this.state.certification}
-                defaultValue={this.state.certification === null ? null : this.state.certification}
-                name="certification"/>
+                placeholder={
+                  this.state.certification === null
+                    ? 'TOEFL'
+                    : this.state.certification
+                }
+                defaultValue={
+                  this.state.certification === null
+                    ? null
+                    : this.state.certification
+                }
+                name="certification"
+              />
             </Form.Field>
             <Form.Field>
               <label htmlFor="seminar">Seminar dan Training</label>
               <input
                 onChange={this.handleChange}
-                placeholder={this.state.seminar === null ? 'Seminar Compfest' : this.state.seminar}
-                defaultValue={this.state.seminar === null ? null : this.state.seminar}
+                placeholder={
+                  this.state.seminar === null
+                    ? 'Seminar Compfest'
+                    : this.state.seminar
+                }
+                defaultValue={
+                  this.state.seminar === null ? null : this.state.seminar
+                }
                 name="seminar"
               />
             </Form.Field>
             <Form.Field>
               <label htmlFor="resume">Resume</label>
-              <input onChange={this.handleFile} placeholder="Resume" name="resume" type="File" />
+              <input
+                onChange={this.handleFile}
+                placeholder="Resume"
+                name="resume"
+                type="File"
+              />
             </Form.Field>
             <Form.Field>
               <label htmlFor="phone_number">Expected Salary</label>
-              <input onChange={this.handleChange} placeholder="2000000" name="expected_salary" />
+              <input
+                onChange={this.handleChange}
+                placeholder="2000000"
+                name="expected_salary"
+              />
             </Form.Field>
             <Form.Field>
               <label htmlFor="intro">Intro</label>
               <input
                 onChange={this.handleChange}
-                placeholder={this.state.intro === null ? 'Ceritakan dirimu secara singkat' : this.state.intro}
-                defaultValue={this.state.intro === null ? null : this.state.intro}
+                placeholder={
+                  this.state.intro === null
+                    ? 'Ceritakan dirimu secara singkat'
+                    : this.state.intro
+                }
+                defaultValue={
+                  this.state.intro === null ? null : this.state.intro
+                }
                 name="intro"
               />
             </Form.Field>
             <Form.Field>
               <label htmlFor="volunteer">Volunteering Experience</label>
-              <input onChange={this.handleChange} placeholder="Ketua Organisasi A - 2020" name="volunteer" />
+              <input
+                onChange={this.handleChange}
+                placeholder="Ketua Organisasi A - 2020"
+                name="volunteer"
+              />
             </Form.Field>
             <Form.Field>
               <label htmlFor="intro">Status Pencarian Kerja</label>
@@ -456,8 +630,16 @@ export default class ProfilePage extends React.Component {
               <label htmlFor="student_gpa">GPA</label>
               <input
                 onChange={this.handleChange}
-                placeholder={this.state.student_gpa === null ? '3.50' : this.state.student_gpa}
-                defaultValue={this.state.student_gpa === null ? null : this.state.student_gpa}
+                placeholder={
+                  this.state.student_gpa === null
+                    ? '3.50'
+                    : this.state.student_gpa
+                }
+                defaultValue={
+                  this.state.student_gpa === null
+                    ? null
+                    : this.state.student_gpa
+                }
                 name="student_gpa"
               />
             </Form.Field>
@@ -465,26 +647,39 @@ export default class ProfilePage extends React.Component {
               <label htmlFor="dependants">Dependants</label>
               <input
                 onChange={this.handleChange}
-                placeholder={this.state.dependants === null ? '0' : this.state.dependants}
-                defaultValue={this.state.dependants === null ? null : this.state.dependants}
+                placeholder={
+                  this.state.dependants === null ? '0' : this.state.dependants
+                }
+                defaultValue={
+                  this.state.dependants === null ? null : this.state.dependants
+                }
                 name="dependants"
               />
             </Form.Field>
 
-            <Button type="submit" size="small" loading={this.state.loading} primary floated="right">Submit</Button>
+            <Button
+              type="submit"
+              size="small"
+              loading={this.state.loading}
+              primary
+              floated="right"
+            >
+              Submit
+            </Button>
           </Form>
         </Segment>
       );
     }
 
-    return (<div />);
+    return <div />;
   }
 
   render() {
-    const defaultPicture = 'https://semantic-ui.com/images/wireframe/square-image.png';
+    const defaultPicture =
+      'https://semantic-ui.com/images/wireframe/square-image.png';
     return (
       <div className="profilePage">
-        <Segment className="biodata-section" >
+        <Segment className="biodata-section">
           <Grid stackable columns={2}>
             <Grid.Column>
               <Header as="h2" icon textAlign="center">
@@ -506,7 +701,11 @@ export default class ProfilePage extends React.Component {
                         <Icon name="university" size="big" />
                       </Grid.Column>
                       <Grid.Column width={13}>
-                        <p> {this.state.major || 'N/A'}, {this.state.batch || 'N/A'} </p>
+                        <p>
+                          {' '}
+                          {this.state.major || 'N/A'},{' '}
+                          {this.state.batch || 'N/A'}{' '}
+                        </p>
                       </Grid.Column>
                     </Grid>
                   </Segment>
@@ -539,18 +738,21 @@ export default class ProfilePage extends React.Component {
                         <Icon name="linkify" size="big" />
                       </Grid.Column>
                       <Grid.Column width={13}>
-                        <a href={this.state.portfolio_link}> {this.state.portfolio_link || 'N/A'} </a>
+                        <a href={this.state.portfolio_link}>
+                          {' '}
+                          {this.state.portfolio_link || 'N/A'}{' '}
+                        </a>
                       </Grid.Column>
                     </Grid>
                   </Segment>
-                  
+
                   <Segment basic vertical>
                     <Grid>
                       <Grid.Column width={2}>
                         <Icon name="venus mars" size="big" />
                       </Grid.Column>
                       <Grid.Column width={13}>
-                        <p> { this.state.gender || 'N/A' }</p>
+                        <p> {this.state.gender || 'N/A'}</p>
                       </Grid.Column>
                     </Grid>
                   </Segment>
@@ -561,7 +763,11 @@ export default class ProfilePage extends React.Component {
                         <Icon name="gift" size="big" />
                       </Grid.Column>
                       <Grid.Column width={13}>
-                        <p> {this.state.cityOfBirth || 'N/A'}, {this.state.dateOfBirth || 'N/A'} </p>
+                        <p>
+                          {' '}
+                          {this.state.cityOfBirth || 'N/A'},{' '}
+                          {this.state.dateOfBirth || 'N/A'}{' '}
+                        </p>
                       </Grid.Column>
                     </Grid>
                   </Segment>
@@ -572,7 +778,7 @@ export default class ProfilePage extends React.Component {
                         <Icon name="user" size="big" />
                       </Grid.Column>
                       <Grid.Column width={13}>
-                        <p> { this.state.self_description || 'N/A' }</p>
+                        <p> {this.state.self_description || 'N/A'}</p>
                       </Grid.Column>
                     </Grid>
                   </Segment>
@@ -583,7 +789,10 @@ export default class ProfilePage extends React.Component {
                         <Icon name="linkedin" size="big" />
                       </Grid.Column>
                       <Grid.Column width={13}>
-                        <a href={this.state.linkedin_url}> {this.state.linkedin_url || 'N/A'} </a>
+                        <a href={this.state.linkedin_url}>
+                          {' '}
+                          {this.state.linkedin_url || 'N/A'}{' '}
+                        </a>
                       </Grid.Column>
                     </Grid>
                   </Segment>
@@ -594,7 +803,10 @@ export default class ProfilePage extends React.Component {
                         <Icon name="hackerrank" size="big" />
                       </Grid.Column>
                       <Grid.Column width={13}>
-                        <a href={this.state.hackerrank_url}> {this.state.hackerrank_url || 'N/A'} </a>
+                        <a href={this.state.hackerrank_url}>
+                          {' '}
+                          {this.state.hackerrank_url || 'N/A'}{' '}
+                        </a>
                       </Grid.Column>
                     </Grid>
                   </Segment>
@@ -605,7 +817,10 @@ export default class ProfilePage extends React.Component {
                         <Icon name="pencil alternate" size="big" />
                       </Grid.Column>
                       <Grid.Column width={13}>
-                        <a href={this.state.student_gpa}> {this.state.student_gpa || 'null'} </a>
+                        <a href={this.state.student_gpa}>
+                          {' '}
+                          {this.state.student_gpa || 'null'}{' '}
+                        </a>
                       </Grid.Column>
                     </Grid>
                   </Segment>
@@ -616,7 +831,10 @@ export default class ProfilePage extends React.Component {
                         <Icon name="child" size="big" />
                       </Grid.Column>
                       <Grid.Column width={13}>
-                        <a href={this.state.dependants}> {this.state.dependants || 'null'} </a>
+                        <a href={this.state.dependants}>
+                          {' '}
+                          {this.state.dependants || 'null'}{' '}
+                        </a>
                       </Grid.Column>
                     </Grid>
                   </Segment>
@@ -627,7 +845,10 @@ export default class ProfilePage extends React.Component {
                         <Icon name="globe" size="big" />
                       </Grid.Column>
                       <Grid.Column width={13}>
-                        <a href={this.state.website_url}> {this.state.website_url || 'N/A'} </a>
+                        <a href={this.state.website_url}>
+                          {' '}
+                          {this.state.website_url || 'N/A'}{' '}
+                        </a>
                       </Grid.Column>
                     </Grid>
                   </Segment>
@@ -637,56 +858,70 @@ export default class ProfilePage extends React.Component {
                         <Icon name="github" size="big" />
                       </Grid.Column>
                       <Grid.Column width={13}>
-                        {
-                          this.state.github_url ?
-                            <a href={ this.state.github_url }> { this.state.github_url } </a> :
-                            <p> N/A </p>
-                        }
+                        {this.state.github_url ? (
+                          <a href={this.state.github_url}>
+                            {' '}
+                            {this.state.github_url}{' '}
+                          </a>
+                        ) : (
+                          <p> N/A </p>
+                        )}
                       </Grid.Column>
                     </Grid>
                   </Segment>
                 </div>
 
                 <Segment basic vertical>
+                  <Grid>
+                    <Grid.Column width={2}>
+                      <Icon name="address book" size="big" />
+                    </Grid.Column>
+                    <Grid.Column width={13}>
+                      <p> {this.state.alamat || 'N/A'} </p>
+                    </Grid.Column>
+                  </Grid>
+                </Segment>
+
+                <Segment basic vertical>
+                  <Segment basic vertical>
                     <Grid>
                       <Grid.Column width={2}>
-                        <Icon name="address book" size="big" />
+                        <Icon name="map pin" size="big" />
                       </Grid.Column>
                       <Grid.Column width={13}>
-                        <p> { this.state.alamat || 'N/A' } </p>
+                        <p> {this.state.region || 'N/A'} </p>
                       </Grid.Column>
                     </Grid>
                   </Segment>
-
-                <Segment basic vertical>
                   <Segment basic vertical>
                     <Grid>
                       <Grid.Column width={2}>
-                        <Icon name="map pin" size="big" />
+                        <Icon name="cogs" size="big" />
                       </Grid.Column>
                       <Grid.Column width={13}>
-                        <p> {this.state.region || 'N/A'} </p>
+                        <p>
+                          {' '}
+                          {this.state.skills || 'Skills belum ditambahkan'}{' '}
+                        </p>
                       </Grid.Column>
                     </Grid>
                   </Segment>
-                  <Segment basic vertical>
-                  <Grid>
-                    <Grid.Column width={2}>
-                      <Icon name="cogs" size="big" />
-                    </Grid.Column>
-                    <Grid.Column width={13}>
-                      <p> {this.state.skills || 'Skills belum ditambahkan'} </p>
-                    </Grid.Column>
-                  </Grid>
-                </Segment>
                   <Segment basic vertical>
                     <Grid>
                       <Grid.Column width={2}>
                         <Icon name="suitcase" size="big" />
                       </Grid.Column>
                       <Grid.Column width={13}>
-                        <p>Latest working experience as: <span><b> {this.state.latest_work || 'N/A'} </b></span></p>
-                        <p>Description: <span> {this.state.latest_work_desc || 'N/A'} </span></p>
+                        <p>
+                          Latest working experience as:{' '}
+                          <span>
+                            <b> {this.state.latest_work || 'N/A'} </b>
+                          </span>
+                        </p>
+                        <p>
+                          Description:{' '}
+                          <span> {this.state.latest_work_desc || 'N/A'} </span>
+                        </p>
                       </Grid.Column>
                     </Grid>
                   </Segment>
@@ -694,11 +929,11 @@ export default class ProfilePage extends React.Component {
                   <Segment basic vertical>
                     <Grid>
                       <Grid.Column width={2}>
-                      <Icon name="money bill alternate" size="big" />
+                        <Icon name="money bill alternate" size="big" />
                       </Grid.Column>
                       <Grid.Column width={13}>
-                        <p> { this.state.expected_salary || 'N/A' } </p>
-                        </Grid.Column>
+                        <p> {this.state.expected_salary || 'N/A'} </p>
+                      </Grid.Column>
                     </Grid>
                   </Segment>
 
@@ -719,7 +954,10 @@ export default class ProfilePage extends React.Component {
                         <Icon name="trophy" size="big" />
                       </Grid.Column>
                       <Grid.Column width={13}>
-                        <p> {this.state.awards || 'Awards belum ditambahkan'} </p>
+                        <p>
+                          {' '}
+                          {this.state.awards || 'Awards belum ditambahkan'}{' '}
+                        </p>
                       </Grid.Column>
                     </Grid>
                   </Segment>
@@ -730,8 +968,12 @@ export default class ProfilePage extends React.Component {
                         <Icon name="folder open" size="big" />
                       </Grid.Column>
                       <Grid.Column width={13}>
-                        <p> {this.state.projects || 'Projects belum ditambahkan'} </p>
-                        </Grid.Column>
+                        <p>
+                          {' '}
+                          {this.state.projects ||
+                            'Projects belum ditambahkan'}{' '}
+                        </p>
+                      </Grid.Column>
                     </Grid>
                   </Segment>
 
@@ -741,7 +983,7 @@ export default class ProfilePage extends React.Component {
                         <Icon name="certificate" size="big" />
                       </Grid.Column>
                       <Grid.Column width={13}>
-                        <p> {this.state.certification|| 'N/A'} </p>
+                        <p> {this.state.certification || 'N/A'} </p>
                       </Grid.Column>
                     </Grid>
                   </Segment>
@@ -752,7 +994,7 @@ export default class ProfilePage extends React.Component {
                         <Icon name="comment" size="big" />
                       </Grid.Column>
                       <Grid.Column width={13}>
-                        <p> {this.state.languages|| 'N/A'} </p>
+                        <p> {this.state.languages || 'N/A'} </p>
                       </Grid.Column>
                     </Grid>
                   </Segment>
@@ -763,7 +1005,11 @@ export default class ProfilePage extends React.Component {
                         <Icon name="slideshare" size="big" />
                       </Grid.Column>
                       <Grid.Column width={13}>
-                        <p> {this.state.seminar || 'Seminar dan Training kosong'} </p>
+                        <p>
+                          {' '}
+                          {this.state.seminar ||
+                            'Seminar dan Training kosong'}{' '}
+                        </p>
                       </Grid.Column>
                     </Grid>
                   </Segment>
@@ -780,14 +1026,13 @@ export default class ProfilePage extends React.Component {
                   </Segment>
                 </Segment>
 
-
                 <Segment basic vertical>
                   <Grid>
                     <Grid.Column width={2}>
                       <Icon name="map pin" size="big" />
                     </Grid.Column>
                     <Grid.Column width={13}>
-                      <p> { this.state.region || 'N/A' } </p>
+                      <p> {this.state.region || 'N/A'} </p>
                       <h3>Intro</h3>
                     </Grid.Column>
                     <Grid.Column width={13}>
@@ -802,22 +1047,46 @@ export default class ProfilePage extends React.Component {
                       <h3>Intro</h3>
                     </Grid.Column>
                     <Grid.Column width={13}>
-                      <p> { this.state.intro || 'N/A' } </p>
+                      <p> {this.state.intro || 'N/A'} </p>
                     </Grid.Column>
-                    <p className="jumlahLamaran"> Jumlah lamaran diterima: {this.state.acceptedNo || '0' }</p>
+                    <p className="jumlahLamaran">
+                      {' '}
+                      Jumlah lamaran diterima: {this.state.acceptedNo || '0'}
+                    </p>
                   </Grid>
                   <Grid>
-                    <p className="jumlahLamaran"> Jumlah lamaran dibaca perusahaan: {this.state.readNo || '0'}</p>
+                    <p className="jumlahLamaran">
+                      {' '}
+                      Jumlah lamaran dibaca perusahaan:{' '}
+                      {this.state.readNo || '0'}
+                    </p>
                   </Grid>
                 </Segment>
                 <Container textAlign="center">
                   <div className="buttonProfile">
-                    <Button onClick={this.gotoStudentResume} disabled={!this.state.resume} primary size="small">Resume</Button>
-                    <Button onClick={this.gotoStudentTranscript} color="green" size="small">Transkrip</Button>
+                    <Button
+                      onClick={this.gotoStudentResume}
+                      disabled={!this.state.resume}
+                      primary
+                      size="small"
+                    >
+                      Resume
+                    </Button>
+                    <Button
+                      onClick={this.gotoStudentTranscript}
+                      color="green"
+                      size="small"
+                    >
+                      Transkrip
+                    </Button>
                   </div>
                   <br />
                   <div>
-                    <h4> Bagikan Transkrip : {this.state.bagikanTranskrip ? 'Ya' : 'Tidak'}</h4>
+                    <h4>
+                      {' '}
+                      Bagikan Transkrip :{' '}
+                      {this.state.bagikanTranskrip ? 'Ya' : 'Tidak'}
+                    </h4>
                   </div>
                 </Container>
               </Container>
@@ -828,21 +1097,29 @@ export default class ProfilePage extends React.Component {
         <Segment className="status-form">
           <Header as="h3" textAlign="left">
             <Icon name="search" />
-            <Header.Content>
-              Status Mencari Pekerjaan
-            </Header.Content>
+            <Header.Content>Status Mencari Pekerjaan</Header.Content>
           </Header>
           <div>
-            <h4> { this.state.job_seeking_status === 'Active' ?
-              <Message positive>
-                <Message.Header>Sedang mencari pekerjaan</Message.Header>
-                <p>Saya sedang mencari pekerjaan sekarang dan saya terbuka untuk
-                  mendapat informasi mengenai lowongan kerja.</p>
-              </Message> : <Message negative>
-                <Message.Header>Tidak mencari pekerjaan</Message.Header>
-                <p>Saya sedang tidak mencari pekerjaan. Mohon jangan kirimkan
-                  informasi mengenai lowongan pekerjaan.</p>
-              </Message> }</h4>
+            <h4>
+              {' '}
+              {this.state.job_seeking_status === 'Active' ? (
+                <Message positive>
+                  <Message.Header>Sedang mencari pekerjaan</Message.Header>
+                  <p>
+                    Saya sedang mencari pekerjaan sekarang dan saya terbuka
+                    untuk mendapat informasi mengenai lowongan kerja.
+                  </p>
+                </Message>
+              ) : (
+                <Message negative>
+                  <Message.Header>Tidak mencari pekerjaan</Message.Header>
+                  <p>
+                    Saya sedang tidak mencari pekerjaan. Mohon jangan kirimkan
+                    informasi mengenai lowongan pekerjaan.
+                  </p>
+                </Message>
+              )}
+            </h4>
           </div>
         </Segment>
 
@@ -850,4 +1127,4 @@ export default class ProfilePage extends React.Component {
       </div>
     );
   }
-}
\ No newline at end of file
+}
diff --git a/assets/js/SupervisorPage.jsx b/assets/js/SupervisorPage.jsx
index 1aa981cf3d358016ad2a82cacd89455a26f7ae16..2dc8aa176f0d37a7fafd7ea87f2ff07b15b45a63 100755
--- a/assets/js/SupervisorPage.jsx
+++ b/assets/js/SupervisorPage.jsx
@@ -5,16 +5,15 @@ import Server from './lib/Server';
 import ApplicationList from './components/ApplicationList';
 
 const cols = [
-    { key: 'StudentName', label: 'Nama' },
-    { key: 'StudentID', label: 'NPM' },
-	{ key: 'Major', label: 'Major' },
-    { key: 'Perusahaan', label: 'Perusahaan' },
-    { key: 'Posisi', label: 'Posisi' },
-    { key: 'Status', label: 'Status' },
+  { key: 'StudentName', label: 'Nama' },
+  { key: 'StudentID', label: 'NPM' },
+  { key: 'Major', label: 'Major' },
+  { key: 'Perusahaan', label: 'Perusahaan' },
+  { key: 'Posisi', label: 'Posisi' },
+  { key: 'Status', label: 'Status' },
 ];
 
 export default class SupervisorPage extends React.Component {
-
   constructor(props) {
     super(props);
     /* istanbul ignore next */
@@ -45,10 +44,13 @@ export default class SupervisorPage extends React.Component {
         </Grid.Row>
         <Grid.Row>
           <div id="layout-content" className="layout-content-wrapper">
-            <Pagination url={'/applications/'} child={<ApplicationList cols={cols} />} />
+            <Pagination
+              url={'/applications/'}
+              child={<ApplicationList cols={cols} />}
+            />
           </div>
         </Grid.Row>
       </Grid>
     );
-  }
+  };
 }
diff --git a/assets/js/TranscriptPage.jsx b/assets/js/TranscriptPage.jsx
index 9a2ef8d118b7c51d45f2e7c2e453f15cb802a462..9be78002f4172f16916169aaaf44f7f0e0ac8f12 100755
--- a/assets/js/TranscriptPage.jsx
+++ b/assets/js/TranscriptPage.jsx
@@ -1,24 +1,36 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import CourseList from './components/CourseList';
 import Server from './lib/Server';
 
 export default class TranscriptPage extends React.Component {
   static propTypes = {
-    params: React.PropTypes.object.isRequired,
-    user: React.PropTypes.object.isRequired,
+    params: PropTypes.object.isRequired,
+    user: PropTypes.object.isRequired,
   };
 
   constructor(props) {
     super(props);
     /* istanbul ignore next */
     this.state = { text: 'Mohon Tunggu..' };
-    const url = this.props.user.role === 'student' ? `/students/${this.props.params.id}/transcript/` : `/applications/${this.props.params.id}/transcript/`;
-    Server.get(url).then(response => this.setState({ data: response }), () => this.setState({ text: 'Anda tidak berhak untuk melihat transkrip ini' }));
+    const url =
+      this.props.user.role === 'student'
+        ? `/students/${this.props.params.id}/transcript/`
+        : `/applications/${this.props.params.id}/transcript/`;
+    Server.get(url).then(
+      (response) => this.setState({ data: response }),
+      () =>
+        this.setState({
+          text: 'Anda tidak berhak untuk melihat transkrip ini',
+        }),
+    );
   }
 
   render() {
-    return (
-      this.state.data ? <CourseList data={this.state.data} /> : <h5 style={{ textAlign: 'center' }}> {this.state.text} </h5>
+    return this.state.data ? (
+      <CourseList data={this.state.data} />
+    ) : (
+      <h5 style={{ textAlign: 'center' }}> {this.state.text} </h5>
     );
   }
 }
diff --git a/assets/js/VacancyPage.jsx b/assets/js/VacancyPage.jsx
index a9731a1d126288d22362f33b6d24a47b31890a5c..de43026da6b7b4046246cd69a01599b5348817cb 100755
--- a/assets/js/VacancyPage.jsx
+++ b/assets/js/VacancyPage.jsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import { Segment, Button, Dropdown, Container } from 'semantic-ui-react';
 import { Link } from 'react-router';
 import Tabs from './components/Tabs';
@@ -7,18 +8,23 @@ import VacancyList from './components/VacancyList';
 import Pagination from './components/Pagination';
 
 export default class VacancyPage extends React.Component {
-
   static propTypes = {
-    user: React.PropTypes.object.isRequired,
+    user: PropTypes.object.isRequired,
   };
 
   static getId(user) {
     const role = user.role;
     if (role === 'student') {
       return user.data.student.id;
-    } else if (role === 'company' || (role === 'admin' && user.data.company != null)) {
+    } else if (
+      role === 'company' ||
+      (role === 'admin' && user.data.company != null)
+    ) {
       return user.data.company.id;
-    } else if (role === 'supervisor' || (role === 'admin' && user.data.supervisor != null)) {
+    } else if (
+      role === 'supervisor' ||
+      (role === 'admin' && user.data.supervisor != null)
+    ) {
       return user.data.supervisor.id;
     }
 
@@ -34,18 +40,17 @@ export default class VacancyPage extends React.Component {
       sort: '',
       sortBy: [
         { key: 'ASC', text: 'Ascending', value: 'ASC' },
-        { key: 'DESC', text: 'Descending', value: 'DESC' }
-      ]
+        { key: 'DESC', text: 'Descending', value: 'DESC' },
+      ],
     };
     this.handleChange = this.handleChange.bind(this);
   }
 
-
   generateVacancies() {
     if (this.props.user.role === 'student') {
       return (
         <Tabs selected={0}>
-          <Pane label="Lowongan" >
+          <Pane label="Lowongan">
             <Pagination
               key={1}
               url="/vacancies/"
@@ -59,7 +64,7 @@ export default class VacancyPage extends React.Component {
               }
             />
           </Pane>
-          <Pane label="Lamaran Saya" >
+          <Pane label="Lamaran Saya">
             <Pagination
               key={2}
               url={`/students/${this.state.id}/applied-vacancies/`}
@@ -72,7 +77,7 @@ export default class VacancyPage extends React.Component {
               }
             />
           </Pane>
-          <Pane label="Ditandai" >
+          <Pane label="Ditandai">
             <Pagination
               key={3}
               url={`/students/${this.state.id}/bookmarked-vacancies/`}
@@ -85,7 +90,7 @@ export default class VacancyPage extends React.Component {
               }
             />
           </Pane>
-          <Pane label="Lowongan Tersedia" >
+          <Pane label="Lowongan Tersedia">
             <Pagination
               key={4}
               url="/vacancies/opened_only=1"
@@ -100,8 +105,11 @@ export default class VacancyPage extends React.Component {
           </Pane>
         </Tabs>
       );
-    } else if ((this.props.user.role === 'admin' && this.props.user.data.company != null)
-      || this.props.user.role === 'company') {
+    } else if (
+      (this.props.user.role === 'admin' &&
+        this.props.user.data.company != null) ||
+      this.props.user.role === 'company'
+    ) {
       return (
         <Segment className="paginationCompany">
           <Pagination
@@ -118,10 +126,13 @@ export default class VacancyPage extends React.Component {
           />
         </Segment>
       );
-    } else if (this.props.user.role === 'admin' || this.props.user.role === 'supervisor') {
+    } else if (
+      this.props.user.role === 'admin' ||
+      this.props.user.role === 'supervisor'
+    ) {
       return (
         <Tabs selected={0}>
-          <Pane label="Lowongan Belum Terverifikasi" >
+          <Pane label="Lowongan Belum Terverifikasi">
             <Pagination
               key={1}
               url="/vacancies/?verified=false"
@@ -134,7 +145,7 @@ export default class VacancyPage extends React.Component {
               }
             />
           </Pane>
-          <Pane label="Lowongan Terverifikasi" >
+          <Pane label="Lowongan Terverifikasi">
             <Pagination
               key={2}
               url="/vacancies/?verified=true"
@@ -154,19 +165,37 @@ export default class VacancyPage extends React.Component {
     return (
       <div>
         <h3>
-          Anda tidak terautentifikasi. Harap logout dan login
-          kembali dengan akun yang benar
+          Anda tidak terautentifikasi. Harap logout dan login kembali dengan
+          akun yang benar
         </h3>
       </div>
     );
   }
 
   companyHeader() {
-    if ((this.props.user.role === 'admin' && this.props.user.data.company != null) || this.props.user.role === 'company') {
+    if (
+      (this.props.user.role === 'admin' &&
+        this.props.user.data.company != null) ||
+      this.props.user.role === 'company'
+    ) {
       return (
         <div style={{ float: 'left' }}>
-          <Button as={Link} to="/pelamar" icon="eye" labelPosition="left" color="facebook" content="Lihat Semua Pendaftar" />
-          <Button as={Link} to="/buat-lowongan" icon="add" labelPosition="left" content="Tambah Lowongan Baru" color="teal" />
+          <Button
+            as={Link}
+            to="/pelamar"
+            icon="eye"
+            labelPosition="left"
+            color="facebook"
+            content="Lihat Semua Pendaftar"
+          />
+          <Button
+            as={Link}
+            to="/buat-lowongan"
+            icon="add"
+            labelPosition="left"
+            content="Tambah Lowongan Baru"
+            color="teal"
+          />
         </div>
       );
     }
@@ -179,7 +208,7 @@ export default class VacancyPage extends React.Component {
   };
 
   render() {
-    console.log(this.props.user)
+    console.log(this.props.user);
     return (
       <div className="applicant">
         <Container textAlign="right">
@@ -193,16 +222,25 @@ export default class VacancyPage extends React.Component {
         </Container>
         <br />
         {this.props.user.role === 'student' || (
-          <div className="administrationButtons" style={{ display: 'inline-block' }}>
-            { this.companyHeader() }
-            {(this.props.user.role === 'admin' || this.props.user.role === 'supervisor') &&
-            <Button
-              as={Link} to="/rekap" icon="dashboard" labelPosition="left" color="facebook"
-              content="Rekap Pendaftaran"
-            />}
+          <div
+            className="administrationButtons"
+            style={{ display: 'inline-block' }}
+          >
+            {this.companyHeader()}
+            {(this.props.user.role === 'admin' ||
+              this.props.user.role === 'supervisor') && (
+              <Button
+                as={Link}
+                to="/rekap"
+                icon="dashboard"
+                labelPosition="left"
+                color="facebook"
+                content="Rekap Pendaftaran"
+              />
+            )}
           </div>
         )}
-        { this.generateVacancies() }
+        {this.generateVacancies()}
       </div>
     );
   }
diff --git a/assets/js/components/AdminVacancy.jsx b/assets/js/components/AdminVacancy.jsx
index 578f58e2a6568b806ea41b893c7de43c12c25343..419f5abe348770ad67c728119fb9c0fdedf5377d 100755
--- a/assets/js/components/AdminVacancy.jsx
+++ b/assets/js/components/AdminVacancy.jsx
@@ -1,11 +1,12 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import { Item, Grid, Button } from 'semantic-ui-react';
 import Server from '../lib/Server';
 
 export default class AdminVacancy extends React.Component {
   static propTypes = {
-    data: React.PropTypes.object.isRequired,
-    updateStatus: React.PropTypes.func.isRequired,
+    data: PropTypes.object.isRequired,
+    updateStatus: PropTypes.func.isRequired,
   };
 
   changeVerifiedStatus() {
@@ -15,14 +16,32 @@ export default class AdminVacancy extends React.Component {
     } else {
       data = { verified: true };
     }
-    Server.patch(`/vacancies/${this.props.data.id}/verify/`, data).then((status) => {
-      this.props.updateStatus(this.props.data.id, status.status);
-    });
+    Server.patch(`/vacancies/${this.props.data.id}/verify/`, data).then(
+      (status) => {
+        this.props.updateStatus(this.props.data.id, status.status);
+      },
+    );
   }
 
   generateButton() {
-    const unverifyButton = <Button floated="right" color="red" onClick={this.changeVerifiedStatus.bind(this)}>Batalkan Verifikasi</Button>;
-    const verifyButton = <Button floated="right" color="blue" onClick={this.changeVerifiedStatus.bind(this)}>Verifikasi</Button>;
+    const unverifyButton = (
+      <Button
+        floated="right"
+        color="red"
+        onClick={this.changeVerifiedStatus.bind(this)}
+      >
+        Batalkan Verifikasi
+      </Button>
+    );
+    const verifyButton = (
+      <Button
+        floated="right"
+        color="blue"
+        onClick={this.changeVerifiedStatus.bind(this)}
+      >
+        Verifikasi
+      </Button>
+    );
 
     if (this.props.data.verified) {
       return unverifyButton;
@@ -34,7 +53,14 @@ export default class AdminVacancy extends React.Component {
     const defaultImage = 'https://semantic-ui.com/images/wireframe/image.png';
     return (
       <Item className="adminItems">
-        <Item.Image src={this.props.data.company.logo ? this.props.data.company.logo : defaultImage} size="small" />
+        <Item.Image
+          src={
+            this.props.data.company.logo
+              ? this.props.data.company.logo
+              : defaultImage
+          }
+          size="small"
+        />
         <Item.Content>
           <Item.Header as="a">{this.props.data.name}</Item.Header>
           <Grid.Row>
@@ -42,9 +68,7 @@ export default class AdminVacancy extends React.Component {
               <h4>{this.props.data.company.name} </h4>
               {this.props.data.company.address}
             </Grid.Column>
-            <Grid.Column floated="right">
-              {this.generateButton()}
-            </Grid.Column>
+            <Grid.Column floated="right">{this.generateButton()}</Grid.Column>
           </Grid.Row>
         </Item.Content>
       </Item>
diff --git a/assets/js/components/Applicant.jsx b/assets/js/components/Applicant.jsx
index 1677b80ca9b253d096654813673c736719194462..16383832366941e6d1b598b3c530a71fd9f8837f 100755
--- a/assets/js/components/Applicant.jsx
+++ b/assets/js/components/Applicant.jsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import { Item, Rating, Grid } from 'semantic-ui-react';
 import Server from '../lib/Server';
 import ModalAlert from './ModalAlert';
@@ -8,9 +9,9 @@ const defaultImage = 'https://semantic-ui.com/images/wireframe/image.png';
 
 export default class Applicant extends React.Component {
   static propTypes = {
-    data: React.PropTypes.object.isRequired,
-    updateStatus: React.PropTypes.func.isRequired,
-    isAll: React.PropTypes.bool.isRequired,
+    data: PropTypes.object.isRequired,
+    updateStatus: PropTypes.func.isRequired,
+    isAll: PropTypes.bool.isRequired,
   };
 
   static APPLICATION_STATUS = {
@@ -23,7 +24,15 @@ export default class Applicant extends React.Component {
     ALL: 1000,
   };
 
-  static APPLICATION_STATUS_TEXT = ['Baru', 'Sudah Dibaca', 'Ditandai', 'Ditolak', 'Diterima', '', 'Selesai'];
+  static APPLICATION_STATUS_TEXT = [
+    'Baru',
+    'Sudah Dibaca',
+    'Ditandai',
+    'Ditolak',
+    'Diterima',
+    '',
+    'Selesai',
+  ];
 
   constructor(props) {
     super(props);
@@ -43,14 +52,18 @@ export default class Applicant extends React.Component {
         'Lamaran yang sudah ditolak atau diterima tidak bisa ditandai',
       );
     } else {
-      Server.patch(`/applications/${this.props.data.id}/`, data).then((status) => {
-        this.props.updateStatus(this.props.data.id, status.status);
-      });
+      Server.patch(`/applications/${this.props.data.id}/`, data).then(
+        (status) => {
+          this.props.updateStatus(this.props.data.id, status.status);
+        },
+      );
     }
   };
 
   getApplicationStatus() {
-    return this.props.isAll ? Applicant.APPLICATION_STATUS_TEXT[this.props.data.status] : '';
+    return this.props.isAll
+      ? Applicant.APPLICATION_STATUS_TEXT[this.props.data.status]
+      : '';
   }
 
   render() {
@@ -61,8 +74,14 @@ export default class Applicant extends React.Component {
             this.modalAlert = modal;
           }}
         />
-        <Item.Image size="small" src={this.props.data.student.photo || defaultImage} />
-        <Item.Content verticalAlign="middle" style={{ wordWrap: 'break-word', width: '100%' }}>
+        <Item.Image
+          size="small"
+          src={this.props.data.student.photo || defaultImage}
+        />
+        <Item.Content
+          verticalAlign="middle"
+          style={{ wordWrap: 'break-word', width: '100%' }}
+        >
           <Item.Extra>
             <Grid.Row>
               <Grid.Column floated="left">
@@ -76,14 +95,22 @@ export default class Applicant extends React.Component {
                     icon="star"
                     size="massive"
                     defaultRating={
-                      this.props.data.status === Applicant.APPLICATION_STATUS.BOOKMARKED ? 1 : 0
+                      this.props.data.status ===
+                      Applicant.APPLICATION_STATUS.BOOKMARKED
+                        ? 1
+                        : 0
                     }
                     onRate={this.bookmark}
                     maxRating={1}
                   />
                 </Grid.Row>
-                <ApproveModal updateStatus={this.props.updateStatus} data={this.props.data} />
-                <br /><br /><b>{this.getApplicationStatus()}</b>
+                <ApproveModal
+                  updateStatus={this.props.updateStatus}
+                  data={this.props.data}
+                />
+                <br />
+                <br />
+                <b>{this.getApplicationStatus()}</b>
               </Grid.Column>
             </Grid.Row>
           </Item.Extra>
diff --git a/assets/js/components/ApplicantList.jsx b/assets/js/components/ApplicantList.jsx
index abd6424add56f293a13997f493e7dd99851d0f2b..3b694ad3a6ea29b21840e9af95a2920a866db4b4 100755
--- a/assets/js/components/ApplicantList.jsx
+++ b/assets/js/components/ApplicantList.jsx
@@ -1,12 +1,12 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import { Item, Grid, Container } from 'semantic-ui-react';
 import Applicant from './Applicant';
 
 export default class ApplicantList extends React.Component {
-
   static propTypes = {
-    items: React.PropTypes.array,
-    status: React.PropTypes.number.isRequired,
+    items: PropTypes.array,
+    status: PropTypes.number.isRequired,
   };
 
   static defaultProps = {
@@ -33,32 +33,36 @@ export default class ApplicantList extends React.Component {
   }
 
   generateApplicants() {
-    if (this.state.applications.length == 0){
+    if (this.state.applications.length == 0) {
       return (
         <Item className="applicantItems">
           <Grid.Row>
             <Container textAlign="center">
-              <p>Tidak ada pelamar</p><br />
+              <p>Tidak ada pelamar</p>
+              <br />
             </Container>
           </Grid.Row>
         </Item>
       );
     }
-    return this.state.applications.map(application =>
-      (application.status === this.props.status ||
-        this.props.status === Applicant.APPLICATION_STATUS.ALL) &&
-      (<Applicant
-        key={application.id} data={application}
-        updateStatus={this.updateStatus}
-        isAll={this.props.status === Applicant.APPLICATION_STATUS.ALL}
-      />),
+    return this.state.applications.map(
+      (application) =>
+        (application.status === this.props.status ||
+          this.props.status === Applicant.APPLICATION_STATUS.ALL) && (
+          <Applicant
+            key={application.id}
+            data={application}
+            updateStatus={this.updateStatus}
+            isAll={this.props.status === Applicant.APPLICATION_STATUS.ALL}
+          />
+        ),
     );
   }
 
   render = () => (
     <Grid container doubling>
       <Item.Group relaxed style={{ width: '100%' }}>
-        { this.generateApplicants() }
+        {this.generateApplicants()}
       </Item.Group>
     </Grid>
   );
diff --git a/assets/js/components/ApplicationList.jsx b/assets/js/components/ApplicationList.jsx
index 6432a009276e6b187f0c4056ae6f1a6551e421ad..09fd215bae65e9da4fc0196661460ff40b34569a 100755
--- a/assets/js/components/ApplicationList.jsx
+++ b/assets/js/components/ApplicationList.jsx
@@ -1,10 +1,11 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import { Table } from 'semantic-ui-react';
 
 export default class ApplicationList extends React.Component {
   static propTypes = {
-    cols: React.PropTypes.any.isRequired,
-    items: React.PropTypes.any,
+    cols: PropTypes.any.isRequired,
+    items: PropTypes.any,
   };
 
   static defaultProps = {
@@ -12,42 +13,41 @@ export default class ApplicationList extends React.Component {
   };
 
   generateHeaders() {
-    const cols2 = this.props.cols;  // [{key, label}]
+    const cols2 = this.props.cols; // [{key, label}]
 
-        // generate our header (th) cell components
-    return cols2.map(colData =>
-      <Table.HeaderCell singleLine key={colData.key}> {colData.label} </Table.HeaderCell>
-     );
+    // generate our header (th) cell components
+    return cols2.map((colData) => (
+      <Table.HeaderCell singleLine key={colData.key}>
+        {' '}
+        {colData.label}{' '}
+      </Table.HeaderCell>
+    ));
   }
 
   generateRows() {
-    return this.props.items.map(item =>
-      (
-        <Table.Row key={`${item.npm}_${item.major}_${item.company}_${item.position}_${item.status}_row`}>
-          <Table.Cell key={`${item.name}_name`}> {item.name} </Table.Cell>
-          <Table.Cell key={`${item.name}_npm`}> {item.npm} </Table.Cell>
-		  <Table.Cell key={`${item.name}_major`}> {item.major} </Table.Cell>
-          <Table.Cell key={`${item.name}_company`}>
-            {item.company_name}
-          </Table.Cell>
-          <Table.Cell key={`${item.name}_position`}>
-            {item.vacancy_name}
-          </Table.Cell>
-          <Table.Cell key={`${item.name}_status`}>
-            {item.status}
-          </Table.Cell>
-        </Table.Row>
-      )
-    );
+    return this.props.items.map((item) => (
+      <Table.Row
+        key={`${item.npm}_${item.major}_${item.company}_${item.position}_${item.status}_row`}
+      >
+        <Table.Cell key={`${item.name}_name`}> {item.name} </Table.Cell>
+        <Table.Cell key={`${item.name}_npm`}> {item.npm} </Table.Cell>
+        <Table.Cell key={`${item.name}_major`}> {item.major} </Table.Cell>
+        <Table.Cell key={`${item.name}_company`}>
+          {item.company_name}
+        </Table.Cell>
+        <Table.Cell key={`${item.name}_position`}>
+          {item.vacancy_name}
+        </Table.Cell>
+        <Table.Cell key={`${item.name}_status`}>{item.status}</Table.Cell>
+      </Table.Row>
+    ));
   }
 
   render() {
     return (
       <Table celled padded>
-        <Table.Header >
-          <Table.Row>
-            {this.generateHeaders()}
-          </Table.Row>
+        <Table.Header>
+          <Table.Row>{this.generateHeaders()}</Table.Row>
         </Table.Header>
         <Table.Body>{this.generateRows()}</Table.Body>
       </Table>
diff --git a/assets/js/components/ApplyModal.jsx b/assets/js/components/ApplyModal.jsx
index c7c2081ce938c5c5a9a39ed5d72000acc9e802cc..81b804025c9980d0b5983b0f82ee9d3f8bc72668 100755
--- a/assets/js/components/ApplyModal.jsx
+++ b/assets/js/components/ApplyModal.jsx
@@ -1,17 +1,25 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import moment from 'moment';
-import { Icon, Modal, Button, TextArea, Form, Message } from 'semantic-ui-react';
+import {
+  Icon,
+  Modal,
+  Button,
+  TextArea,
+  Form,
+  Message,
+} from 'semantic-ui-react';
 import ModalAlert from './../components/ModalAlert';
 import Server from './../lib/Server';
 
 export default class ApplyModal extends React.Component {
   static propTypes = {
-    data: React.PropTypes.object.isRequired,
-    active: React.PropTypes.bool.isRequired,
-    buttonTitle: React.PropTypes.string.isRequired,
-    resume: React.PropTypes.string,
-    studentId: React.PropTypes.number.isRequired,
-    updateStatus: React.PropTypes.func.isRequired,
+    data: PropTypes.object.isRequired,
+    active: PropTypes.bool.isRequired,
+    buttonTitle: PropTypes.string.isRequired,
+    resume: PropTypes.string,
+    studentId: PropTypes.number.isRequired,
+    updateStatus: PropTypes.func.isRequired,
   };
 
   constructor(props) {
@@ -36,8 +44,10 @@ export default class ApplyModal extends React.Component {
   }
 
   fixBody = () => {
-    const anotherModal = document.getElementsByClassName('ui page modals').length;
-    if (anotherModal > 0) document.body.classList.add('scrolling', 'dimmable', 'dimmed');
+    const anotherModal = document.getElementsByClassName('ui page modals')
+      .length;
+    if (anotherModal > 0)
+      document.body.classList.add('scrolling', 'dimmable', 'dimmed');
   };
 
   handleChange(event) {
@@ -48,84 +58,172 @@ export default class ApplyModal extends React.Component {
     this.setState({ modalOpen: true });
   }
 
-  handleClose = () => this.setState({
-    modalOpen: false,
-    load: false,
-  });
+  handleClose = () =>
+    this.setState({
+      modalOpen: false,
+      load: false,
+    });
 
   handleApply = () => {
     this.setState({ load: true });
-    const requestData = { vacancy_id: this.props.data.id, cover_letter: this.state.coverLetter };
-    Server.post(`/students/${this.props.studentId}/applied-vacancies/`, requestData).then(() => {
-      this.modalAlert.open('Pendaftaran Berhasil', 'Pendaftaran anda berhasil direkam. Harap menunggu kabar selanjutnya dari pihak yang terkait\n', () => {
-        this.handleClose();
-        this.props.updateStatus('registered');
-      });
-    }, () => this.modalAlert.open('Pendaftaran Gagal', 'Maaf pendaftaran yang anda lakukan gagal. Harap ulangi pendaftaran atau hubungi administrator\n', this.handleClose),
+    const requestData = {
+      vacancy_id: this.props.data.id,
+      cover_letter: this.state.coverLetter,
+    };
+    Server.post(
+      `/students/${this.props.studentId}/applied-vacancies/`,
+      requestData,
+    ).then(
+      () => {
+        this.modalAlert.open(
+          'Pendaftaran Berhasil',
+          'Pendaftaran anda berhasil direkam. Harap menunggu kabar selanjutnya dari pihak yang terkait\n',
+          () => {
+            this.handleClose();
+            this.props.updateStatus('registered');
+          },
+        );
+      },
+      () =>
+        this.modalAlert.open(
+          'Pendaftaran Gagal',
+          'Maaf pendaftaran yang anda lakukan gagal. Harap ulangi pendaftaran atau hubungi administrator\n',
+          this.handleClose,
+        ),
     );
   };
 
   render() {
-    const isApplicationClosed = moment(this.props.data.close_time) < moment.now()
+    const isApplicationClosed =
+      moment(this.props.data.close_time) < moment.now();
     return (
       <Modal
-        trigger={<Button primary onClick={this.handleOpen} floated="right">{this.props.buttonTitle}</Button>}
+        trigger={
+          <Button primary onClick={this.handleOpen} floated="right">
+            {this.props.buttonTitle}
+          </Button>
+        }
         closeIcon="close"
         open={this.state.modalOpen}
         onClose={this.handleClose}
       >
         <Modal.Header>{this.props.data.header}</Modal.Header>
         <Modal.Content>
-          <ModalAlert ref={(modal) => { this.modalAlert = modal; }} />
+          <ModalAlert
+            ref={(modal) => {
+              this.modalAlert = modal;
+            }}
+          />
           <Modal.Description>
-            <Modal.Header> <h3> Deskripsi Lowongan </h3></Modal.Header>
-            { <div dangerouslySetInnerHTML={{ __html: this.props.data.description }} /> }
-            <Modal.Header> <h3> Deskripsi Perusahaan </h3></Modal.Header>
-            { <div dangerouslySetInnerHTML={{ __html: this.props.data.companydescription }} /> }
+            <Modal.Header>
+              {' '}
+              <h3> Deskripsi Lowongan </h3>
+            </Modal.Header>
+            {
+              <div
+                dangerouslySetInnerHTML={{
+                  __html: this.props.data.description,
+                }}
+              />
+            }
+            <Modal.Header>
+              {' '}
+              <h3> Deskripsi Perusahaan </h3>
+            </Modal.Header>
+            {
+              <div
+                dangerouslySetInnerHTML={{
+                  __html: this.props.data.companydescription,
+                }}
+              />
+            }
           </Modal.Description>
           <br />
           <Modal.Description>
-            <Modal.Header> <h3> Tanggung Jawab Lowongan </h3></Modal.Header>
-            { <div dangerouslySetInnerHTML={{ __html: this.props.data.responsibilities }} /> }
+            <Modal.Header>
+              {' '}
+              <h3> Tanggung Jawab Lowongan </h3>
+            </Modal.Header>
+            {
+              <div
+                dangerouslySetInnerHTML={{
+                  __html: this.props.data.responsibilities,
+                }}
+              />
+            }
           </Modal.Description>
           <br />
           <Modal.Description>
-            <Modal.Header> <h3> Keuntungan </h3></Modal.Header>
-            { <div dangerouslySetInnerHTML={{ __html: this.props.data.benefits }} /> }
+            <Modal.Header>
+              {' '}
+              <h3> Keuntungan </h3>
+            </Modal.Header>
+            {
+              <div
+                dangerouslySetInnerHTML={{ __html: this.props.data.benefits }}
+              />
+            }
           </Modal.Description>
           <br />
           <Modal.Description>
-            <Modal.Header> <h3> Persyaratan </h3></Modal.Header>
-            { <div dangerouslySetInnerHTML={{ __html: this.props.data.requirements }} /> }
+            <Modal.Header>
+              {' '}
+              <h3> Persyaratan </h3>
+            </Modal.Header>
+            {
+              <div
+                dangerouslySetInnerHTML={{
+                  __html: this.props.data.requirements,
+                }}
+              />
+            }
           </Modal.Description>
           <br />
           {this.props.active && (
             <div className="coverLetter">
               <br />
               <div className="linkCV">
-                { this.props.resume ? (<a href={this.props.resume} target="_blank" rel="noopener noreferrer"> Klik untuk lihat CV terakhirmu</a>)
-                  : (
-                    <Message
-                      error
-                      icon="warning sign"
-                      header="CV Tidak Ditemukan"
-                      content="Anda belum mengunggah CV. Harap ubah profil anda terlebih dahulu pada halaman Profil."
-                    />)
-                  }
+                {this.props.resume ? (
+                  <a
+                    href={this.props.resume}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                  >
+                    {' '}
+                    Klik untuk lihat CV terakhirmu
+                  </a>
+                ) : (
+                  <Message
+                    error
+                    icon="warning sign"
+                    header="CV Tidak Ditemukan"
+                    content="Anda belum mengunggah CV. Harap ubah profil anda terlebih dahulu pada halaman Profil."
+                  />
+                )}
               </div>
               <br />
               <div>
                 <h5>Cover Letter </h5>
-                <Form >
-                  <TextArea placeholder="Tell us more" size="big" onChange={this.handleChange} />
+                <Form>
+                  <TextArea
+                    placeholder="Tell us more"
+                    size="big"
+                    onChange={this.handleChange}
+                  />
                 </Form>
               </div>
             </div>
-           )}
+          )}
         </Modal.Content>
         <Modal.Actions>
-          <Button loading={this.state.load} color="blue" disabled={!this.props.active || isApplicationClosed} onClick={this.handleApply}>
-            { this.props.active ? 'Daftar' : 'Sudah Terdaftar' } <Icon name="right chevron" />
+          <Button
+            loading={this.state.load}
+            color="blue"
+            disabled={!this.props.active || isApplicationClosed}
+            onClick={this.handleApply}
+          >
+            {this.props.active ? 'Daftar' : 'Sudah Terdaftar'}{' '}
+            <Icon name="right chevron" />
           </Button>
         </Modal.Actions>
       </Modal>
diff --git a/assets/js/components/ApproveModal.jsx b/assets/js/components/ApproveModal.jsx
index a08313c94a10da01472b95f9188e59e92a676600..e44665920a0957feb8cad4c66eb5ac56e8a8f38a 100755
--- a/assets/js/components/ApproveModal.jsx
+++ b/assets/js/components/ApproveModal.jsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import { Modal, Button, Icon, Segment } from 'semantic-ui-react';
 import Server from './../lib/Server';
 import ConfirmationModal from './../components/ConfirmationModal';
@@ -6,8 +7,8 @@ import Applicant from './../components/Applicant';
 
 export default class ApproveModal extends React.Component {
   static propTypes = {
-    data: React.PropTypes.object.isRequired,
-    updateStatus: React.PropTypes.func.isRequired,
+    data: PropTypes.object.isRequired,
+    updateStatus: PropTypes.func.isRequired,
   };
 
   constructor(props) {
@@ -39,8 +40,10 @@ export default class ApproveModal extends React.Component {
   }
 
   fixBody = () => {
-    const anotherModal = document.getElementsByClassName('ui page modals').length;
-    if (anotherModal > 0) document.body.classList.add('scrolling', 'dimmable', 'dimmed');
+    const anotherModal = document.getElementsByClassName('ui page modals')
+      .length;
+    if (anotherModal > 0)
+      document.body.classList.add('scrolling', 'dimmable', 'dimmed');
   };
 
   handleOpen = () => this.setState({ modalOpen: true });
@@ -57,18 +60,25 @@ export default class ApproveModal extends React.Component {
     const data = { status: Applicant.APPLICATION_STATUS.READ };
     return (
       this.props.data.status === Applicant.APPLICATION_STATUS.NEW &&
-      Server.patch(`/applications/${this.props.data.id}/`, data).then((status) => {
-        this.props.updateStatus(this.props.data.id, status.status);
-      })
+      Server.patch(`/applications/${this.props.data.id}/`, data).then(
+        (status) => {
+          this.props.updateStatus(this.props.data.id, status.status);
+        },
+      )
     );
   };
 
   rejectApplication = () => {
-    const data = { status: Applicant.APPLICATION_STATUS.REJECTED, reason: this.state.formValue };
+    const data = {
+      status: Applicant.APPLICATION_STATUS.REJECTED,
+      reason: this.state.formValue,
+    };
     this.setState({ rejectLoading: true });
-    Server.patch(`/applications/${this.props.data.id}/`, data).then((status) => {
-      this.props.updateStatus(this.props.data.id, status.status);
-    });
+    Server.patch(`/applications/${this.props.data.id}/`, data).then(
+      (status) => {
+        this.props.updateStatus(this.props.data.id, status.status);
+      },
+    );
   };
 
   reject = () => {
@@ -84,17 +94,21 @@ export default class ApproveModal extends React.Component {
   acceptApplication = () => {
     const data = { status: Applicant.APPLICATION_STATUS.ACCEPTED };
     this.setState({ acceptLoading: true });
-    Server.patch(`/applications/${this.props.data.id}/`, data).then((status) => {
-      this.props.updateStatus(this.props.data.id, status.status);
-    });
+    Server.patch(`/applications/${this.props.data.id}/`, data).then(
+      (status) => {
+        this.props.updateStatus(this.props.data.id, status.status);
+      },
+    );
   };
 
   finishApplication = () => {
     const data = { status: Applicant.APPLICATION_STATUS.FINISHED };
     this.setState({ finishLoading: true });
-    Server.patch(`/applications/${this.props.data.id}/`, data).then((status) => {
-      this.props.updateStatus(this.props.data.id, status.status);
-    });
+    Server.patch(`/applications/${this.props.data.id}/`, data).then(
+      (status) => {
+        this.props.updateStatus(this.props.data.id, status.status);
+      },
+    );
   };
 
   gotoLink = (url) => {
@@ -104,9 +118,11 @@ export default class ApproveModal extends React.Component {
 
   gotoStudentResume = () => this.gotoLink(this.props.data.student.resume);
 
-  gotoStudentTranscript = () => this.gotoLink(`/transkrip/${this.props.data.id}`);
+  gotoStudentTranscript = () =>
+    this.gotoLink(`/transkrip/${this.props.data.id}`);
 
-  gotoStudentProfile = () => this.gotoLink(`/mahasiswa/${this.props.data.student.id}`);
+  gotoStudentProfile = () =>
+    this.gotoLink(`/mahasiswa/${this.props.data.student.id}`);
 
   accept = () => {
     this.modal.open(
@@ -139,13 +155,20 @@ export default class ApproveModal extends React.Component {
       onClose={this.handleClose}
     >
       <ConfirmationModal
-        ref={(modal) => { this.modal = modal; }} formValueHandler={this.formValueHandler}
+        ref={(modal) => {
+          this.modal = modal;
+        }}
+        formValueHandler={this.formValueHandler}
       />
       <Modal.Header>Data Lamaran</Modal.Header>
       <Modal.Content>
         <h4> Cover Letter </h4>
         <Segment>
-          <p>{this.props.data.cover_letter ? this.props.data.cover_letter : 'Kosong'}</p>
+          <p>
+            {this.props.data.cover_letter
+              ? this.props.data.cover_letter
+              : 'Kosong'}
+          </p>
         </Segment>
         <br />
         <div>
@@ -170,7 +193,11 @@ export default class ApproveModal extends React.Component {
         </div>
       </Modal.Content>
       <Modal.Actions>
-        <Button color="facebook" onClick={this.gotoStudentProfile} floated="left">
+        <Button
+          color="facebook"
+          onClick={this.gotoStudentProfile}
+          floated="left"
+        >
           <Icon name="user outline" /> Lihat Profil
         </Button>
         {this.props.data.status >= 4 ? (
@@ -180,7 +207,9 @@ export default class ApproveModal extends React.Component {
         ) : (
           <Button.Group>
             <Button
-              disabled={this.props.data.status === Applicant.APPLICATION_STATUS.REJECTED}
+              disabled={
+                this.props.data.status === Applicant.APPLICATION_STATUS.REJECTED
+              }
               loading={this.state.rejectLoading}
               color="red"
               onClick={this.reject}
@@ -189,7 +218,9 @@ export default class ApproveModal extends React.Component {
             </Button>
             <Button.Or />
             <Button
-              disabled={this.props.data.status === Applicant.APPLICATION_STATUS.ACCEPTED}
+              disabled={
+                this.props.data.status === Applicant.APPLICATION_STATUS.ACCEPTED
+              }
               loading={this.state.acceptLoading}
               color="green"
               onClick={this.accept}
diff --git a/assets/js/components/Company.jsx b/assets/js/components/Company.jsx
index ac70e2474f0d17df4490963bd21ff238959e78b8..8aaa8e04ab313b0739e8235676511c5016b263f2 100755
--- a/assets/js/components/Company.jsx
+++ b/assets/js/components/Company.jsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import { Item, Button, Grid, Icon } from 'semantic-ui-react';
 import Server from '../lib/Server';
 import ModalAlert from './ModalAlert';
@@ -8,8 +9,8 @@ const defaultImage = 'https://semantic-ui.com/images/wireframe/image.png';
 
 export default class Company extends React.Component {
   static propTypes = {
-    data: React.PropTypes.object.isRequired,
-    updateStatus: React.PropTypes.func.isRequired,
+    data: PropTypes.object.isRequired,
+    updateStatus: PropTypes.func.isRequired,
   };
 
   static COMPANY_STATUS = {
@@ -34,19 +35,25 @@ export default class Company extends React.Component {
   reject = () => {
     const data = { status: Company.COMPANY_STATUS.UNVERIFIED };
     this.setState({ rejectLoading: true });
-    Server.patch(`/companies/${this.props.data.id}/`, data).then((response) => {
-      this.setState({ rejectLoading: false });
-      this.props.updateStatus(this.props.data.id, response.status);
-    }, () => this.setState({ rejectLoading: false }));
+    Server.patch(`/companies/${this.props.data.id}/`, data).then(
+      (response) => {
+        this.setState({ rejectLoading: false });
+        this.props.updateStatus(this.props.data.id, response.status);
+      },
+      () => this.setState({ rejectLoading: false }),
+    );
   };
 
   accept = () => {
     const data = { status: Company.COMPANY_STATUS.VERIFIED };
     this.setState({ acceptLoading: true });
-    Server.patch(`/companies/${this.props.data.id}/`, data).then((response) => {
-      this.setState({ acceptLoading: false });
-      this.props.updateStatus(this.props.data.id, response.status);
-    }, () => this.setState({ acceptLoading: false }));
+    Server.patch(`/companies/${this.props.data.id}/`, data).then(
+      (response) => {
+        this.setState({ acceptLoading: false });
+        this.props.updateStatus(this.props.data.id, response.status);
+      },
+      () => this.setState({ acceptLoading: false }),
+    );
   };
 
   goToCompanyHome = () => {
@@ -59,10 +66,20 @@ export default class Company extends React.Component {
 
   render() {
     return (
-      <Item >
-        <ModalAlert ref={(modal) => { this.modalAlert = modal; }} />
-        <Item.Image size="small" src={this.props.data.logo ? this.props.data.logo : defaultImage} />
-        <Item.Content verticalAlign="middle" style={{ wordWrap: 'break-word', width: '100%' }} >
+      <Item>
+        <ModalAlert
+          ref={(modal) => {
+            this.modalAlert = modal;
+          }}
+        />
+        <Item.Image
+          size="small"
+          src={this.props.data.logo ? this.props.data.logo : defaultImage}
+        />
+        <Item.Content
+          verticalAlign="middle"
+          style={{ wordWrap: 'break-word', width: '100%' }}
+        >
           <Item.Extra>
             <Grid.Row>
               <Grid.Column floated="left" style={{ width: '100%' }}>
@@ -71,14 +88,37 @@ export default class Company extends React.Component {
               </Grid.Column>
               <Grid.Column floated="right" textAlign="center">
                 <div>
-                  {this.props.data.status === Company.COMPANY_STATUS.VERIFIED || <Button loading={this.state.acceptLoading} onClick={this.accept} floated="right" color="green" >
-                    <Icon name="checkmark" />Terima
-                  </Button>}
-                  {this.props.data.status === Company.COMPANY_STATUS.UNVERIFIED || <Button loading={this.state.rejectLoading} onClick={this.reject} floated="right" color="red" >
-                    <Icon name="remove" />Tolak
-                  </Button>}
-                  <Button onClick={this.goToCompanyHome} floated="right" color="facebook" >
-                    <Icon name="home" />Login
+                  {this.props.data.status ===
+                    Company.COMPANY_STATUS.VERIFIED || (
+                    <Button
+                      loading={this.state.acceptLoading}
+                      onClick={this.accept}
+                      floated="right"
+                      color="green"
+                    >
+                      <Icon name="checkmark" />
+                      Terima
+                    </Button>
+                  )}
+                  {this.props.data.status ===
+                    Company.COMPANY_STATUS.UNVERIFIED || (
+                    <Button
+                      loading={this.state.rejectLoading}
+                      onClick={this.reject}
+                      floated="right"
+                      color="red"
+                    >
+                      <Icon name="remove" />
+                      Tolak
+                    </Button>
+                  )}
+                  <Button
+                    onClick={this.goToCompanyHome}
+                    floated="right"
+                    color="facebook"
+                  >
+                    <Icon name="home" />
+                    Login
                   </Button>
                 </div>
               </Grid.Column>
diff --git a/assets/js/components/CompanyList.jsx b/assets/js/components/CompanyList.jsx
index a543bfe62a6e8a10097fcd96c80af49dc7d96efe..a0ce801b68f2083ad9ec84a17d37a0981bcd6081 100755
--- a/assets/js/components/CompanyList.jsx
+++ b/assets/js/components/CompanyList.jsx
@@ -1,12 +1,12 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import { Item, Grid, Container } from 'semantic-ui-react';
 import Company from '../components/Company';
 
 export default class CompanyList extends React.Component {
-
   static propTypes = {
-    items: React.PropTypes.array,
-    status: React.PropTypes.number.isRequired,
+    items: PropTypes.array,
+    status: PropTypes.number.isRequired,
   };
 
   static defaultProps = {
@@ -39,18 +39,23 @@ export default class CompanyList extends React.Component {
         <Item className="vacancyItems">
           <Grid.Row>
             <Container textAlign="center">
-              <p>Tidak ada</p><br />
+              <p>Tidak ada</p>
+              <br />
             </Container>
           </Grid.Row>
         </Item>
       );
     }
-    return this.state.companies.map(company =>
-      (company.status === this.props.status || Company.COMPANY_STATUS.ALL === this.props.status) &&
-      (<Company
-        key={company.id} data={company}
-        updateStatus={this.updateStatus}
-      />),
+    return this.state.companies.map(
+      (company) =>
+        (company.status === this.props.status ||
+          Company.COMPANY_STATUS.ALL === this.props.status) && (
+          <Company
+            key={company.id}
+            data={company}
+            updateStatus={this.updateStatus}
+          />
+        ),
     );
   }
 
@@ -58,7 +63,7 @@ export default class CompanyList extends React.Component {
     <div>
       <Grid container doubling>
         <Item.Group relaxed style={{ width: '100%' }}>
-          { this.generateCompanies() }
+          {this.generateCompanies()}
         </Item.Group>
       </Grid>
     </div>
diff --git a/assets/js/components/CompanyVacancy.jsx b/assets/js/components/CompanyVacancy.jsx
index 07e1413fc52e9e409cb50e61f3279577fa4b282c..260f8b81c95d5c082a0dc7ea0dd1598087c46d80 100755
--- a/assets/js/components/CompanyVacancy.jsx
+++ b/assets/js/components/CompanyVacancy.jsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import moment from 'moment';
 import { Button, Icon, Item, Grid } from 'semantic-ui-react';
 import { Link } from 'react-router';
@@ -8,8 +9,8 @@ const defaultImage = 'https://semantic-ui.com/images/wireframe/image.png';
 
 export default class CompanyVacancy extends React.Component {
   static propTypes = {
-    data: React.PropTypes.object.isRequired,
-    deleteCallback: React.PropTypes.func,
+    data: PropTypes.object.isRequired,
+    deleteCallback: PropTypes.func,
   };
 
   static defaultProps = { deleteCallback: () => {} };
@@ -19,35 +20,71 @@ export default class CompanyVacancy extends React.Component {
     /* istanbul ignore next */
     moment.locale('id');
     this.state = { deleteLoading: false, count: 0, countNew: 0 };
-    Server.get(`/vacancies/${this.props.data.id}/count/`, false).then((data) => {
-      this.setState({ count: data.count, countNew: data.count_new });
-    });
+    Server.get(`/vacancies/${this.props.data.id}/count/`, false).then(
+      (data) => {
+        this.setState({ count: data.count, countNew: data.count_new });
+      },
+    );
   }
 
   getLink = `/buat-lowongan/${this.props.data.id}`;
 
   render() {
     return (
-
       <Item className="applicantItems">
-        <Item.Image src={this.props.data.company.logo ? this.props.data.company.logo : defaultImage} size="small" />
-        <Item.Content verticalAlign="middle" style={{ wordWrap: 'break-word', width: '100%' }} >
+        <Item.Image
+          src={
+            this.props.data.company.logo
+              ? this.props.data.company.logo
+              : defaultImage
+          }
+          size="small"
+        />
+        <Item.Content
+          verticalAlign="middle"
+          style={{ wordWrap: 'break-word', width: '100%' }}
+        >
           <Item.Header as="a">{this.props.data.name}</Item.Header>
           <Grid.Row>
             <Grid.Column floated="left">
-              <p>{ this.state.count } Pendaftar<br/>
-              { this.state.countNew } Pendaftar Baru<br/><br/>
-              { this.props.data.total_accepted_applicants } / {this.props.data.max_accepted_applicants } Diterima<br/>
-              Ditutup {moment(moment(this.props.data.close_time)).fromNow()}</p>
+              <p>
+                {this.state.count} Pendaftar
+                <br />
+                {this.state.countNew} Pendaftar Baru
+                <br />
+                <br />
+                {this.props.data.total_accepted_applicants} /{' '}
+                {this.props.data.max_accepted_applicants} Diterima
+                <br />
+                Ditutup {moment(moment(this.props.data.close_time)).fromNow()}
+              </p>
             </Grid.Column>
             <Grid.Column floated="right">
-              {this.props.data.verified ?
-                (<h4> <Icon name="checkmark box" size="large" color="green" /> Terverifikasi </h4>) :
-                (<h4> <Icon name="remove circle" size="large" color="red" /> Belum Terverifikasi </h4>)}
+              {this.props.data.verified ? (
+                <h4>
+                  {' '}
+                  <Icon name="checkmark box" size="large" color="green" />{' '}
+                  Terverifikasi{' '}
+                </h4>
+              ) : (
+                <h4>
+                  {' '}
+                  <Icon name="remove circle" size="large" color="red" /> Belum
+                  Terverifikasi{' '}
+                </h4>
+              )}
               <Button color="blue" floated="right" as={Link} to={this.getLink}>
                 Ubah <Icon name="right chevron" />
               </Button>
-              <Button loading={this.state.deleteLoading} color="red" floated="right" onClick={() => { this.setState({ deleteLoading: true }); this.props.deleteCallback(); }} >
+              <Button
+                loading={this.state.deleteLoading}
+                color="red"
+                floated="right"
+                onClick={() => {
+                  this.setState({ deleteLoading: true });
+                  this.props.deleteCallback();
+                }}
+              >
                 Hapus <Icon name="delete" />
               </Button>
             </Grid.Column>
diff --git a/assets/js/components/Course.jsx b/assets/js/components/Course.jsx
index 03f005047c240a3c51e4b5f89a422243875a01fc..67f823859045a3d06ea8ab7164e4ed304e7fff8b 100755
--- a/assets/js/components/Course.jsx
+++ b/assets/js/components/Course.jsx
@@ -1,10 +1,11 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import { Table } from 'semantic-ui-react';
 
 export default class Course extends React.Component {
   static propTypes = {
-    courseName: React.PropTypes.string.isRequired,
-    grade: React.PropTypes.string.isRequired,
+    courseName: PropTypes.string.isRequired,
+    grade: PropTypes.string.isRequired,
   };
 
   render = () => (
diff --git a/assets/js/components/CourseList.jsx b/assets/js/components/CourseList.jsx
index 91a3ca189285a3cd30b74355dc63102adf3a6e6f..21cafa412e0d7b9f1df61749285cbf82a645511f 100755
--- a/assets/js/components/CourseList.jsx
+++ b/assets/js/components/CourseList.jsx
@@ -1,11 +1,11 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import { Grid, Segment, Table, Image, Container } from 'semantic-ui-react';
 import Course from './Course';
 
 export default class CourseList extends React.Component {
-
   static propTypes = {
-    data: React.PropTypes.object.isRequired,
+    data: PropTypes.object.isRequired,
   };
 
   constructor(props) {
@@ -14,23 +14,26 @@ export default class CourseList extends React.Component {
     this.state = { course: this.props.data.transcript };
   }
 
-
   generateCourse() {
-    return this.state.course.map((course, index) => course.kelas ? (<Course
-      key={index}
-      grade={course.nilai}
-      courseName={course.kelas.nm_mk_cl.nm_mk}
-    />) : null);
+    return this.state.course.map((course, index) =>
+      course.kelas ? (
+        <Course
+          key={index}
+          grade={course.nilai}
+          courseName={course.kelas.nm_mk_cl.nm_mk}
+        />
+      ) : null,
+    );
   }
 
   render = () => (
     <Segment className="transkrip">
       <Grid>
         <Grid.Row>
-          <Segment basic >
+          <Segment basic>
             <Image src="/assets/img/UI.png" size="tiny" floated="right" />
           </Segment>
-          <Segment basic >
+          <Segment basic>
             <h3 style={{ lineHeight: '1%' }}>Universitas Indonesia </h3>
             <h3 style={{ lineHeight: '1%' }}>Fakultas Ilmu Komputer </h3>
             <h3 style={{ lineHeight: '1%' }}>Program Studi S1</h3>
@@ -53,14 +56,10 @@ export default class CourseList extends React.Component {
                 </Table.Row>
               </Table.Header>
 
-              <Table.Body>
-                { this.generateCourse() }
-              </Table.Body>
+              <Table.Body>{this.generateCourse()}</Table.Body>
             </Table>
-
           </Grid.Column>
         </Grid.Row>
-
       </Grid>
     </Segment>
   );
diff --git a/assets/js/components/InfoModal.jsx b/assets/js/components/InfoModal.jsx
index 43eb5aab09df8d38b7234d5b5136198808b95247..18921da2fa3602e1d40875d4afe398766837798b 100644
--- a/assets/js/components/InfoModal.jsx
+++ b/assets/js/components/InfoModal.jsx
@@ -1,15 +1,16 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import { Modal, Button } from 'semantic-ui-react';
 import ModalAlert from './../components/ModalAlert';
 
 export default class InfoModal extends React.Component {
   static propTypes = {
-    data: React.PropTypes.object.isRequired,
-    active: React.PropTypes.bool.isRequired,
-    buttonTitle: React.PropTypes.string.isRequired,
-    resume: React.PropTypes.string,
-    studentId: React.PropTypes.number.isRequired,
-    updateStatus: React.PropTypes.func.isRequired,
+    data: PropTypes.object.isRequired,
+    active: PropTypes.bool.isRequired,
+    buttonTitle: PropTypes.string.isRequired,
+    resume: PropTypes.string,
+    studentId: PropTypes.number.isRequired,
+    updateStatus: PropTypes.func.isRequired,
   };
 
   constructor(props) {
@@ -34,8 +35,10 @@ export default class InfoModal extends React.Component {
   }
 
   fixBody = () => {
-    const anotherModal = document.getElementsByClassName('ui page modals').length;
-    if (anotherModal > 0) document.body.classList.add('scrolling', 'dimmable', 'dimmed');
+    const anotherModal = document.getElementsByClassName('ui page modals')
+      .length;
+    if (anotherModal > 0)
+      document.body.classList.add('scrolling', 'dimmable', 'dimmed');
   };
 
   handleChange(event) {
@@ -81,11 +84,15 @@ export default class InfoModal extends React.Component {
               <h1> KAPE MERUPAKAN TEMPAT UNTUK MENCARI TEMPAT KERJA PRAKTIK</h1>
             </Modal.Header>
           </Modal.Description>
-          <h2> Jika anda mahasiswa silahkan login dengan mengunakan sso ui kalian</h2>
           <h2>
             {' '}
-            Jika anda merupakan perusahaan silahakan register perusahaan anda atau login dengan
-            username dan password perusahaan yang anda sudah buat
+            Jika anda mahasiswa silahkan login dengan mengunakan sso ui kalian
+          </h2>
+          <h2>
+            {' '}
+            Jika anda merupakan perusahaan silahakan register perusahaan anda
+            atau login dengan username dan password perusahaan yang anda sudah
+            buat
           </h2>
         </Modal.Content>
         <Modal.Actions />
diff --git a/assets/js/components/LoginForm.jsx b/assets/js/components/LoginForm.jsx
index aca1533ef628996fe085e3d394b602916533db1c..2cbf8b184f97e00857554b3bd17b77c81dba5c56 100755
--- a/assets/js/components/LoginForm.jsx
+++ b/assets/js/components/LoginForm.jsx
@@ -1,16 +1,23 @@
 import React from 'react';
-import { Form, Input, Button, Message, Image, Segment } from 'semantic-ui-react';
+import PropTypes from 'prop-types';
+import {
+  Form,
+  Input,
+  Button,
+  Message,
+  Image,
+  Segment,
+} from 'semantic-ui-react';
 import { browserHistory } from 'react-router';
 import Server from '../lib/Server';
 import Storage from '../lib/Storage';
 
 export default class LoginForm extends React.Component {
-
   static propTypes = {
-    type: React.PropTypes.string.isRequired,
-    imgSrc: React.PropTypes.string,
-    header: React.PropTypes.string,
-    usernameLabel: React.PropTypes.string,
+    type: PropTypes.string.isRequired,
+    imgSrc: PropTypes.string,
+    header: PropTypes.string,
+    usernameLabel: PropTypes.string,
   };
 
   static defaultProps = {
@@ -23,7 +30,12 @@ export default class LoginForm extends React.Component {
   constructor(props) {
     super(props);
     /* istanbul ignore next */
-    this.state = { username: '', password: '', errorFlag: false, loading: false };
+    this.state = {
+      username: '',
+      password: '',
+      errorFlag: false,
+      loading: false,
+    };
     this.handleChange = this.handleChange.bind(this);
     this.handleSubmit = this.handleSubmit.bind(this);
   }
@@ -40,39 +52,44 @@ export default class LoginForm extends React.Component {
       password: this.state.password,
     };
     this.setState({ loading: true });
-    Server.post('/login/', data).then((response) => {
-      Storage.set('user-data', response);
-      browserHistory.push('/home');
-    }, () => {
-      this.setState({ errorFlag: true, loading: false });
-    });
+    Server.post('/login/', data).then(
+      (response) => {
+        Storage.set('user-data', response);
+        browserHistory.push('/home');
+      },
+      () => {
+        this.setState({ errorFlag: true, loading: false });
+      },
+    );
   }
 
   render = () => (
-
-    <div className="formLogin" >
-
+    <div className="formLogin">
       <Segment.Group>
         <Segment>
-          <Image src={`./assets/img/${this.props.imgSrc}`} verticalAlign="middle" /> <span>{ this.props.header }</span>
+          <Image
+            src={`./assets/img/${this.props.imgSrc}`}
+            verticalAlign="middle"
+          />{' '}
+          <span>{this.props.header}</span>
         </Segment>
 
-        <Segment inverted className="header" >
+        <Segment inverted className="header">
           <Form
             loading={this.state.loading}
-            onSubmit={e => this.handleSubmit(e)}
+            onSubmit={(e) => this.handleSubmit(e)}
             error={this.state.errorFlag}
           >
             <Form.Group widths="equal">
               <Form.Field>
-                <label htmlFor="id"> { this.props.usernameLabel } </label>
+                <label htmlFor="id"> {this.props.usernameLabel} </label>
                 <Input
                   type="text"
                   id="email"
                   icon="user"
                   iconPosition="left"
                   placeholder={this.props.usernameLabel}
-                  onChange={e => this.handleChange(e, 'username')}
+                  onChange={(e) => this.handleChange(e, 'username')}
                   required
                 />
               </Form.Field>
@@ -86,12 +103,14 @@ export default class LoginForm extends React.Component {
                   icon="key"
                   iconPosition="left"
                   placeholder="password"
-                  onChange={e => this.handleChange(e, 'password')}
+                  onChange={(e) => this.handleChange(e, 'password')}
                   required
                 />
               </Form.Field>
             </Form.Group>
-            <Button type="submit" fluid color="blue">Login</Button>
+            <Button type="submit" fluid color="blue">
+              Login
+            </Button>
             <Message
               error
               content="Login gagal: username atau password salah."
@@ -100,5 +119,5 @@ export default class LoginForm extends React.Component {
         </Segment>
       </Segment.Group>
     </div>
-  )
+  );
 }
diff --git a/assets/js/components/ModalAlert.jsx b/assets/js/components/ModalAlert.jsx
index 5cf19450611081a01b96c11e7c1f3c923360e1ab..9009276224770866275fa18c93b5b4e43116355c 100755
--- a/assets/js/components/ModalAlert.jsx
+++ b/assets/js/components/ModalAlert.jsx
@@ -19,11 +19,17 @@ export default class ModalAlert extends React.Component {
   }
 
   fixBody = () => {
-    const anotherModal = document.getElementsByClassName('ui page modals').length;
-    if (anotherModal > 0) document.body.classList.add('scrolling', 'dimmable', 'dimmed');
+    const anotherModal = document.getElementsByClassName('ui page modals')
+      .length;
+    if (anotherModal > 0)
+      document.body.classList.add('scrolling', 'dimmable', 'dimmed');
   };
 
-  open = (header = this.state.header, content = this.state.content, callback = this.state.callback) => {
+  open = (
+    header = this.state.header,
+    content = this.state.content,
+    callback = this.state.callback,
+  ) => {
     this.setState({ open: true, header, content, callback });
   };
 
diff --git a/assets/js/components/Notification.jsx b/assets/js/components/Notification.jsx
index 46ec93ec1cc1f3b5c79d0db905674e20b005d4ce..3a5ded5ea13b8603342eff32ad2914184997dd9c 100644
--- a/assets/js/components/Notification.jsx
+++ b/assets/js/components/Notification.jsx
@@ -1,39 +1,42 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import { Segment, Image, Button, Grid } from 'semantic-ui-react';
 
-const defaultThumbnail = 'https://semantic-ui.com/images/wireframe/square-image.png';
+const defaultThumbnail =
+  'https://semantic-ui.com/images/wireframe/square-image.png';
 
 export default class Notification extends React.Component {
-    
   static propTypes = {
-    thumbnail: React.PropTypes.string,
-    text: React.PropTypes.string.isRequired,
+    thumbnail: PropTypes.string,
+    text: PropTypes.string.isRequired,
   };
-  
+
   constructor(props) {
     super(props);
-  };
+  }
 
   render() {
-    return(
-        <Segment>
-            <Grid columns={3}>
-                <Grid.Row>
-                    <Grid.Column floated="left" width={2}>
-                        <Image 
-                            src={this.props.thumbnail ? this.props.thumbnail : defaultThumbnail} 
-                            size="tiny"
-                        />
-                    </Grid.Column>
-                    <Grid.Column width={12}>
-                        <p>{this.props.text}</p>
-                    </Grid.Column>
-                    <Grid.Column floated="right" width={2}>
-                        <Button primary>Dismiss</Button>
-                    </Grid.Column>
-                </Grid.Row>
-            </Grid>
-        </Segment>
+    return (
+      <Segment>
+        <Grid columns={3}>
+          <Grid.Row>
+            <Grid.Column floated="left" width={2}>
+              <Image
+                src={
+                  this.props.thumbnail ? this.props.thumbnail : defaultThumbnail
+                }
+                size="tiny"
+              />
+            </Grid.Column>
+            <Grid.Column width={12}>
+              <p>{this.props.text}</p>
+            </Grid.Column>
+            <Grid.Column floated="right" width={2}>
+              <Button primary>Dismiss</Button>
+            </Grid.Column>
+          </Grid.Row>
+        </Grid>
+      </Segment>
     );
   }
-}
\ No newline at end of file
+}
diff --git a/assets/js/components/Pagination.jsx b/assets/js/components/Pagination.jsx
index 5ff59e64b6773bb326dc4ed097fb17fa1e6b1af7..0f5e78b78e14681471ee2ff71c11872f03cafd0f 100755
--- a/assets/js/components/Pagination.jsx
+++ b/assets/js/components/Pagination.jsx
@@ -1,15 +1,14 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import { Menu, Container, Icon, Loader } from 'semantic-ui-react';
 import Server from '../lib/Server';
 import ModalAlert from '../components/ModalAlert';
 
-
 export default class Pagination extends React.Component {
-
   static propTypes = {
-    url: React.PropTypes.string.isRequired,
-    child: React.PropTypes.node.isRequired,
-    error: React.PropTypes.string,
+    url: PropTypes.string.isRequired,
+    child: PropTypes.node.isRequired,
+    error: PropTypes.string,
   };
 
   static defaultProps = {
@@ -46,38 +45,66 @@ export default class Pagination extends React.Component {
   getItemsData = () => {
     const prefix = this.state.dir === 0 ? '?' : '&';
     const searchPrefix = this.state.search !== '' ? prefix : '';
-    const searchValue = this.state.search !== '' ? `search=${this.state.search}` : '';
-    return Server.get(`${this.state.url}${searchPrefix}${searchValue}`, false).then((data) => {
-      console.log('GET ITEM DATA');
-      this.setState({
-        current: this.state.current + this.state.dir,
-      });
-      this.setState(
-        {
+    const searchValue =
+      this.state.search !== '' ? `search=${this.state.search}` : '';
+    return Server.get(
+      `${this.state.url}${searchPrefix}${searchValue}`,
+      false,
+    ).then(
+      (data) => {
+        console.log('GET ITEM DATA');
+        this.setState({
+          current: this.state.current + this.state.dir,
+        });
+        this.setState({
           items: data.results,
           next: `${this.props.url}?page=${this.state.current + 1}`,
           prev: `${this.props.url}?page=${this.state.current - 1}`,
           loading: false,
         });
-      let first = true;
-      let last = true;
-      if (data.previous) {
-        first = false;
-      }
-      if (data.next) {
-        last = false;
-      }
-      this.setState({first, last});
-    }, error => error.then((r) => {
-      this.modalAlert.open(this.props.error, r.detail);
-      this.setState({loading: false});
-    }));
+        let first = true;
+        let last = true;
+        if (data.previous) {
+          first = false;
+        }
+        if (data.next) {
+          last = false;
+        }
+        this.setState({ first, last });
+      },
+      (error) =>
+        error.then((r) => {
+          this.modalAlert.open(this.props.error, r.detail);
+          this.setState({ loading: false });
+        }),
+    );
   };
 
   handleSearchChange(e) {
     this.setState({ search: e.target.value });
     if (e.target.value === '') {
-      this.setState({
+      this.setState(
+        {
+          items: [],
+          current: 1,
+          next: '',
+          prev: '',
+          url: this.props.url,
+          loading: true,
+          dir: 0,
+          start: true,
+          finish: false,
+        },
+        function() {
+          this.getItemsData();
+        },
+      );
+    }
+  }
+
+  handleSearchSubmit() {
+    this.setState(
+      {
         items: [],
         current: 1,
         next: '',
@@ -87,26 +114,11 @@ export default class Pagination extends React.Component {
         dir: 0,
         start: true,
         finish: false,
-      }, function() {
+      },
+      function() {
         this.getItemsData();
-      });
-    }
-  }
-
-  handleSearchSubmit() {
-    this.setState({
-      items: [],
-      current: 1,
-      next: '',
-      prev: '',
-      url: this.props.url,
-      loading: true,
-      dir: 0,
-      start: true,
-      finish: false,
-    }, function() {
-      this.getItemsData();
-    });
+      },
+    );
   }
 
   refresh() {
@@ -115,14 +127,14 @@ export default class Pagination extends React.Component {
 
   handleMovement(dir) {
     const newUrl = this.state[dir];
-    this.setState({ url: newUrl, loading: true }, function () {
+    this.setState({ url: newUrl, loading: true }, function() {
       this.getItemsData();
     });
   }
 
   handlePrev() {
     if (!this.state.first) {
-      this.setState({ dir: -1 }, function () {
+      this.setState({ dir: -1 }, function() {
         this.handleMovement('prev');
       });
     }
@@ -130,26 +142,40 @@ export default class Pagination extends React.Component {
 
   handleNext = () => {
     if (!this.state.last) {
-      this.setState({ dir: 1 }, function () {
+      this.setState({ dir: 1 }, function() {
         this.handleMovement('next');
       });
     }
   };
 
   pageMenu() {
-    return (<Container textAlign="right">
-      <Menu pagination icon="labeled" className="vacancyList">
-        <Menu.Item name="prev" disabled={this.state.first} onClick={this.handlePrev}>
-          <span><Icon disabled={this.state.first} name="angle left" /></span>
-        </Menu.Item>
-        <Menu.Item name="current" active onClick={this.refresh}>
-          {this.state.current}
-        </Menu.Item>
-        <Menu.Item name="next" disabled={this.state.last} onClick={this.handleNext}>
-          <span><Icon disabled={this.state.last} name="angle right" /></span>
-        </Menu.Item>
-      </Menu>
-    </Container>);
+    return (
+      <Container textAlign="right">
+        <Menu pagination icon="labeled" className="vacancyList">
+          <Menu.Item
+            name="prev"
+            disabled={this.state.first}
+            onClick={this.handlePrev}
+          >
+            <span>
+              <Icon disabled={this.state.first} name="angle left" />
+            </span>
+          </Menu.Item>
+          <Menu.Item name="current" active onClick={this.refresh}>
+            {this.state.current}
+          </Menu.Item>
+          <Menu.Item
+            name="next"
+            disabled={this.state.last}
+            onClick={this.handleNext}
+          >
+            <span>
+              <Icon disabled={this.state.last} name="angle right" />
+            </span>
+          </Menu.Item>
+        </Menu>
+      </Container>
+    );
   }
 
   content() {
@@ -160,10 +186,25 @@ export default class Pagination extends React.Component {
     <div>
       <Loader active={this.state.loading} />
       <div className="search-container">
-        <input type="text" placeholder="Cari Lowongan" onChange={this.handleSearchChange} className="search-form"/>
-        <button type="submit" onClick={this.handleSearchSubmit} className="search-button">Cari</button>
+        <input
+          type="text"
+          placeholder="Cari Lowongan"
+          onChange={this.handleSearchChange}
+          className="search-form"
+        />
+        <button
+          type="submit"
+          onClick={this.handleSearchSubmit}
+          className="search-button"
+        >
+          Cari
+        </button>
       </div>
-      <ModalAlert ref={(modal) => { this.modalAlert = modal; }} />
+      <ModalAlert
+        ref={(modal) => {
+          this.modalAlert = modal;
+        }}
+      />
       {!this.state.loading && this.content()}
       {!this.state.loading && this.pageMenu()}
     </div>
diff --git a/assets/js/components/Pane.jsx b/assets/js/components/Pane.jsx
index cbff8380f8f158d58a6f48888aa0b7e811aee094..130ec1b99a3222a7a0e8868ff2df404f2560fdcb 100755
--- a/assets/js/components/Pane.jsx
+++ b/assets/js/components/Pane.jsx
@@ -1,15 +1,12 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 
 export default class Pane extends React.Component {
   static displayName = 'Pane';
 
   static propTypes = {
-    children: React.PropTypes.any.isRequired,
+    children: PropTypes.any.isRequired,
   };
 
-  render = () => (
-    <div>
-      {this.props.children}
-    </div>
-    )
+  render = () => <div>{this.props.children}</div>;
 }
diff --git a/assets/js/components/Tabs.jsx b/assets/js/components/Tabs.jsx
index aa6f75109b1c24f908a9a88043653e465dd60a37..bdc575306cf09dfc827654cce1a7088b185d4221 100755
--- a/assets/js/components/Tabs.jsx
+++ b/assets/js/components/Tabs.jsx
@@ -1,14 +1,13 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 
 export default class Tabs extends React.Component {
   static displayName = 'Tabs';
 
   static propTypes = {
-    selected: React.PropTypes.number.isRequired,
-    children: React.PropTypes.oneOfType([
-      React.PropTypes.array,
-      React.PropTypes.element,
-    ]).isRequired,
+    selected: PropTypes.number.isRequired,
+    children: PropTypes.oneOfType([PropTypes.array, PropTypes.element])
+      .isRequired,
   };
 
   constructor(props) {
@@ -18,9 +17,8 @@ export default class Tabs extends React.Component {
     };
   }
 
-  shouldComponentUpdate = (nextProps, nextState) => (
-      this.props !== nextProps || this.state !== nextState
-  );
+  shouldComponentUpdate = (nextProps, nextState) =>
+    this.props !== nextProps || this.state !== nextState;
 
   handleClick = (index, event) => {
     event.preventDefault();
@@ -31,10 +29,14 @@ export default class Tabs extends React.Component {
 
   _renderTitles = () => {
     function labels(child, index) {
-      const activeClass = (this.state.selected === index ? 'active' : '');
+      const activeClass = this.state.selected === index ? 'active' : '';
       return (
         <li key={index}>
-          <a className={activeClass} href="#" onClick={this.handleClick.bind(this, index)}>
+          <a
+            className={activeClass}
+            href="#"
+            onClick={this.handleClick.bind(this, index)}
+          >
             {child.props.label}
           </a>
         </li>
@@ -51,13 +53,12 @@ export default class Tabs extends React.Component {
     <div className="tabs__content">
       {this.props.children[this.state.selected]}
     </div>
-    );
-
+  );
 
   render = () => (
     <div className="tabs">
       {this._renderTitles()}
       {this._renderContent()}
     </div>
-    );
+  );
 }
diff --git a/assets/js/components/TopMenu.jsx b/assets/js/components/TopMenu.jsx
index 5516f7db0ab184718369aa233375a6fd19036f1c..e7b80130a8bd9f6abba9b457280050b446f935bb 100755
--- a/assets/js/components/TopMenu.jsx
+++ b/assets/js/components/TopMenu.jsx
@@ -1,5 +1,6 @@
 import React from 'react';
-import { Menu, Image, Popup, Icon, Card, Button } from 'semantic-ui-react';
+import PropTypes from 'prop-types';
+import { Menu, Image, Popup, Card, Button } from 'semantic-ui-react';
 import { Link, browserHistory } from 'react-router';
 import Server from '../lib/Server';
 import Storage from '../lib/Storage';
@@ -10,7 +11,6 @@ var quotes = require('starwars');
 const defaultPicture = 'https://semantic-ui.com/images/avatar/small/elliot.jpg';
 
 export default class TopMenu extends React.Component {
-
   static getInfo(user) {
     const adminRole = {
       name: 'admin',
@@ -32,7 +32,7 @@ export default class TopMenu extends React.Component {
   }
 
   static propTypes = {
-    user: React.PropTypes.object.isRequired,
+    user: PropTypes.object.isRequired,
   };
 
   constructor(props) {
@@ -42,16 +42,18 @@ export default class TopMenu extends React.Component {
     this.state = {
       activeItem: 'Beranda',
       logoutLoading: false,
-      currentDate: moment(new Date()).format('dddd') + ', ' + moment(new Date()).format('LL'),
+      currentDate:
+        moment(new Date()).format('dddd') +
+        ', ' +
+        moment(new Date()).format('LL'),
       todayQuote: quotes(),
-      applianceInformation: (
-        "1. Pastikan anda sudah mengupdate profile anda\n" +
-        "2. Cari lowongan internship yang ada di tab lowongan\n" +
+      applianceInformation:
+        '1. Pastikan anda sudah mengupdate profile anda\n' +
+        '2. Cari lowongan internship yang ada di tab lowongan\n' +
         "3. Klik tombol 'Detail'\n" +
-        "4. Pastikan persyaratan sudah terpenuhi\n" +
-        "5. Jelaskan mengapa anda ingin mengikuti lowongan internship tersebut di 'Cover Letter'\n"+
-        "6. Klik tombol 'Daftar'\n"
-      )
+        '4. Pastikan persyaratan sudah terpenuhi\n' +
+        "5. Jelaskan mengapa anda ingin mengikuti lowongan internship tersebut di 'Cover Letter'\n" +
+        "6. Klik tombol 'Daftar'\n",
     };
     this.logout = this.logout.bind(this);
     this.logoutCompany = this.logoutCompany.bind(this);
@@ -63,18 +65,21 @@ export default class TopMenu extends React.Component {
 
   handleModalClick() {
     this.modalAlert.open(
-      "Cara mendaftar di lowongan yang ada:",
-      this.state.applianceInformation
+      'Cara mendaftar di lowongan yang ada:',
+      this.state.applianceInformation,
     );
   }
 
   logout = (e) => {
     e.preventDefault();
     this.setState({ logoutLoading: true });
-    Server.get('/api-auth/logout/?next=/', true).then(() => {
-      Storage.clear();
-      browserHistory.push('/login');
-    }, () => this.setState({ logoutLoading: false }));
+    Server.get('/api-auth/logout/?next=/', true).then(
+      () => {
+        Storage.clear();
+        browserHistory.push('/login');
+      },
+      () => this.setState({ logoutLoading: false }),
+    );
   };
 
   logoutCompany = /* istanbul ignore next */ (e) => {
@@ -92,18 +97,29 @@ export default class TopMenu extends React.Component {
       <Button color="blue" inverted onClick={this.handleModalClick}>
         ?
       </Button>
-    )
+    );
     return (
       <div>
-        <div style={{ padding: '10px 0', fontStyle: 'italic', textAlign: 'center' }}>
-          { this.state.todayQuote }
+        <div
+          style={{
+            padding: '10px 0',
+            fontStyle: 'italic',
+            textAlign: 'center',
+          }}
+        >
+          {this.state.todayQuote}
         </div>
-        { this.props.user.data.is_staff && this.props.user.data.company && (
+        {this.props.user.data.is_staff && this.props.user.data.company && (
           <div className="admin-bar">
             <p>
               Anda login sebagai perusahaan:
-              <b> {this.props.user.data.company.name}</b> (#{this.props.user.data.company.id}).
-              Untuk kembali menjadi admin, klik <a href="#" onClick={this.logoutCompany}> link ini</a>
+              <b> {this.props.user.data.company.name}</b> (#
+              {this.props.user.data.company.id}). Untuk kembali menjadi admin,
+              klik{' '}
+              <a href="#" onClick={this.logoutCompany}>
+                {' '}
+                link ini
+              </a>
             </p>
           </div>
         )}
@@ -115,31 +131,85 @@ export default class TopMenu extends React.Component {
         <Menu color="blue" pointing secondary>
           <Image as={Link} size="small" src="/assets/img/logo.png" to="/home" />
           <Menu.Menu position="right">
-            <Menu.Item>
-            { btn }
-            </Menu.Item>
+            <Menu.Item>{btn}</Menu.Item>
             <Menu.Item style={{ margin: '3px' }}>
-              { this.state.currentDate }
+              {this.state.currentDate}
             </Menu.Item>
-            <Menu.Item as={Link} to="/home" name="Beranda" active={activeItem === 'Beranda'} onClick={this.handleItemClick} />
-            { this.props.user.role === 'student' &&
-            <Menu.Item as={Link} to="/profil-mahasiswa" name="Profil" active={activeItem === 'Profil'} onClick={this.handleItemClick} /> }
-            <Menu.Item as={Link} to="/edit-profil-mahasiswa" name="Edit Profil" active={activeItem === 'EditProfil'} onClick={this.handleItemClick} /> }
-            { this.props.user.role === 'company' &&
-            <Menu.Item as={Link} to="/profil-perusahaan" name="Profil" active={activeItem === 'Profil'} onClick={this.handleItemClick} /> }
-            { this.props.user.data.is_staff &&
-            <Menu.Item as={Link} to="/lowongan" name="Lowongan" active={activeItem === 'Lowongan'} onClick={this.handleItemClick} /> }
-            <Menu.Item as={Link} to="/notifikasi" name="Notifikasi" active={activeItem === 'Notifikasi'} onClick={this.handleItemClick} />
+            <Menu.Item
+              as={Link}
+              to="/home"
+              name="Beranda"
+              active={activeItem === 'Beranda'}
+              onClick={this.handleItemClick}
+            />
+            {this.props.user.role === 'student' && (
+              <Menu.Item
+                as={Link}
+                to="/profil-mahasiswa"
+                name="Profil"
+                active={activeItem === 'Profil'}
+                onClick={this.handleItemClick}
+              />
+            )}
+            <Menu.Item
+              as={Link}
+              to="/edit-profil-mahasiswa"
+              name="Edit Profil"
+              active={activeItem === 'EditProfil'}
+              onClick={this.handleItemClick}
+            />{' '}
+            }
+            {this.props.user.role === 'company' && (
+              <Menu.Item
+                as={Link}
+                to="/profil-perusahaan"
+                name="Profil"
+                active={activeItem === 'Profil'}
+                onClick={this.handleItemClick}
+              />
+            )}
+            {this.props.user.data.is_staff && (
+              <Menu.Item
+                as={Link}
+                to="/lowongan"
+                name="Lowongan"
+                active={activeItem === 'Lowongan'}
+                onClick={this.handleItemClick}
+              />
+            )}
+            <Menu.Item
+              as={Link}
+              to="/notifikasi"
+              name="Notifikasi"
+              active={activeItem === 'Notifikasi'}
+              onClick={this.handleItemClick}
+            />
             <Menu.Item style={{ padding: '10px 0' }}>
               <Popup
-                trigger={<Image src={(this.props.user.role === 'company' ? data.logo : data.photo) || defaultPicture} avatar />}
-                flowing hoverable
+                trigger={
+                  <Image
+                    src={
+                      (this.props.user.role === 'company'
+                        ? data.logo
+                        : data.photo) || defaultPicture
+                    }
+                    avatar
+                  />
+                }
+                flowing
+                hoverable
               >
-                <Card
-                  header={data.name}
-                  description={data.user.email}
-                />
-                <Button as={Link} onClick={this.logout} loading={this.state.logoutLoading} name="logout" color="blue" size="tiny">Keluar</Button>
+                <Card header={data.name} description={data.user.email} />
+                <Button
+                  as={Link}
+                  onClick={this.logout}
+                  loading={this.state.logoutLoading}
+                  name="logout"
+                  color="blue"
+                  size="tiny"
+                >
+                  Keluar
+                </Button>
               </Popup>
             </Menu.Item>
           </Menu.Menu>
diff --git a/assets/js/components/Vacancy.jsx b/assets/js/components/Vacancy.jsx
index 597139de5bb5ec8ae0bcb9b5fd3c2a891296fade..cf1ad264209c3d074ae9ec869be6cb2acc7e7b35 100755
--- a/assets/js/components/Vacancy.jsx
+++ b/assets/js/components/Vacancy.jsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import { Item, Rating, Button, Grid } from 'semantic-ui-react';
 import moment from 'moment';
 import ApplyModal from './ApplyModal';
@@ -10,11 +11,11 @@ const defaultImage = 'https://semantic-ui.com/images/wireframe/image.png';
 
 export default class Vacancy extends React.Component {
   static propTypes = {
-    user: React.PropTypes.object.isRequired,
-    // studentId: React.PropTypes.number.isRequired,
-    data: React.PropTypes.object.isRequired,
-    bookmarked: React.PropTypes.number,
-    status: React.PropTypes.number,
+    user: PropTypes.object.isRequired,
+    // studentId: PropTypes.number.isRequired,
+    data: PropTypes.object.isRequired,
+    bookmarked: PropTypes.number,
+    status: PropTypes.number,
   };
 
   static defaultProps = {
@@ -22,7 +23,13 @@ export default class Vacancy extends React.Component {
     status: 0,
   };
 
-  static APPLICATION_STATUS_TEXT = ['Dikirim', 'Dibaca', 'Ditandai', 'Ditolak', 'Diterima'];
+  static APPLICATION_STATUS_TEXT = [
+    'Dikirim',
+    'Dibaca',
+    'Ditandai',
+    'Ditolak',
+    'Diterima',
+  ];
 
   static APPLICATION_STATUS = {
     NEW: 0,
@@ -50,32 +57,51 @@ export default class Vacancy extends React.Component {
   }
 
   count() {
-    Server.get(`/applications/${this.props.data.id}/count/`, false).then((data) => {
-      this.setState({ count: data.count });
-    });
+    Server.get(`/applications/${this.props.data.id}/count/`, false).then(
+      (data) => {
+        this.setState({ count: data.count });
+      },
+    );
   }
 
   bookmark() {
     const data = { vacancy_id: this.props.data.id };
     if (this.state.bookmarked < 1) {
-      Server.post(`/students/${this.props.user.data.student.id}/bookmarked-vacancies/`, data);
+      Server.post(
+        `/students/${this.props.user.data.student.id}/bookmarked-vacancies/`,
+        data,
+      );
     } else {
-      Server.delete(`/students/${this.props.user.data.student.id}/bookmarked-vacancies/${this.props.data.id}/`);
+      Server.delete(
+        `/students/${this.props.user.data.student.id}/bookmarked-vacancies/${this.props.data.id}/`,
+      );
     }
     this.state.bookmarked = 1 - this.state.bookmarked;
   }
 
-  updateStatus = (registeredStatus = null) => this.setState({ registeredStatus });
+  updateStatus = (registeredStatus = null) =>
+    this.setState({ registeredStatus });
 
   removeVacancyApplication() {
     this.setState({ deleteLoading: true });
-    Server.delete(`/students/${this.props.user.data.student.id}/applied-vacancies/${this.props.data.id}/`).then(() => {
-      this.modalAlert.open('Pendaftaran Berhasil Dibatalkan', 'Pendaftaran anda berhasil dihapus dari sistem\n');
-      this.setState({ registeredStatus: null, deleteLoading: false });
-    }, () => {
-      this.modalAlert.open('Permintaan Gagal', 'Maaf permintaan anda gagal diproses sistem. Harap ulangi pendaftaran atau hubungi administrator\n');
-      this.setState({ deleteLoading: false });
-    });
+    Server.delete(
+      `/students/${this.props.user.data.student.id}/applied-vacancies/${this.props.data.id}/`,
+    ).then(
+      () => {
+        this.modalAlert.open(
+          'Pendaftaran Berhasil Dibatalkan',
+          'Pendaftaran anda berhasil dihapus dari sistem\n',
+        );
+        this.setState({ registeredStatus: null, deleteLoading: false });
+      },
+      () => {
+        this.modalAlert.open(
+          'Permintaan Gagal',
+          'Maaf permintaan anda gagal diproses sistem. Harap ulangi pendaftaran atau hubungi administrator\n',
+        );
+        this.setState({ deleteLoading: false });
+      },
+    );
   }
 
   openConfirmationModal() {
@@ -108,17 +134,36 @@ export default class Vacancy extends React.Component {
       />
     );
 
-    const cancelButton = <Button loading={this.state.deleteLoading} floated="right" color="red" onClick={this.openConfirmationModal}>Batal</Button>;
-    const rejectedButton =
-      <Button floated="right" color="red" disabled>{Vacancy.APPLICATION_STATUS_TEXT[this.state.registeredStatus]}</Button>;
-    const acceptedButton =
-      <Button floated="right" color="blue" disabled>{Vacancy.APPLICATION_STATUS_TEXT[this.state.registeredStatus]}</Button>;
+    const cancelButton = (
+      <Button
+        loading={this.state.deleteLoading}
+        floated="right"
+        color="red"
+        onClick={this.openConfirmationModal}
+      >
+        Batal
+      </Button>
+    );
+    const rejectedButton = (
+      <Button floated="right" color="red" disabled>
+        {Vacancy.APPLICATION_STATUS_TEXT[this.state.registeredStatus]}
+      </Button>
+    );
+    const acceptedButton = (
+      <Button floated="right" color="blue" disabled>
+        {Vacancy.APPLICATION_STATUS_TEXT[this.state.registeredStatus]}
+      </Button>
+    );
 
     if (this.state.registeredStatus == null) {
       return applyModal;
-    } else if (this.state.registeredStatus === Vacancy.APPLICATION_STATUS.REJECTED) {
+    } else if (
+      this.state.registeredStatus === Vacancy.APPLICATION_STATUS.REJECTED
+    ) {
       return rejectedButton;
-    } else if (this.state.registeredStatus === Vacancy.APPLICATION_STATUS.ACCEPTED) {
+    } else if (
+      this.state.registeredStatus === Vacancy.APPLICATION_STATUS.ACCEPTED
+    ) {
       return acceptedButton;
     }
     return cancelButton;
@@ -127,33 +172,64 @@ export default class Vacancy extends React.Component {
   render() {
     return (
       <Item className="applicantItems">
-        <ConfirmationModal ref={(modal) => { this.confirmationModal = modal; }} />
-        <ModalAlert ref={(modal) => { this.modalAlert = modal; }} />
-        <Item.Image size="small" src={this.props.data.company.logo ? this.props.data.company.logo : defaultImage} />
-        <Item.Content verticalAlign="middle" style={{ wordWrap: 'break-word', width: '100%' }} >
+        <ConfirmationModal
+          ref={(modal) => {
+            this.confirmationModal = modal;
+          }}
+        />
+        <ModalAlert
+          ref={(modal) => {
+            this.modalAlert = modal;
+          }}
+        />
+        <Item.Image
+          size="small"
+          src={
+            this.props.data.company.logo
+              ? this.props.data.company.logo
+              : defaultImage
+          }
+        />
+        <Item.Content
+          verticalAlign="middle"
+          style={{ wordWrap: 'break-word', width: '100%' }}
+        >
           <Item.Extra>
             <Grid.Row>
               <Grid.Column floated="left">
-                <h4>{ this.props.data.name }</h4>
-                { this.props.data.company.name }<br />
-                { this.props.data.company.address }<br />
-                { this.props.data.working_period}<br />
-                { this.state.count } orang telah mendaftar!<br />
+                <h4>{this.props.data.name}</h4>
+                {this.props.data.company.name}
+                <br />
+                {this.props.data.company.address}
+                <br />
+                {this.props.data.working_period}
+                <br />
+                {this.state.count} orang telah mendaftar!
+                <br />
                 <b>
-                  { this.props.data.total_accepted_applicants }
-                  / { this.props.data.max_accepted_applicants }
-                  diterima </b><br />
-                <b>{`Ditutup ${moment(moment(this.props.data.close_time)).fromNow()}`}</b><br />
-                Rp. { this.props.data.salary } <br />
+                  {this.props.data.total_accepted_applicants}/{' '}
+                  {this.props.data.max_accepted_applicants}
+                  diterima{' '}
+                </b>
+                <br />
+                <b>{`Ditutup ${moment(
+                  moment(this.props.data.close_time),
+                ).fromNow()}`}</b>
+                <br />
+                Rp. {this.props.data.salary} <br />
                 <b>{this.props.data.apply_before}</b>
               </Grid.Column>
-              <Grid.Column floated="right" >
+              <Grid.Column floated="right">
                 <Grid.Row textAlign="center">
-                  <Rating icon="star" onRate={this.bookmark} size="massive" defaultRating={this.props.bookmarked} maxRating={1} />
-                </Grid.Row>
-                <Grid.Row>
-                  { this.generateAction() }
+                  <Rating
+                    icon="star"
+                    onRate={this.bookmark}
+                    size="massive"
+                    defaultRating={this.props.bookmarked}
+                    maxRating={1}
+                  />
                 </Grid.Row>
+                <Grid.Row>{this.generateAction()}</Grid.Row>
               </Grid.Column>
             </Grid.Row>
           </Item.Extra>
diff --git a/assets/js/components/VacancyList.jsx b/assets/js/components/VacancyList.jsx
index 2ce2bcc601d48a0b7f6424b33cac053c926859ae..819b8191eb28de424922da6bb4b42006d834f5cd 100755
--- a/assets/js/components/VacancyList.jsx
+++ b/assets/js/components/VacancyList.jsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import { Item, Grid, Container, Dropdown } from 'semantic-ui-react';
 import Vacancy from './Vacancy';
 import CompanyVacancy from './CompanyVacancy';
@@ -7,12 +8,11 @@ import Server from '../lib/Server';
 import moment from 'moment';
 
 export default class VacancyList extends React.Component {
-
   static propTypes = {
-    user: React.PropTypes.object.isRequired,
-    userId: React.PropTypes.number.isRequired,
-    items: React.PropTypes.array,
-    sort: React.PropTypes.string.isRequired,
+    user: PropTypes.object.isRequired,
+    userId: PropTypes.number.isRequired,
+    items: PropTypes.array,
+    sort: PropTypes.string.isRequired,
   };
 
   static defaultProps = {
@@ -45,7 +45,9 @@ export default class VacancyList extends React.Component {
     this.generateVacancies = this.generateVacancies.bind(this);
     this.updateStatus = this.updateStatus.bind(this);
     this.handleChangeSalaryFilter = this.handleChangeSalaryFilter.bind(this);
-    this.handleChangeVacancyStateFilter = this.handleChangeVacancyStateFilter.bind(this);
+    this.handleChangeVacancyStateFilter = this.handleChangeVacancyStateFilter.bind(
+      this,
+    );
   }
 
   updateStatus(id, status) {
@@ -57,50 +59,73 @@ export default class VacancyList extends React.Component {
     this.setState({ vacancies: obj });
   }
 
-  deleteVacancy = id => Server.delete(`/vacancies/${id}/`, this.state).then(() => {
-    this.modalAlert.open('Hapus Lowongan', 'Lowongan berhasil dihapus');
-    const newVacancies = [];
-    this.state.vacancies.map(vacancy => vacancy.id !== id && newVacancies.push(vacancy));
-    this.setState({ vacancies: newVacancies });
-  }, error => error.then((r) => {
-    this.modalAlert.open('Gagal Menghapus Lowongan', r.error);
-  }));
+  deleteVacancy = (id) =>
+    Server.delete(`/vacancies/${id}/`, this.state).then(
+      () => {
+        this.modalAlert.open('Hapus Lowongan', 'Lowongan berhasil dihapus');
+        const newVacancies = [];
+        this.state.vacancies.map(
+          (vacancy) => vacancy.id !== id && newVacancies.push(vacancy),
+        );
+        this.setState({ vacancies: newVacancies });
+      },
+      (error) =>
+        error.then((r) => {
+          this.modalAlert.open('Gagal Menghapus Lowongan', r.error);
+        }),
+    );
 
   filterVacanciesBasedOnSalary = (vacancies) => {
     const salaryFilter = this.state.salaryFilter;
     let filteredVacancies = vacancies;
     if (salaryFilter === 1) {
-      filteredVacancies = filteredVacancies.filter((vacancy) => vacancy.props.data.salary < 1000000);
+      filteredVacancies = filteredVacancies.filter(
+        (vacancy) => vacancy.props.data.salary < 1000000,
+      );
     } else if (salaryFilter === 2) {
-      filteredVacancies = filteredVacancies.filter((vacancy) => vacancy.props.data.salary >= 1000000 && vacancy.props.data.salary < 3000000);
+      filteredVacancies = filteredVacancies.filter(
+        (vacancy) =>
+          vacancy.props.data.salary >= 1000000 &&
+          vacancy.props.data.salary < 3000000,
+      );
     } else if (salaryFilter === 3) {
-      filteredVacancies = filteredVacancies.filter((vacancy) => vacancy.props.data.salary >= 3000000 && vacancy.props.data.salary < 5000000);
-    } else if (salaryFilter === 4){
-      filteredVacancies = filteredVacancies.filter((vacancy) => vacancy.props.data.salary >= 5000000);
+      filteredVacancies = filteredVacancies.filter(
+        (vacancy) =>
+          vacancy.props.data.salary >= 3000000 &&
+          vacancy.props.data.salary < 5000000,
+      );
+    } else if (salaryFilter === 4) {
+      filteredVacancies = filteredVacancies.filter(
+        (vacancy) => vacancy.props.data.salary >= 5000000,
+      );
     }
 
     return filteredVacancies;
-  }
+  };
 
   filterVacanciesBasedOnVacancyStatus = (vacancies) => {
     const vacancyStateFilter = this.state.vacancyStateFilter;
     let filteredVacancies = vacancies;
     if (vacancyStateFilter === 1) {
-      filteredVacancies = filteredVacancies.filter((vacancy) => vacancy.props.data.close_time >= moment().format());
+      filteredVacancies = filteredVacancies.filter(
+        (vacancy) => vacancy.props.data.close_time >= moment().format(),
+      );
     } else if (vacancyStateFilter === 2) {
-      filteredVacancies = filteredVacancies.filter((vacancy) => vacancy.props.data.close_time < moment().format());
+      filteredVacancies = filteredVacancies.filter(
+        (vacancy) => vacancy.props.data.close_time < moment().format(),
+      );
     }
 
     return filteredVacancies;
-  }
+  };
 
   handleChangeSalaryFilter = (e, data) => {
     this.setState({ salaryFilter: data.value });
-  }
+  };
 
   handleChangeVacancyStateFilter = (e, data) => {
     this.setState({ vacancyStateFilter: data.value });
-  }
+  };
 
   generateVacancies() {
     if (this.state.vacancies.length === 0) {
@@ -108,26 +133,25 @@ export default class VacancyList extends React.Component {
         <Item className="vacancyItems">
           <Grid.Row>
             <Container textAlign="center">
-              <p>Tidak ada</p><br />
+              <p>Tidak ada</p>
+              <br />
             </Container>
           </Grid.Row>
         </Item>
       );
     }
     if (this.props.user.role === 'student') {
-      let vacancies = this.state.vacancies.map(vacancy =>
-        (
-          <Vacancy
-            key={vacancy.id}
-            status={vacancy.status}
-            user={this.props.user}
-            bookmarked={vacancy.bookmarked ? 1 : 0}
-            data={vacancy}
-            studentId={this.props.userId}
-            salary={this.props.salary}
-          />
-        ),
-      );
+      let vacancies = this.state.vacancies.map((vacancy) => (
+        <Vacancy
+          key={vacancy.id}
+          status={vacancy.status}
+          user={this.props.user}
+          bookmarked={vacancy.bookmarked ? 1 : 0}
+          data={vacancy}
+          studentId={this.props.userId}
+          salary={this.props.salary}
+        />
+      ));
       if (this.props.sort === 'ASC') {
         return vacancies.sort((vac1, vac2) => {
           return vac1.props.data.name.localeCompare(vac2.props.data.name);
@@ -140,9 +164,12 @@ export default class VacancyList extends React.Component {
       vacancies = this.filterVacanciesBasedOnSalary(vacancies);
       vacancies = this.filterVacanciesBasedOnVacancyStatus(vacancies);
       return vacancies;
-    } else if ((this.props.user.role === 'admin' && this.props.user.data.company != null)
-      || this.props.user.role === 'company') {
-      return this.state.vacancies.map(vacancy => (
+    } else if (
+      (this.props.user.role === 'admin' &&
+        this.props.user.data.company != null) ||
+      this.props.user.role === 'company'
+    ) {
+      return this.state.vacancies.map((vacancy) => (
         <Item.Group key={vacancy.id} relaxed style={{ width: '100%' }}>
           <CompanyVacancy
             key={vacancy.id}
@@ -150,38 +177,37 @@ export default class VacancyList extends React.Component {
             deleteCallback={() => this.deleteVacancy(vacancy.id)}
           />
         </Item.Group>
-      ),
-      );
+      ));
     }
 
-    return this.state.vacancies.map(vacancy => (
+    return this.state.vacancies.map((vacancy) => (
       <AdminVacancy
         key={vacancy.id}
         data={vacancy}
         updateStatus={this.updateStatus}
-      />),
-    );
+      />
+    ));
   }
 
   render = () => (
     <div>
       <Dropdown
-          placeholder="Filter Berdasarkan Gaji"
-          className="dropdownApplicant"
-          selection
-          options={this.state.salaryFilterBy}
-          onChange={this.handleChangeSalaryFilter}
-        />
+        placeholder="Filter Berdasarkan Gaji"
+        className="dropdownApplicant"
+        selection
+        options={this.state.salaryFilterBy}
+        onChange={this.handleChangeSalaryFilter}
+      />
       <Dropdown
-          placeholder='Filter Berdasarkan Batas Daftar Lowongan'
-          className="dropdownApplicant"
-          selection
-          options={this.state.vacancyStateFilterBy}
-          onChange={this.handleChangeVacancyStateFilter}
-        />
+        placeholder="Filter Berdasarkan Batas Daftar Lowongan"
+        className="dropdownApplicant"
+        selection
+        options={this.state.vacancyStateFilterBy}
+        onChange={this.handleChangeVacancyStateFilter}
+      />
       <Grid container columns="eleven" doubling style={{ display: 'block' }}>
         <Item.Group relaxed style={{ width: '100%' }}>
-          { this.generateVacancies() }
+          {this.generateVacancies()}
         </Item.Group>
       </Grid>
     </div>
diff --git a/assets/js/index.jsx b/assets/js/index.jsx
index c29cf1a28e34bef1faec0036c40f0c3129e13ddf..ce26e518cb03e9a15c61b499ffcd4c74c8c9dd4e 100644
--- a/assets/js/index.jsx
+++ b/assets/js/index.jsx
@@ -1,8 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import {
-  Router, Route, browserHistory, Redirect,
-} from 'react-router';
+import { Router, Route, browserHistory, Redirect } from 'react-router';
 import Dashboard from './Dashboard';
 import Login from './Login';
 import VacancyPage from './VacancyPage';
@@ -26,20 +24,20 @@ export default class App extends React.Component {
       const data = Storage.get('user-data');
       if (data.is_staff) {
         return 'admin';
-      } 
-      
+      }
+
       if (data.supervisor) {
         return 'supervisor';
-      } 
-      
+      }
+
       if (data.student) {
         return 'student';
-      } 
-      
+      }
+
       if (data.company) {
         return 'company';
       }
-      
+
       return 'error';
     }
     return 'not-logged-in';
@@ -52,7 +50,7 @@ export default class App extends React.Component {
     this.handleHome = this.handleHome.bind(this);
   }
 
-  authorization = (allowedRoles) => (WrappedComponent) => (
+  authorization = (allowedRoles) => (WrappedComponent) =>
     /* eslint-disable no-multi-comp */
     class WithAuthorization extends React.Component {
       constructor(props) {
@@ -71,24 +69,22 @@ export default class App extends React.Component {
         if (allowedRoles.includes(role)) {
           return <WrappedComponent {...this.props} {...this.state} />;
         }
-        return (
-          <div>
-            {' '}
-            { browserHistory.push('/home') }
-            {' '}
-          </div>
-        );
+        return <div> {browserHistory.push('/home')} </div>;
       }
-    });
+    };
 
   handleAuth = (nextState, replace) => {
     if (!Server.isLoggedIn()) replace({ pathname: '/login' });
     Storage.getUserData();
   };
 
-  handleHome= (nextState, replace, cb) => {
+  handleHome = (nextState, replace, cb) => {
     if (Server.isLoggedIn()) {
-      if (App.getRole() === 'student' || App.getRole() === 'company' || App.getRole() === 'supervisor') {
+      if (
+        App.getRole() === 'student' ||
+        App.getRole() === 'company' ||
+        App.getRole() === 'supervisor'
+      ) {
         replace({ pathname: '/lowongan' });
         cb();
       } else if (App.getRole() === 'admin') {
@@ -96,7 +92,8 @@ export default class App extends React.Component {
         cb();
       }
     }
-    replace({ pathname: '/login' }); cb();
+    replace({ pathname: '/login' });
+    cb();
   };
 
   render() {
@@ -106,8 +103,17 @@ export default class App extends React.Component {
     const company = this.authorization(['admin', 'company']);
     const commonUser = this.authorization(['admin', 'student', 'company']);
     const grownups = this.authorization(['admin', 'company', 'supervisor']);
-    const facultyMember = this.authorization(['admin', 'student', 'supervisor']);
-    const all = this.authorization(['admin', 'company', 'supervisor', 'student']);
+    const facultyMember = this.authorization([
+      'admin',
+      'student',
+      'supervisor',
+    ]);
+    const all = this.authorization([
+      'admin',
+      'company',
+      'supervisor',
+      'student',
+    ]);
 
     return (
       <Router history={browserHistory}>
@@ -119,14 +125,28 @@ export default class App extends React.Component {
           <Route path="/buat-lowongan" component={company(CreateVacancy)} />
           <Route path="/buat-lowongan/:id" component={company(CreateVacancy)} />
           <Route path="/pelamar" component={company(ApplicantPage)} />
-          <Route path="/profil-mahasiswa" component={student(ProfilePage)} own />
-          <Route path="/profil-perusahaan" component={company(CompanyProfile)} />
+          <Route
+            path="/profil-mahasiswa"
+            component={student(ProfilePage)}
+            own
+          />
+          <Route
+            path="/profil-perusahaan"
+            component={company(CompanyProfile)}
+          />
           <Route path="/feedback" component={all(FeedbackPage)} />
           <Route path="/mahasiswa/:id" component={grownups(ProfilePage)} />
-          <Route path="/perusahaan/:id" component={facultyMember(CompanyProfile)} />
+          <Route
+            path="/perusahaan/:id"
+            component={facultyMember(CompanyProfile)}
+          />
           <Route path="/perusahaan" component={staff(CompanyPage)} />
           <Route path="/rekap" component={supervisor(SupervisorPage)} />
-          <Route path="/edit-profil-mahasiswa" component={student(EditProfile)} own />
+          <Route
+            path="/edit-profil-mahasiswa"
+            component={student(EditProfile)}
+            own
+          />
         </Route>
         <Route path="/home" onEnter={this.handleHome} />
         <Route path="/admin-vacancy" component={VacancyPage} />
diff --git a/package.json b/package.json
index 6956922580a21828d0f5119a25bc1ef2a2ced3f7..beb9dd317baeed83512dd9b1b3dffeb8101b2bf3 100755
--- a/package.json
+++ b/package.json
@@ -60,7 +60,6 @@
     "karma-webpack": "^4.0.2",
     "mocha": "^6.2.1",
     "mock-cookie": "^0.3.2",
-    "moment": "^2.18.1",
     "react-hot-loader": "^3.0.0-beta.5",
     "react-test-utils": "0.0.1",
     "webpack-bundle-tracker": "0.0.93",
@@ -73,7 +72,9 @@
     "chart.js": "^2.8.0",
     "compression-webpack-plugin": "^3.0.0",
     "eslint-plugin-react-hooks": "^1.7.0",
+    "moment": "^2.18.1",
     "object-assign": "^4.1.1",
+    "prop-types": "^15.7.2",
     "react": "^15.6.2",
     "react-addons-test-utils": "^15.6.2",
     "react-chartjs-2": "^2.8.0",