[#144502159] [Refactor] #45 refactor CompanyVacancy components

assets/js/VacancyPage.jsx

 import React from 'react';
+import { Container } from 'semantic-ui-react';
 import Tabs from './components/Tabs';
 import Pane from './components/Pane';
 import VacancyList from './components/VacancyList';
@@ -77,17 +78,20 @@ export default class VacancyPage extends React.Component {
       );
     } else if (this.props.user.role === 'company' || this.props.user.role === 'admin') {
       return (
-        <Pagination
-          url={`/companies/${this.state.id}/vacancies/`}
-          child={
-            <VacancyList
-              key={1}
-              user={this.props.user}
-              userId={this.state.id}
-            />
-          }
-          error="Anda belum diverifikasi. Harap hubungi admin"
-        />
+        <Container className="vacancies">
+          <Pagination
+            key={1}
+            url={`/companies/${this.state.id}/vacancies/`}
+            child={
+              <VacancyList
+                key={1}
+                user={this.props.user}
+                userId={this.state.id}
+              />
+            }
+            error="Anda belum diverifikasi. Harap hubungi admin"
+          />
+        </Container>
       );
     }
 

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

@@ -316,6 +316,7 @@ describe('VacancyList', () => {
   it('fails delete vacancy', () => {
     fetchMock.restore();
     fetchMock.delete('*', 404);
+    fetchMock.get('*', response2);
     const vacancyList = ReactTestUtils.renderIntoDocument(
       <VacancyList userId={1} items={newResponse} user={companyUser} deleteCallback={() => {}} />,
     );

assets/js/components/CompanyVacancy.jsx

@@ -2,6 +2,7 @@ import React from 'react';
 import moment from 'moment';
 import { Button, Icon, Item, Grid } from 'semantic-ui-react';
 import { Link } from 'react-router';
+import Server from '../lib/Server';
 
 const defaultImage = 'http://semantic-ui.com/images/wireframe/image.png';
 
@@ -15,8 +16,12 @@ export default class CompanyVacancy extends React.Component {
 
   constructor(props) {
     super(props);
+    /* istanbul ignore next */
     moment.locale('id');
-    this.state = { deleteLoading: false };
+    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 });
+    });
   }
 
   getLink = `/buat-lowongan/${this.props.data.id}`;
@@ -25,12 +30,13 @@ export default class CompanyVacancy extends React.Component {
     return (
       <Item className="applicantItems">
         <Item.Image src={this.props.data.company.logo ? this.props.data.company.logo : defaultImage} size="small" />
-        <Item.Content>
+        <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">
-              <h5> 105 Pendaftar </h5>
-              Ditutup {moment(moment(this.props.data.close_time)).fromNow()}
+              <p>{ this.state.count } Pendaftar<br/>
+              { this.state.countNew } Pendaftar Baru<br/><br/>
+              Ditutup {moment(moment(this.props.data.close_time)).fromNow()}</p>
             </Grid.Column>
             <Grid.Column floated="right">
               {this.props.data.verified ?