import React from 'react';
import { Link } from 'react-router-dom';
import axios from 'axios';
import NewMemberBox from './NewMemberBox';
import EditMemberForm from './EditMemberForm';

const SERVER_API = process.env.REACT_APP_API.trim();

class TeamMembers extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      users: []
    }
    this.fetchUsers = this.fetchUsers.bind(this);
    this.fetchUsers();
  }

  fetchUsers = () => {
    axios.get(`${SERVER_API}/team_members`)
        .then((resp) => {
          // this.setState({users: []});
          let users = resp.data;
          this.setState({users: [...users]});
      }).catch(ex => {
          console.error(ex);
      });
  }

  render() {
    return (
    <div>
      <div className="wrapper">
        <section className="content">
          <h2><i className="ico team-member"></i>Team members</h2>
          <NewMemberBox updateUsersList={this.fetchUsers} />
          {this.state.users.map((user, i) => {
            return <EditMemberForm key={i} userKey={i} user={user} updateUsersList={this.fetchUsers} />
          })}
          <div className="pagination">
            <ul>
              <li>
                <Link to="/">1</Link>
              </li>
              <li>
                <Link to="/">2</Link>
              </li>
              <li>
                <Link to="/">3</Link>
              </li>
              <li className="last">
                <Link to="/">Next</Link>
              </li>
            </ul>
          </div>
        </section>
      </div>
    </div>
    );
  }
}

export default TeamMembers;