content: import React, { Component } from 'react';
  import Helmet from 'react-helmet';
  import { connect } from 'react-redux';
  import ActionBar from '../../SubComponents/ActionBar';
  import { getAllEmployees, deleteEmployee } from '../../../actions/employeeAction';
  
  @connect(store => ({
    isLoggedIn: store.user.isLoggedIn,
    isLoading: store.user.isLoading,
    pageTitle: store.page.pageTitle,
    employees: store.employee.employees,
  }))
  class Employee extends Component {
    constructor(props) {
      super(props);
      this.state = {
        searchString: undefined
      }
    }
  
    componentWillMount() {
      this.props.dispatch(getAllEmployees());
    }
  
    setstate(obj) {
      this.setState(obj);
    }
  
    removeEmployee(id) {
      this.props.dispatch(deleteEmployee({id: id}));
    }
  
    checkIfVisible(employee) {
      let searchString = this.state.searchString;
      let isVisible = false;
  
      if (searchString != undefined) {
        if (searchString == '' || searchString == "") {
          searchString = undefined;
        }
      }
  
      if (searchString == undefined) {
        isVisible = true;
      } else {
        if (employee.first_name.toLowerCase().includes(searchString) ||
          employee.last_name.toLowerCase().includes(searchString)) {
          isVisible = true;
        }
      }
  
      return isVisible;
    }
  
    render() {
      return (
        <div className="employeeContainer">
          <ActionBar parentObject={this.setstate.bind(this)} usedIn={'employee'} />
  
          <div className="employee-table-container">
            <table className="employee-table">
              <thead className="employee-table-thead">
                <tr className="employee-table-tr">
                  {/* <th className="employee-table-th">&nbsp;</th> */}
                  <th className="employee-table-th">Name</th>
                  <th className="employee-table-th">Last name</th>
                  <th className="employee-table-th">Actions</th>
                </tr>
              </thead>
  
              <tbody className="employee-table-tbody">
                {this.props.employees && this.props.employees.map(employee => {
                  return (
                    <tr className={"employee-table-tr " + ((this.checkIfVisible(employee)) ? '' : 'hide')} key={employee.id}>
                      {/* <td className="employee-table-td"> <input type="checkbox" /> </td> */}
                      <td className="employee-table-td">{employee.first_name}</td>
                      <td className="employee-table-td">{employee.last_name}</td>
                      <td className="employee-table-td" onClick={this.removeEmployee.bind(this, employee.id)}><i className="fa fa-times" /></td>
                    </tr>)
                })}
              </tbody>
            </table>
          </div>
        </div>
      );
    }
  }
  
  export default Employee;
  