Appearance tweaks :)

assets/css/custom.css

@@ -176,11 +176,11 @@ card .formRegis{
   line-height: 30%;
 }
 
-.biodata-company h4{
+.biodataCompany h4{
   color: grey;
 }
 
-.button-profile{
+.buttonProfile{
  margin-top:30px;
 }
 
@@ -223,51 +223,51 @@ card .formRegis{
   margin-right:5%;
 }
 
-.ui.segment.segment-profile-company{
+.ui.segment.segmentProfileCompany{
   margin-left: 10%;
   margin-right: 10%;
   padding: 5%;
 }
 
-.ui.segment.profile-form-company{
+.ui.segment.profileFormCompany{
   margin-top:4%;
   margin-left: 10%;
   margin-right: 10%;
   padding-bottom:3%;
 }
 
-.company-profile{
+.companyProfile{
   padding-bottom:5%;
 }
 
-.ui.segment.vacancyList-company{
+.ui.segment.vacancyListCompany{
   margin-left: 10%;
   margin-right: 10%;
 }
 
 .ui.segment.paginationCompany{
-  margin: 2% 7% 60px;
+  margin: 2% 7%;
 }
 
 .admin-bar{
   margin: 0;
-  padding: 0 10px 0 0;
+  padding: 10px;
   width: 100%;
   text-align: right;
   background-color: #304D8A;
   color: white;
 }
 
-.dropdown-applicant{
+.dropdownApplicant{
   margin-left:7%;
   margin-top:2%;
   margin-bottom: 0;
 }
 
-.button-administrasi{
-   margin-left:7%;
+.administrationButtons {
+  margin-left:7%;
   margin-top:2%;
-  margin-bottom: 0;
+  margin-bottom: 2%;
 }
 
 .ui.segment.transkrip{

assets/js/ApplicantPage.jsx

@@ -62,7 +62,7 @@ export default class ApplicantPage extends React.Component {
     const company = this.props.user.data.company;
     return (
       <div>
-        <div className="dropdown-applicant">
+        <div className="dropdownApplicant">
           <Dropdown placeholder="Semua Lowongan" search selection options={this.state.urls} onChange={this.handleChange} />
         </div>
         <Tabs selected={0}>

assets/js/CompanyPage.jsx

@@ -12,14 +12,12 @@ export default class CompanyPage extends React.Component {
   };
 
   handleClick = () => window.open('/admin/');
-  handleVacancy = () => window.open('/lowongan');
 
   render() {
     return (
       <div>
-        <div className="button-administrasi">
+        <div className="administrationButtons">
           <Button onClick={this.handleClick} icon="dashboard" labelPosition="left" color="facebook" content="Buka Menu Administrasi" />
-          <Button onClick={this.handleVacancy} icon="dashboard" labelPosition="left" color="facebook" content="Halaman Verifikasi Lowongan" />
         </div>
 
         <Tabs selected={0}>

assets/js/CompanyProfile.jsx

@@ -13,20 +13,20 @@ export default class CompanyProfile extends React.Component {
     const data = TopMenu.getInfo(this.props.user);
     console.log(data);
     return (
-      <div className="company-profile">
-        <Segment className="segment-profile-company" >
+      <div className="companyProfile">
+        <Segment className="segmentProfileCompany" >
           <Header as="h2" icon textAlign="center">
             <Image src={data.logo || defaultLogo} size="small" shape="circular" />
           </Header>
           <Container textAlign="center" className="profile-biodata">
-            <div className="biodata-company">
+            <div className="biodataCompany">
               <h2>{ data.name }</h2>
               <h3>{ data.address }t</h3>
               <p>{ data.description }</p>
             </div>
           </Container>
         </Segment>
-        {/* <Segment className="profile-form-company">*/}
+        {/* <Segment className="profileFormCompany">*/}
         {/* <Header as="h3" textAlign="center">*/}
         {/* <Icon name="edit" />*/}
         {/* <Header.Content>*/}

assets/js/CreateVacancy.jsx

@@ -102,6 +102,7 @@ export default class CreateVacancy extends React.Component {
           { !this.state.loading &&
             <CKEditor value={this.state.description} onChange={this.handleEditor} /> }
           <script>CKEDITOR.replace( 'description' );</script>
+          <br />
           <Form.Group widths="equal">
             <Form.Field
               className="open-time-field"

assets/js/Dashboard.jsx

 import React from 'react';
 import TopMenu from './components/TopMenu';
-import Server from './lib/Server';
-import Footer from './components/Footer';
 
 export default class Dashboard extends React.Component {
   static propTypes = {

assets/js/ProfilePage.jsx

@@ -234,7 +234,7 @@ export default class ProfilePage extends React.Component {
                 </div>
 
                 <Container textAlign="center">
-                  <div className="button-profile">
+                  <div className="buttonProfile">
                     <Button onClick={this.gotoStudentResume} primary size="small">Resume</Button>
                   </div>
                   <div>

assets/js/VacancyPage.jsx

 import React from 'react';
-import { Segment, Item, Button } from 'semantic-ui-react';
+import { Segment, Button } from 'semantic-ui-react';
 import { Link } from 'react-router';
 import Tabs from './components/Tabs';
 import Pane from './components/Pane';
@@ -94,7 +94,7 @@ export default class VacancyPage extends React.Component {
                 userId={this.state.id}
               />
             }
-            error="Anda belum diverifikasi. Harap hubungi admin"
+            error="Akun anda belum terverifikasi. Harap hubungi pihak administrasi"
           />
         </Segment>
       );
@@ -157,7 +157,7 @@ export default class VacancyPage extends React.Component {
   render() {
     return (
       <div className="applicant">
-        <div className="button-administrasi">
+        <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"/>

assets/js/components/ApplicantList.jsx

@@ -38,7 +38,7 @@ export default class ApplicantList extends React.Component {
         <Item className="applicantItems">
           <Grid.Row>
             <Container textAlign="center">
-              <p>Tidak ada pelamar<br /></p>
+              <p>Tidak ada pelamar</p><br />
             </Container>
           </Grid.Row>
         </Item>

assets/js/components/ApplyModal.jsx

@@ -8,7 +8,7 @@ export default class ApplyModal extends React.Component {
     data: React.PropTypes.object.isRequired,
     active: React.PropTypes.bool.isRequired,
     buttonTitle: React.PropTypes.string.isRequired,
-    resume: React.PropTypes.string.isRequired,
+    resume: React.PropTypes.string,
     studentId: React.PropTypes.number.isRequired,
     updateStatus: React.PropTypes.func.isRequired,
   };

assets/js/components/CompanyList.jsx

 import React from 'react';
-import { Item, Grid } from 'semantic-ui-react';
+import { Item, Grid, Container } from 'semantic-ui-react';
 import Company from '../components/Company';
 
 export default class CompanyList extends React.Component {
@@ -34,6 +34,17 @@ export default class CompanyList extends React.Component {
   }
 
   generateCompanies() {
+    if (this.state.companies.length === 0) {
+      return (
+        <Item className="vacancyItems">
+          <Grid.Row>
+            <Container textAlign="center">
+              <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

assets/js/components/CompanyRegisterModal.jsx

@@ -4,6 +4,7 @@ import { Modal, Button, Form, Input, TextArea, Header, Icon } from 'semantic-ui-
 import ModalAlert from './../components/ModalAlert';
 import Server from './../lib/Server';
 import Storage from './../lib/Storage';
+import Dumper from './../lib/Dumper';
 
 export default class CompanyRegisterModal extends React.Component {
 
@@ -46,7 +47,7 @@ export default class CompanyRegisterModal extends React.Component {
       browserHistory.push('/home');
     }, error => error.then((r) => {
       this.setState({ loading: false });
-      this.modalAlert.open('Gagal Membuat Akun', r.error);
+      this.modalAlert.open('Gagal Membuat Akun', Dumper.dump(r));
     }));
   };
 

assets/js/components/Pagination.jsx

@@ -59,6 +59,7 @@ export default class Pagination extends React.Component {
     this.setState({ first, last });
   }, error => error.then((r) => {
     this.modalAlert.open(this.props.error, r.detail);
+    this.setState({ loading: false });
   }));
 
   refresh() {

assets/js/components/TopMenu.jsx

@@ -35,7 +35,7 @@ export default class TopMenu extends React.Component {
   constructor(props) {
     super(props);
     /* istanbul ignore next */
-    this.state = { activeItem: 'Beranda' };
+    this.state = { activeItem: 'Beranda', logoutLoading: false };
     this.logout = this.logout.bind(this);
     this.logoutCompany = this.logoutCompany.bind(this);
   }
@@ -44,10 +44,11 @@ export default class TopMenu extends React.Component {
 
   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 }));
   };
 
   logoutCompany = /* istanbul ignore next */ (e) => {
@@ -65,27 +66,29 @@ export default class TopMenu extends React.Component {
       <div>
         { this.props.user.data.is_staff && this.props.user.data.company && (
           <div className="admin-bar">
-            <br/>
             <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>
             </p>
-            <br/>
           </div>
         )}
         <Menu color="blue" pointing secondary>
           <Image as="a" size="small" src="/assets/img/logo.png" href="/" />
           <Menu.Menu position="right">
+            { !this.props.user.data.is_staff &&
             <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" name="Profil" active={activeItem === 'Profil'} onClick={this.handleItemClick} />
             }
+            { this.props.user.role === 'student' &&
+            <Menu.Item as={Link} to="/profil" name="Profil" active={activeItem === 'Profil'} onClick={this.handleItemClick} /> }
+            { this.props.user.data.is_staff &&
+            <Menu.Item as={Link} to="/perusahaan" name="Perusahaan" active={activeItem === 'Perusahaan' || activeItem === 'Beranda'} 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>
               <Popup
                 trigger={<Image
-                  as={Link} to="/profil" src={(this.props.user.role === 'company' ? data.logo : data.photo) || defaultPicture} avatar
-                  onClick={this.handleItemClick}
+                  src={(this.props.user.role === 'company' ? data.logo : data.photo) || defaultPicture} avatar
                 />}
                 flowing
                 hoverable
@@ -94,7 +97,7 @@ export default class TopMenu extends React.Component {
                   header={data.name}
                   description={data.user.email}
                 />
-                <Button as={Link} onClick={this.logout} name="logout" color="blue" size="tiny">Keluar</Button>
+                <Button as={Link} onClick={this.logout} loading={this.state.logoutLoading} name="logout" color="blue" size="tiny">Keluar</Button>
 
               </Popup>
 

assets/js/components/Vacancy.jsx

@@ -22,7 +22,7 @@ export default class Vacancy extends React.Component {
     status: 0,
   };
 
-  static APPLICATION_STATUS_TEXT = ['Dikirim', 'Dibaca', 'Dibaca', 'Ditolak', 'Diterima'];
+  static APPLICATION_STATUS_TEXT = ['Dikirim', 'Dibaca', 'Ditandai', 'Ditolak', 'Diterima'];
 
   static APPLICATION_STATUS = {
     NEW: 0,
@@ -37,7 +37,7 @@ export default class Vacancy extends React.Component {
     /* istanbul ignore next */
     this.state = {
       bookmarked: this.props.bookmarked,
-      registeredStatus: this.props.status ? 'registered' : 'new',
+      registeredStatus: this.props.status,
       deleteLoading: false,
     };
     moment.locale('id');
@@ -58,13 +58,13 @@ export default class Vacancy extends React.Component {
     this.state.bookmarked = 1 - this.state.bookmarked;
   }
 
-  updateStatus = (registeredStatus = 'registered') => 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: 'new', deleteLoading: false });
+      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 });
@@ -84,7 +84,7 @@ export default class Vacancy extends React.Component {
     const applyModal = (
       <ApplyModal
         updateStatus={this.updateStatus}
-        active={this.state.registeredStatus === 'new'}
+        active={this.state.registeredStatus === null}
         data={{
           header: this.props.data.name,
           description: this.props.data.description,
@@ -98,15 +98,15 @@ 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.props.status]}</Button>;
+      <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.props.status]}</Button>;
+      <Button floated="right" color="blue" disabled>{Vacancy.APPLICATION_STATUS_TEXT[this.state.registeredStatus]}</Button>;
 
-    if (this.props.status == null) {
+    if (this.state.registeredStatus == null) {
       return applyModal;
-    } else if (this.props.status === Vacancy.APPLICATION_STATUS.REJECTED) {
+    } else if (this.state.registeredStatus === Vacancy.APPLICATION_STATUS.REJECTED) {
       return rejectedButton;
-    } else if (this.props.status === Vacancy.APPLICATION_STATUS.ACCEPTED) {
+    } else if (this.state.registeredStatus === Vacancy.APPLICATION_STATUS.ACCEPTED) {
       return acceptedButton;
     }
     return cancelButton;

assets/js/components/VacancyList.jsx

 import React from 'react';
-import { Item, Button, Grid } from 'semantic-ui-react';
-import { Link } from 'react-router';
+import { Item, Grid, Container } from 'semantic-ui-react';
 import Vacancy from './Vacancy';
 import CompanyVacancy from './CompanyVacancy';
 import AdminVacancy from './AdminVacancy';
@@ -50,6 +49,17 @@ export default class VacancyList extends React.Component {
   }));
 
   generateVacancies() {
+    if (this.state.vacancies.length === 0) {
+      return (
+        <Item className="vacancyItems">
+          <Grid.Row>
+            <Container textAlign="center">
+              <p>Tidak ada</p><br />
+            </Container>
+          </Grid.Row>
+        </Item>
+      );
+    }
     if (this.props.user.role === 'student') {
       return this.state.vacancies.map(vacancy =>
         (
@@ -63,17 +73,17 @@ export default class VacancyList extends React.Component {
           />
         ),
       );
-    }  else if ((this.props.user.role === 'admin' && this.props.user.data.company != null)
+    } 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}
-              data={vacancy}
-              deleteCallback={() => this.deleteVacancy(vacancy.id)}
-            />
-          </Item.Group>
-        ),
+        <Item.Group key={vacancy.id} relaxed style={{ width: '100%' }}>
+          <CompanyVacancy
+            key={vacancy.id}
+            data={vacancy}
+            deleteCallback={() => this.deleteVacancy(vacancy.id)}
+          />
+        </Item.Group>
+      ),
       );
     }
 
@@ -88,7 +98,7 @@ export default class VacancyList extends React.Component {
 
   render = () => (
     <div>
-      <Grid container columns="eleven" doubling>
+      <Grid container columns="eleven" doubling style={{ display: 'block' }}>
         <Item.Group relaxed style={{ width: '100%' }}>
           { this.generateVacancies() }
         </Item.Group>

assets/js/index.jsx

@@ -78,9 +78,6 @@ export default class App extends React.Component {
       } else if (App.getRole() === 'company') {
         replace({ pathname: '/lowongan' });
         cb();
-      } else if (App.getRole() === 'company') {
-        replace({ pathname: '/lowongan' });
-        cb();
       } else if (App.getRole() === 'admin') {
         replace({ pathname: '/perusahaan' });
         cb();