content: import React, { Component } from 'react';
  import axios from 'axios';
  import NProgress from 'nprogress';
  import { ButtonGroup, Button,  Grid, Row, Col } from 'react-bootstrap';
  import { Link } from 'react-router-dom';
  import Helpers from '../../helpers'
  import { FormattedMessage } from 'react-intl';
  import _ from 'underscore';
  
  
  class Index extends Component {
  
    constructor(props) {
      super(props);
  
      this.state = {
        indices: [],
        loaded: false
      };
    }
  
    componentWillMount() {
      this.loadPageFromServer();
    }
  
    loadPageFromServer() {
  
      NProgress.start();
      this.setState({
        loaded: false
      });
  
      axios.get('/indices').then((response) => {
        this.setState({
          indices: response.data,
          loaded: true
        });
        NProgress.done();
      });
    }
  
  
    render() {
      //console.log(this.state.indices.length);
  
      var list = Helpers.chunk(this.state.indices, 8);
      var pages = Helpers.chunk(_.range(1, 45));
      var isLoded = this.state.loaded;
  
  
      const titleStyle = {
        paddingLeft: '15px'
      };
  
      return (
      <div className={`content ${this.state.loaded ? 'loaded' : 'loading'}`}>
  
        <Row>
        <Col xs={12} sm={6} md={4} className="Left-Col Index-By-Alphabet">
          <p style={titleStyle}>
            <FormattedMessage id="index" defaultMessage="Index"/>
          </p>
          {isLoded && list.map((x, i) =>
          <ButtonGroup vertical className={`App-ButtonGroup ButtonGroup-${i}-th`} key={i.toString()}>
            {x && x.map((y, j) =>
              <Link key={j.toString()} to={`/indice/` + y.name} className="btn btn-link">{y.name}</Link>
            )}
          </ButtonGroup>
          )}
        </Col>
        <Col xs={12} sm={6} md={4} className="Right-Col Index-By-Page">
          <p style={titleStyle}>
            <FormattedMessage id="page" defaultMessage="Page"/>
          </p>
  
          {isLoded && pages.map((x, i) =>
          <ButtonGroup vertical className={`App-ButtonGroup ButtonGroup-${i}-th`} key={i.toString()}>
            {x && x.map((y, j) =>
              <Link key={j.toString()} to={`/page/` + y} className="btn btn-link">
              {y && Helpers.i18nNumeric(y, 'marathi')}
              </Link>
            )}
          </ButtonGroup>
          )}
        </Col>
       </Row>
  
  		</div>
      );
    }
  }
  
  export default Index;