
import React,{Component} from 'react';
import axios from 'axios';
import {Link} from 'react-router-dom';
import { confirmAlert } from 'react-confirm-alert';
import 'react-confirm-alert/src/react-confirm-alert.css'; // Import css

export default class AdminUserList extends Component{
    constructor(props){
        super(props);
         this.state={
            assetsLoaded:false,pats:[],page:0
         }
      }

      componentDidMount(){
        axios.get('https://liveforextrade.in/AdminRest/users_api/'+this.state.page).then(res => {
            console.log(res.data);
            this.setState({pats:res.data});
        });
      }

      loadmore(){
          //alert(this.state.page)
          this.setState({page:this.state.page+10});
          this.componentDidMount();
      }

    deleteAss(id){
        axios.post("http://ftxsr.com:8081/record_delete_api/"+id, {
                        tbl: "mtch_users",
                        col: "userid"
                    })
                    .then(response => {
                        console.log(response);
                    }) 
    }

    render(){
        return (     
            <div className="content-wrapper">
                <section className="content-header">
                    <h5>List Users</h5>
                    <ol className="breadcrumb">
                        <li><Link to="/admin"><i className="fa fa-dashboard"></i> Home</Link></li>
                        <li className="active">User Lists</li>
                    </ol>
                </section>
                <section className="content">
                <div className="row clearfix">
                    <div className="col-md-12">
                        <div className="panel panel-primary cardbg">
                            <div className="panel-body">
                                    <table className='table table-bordered table-striped table-condensed'>
                                        <thead><tr><th>S.No.</th><th>Name</th><th>Mobile</th><th>Username</th>
                                                <th>City</th><th>Action</th></tr></thead>
                                        <tbody>
                                        {this.state.pats.map(p=>
                                        <tr key={p.userid}>
                                        <td></td>    
                                        <td>{p.first_name}</td>
                                        <td>{p.mobile}</td>
                                        <td>{p.username}</td>
                                        <td>{p.city}</td>
                                        <td>
                <Link to={'/admin/edituser/'+p.userid} className='btn btn-warning btn-sm'>Edit</Link>
                <button className='btn btn-danger btn-sm' onClick={()=>this.deleteAss(p.userid)}>Delete</button></td></tr>)}
                                        </tbody>
                                    </table>
                                    <hr/>
                                    <button className="btn btn-primary" onClick={()=>this.loadmore()}>Load More</button>
                            </div>
                        </div>
                    </div>
                </div>
                </section>
            </div> 
        );
    }
}


