content: import React from 'react'
  import Pagination from 'components/navigation/Pagination'
  import { Link } from 'react-router-dom'
  import { debounce } from 'lodash'
  
  class SurveyUserList extends React.Component {
    componentWillMount () {
      this.setSearch = debounce(this.setSearch, 250)
    }
  
    setSearch (value) {
      this.setState({search: value})
      this.props.update(this.props.page, value)
    }
  
    render () {
      let { update, page, pages, surveys, total } = this.props
  
      return (
        <div>
          <div className='d-flex justify-content-between'>
            <input
              className='form-control font-control-sm width-300 margin-bottom'
              placeholder='Search: All'
              onChange={(e) => this.setSearch(e.target.value)}
            />
            <h5>
              Total surveys: {total}
            </h5>
          </div>
          <table className='table table-hover surveys'>
            <thead>
              <tr>
                <th>Name</th>
                <th>Created</th>
                <th>Pages</th>
                <th>Questions</th>
                <th>Url to pass</th>
              </tr>
            </thead>
            <tbody>
              {surveys && surveys.map((survey, index) =>
                <tr key={index}>
                  <th>{survey.name}</th>
                  <td>{survey.changed}</td>
                  <td>{survey.pages}</td>
                  <td>{survey.questions}</td>
                  <td>
                    <Link to={`/survey/pass/${survey.id}/${survey.token}`}>
                    Link to survey
                  </Link>
                  </td>
                </tr>
            )}
            </tbody>
          </table>
          <Pagination changePage={(page) => update(page, this.state.search)} page={page} pages={pages} />
        </div>
      )
    }
  }
  
  export default SurveyUserList
  