Fakultas Ilmu Komputer UI

Pagination.jsx 3.2 KB
Newer Older
1
import React from 'react';
2
import { Menu, Container, Icon, Loader } from 'semantic-ui-react';
3
4
5
6
7
8
9
10
11
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,
12
13
14
15
16
    error: React.PropTypes.string,
  };

  static defaultProps = {
    error: 'Gagal Mengambil Data',
17
18
19
20
21
22
23
24
25
26
27
  };

  constructor(props) {
    super(props);
    /* istanbul ignore next */
    this.state = {
      items: [],
      current: 1,
      next: '',
      prev: '',
      url: this.props.url,
28
29
30
31
      loading: true,
      dir: 0,
      start: true,
      finish: false,
32
33
34
    };
    this.handleNext = this.handleNext.bind(this);
    this.handlePrev = this.handlePrev.bind(this);
35
36
    this.getItemsData = this.getItemsData.bind(this);
    this.handleMovement = this.handleMovement.bind(this);
37
    this.refresh = this.refresh.bind(this);
38
39
    this.content = this.content.bind(this);
    this.pageMenu = this.pageMenu.bind(this);
40
41
42
43
    this.getItemsData();
  }

  getItemsData = () => Server.get(this.state.url, false).then((data) => {
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
    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) => {
61
    this.modalAlert.open(this.props.error, r.detail);
Zamil Majdy's avatar
Zamil Majdy committed
62
    this.setState({ loading: false });
63
  }));
64
65
66
67
68
69
70

  refresh() {
    this.forceUpdate();
  }

  handleMovement(dir) {
    const newUrl = this.state[dir];
71
72
73
    this.setState({ url: newUrl, loading: true }, function () {
      this.getItemsData();
    });
74
75
76
  }

  handlePrev() {
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
    if (!this.state.first) {
      this.setState({ dir: -1 }, function () {
        this.handleMovement('prev');
      });
    }
  }

  handleNext = () => {
    if (!this.state.last) {
      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>);
106
107
  }

108
109
  content() {
    return React.cloneElement(this.props.child, { items: this.state.items });
110
111
112
113
  }

  render = () => (
    <div>
114
      <Loader active={this.state.loading} />
115
      <ModalAlert ref={(modal) => { this.modalAlert = modal; }} />
116
117
      {!this.state.loading && this.content()}
      {!this.state.loading && this.pageMenu()}
118
119
120
    </div>
  );
}