Fakultas Ilmu Komputer UI

Commit 2241ae2f authored by sirinbaisa's avatar sirinbaisa
Browse files

Merge branch 'UserStory4' of https://gitlab.com/PPL2017csui/PPLA1 into...

Merge branch 'UserStory4' of https://gitlab.com/PPL2017csui/PPLA1 into Features/create-vacancy-company

# Conflicts:
#	assets/js/components/CompanyVacancy.jsx
parents ab4134ff 2a832043
......@@ -12,3 +12,4 @@ test/*
.coverage
.tmp/
npm-debug.log
debug.log
......@@ -6,38 +6,78 @@ import VacancyList from './components/VacancyList';
export default class VacancyPage extends React.Component {
static getRole() {
const student = Storage.get('user-data').student;
const company = Storage.get('user-data').company;
if (student) {
return { id: student.id, type: 'student' };
} else if (company) {
return { id: company.id, type: 'company' };
}
return { id: '0', type: 'error' };
}
constructor(props) {
super(props);
/* istanbul ignore next */
const role = VacancyPage.getRole();
this.state = {
email: '',
password: '',
errorFlag: false,
vacancies: [],
id: role.id,
role: role.type,
};
this.handleItemClick = this.handleItemClick.bind(this);
}
handleItemClick = (e, { name }) => this.setState({ activeItem: name });
generateVacancies() {
if (this.state.role === 'student') {
return (
<Tabs selected={0}>
<Pane label="Semua Lowongan" >
<VacancyList
key={1}
userId={this.state.id}
url="/vacancies/"
/>
</Pane>
<Pane label="Lamaran saya" >
<VacancyList
key={2}
status="Batal"
userId={this.state.id}
url={`/students/${this.state.id}/applied-vacancies/`}
/>
</Pane>
<Pane label="Lamaran Ditandai" >
<VacancyList
key={3}
userId={this.state.id}
url={`/students/${this.state.id}/bookmarked-vacancies/`}
/>
</Pane>
</Tabs>
);
} else if (this.state.role === 'company') {
return (
<VacancyList key={1} userId={this.state.id} url="/vacancies/" type="company" />
);
}
render() {
const student = Storage.get('user-data').student;
return (
<div className="halamanLowongan">
<Tabs selected={0}>
<Pane label="Semua Lowongan" >
<VacancyList key={1} studentId={student.id} url="/vacancies/" />
</Pane>
<Pane label="Lamaran saya" >
<VacancyList key={2} status="Batal" studentId={student.id} url={`/students/${student.id}/applied-vacancies/`} />
</Pane>
<Pane label="Lamaran Ditandai" >
<VacancyList key={3} studentId={student.id} url={`/students/${student.id}/bookmarked-vacancies/`} />
</Pane>
</Tabs>
</div>
<div>
<h3>
Anda tidak terautentifikasi. Harap logout dan login
kembali dengan akun yang benar
</h3>
</div>
);
}
render() {
return (
<div className="applicant">
{ this.generateVacancies() }
</div>
);
}
}
/* eslint-disable no-unused-expressions */
import React from 'react';
import ReactTestUtils from 'react-addons-test-utils';
import VacancyPage from '../VacancyPage';
import Storage from '../lib/Storage';
// import Server from '../../lib/Server';
describe('VacancyList', () => {
const studentSession = {
url: 'http://localhost:8000/api/users/9/',
username: 'muhammad.reza42',
email: 'muhammad.reza42@ui.ac.id',
is_staff: false,
company: null,
supervisor: null,
student: {
id: 3,
user: {
url: 'http://localhost:8000/api/users/9/',
username: 'muhammad.reza42',
email: 'muhammad.reza42@ui.ac.id',
is_staff: false,
},
name: 'Muhammad R.',
created: '2017-03-28T13:33:46.147241Z',
updated: '2017-03-28T13:33:46.148248Z',
npm: 1406543593,
resume: null,
phone_number: null,
bookmarked_vacancies: [
3,
],
applied_vacancies: [
3,
1,
],
},
};
const companySession = {
url: 'http://localhost:8001/api/users/8/',
username: 'Tutuplapak',
email: '',
is_staff: false,
company: {
id: 3,
user: {
url: 'http://localhost:8001/api/users/8/',
username: 'Tutuplapak',
email: '',
is_staff: false,
},
name: 'Tutuplapak',
created: '2017-03-28T07:30:10.535000Z',
updated: '2017-03-28T07:30:10.535000Z',
description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla aliquet semper neque a fermentum. Duis ac tellus vitae augue iaculis ultrices. Curabitur commodo et neque nec feugiat. Morbi ac diam vel nunc commodo cursus. Phasellus nulla sapien, hendrerit vitae bibendum at, sollicitudin eu ante. Maecenas maximus, ante eu sollicitudin convallis, mauris nunc posuere risus, eu porttitor diam lacus vitae enim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse at lectus a elit sollicitudin tempor. Nullam condimentum, justo nec tincidunt maximus, neque mi vulputate leo, sit amet lacinia massa ex eget sem. Duis ac erat facilisis, fringilla mauris in, consequat neque. In et neque consequat, vehicula magna at, efficitur ante. Mauris ac lacinia nibh.\r\n\r\nProin sagittis, lectus quis maximus varius, libero justo sollicitudin augue, non lacinia risus orci a enim. Curabitur iaculis enim quis ullamcorper commodo. Vivamus id nisi rhoncus, dignissim tellus quis, interdum est. Fusce sollicitudin eu libero ac feugiat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Maecenas semper posuere ex, sed accumsan libero iaculis faucibus. Fusce laoreet ac ligula ut consectetur. Donec tortor mauris, rutrum at sodales et, viverra in dolor. Sed bibendum elit et maximus volutpat. Phasellus justo ipsum, laoreet sit amet faucibus eu, ultricies suscipit mauris. Nullam aliquam libero eu ante ultrices mattis. Donec non justo hendrerit neque volutpat placerat. Ut euismod est nec sem mollis, sit amet porttitor massa rhoncus. Aenean id erat sit amet nunc ultrices scelerisque non in ipsum. Curabitur sollicitudin nulla id mi accumsan venenatis.',
verified: true,
logo: 'http://localhost:8001/files/company-logo/8a258a48-3bce-4873-b5d1-538b360d0059.png',
address: 'Jl. Kebayoran Baru nomor 13, Jakarta Barat',
},
supervisor: null,
student: null,
};
const errorSession = {
url: 'http://localhost:8001/api/users/8/',
username: 'Tutuplapak',
email: '',
is_staff: false,
company: null,
supervisor: null,
student: null,
};
it('renders for companies without problem', () => {
Storage.set('user-data', companySession);
const vacancyPage = ReactTestUtils.renderIntoDocument(
<VacancyPage studentId={1} url="test" />);
expect(vacancyPage).to.exist;
expect(vacancyPage.state.role).to.equal('company');
});
it('renders for students without problem', () => {
Storage.set('user-data', studentSession);
const vacancyPage = ReactTestUtils.renderIntoDocument(
<VacancyPage studentId={1} url="test" />);
expect(vacancyPage).to.exist;
expect(vacancyPage.state.role).to.equal('student');
});
it('renders without problem for error case', () => {
Storage.set('user-data', errorSession);
const vacancyPage = ReactTestUtils.renderIntoDocument(
<VacancyPage studentId={1} url="test" />);
expect(vacancyPage).to.exist;
expect(vacancyPage.state.role).to.equal('error');
});
});
......@@ -4,11 +4,11 @@ import ReactTestUtils from 'react-addons-test-utils';
import ApplyModal from '../../components/ApplyModal';
describe('ApplyModal', () => {
it('renders without problem', () => {
it('renders without problem', () => {
const modalPendaftaran = ReactTestUtils.renderIntoDocument(
<ApplyModal id={4} data={{key: 'value'}} buttonTitle="submit" />);
<ApplyModal id={4} data={{ key: 'value' }} buttonTitle="submit" />);
expect(modalPendaftaran).to.exist;
});
});
it('open without problem', () => {
const modalPendaftaran = ReactTestUtils.renderIntoDocument(
......
/**
* Created by baisa on 09/04/2017.
*/
import React from 'react';
import ReactTestUtils from 'react-addons-test-utils';
import CompanyVacancy from '../../components/CompanyVacancy';
describe('ApplyModal', () => {
it('renders without problem', () => {
describe('CompanyVacancy', () => {
const response ={
close_time: '2019-03-28T05:55:42Z',
company: {
address: 'kebayoran baru',
id: 1,
logo: null,
name: 'tutup lapak',
},
created: '2017-03-28T07:05:47.128672Z',
description: 'Lorem ipsum dolbh.',
id: 3,
name: 'Software Engineer',
open_time: '2017-03-28T05:55:38Z',
updated: '2017-03-28T07:34:13.122093Z',
verified: true,
};
const response2 = {
close_time: '2019-03-28T05:55:42Z',
company: {
address: 'kebayoran baru',
id: 1,
logo: 'pictures',
name: 'tutup lapak',
},
created: '2017-03-28T07:05:47.128672Z',
description: 'Lorem ipsum dolbh.',
id: 3,
name: 'Software Engineer',
open_time: '2017-03-28T05:55:38Z',
updated: '2017-03-28T07:34:13.122093Z',
verified: true,
};
it('renders with logo without problem', () => {
const companyVacancy = ReactTestUtils.renderIntoDocument(
<CompanyVacancy data={response2} />);
expect(companyVacancy).to.exist;
});
it('renders without logo without problem', () => {
const companyVacancy = ReactTestUtils.renderIntoDocument(
<CompanyVacancy header="header"/>);
<CompanyVacancy data={response} />);
expect(companyVacancy).to.exist;
});
}
});
});
......@@ -8,11 +8,11 @@ describe('Vacancy', () => {
const fetchMock = require('fetch-mock');
const response ={
close_time: '2019-03-28T05:55:42Z',
company: {
company: {
address: 'kebayoran baru',
id: 1,
logo: null,
name: 'tutup lapak',
id: 1,
logo: null,
name: 'tutup lapak',
},
created: '2017-03-28T07:05:47.128672Z',
description: 'Lorem ipsum dolbh.',
......
......@@ -22,19 +22,26 @@ describe('VacancyList', () => {
updated: '2017-03-28T07:34:13.122093Z',
verified: true,
}];
const response2 = { hello: 'not-world' };
it('renders without problem', () => {
fetchMock.get('*', response);
const vacancyList = ReactTestUtils.renderIntoDocument(
<VacancyList studentId={1} url="test" />);
<VacancyList userId={1} url="test" />);
expect(vacancyList).to.exist;
});
it('renders without problem for company', () => {
fetchMock.get('*', response);
const vacancyList = ReactTestUtils.renderIntoDocument(
<VacancyList type='company' userId={1} url="test" />);
vacancyList.state.vacancies = response;
expect(vacancyList.generateVacancies()).to.exist;
});
it('update bookmarks without problem', () => {
fetchMock.get('*', response);
const vacancyList = ReactTestUtils.renderIntoDocument(
<VacancyList studentId={1} url="test" />);
<VacancyList userId={1} url="test" />);
vacancyList.updateBookmarkList();
expect(JSON.stringify(vacancyList.state.bookmarkList)).to.be.defined;
});
......@@ -42,19 +49,27 @@ describe('VacancyList', () => {
it('renders marked bookmarked vacancies without problem', () => {
fetchMock.get('*', response);
const vacancyList = ReactTestUtils.renderIntoDocument(
<VacancyList studentId={1} url="test" />);
<VacancyList userId={1} url="test" />);
vacancyList.state.vacancies = response;
vacancyList.state.bookmarkList = [{id: 5}, {id: 3}];
vacancyList.state.bookmarkList = [{id: 5}, {id: 3}, {id: 1}];
expect(vacancyList.generateVacancies()).to.exist;
});
it('renders not marked vacancies without problem', () => {
fetchMock.get('*', response);
const vacancyList = ReactTestUtils.renderIntoDocument(
<VacancyList userId={1} url="test" />);
vacancyList.state.vacancies = response;
vacancyList.state.bookmarkList = [{id: 6}, {id: 4}, {id: 2}];
expect(vacancyList.generateVacancies()).to.exist;
});
it('success calling API', () => {
fetchMock.get('*', response);
const vacancyList = ReactTestUtils.renderIntoDocument(
<VacancyList studentId={1} url="test" />);
<VacancyList userId={1} url="test" />);
vacancyList.state.vacancies = response;
expect(JSON.stringify(vacancyList.state.vacancies)).to.equal(JSON.stringify(response));
expect(vacancyList.generateVacancies()).to.exist;
});
});
import React from 'react';
import { Segment, Button, Icon, Item } from 'semantic-ui-react';
const defaultImage = 'http://semantic-ui.com/images/wireframe/image.png';
export default class ApplicantList extends React.Component {
static propTypes = {
header: React.PropTypes.string.isRequired,
data: React.PropTypes.object.isRequired,
};
render() {
return (
<div className="applicant" >
<Button icon="eye" secondary labelPosition="left" content="Lihat Semua Pendaftar" />
<Button icon="add" secondary labelPosition="left" content="Tambah Lowongan Baru" />
<Item className="applicantItems">
<Item.Image src={this.props.data.company.logo ? this.props.data.company.logo : defaultImage} size="small" />
<Segment>
<Item.Group divided>
<Item className="applicantItems">
<Item.Image src="http://semantic-ui.com/images/wireframe/image.png" />
<Item.Content>
<Item.Header as="a">{this.props.data.name}</Item.Header>
<Segment padded basic floated="right">
<Button primary floated="right" >Ubah<Icon name="right chevron" /></Button>
<Segment basic> 5 jam lalu</Segment>
</Segment>
<Item.Content>
<Item.Header as="a" className="header-lowongan" ></Item.Header>
<Segment padded basic floated="right">
<Button primary floated="right" > Ubah <Icon name="right chevron" /></Button>
<Segment basic> 5 jam lalu</Segment>
</Segment>
<Item.Extra>
<h3> 105 Pendaftar </h3>
</Item.Extra>
<Item.Extra className="extra-company">
<h2>{this.props.header}</h2>
<h3> 105 Pendaftar </h3>
</Item.Extra>
</Item.Content>
</Item.Content>
</Item>
</Item.Group>
</Segment>
</div>
</Item>
);
}
}
import React from 'react';
import { Button, Image as ImageComponent, Item, Rating, Icon } from 'semantic-ui-react'
import ModalPendaftaran from './ApplyModal';
const paragraph = <ImageComponent src="http://semantic-ui.com/images/wireframe/short-paragraph.png" />;
const image = <Item.Image size="small" src="http://semantic-ui.com/images/wireframe/image.png" />;
export default class Lowongan extends React.Component {
static propTypes = {
data: React.PropTypes.object.isRequired,
};
render() {
return (
<Item >
{image}
<Item.Content verticalAlign="middle">
<Item.Header>
{this.props.header}
</Item.Header>
<Item.Description>{this.props.content}</Item.Description>
<Item.Content>
<h3>{ this.props.data.data1 }</h3>
<h4>PT. Koding Kuat </h4>
<h5> JL.Kali deres utara no.1 Jakarta Barat, DKI Jakarta</h5>
<ApplicancyModal id={1} data={ { header: 'Deskripsi Lowongan', description: 'Lorem ipsum dolor sit amet'} } buttonTitle="Daftar" />
</Item.Content>
</Item.Content>
</Item>
);
}
}
\ No newline at end of file
......@@ -49,7 +49,7 @@ export default class Vacancy extends React.Component {
render() {
return (
<Item >
<Item className="applicantItems">
<Item.Image size="small" src={this.props.data.company.logo ? this.props.data.company.logo : defaultImage} />
<Item.Content verticalAlign="middle">
<Item.Extra>
......
import React from 'react';
import { Item } from 'semantic-ui-react';
import { Segment, Item, Button } from 'semantic-ui-react';
import Vacancy from './Vacancy';
import CompanyVacancy from './CompanyVacancy';
import Server from '../lib/Server';
export default class VacancyList extends React.Component {
static propTypes = {
url: React.PropTypes.string.isRequired,
studentId: React.PropTypes.number.isRequired,
userId: React.PropTypes.number.isRequired,
status: React.PropTypes.string,
type: React.PropTypes.string,
};
static defaultProps = {
status: 'Daftar',
type: 'student',
};
constructor(props) {
super(props);
/* istanbul ignore next */
this.updateBookmarkList();
if (this.props.type === 'student') {
this.updateBookmarkList();
}
this.state = { vacancies: [], bookmarkList: [] };
Server.get(this.props.url, false).then((data) => {
this.setState({ vacancies: data });
});
this.state = { vacancies: [], bookmarkList: [] };
this.updateBookmarkList = this.updateBookmarkList.bind(this);
this.generateVacancies = this.generateVacancies.bind(this);
this.checkBookmark = this.checkBookmark.bind(this);
this.companyHeader = this.companyHeader.bind(this);
}
checkBookmark(id) {
......@@ -36,26 +42,51 @@ export default class VacancyList extends React.Component {
}
updateBookmarkList() {
Server.get(`/students/${this.props.studentId}/bookmarked-vacancies/`, false).then((data) => {
Server.get(`/students/${this.props.userId}/bookmarked-vacancies/`, false).then((data) => {
this.setState({ bookmarkList: data });
});
}
generateVacancies() {
if (this.props.type === 'student') {
return this.state.vacancies.map(vacancy =>
(
<Vacancy
key={vacancy.id}
status={this.props.status}
bookmarked={this.checkBookmark(vacancy.id)}
data={vacancy}
/>
),
);
}
return this.state.vacancies.map(vacancy =>
<Vacancy
key={vacancy.id}
status={this.props.status}
bookmarked={this.checkBookmark(vacancy.id)}
data={vacancy}
/>,
(
<CompanyVacancy key={vacancy.id} data={vacancy} />
),
);
}
companyHeader() {
if (this.props.type === 'company') {
return (
<div>
<Button icon="eye" secondary labelPosition="left" content="Lihat Semua Pendaftar" />
<Button icon="add" secondary labelPosition="left" content="Tambah Lowongan Baru" />
</div>
);
}
return '';
}
render = () => (
<Item.Group relaxed>
{ this.generateVacancies() }
</Item.Group>
<Segment>
{ this.companyHeader() }
<Item.Group relaxed>
{ this.generateVacancies() }
</Item.Group>
</Segment>
);
}
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment