text: import React, { Component } from 'react';
  import {Link} from 'react-router-dom';
  import { Button, Modal, ModalHeader, ModalBody, ModalFooter, Card, CardBody, CardHeader, Col, Row, Table } from 'reactstrap';
  import axios from 'axios';
  import ReactPaginate from 'react-paginate';
  import State from './State'
  
  
  class States extends Component {
    constructor(props){
      super(props);
      this.state = {
        states: [],
        modal: false,
        currentPage: 1,
        PerPage: 5,
        totalPages: 1,
        statesCount: 0
      };
      console.log('THIS OBJ', this);
      if(this.props.match.params.page != undefined){
        this.setState({currentPage: this.props.match.params.page});
      }
      this.toggle = this.toggle.bind(this);
      this.approveDeleteHandler = this.approveDeleteHandler.bind(this);
    }
  
    loadCommentsFromServer(){
      axios.get('/location/States/' + this.state.currentPage).then(result => {
        if(result.data.code === 200){
          this.setState({
            states: result.data.result,
            currentPage: result.data.current,
            PerPage: result.data.perPage,
            totalPages: result.data.pages,
            statesCount:result.data.total
          });
        }
        console.log(this.state.states);
      })
      .catch((error) => {
      console.log('error', error)
        if(error.code === 401) {
          this.props.history.push("/login");
        }
      });
  
    }
  
    handlePageClick = (data) => {
      let currentPage = data.selected + 1;
      this.setState({currentPage: currentPage}, () => {
        this.loadCommentsFromServer();
      });
  };
    
    componentDidMount() {
      //if(localStorage.getItem('jwtToken') != null)
      axios.defaults.headers.common['Authorization'] = localStorage.getItem('jwtToken');
        this.loadCommentsFromServer();
    }
    stateDeleteHandler (id){
      this.setState({
        approve: false,
        approveId: id
      });
      this.toggle();
    }
    changeStatusHandler(state){
  	  console.log("STATUS",state)
      state.status = (1 - parseInt(state.status)).toString();
      console.log("CHANGE-STATUS",state)
      axios.post('/location/changeStatus',state).then(result => {
        if(result.data.code === 200){
          let states = this.state.states;
          let stateIndex = states.findIndex(x => x._id === state._id);
          states[stateIndex].status = state.status.toString();
          this.setState({ states: states });
        }
      });
    }
    toggle() {
      this.setState({
        modal: !this.state.modal
      });
    }
    approveDeleteHandler(){
      this.setState({
        approve: true
      }, function(){
        if(this.state.approve){
          axios.delete('/location/deleteState/' + this.state.approveId).then(result => {
            if(result.data.code == '200'){
              let states = this.state.states;
              let stateIndex = states.findIndex(x => x._id === this.state.approveId);
              states.splice(stateIndex, 1);
              this.setState({
                states: states,
                approveId: null,
                approve: false
              });
              this.toggle();
            }
          });
        }
      });
    }
    render() {
     let states;
       if(this.state.states){
         let stateList = this.state.states;
         states = stateList.map((state,index) => <State sequenceNo={index} key={state._id} onDeleteState={this.stateDeleteHandler.bind(this)} changeStatus={(state) => this.changeStatusHandler(state)}   state={state}/>);
       }
  
       let paginationItems =[];
  
       const externalCloseBtn = <button className="close" style={{ position: 'absolute', top: '15px', right: '15px' }} onClick={this.toggle}>&times;</button>;
      return (
        <div className="animated fadeIn">
          <Row>
            <Col>
              <Card>
                <CardHeader>
                  <i className="fa fa-align-justify"></i> State Listing               
                  <Link to="/state/add" className="btn btn-success btn-sm pull-right">Add New State</Link>
                </CardHeader>
                <CardBody>
                  <Table hover bordered striped responsive size="sm">
                    <thead>
                    <tr>
                      <th>S.No</th>
                      <th>Country Name</th>  
                      <th>State Name</th>                
                      <th>Status</th>
                      <th>Actions</th>
                    </tr>
                    </thead>
                    <tbody>
                    {states}
                    </tbody>
                  </Table>
                  <nav>
                      <ReactPaginate
                         initialPage={this.state.currentPage-1}
                         previousLabel={"<<"}
                         previousClassName={"page-item"}
                         previousLinkClassName={"page-link"}
                         nextLabel={">>"}
                         nextClassName={"page-item"}
                         nextLinkClassName={"page-link"}
                         breakLabel={<a href="">...</a>}
                         breakClassName={"break-me"}
                         pageClassName={"page-item"}
                         pageLinkClassName={"page-link"}
                         pageCount={this.state.totalPages}
                         marginPagesDisplayed={2}
                         pageRangeDisplayed={5}
                         onPageChange={this.handlePageClick}
                         containerClassName={"pagination"}
                         subContainerClassName={"pages pagination"}
                         activeClassName={"active"} />
                    </nav>
                </CardBody>
              </Card>
            </Col>
          </Row>
          <Modal isOpen={this.state.modal} toggle={this.toggle} className={this.props.className} external={externalCloseBtn}>
            <ModalHeader>States</ModalHeader>
            <ModalBody>
              Are you sure to delete?
            </ModalBody>
            <ModalFooter>
              <Button color="primary" onClick={this.approveDeleteHandler}>Yes</Button>{' '}
              <Button color="secondary" onClick={this.toggle}>No</Button>
            </ModalFooter>
          </Modal>
        </div>
  
      );
    }
  }
  
  export default States;
  