text: import React, { Component } from 'react';
  import { connect } from 'react-redux';
  import { Link, withRouter } from 'react-router-dom';
  import { Row } from 'reactstrap';
  import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
  import { faEye, faEdit, faTrash, faUserTie } from '@fortawesome/free-solid-svg-icons';
  
  // Components
  import Breadcrumb from '../../../../components/Backend/UI/Breadcrumb/Breadcrumb';
  import SpecialTitle from '../../../../components/UI/Titles/SpecialTitle/SpecialTitle';
  import Subtitle from '../../../../components/UI/Titles/Subtitle/Subtitle';
  import List from '../../../../components/Backend/UI/List/List';
  import Error from '../../../../components/Error/Error';
  import Feedback from '../../../../components/Feedback/Feedback';
  import Delete from '../../../../components/Backend/UI/Delete/Delete';
  import View from '../../../../components/Backend/UI/View/View';
  
  
  import * as actions from '../../../../store/actions';
  import { updateObject, convertDate } from '../../../../shared/utility';
  
  class Index extends Component {
      componentDidMount() {
          this.props.get();
      }
  
      componentWillUnmount() {
          this.props.reset();
      }
  
      render() {
          let {
              content: {
                  cms: {
                      pages: { components: { list: { action, see } }, backend: { pages: { members: { title, add, index, form: { name, job, quote, photo, member_photo } } } } }
                  }
              },
              backend: { members: { loading, error, message, members, total } },
              auth: { data: { role: { features } } }
          } = this.props;
  
          const feature = features.find(f => f.prefix === 'members');
          const redirect = !feature && <Redirect to="/user/dashboard" />;
  
          const errors = <>
              <Error err={error} />
          </>;
          const feedback = <Feedback message={message} />;
  
          if (!members) members = [];
          const data = members.map(member => {
              return updateObject(member, {
                  photo: member.photo && <div className="d-flex">
                      <span>{see}</span>
  
                      <span className="ml-auto">
                          <View title={`${member_photo}: ${member.name}`} content={<img src={member.photo} className="w-100" />}>
                              <FontAwesomeIcon icon={faEye} className="text-green mr-2" fixedWidth />
                          </View>
                      </span>
                  </div>,
                  action: <div className="text-center">
                      <Link to={`/user/members/${member.id}`} className="mr-2">
                          <FontAwesomeIcon icon={faEye} className="text-green" fixedWidth />
                      </Link>
                      {JSON.parse(feature.permissions).includes('u') && <Link to={`/user/members/${member.id}/edit`} className="mx-1">
                          <FontAwesomeIcon icon={faEdit} className="text-brokenblue" fixedWidth />
                      </Link>}
                      {JSON.parse(feature.permissions).includes('d') && <span className="mx-1"><Delete deleteAction={() => this.props.delete(member.id)}><FontAwesomeIcon icon={faTrash} className="text-red" fixedWidth /></Delete></span>}
                  </div>,
              });
          });
  
          const content = (
              <>
                  <Row>
                      <List array={data} loading={loading} data={JSON.stringify(members)} get={this.props.get} total={total} bordered add={add} link="/user/members/add" icon={faUserTie} title={index} className="shadow-sm"
                          fields={[
                              { name, key: 'name' },
                              { name: job, key: 'job' },
                              { name: quote, key: 'quote' },
                              { name: photo, key: 'photo' },
                              { name: action, key: 'action', fixed: true }
                          ]} />
                  </Row>
              </>
          );
  
          return (
              <>
                  <div className="bg-soft py-4 pl-5 pr-4 position-relative">
                      <Breadcrumb main={index} icon={faUserTie} />
                      <SpecialTitle user icon={faUserTie}>{title}</SpecialTitle>
                      <Subtitle user>{index}</Subtitle>
                  </div>
                  <div className="p-4 pb-0">
                      {redirect}
                      {errors}
                      {feedback}
                      {content}
                  </div>
              </>
          );
      }
  }
  
  const mapStateToProps = state => ({ ...state });
  
  const mapDispatchToProps = dispatch => ({
      get: (page, show, search) => dispatch(actions.getMembers(page, show, search)),
      delete: id => dispatch(actions.deleteMembers(id)),
      reset: () => dispatch(actions.resetMembers()),
  });
  
  export default withRouter(connect(mapStateToProps, mapDispatchToProps)(Index));