Fakultas Ilmu Komputer UI

Commit ec9e30c7 authored by M. Reza Qorib's avatar M. Reza Qorib
Browse files

[#144502159] [Green] #37 create Pagination component

parent 93537587
......@@ -2,6 +2,8 @@ import React from 'react';
import Tabs from './components/Tabs';
import Pane from './components/Pane';
import VacancyList from './components/VacancyList';
import Pagination from './components/Pagination';
import { Menu, Icon } from 'semantic-ui-react';
export default class VacancyPage extends React.Component {
......@@ -34,10 +36,15 @@ export default class VacancyPage extends React.Component {
return (
<Tabs selected={0}>
<Pane label="Semua Lowongan" >
<VacancyList
key={1}
userId={this.state.id}
<Pagination
url="/vacancies/"
child={
<VacancyList
key={1}
userId={this.state.id}
url="/vacancies/"
/>
}
/>
</Pane>
<Pane label="Lamaran saya" >
......
......@@ -2,41 +2,44 @@
import React from 'react';
import ReactTestUtils from 'react-addons-test-utils';
import fetchMock from 'fetch-mock';
import List from '../../components/Pagination'
import VacancyList from '../../components/VacancyList'
import Pagination from '../../components/Pagination';
describe('Pagination', () => {
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: 1,
name: 'Software Engineer',
open_time: '2017-03-28T05:55:38Z',
updated: '2017-03-28T07:34:13.122093Z',
verified: true,
}, {
close_time: '2019-03-28T05:55:42Z',
company: {
address: 'kebayoran baru',
id: 2,
logo: null,
name: 'tutup lapak',
},
created: '2017-03-28T07:05:47.128672Z',
description: 'Lorem ipsum dolbh.',
id: 2,
name: 'Software Engineer',
open_time: '2017-03-28T05:55:38Z',
updated: '2017-03-28T07:34:13.122093Z',
verified: true,
}];
const response = {
items: [{
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: 1,
name: 'Software Engineer',
open_time: '2017-03-28T05:55:38Z',
updated: '2017-03-28T07:34:13.122093Z',
verified: true,
}, {
close_time: '2019-03-28T05:55:42Z',
company: {
address: 'kebayoran baru',
id: 2,
logo: null,
name: 'tutup lapak',
},
created: '2017-03-28T07:05:47.128672Z',
description: 'Lorem ipsum dolbh.',
id: 2,
name: 'Software Engineer',
open_time: '2017-03-28T05:55:38Z',
updated: '2017-03-28T07:34:13.122093Z',
verified: true,
},
],
next:'/next',
};
const response2 = [{
close_time: '2019-03-28T05:55:42Z',
......@@ -67,26 +70,34 @@ describe('Pagination', () => {
fetchMock.get('*', response);
const pagination = ReactTestUtils.renderIntoDocument(
<Pagination child={<div />} url="test" />);
pagination.getItemsData();
expect(pagination.state.items).to.equal(response);
pagination.getItemsData().then(() =>
expect(JSON.stringify(pagination.state.items)).to.equal(JSON.stringify(response.items)));
fetchMock.restore();
});
it('renders without problem when failed getting data', () => {
fetchMock.get('*', 400);
const pagination = ReactTestUtils.renderIntoDocument(
<Pagination child={<div />} url="test" />);
expect(pagination).to.exist;
fetchMock.restore();
});
it('generate child components without problem', () => {
it('can go prev without problem', () => {
fetchMock.get('*', response);
const child = <VacancyList url="" userId=""/>
const pagination = ReactTestUtils.renderIntoDocument(
<Pagination child={child} url="test" />);
const childRendered = ReactTestUtils.findRenderedDOMComponentWithTag(pagination, child);
expect(childRendered).to,exist;
<Pagination child={<div />} url="test" />);
const prev = ReactTestUtils.scryRenderedDOMComponentsWithTag(pagination, 'a')[0];
ReactTestUtils.Simulate.click(prev);
fetchMock.restore();
});
it('renders without problem when failed getting data', () => {
fetchMock.get('*', 400);
it('can go next without problem', () => {
fetchMock.get('*', response);
const pagination = ReactTestUtils.renderIntoDocument(
<Pagination child={<div />} url="test" />);
expect(pagination).to.exist;
const next = ReactTestUtils.scryRenderedDOMComponentsWithTag(pagination, 'a')[2];
ReactTestUtils.Simulate.click(next);
fetchMock.restore();
});
});
......
import React from 'react';
import { Menu, Container, Icon } 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,
};
constructor(props) {
super(props);
/* istanbul ignore next */
this.state = {
items: [],
current: 1,
next: '',
prev: '',
url: this.props.url,
};
this.getItemsData = this.getItemsData.bind(this);
this.handleMovement = this.handleMovement.bind(this);
this.handleNext = this.handleNext.bind(this);
this.handlePrev = this.handlePrev.bind(this);
this.refresh = this.refresh.bind(this);
this.getItemsData();
}
getItemsData = () => Server.get(this.state.url, false).then((data) => {
this.setState({ items: data.items, next: data.next, prev: data.prev });
}, error => error.then((r) => {
this.modalAlert.open('Gagal Mengambil Data', r.error);
}));
refresh() {
this.forceUpdate();
}
handleMovement(dir) {
const newUrl = this.state[dir];
this.setState({ url: newUrl });
this.getItemsData();
}
handlePrev() {
this.handleMovement('prev');
}
handleNext() {
this.handleMovement('next');
}
render = () => (
<div>
<ModalAlert ref={(modal) => { this.modalAlert = modal; }} />
{this.props.child}
<Container textAlign="right">
<Menu pagination icon="labeled" className="vacancyList">
<Menu.Item name="prev" disabled={this.state.current !== 1} onClick={this.handlePrev}>
<span><Icon disabled={this.state.current !== 1} name="angle left" /></span>
</Menu.Item>
<Menu.Item name="current" active onClick={this.refresh}>
{this.state.current}
</Menu.Item>
<Menu.Item name="next" onClick={this.handleNext}>
<span><Icon name="angle right" /></span>
</Menu.Item>
</Menu>
</Container>
</div>
);
}
......@@ -145,7 +145,9 @@ REST_FRAMEWORK = {
# or allow read-only access for unauthenticated users.
'DEFAULT_PERMISSION_CLASSES': [
'rest_framework.permissions.DjangoModelPermissionsOrAnonReadOnly'
]
],
'DEFAULT_PAGINATION_CLASS': 'rest_framework.pagination.PageNumberPagination',
'PAGE_SIZE': 10
}
GZIP_CONTENT_TYPES = (
......@@ -159,5 +161,5 @@ SESSION_COOKIE_HTTPONLY = False
RUNNING_DEVSERVER = (len(sys.argv) > 1 and sys.argv[1] == 'runserver')
API_CS_CREDENTIALS = {'user': 'lalala', 'password': 'lalala'}
API_CS_CREDENTIALS = {'user': 'kape', 'password': 'yukcarikape'}
Markdown is supported
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