content: import React, { Component } from 'react';
  import { Table } from 'react-bootstrap';
  import { FormattedMessage } from 'react-intl';
  import { Link } from 'react-router-dom';
  import axios from 'axios';
  import NProgress from 'nprogress';
  import Helpers from '../../helpers'
  import InctlPagination from '../InctlPagination';
  
  class Page extends Component {
  
    constructor(props) {
      super(props);
  
      var currentPage = props.match.params.id ? props.match.params.id : 1;
      currentPage = Number(currentPage);
  
      this.state = {
        list: [],
        pageCount: 45,
        currentPage,
        loaded: false
      };
      this.handlePageClick = this.handlePageClick.bind(this);
    }
  
    componentWillMount() {
      this.loadPageFromServer();
    }
  
    navigateToPage(e) {
      this.props.history.push('/page/'+ e);
    }
  
    loadPageFromServer() {
  
      NProgress.start();
      this.setState({
        loaded: false
      });
  
      let url = '/abhangas/page/' + this.state.currentPage;
      axios.get(url).then((response) => {
        this.setState({
          list: response.data,
          loaded: true
        });
        NProgress.done();
      });
  
    }
  
    handlePageClick(e) {
  
      this.navigateToPage(e);
  
      this.setState({
        currentPage: e
      }, () => {
        this.loadPageFromServer();
      });
    }
  
    render() {
      let list = this.state.list;
      let isLoded = this.state.loaded;
      let currentPage = this.state.currentPage;
  
      let paginationTpl = (
        <div className="Pagination-Wrap">
          <div>
            <FormattedMessage id="page" defaultMessage="Page"/>
          </div>
  
          <InctlPagination
            items={this.state.pageCount}
            activePage={this.state.currentPage}
            onSelect={this.handlePageClick}>
          </InctlPagination>
  
        </div>
      );
  
      return (
        <div className={`content ${this.state.loaded ? 'loaded' : 'loading'}`}>
  
          {isLoded && paginationTpl}
  
          <Table id="app-index-table" responsive>
          <thead>
            <tr>
              <td><FormattedMessage id="abhanga" defaultMessage="Abhanga"/></td>
              <td><FormattedMessage id="serial" defaultMessage="Sr. No."/></td>
            </tr>
          </thead>
          <tbody>
            {isLoded && list.map((x, i) =>
              <tr key={i}>
                <td><Link to={ '/page/' + currentPage +'/abhanga/' + x.srNo }>{x.title}</Link></td>
                <td>{x.srNo && Helpers.i18nNumeric(x.srNo, 'marathi')}</td>
              </tr>
            )}
  
          </tbody>
          </Table>
  
          {isLoded && paginationTpl}
  
        </div>
      )
  
    }
  
  }
  
  export default Page;
  