caremyway-client/src/components/User/Client/ClientProviders.jsx

import React, { Component } from "react";
import { connect } from "react-redux";
import { Redirect, Link } from "react-router-dom";
import {
  Button,
  Card,
  Container,
  Header,
  Label,
  List,
  Popup,
  Segment
} from "semantic-ui-react";
import { deleteEmployeeRequest } from "../../../actions/employee/saga.actions";

class ClientProviders extends Component {
  deleteEmployee = uuid => {
    this.props.dispatch(deleteEmployeeRequest(uuid));
  };

  render() {
    const { selfUser } = this.props;
    if (selfUser.client) {
      return (
        <ClientProvidersView
          user={selfUser}
          deleteEmployee={this.deleteEmployee}
        />
      );
    } else {
      return <Redirect to="/" />;
    }
  }
}

function mapStateToProps(state) {
  return { selfUser: state.user.selfUser };
}

const ClientProvidersView = ({ user, deleteEmployee }) => (
  <Container>
    <Header>Providers</Header>
    <Segment>
      <Button
        basic
        color="green"
        size="small"
        as={Link}
        to="/user/profile/client/add-provider"
      >
        Add a Provider
      </Button>
    </Segment>
    {(user.client.employees || []).filter(employee => !employee.deleted)
      .length > 0 && (
      <Card.Group>
        {user.client.employees
          .filter(employee => !employee.deleted)
          .map((employee, index) => (
            <Card key={index}>
              <Card.Content>
                {(employee.approved === null ||
                  employee.approved === false) && (
                  <div>
                    <Card.Header as="h4">{employee.provider}</Card.Header>
                    <Card.Description>{employee.note}</Card.Description>
                  </div>
                )}
                {employee.approved && (
                  <div>
                    <Card.Header as="h4">
                      {`${employee.provider.first_name} ${
                        employee.provider.last_name
                      }`.trim() || "No Name!"}
                    </Card.Header>
                    <Card.Description>
                      {employee.provider.userinfo && (
                        <List>
                          {employee.provider.userinfo.phone_number && (
                            <List.Item>
                              Phone Number:{" "}
                              {employee.provider.userinfo.phone_number}
                            </List.Item>
                          )}
                        </List>
                      )}
                    </Card.Description>
                  </div>
                )}
                <Label
                  attached="bottom right"
                  color={
                    employee.approved === null
                      ? "grey"
                      : !!employee.approved ? "green" : "red"
                  }
                >
                  {employee.approved === null
                    ? "Pending"
                    : !!employee.approved ? "Approved" : "Ended"}
                </Label>
              </Card.Content>
              <Card.Content extra>
                <Popup
                  content={
                    <div>
                      Are you sure you want to delete this employee?<br />
                      <Button
                        basic
                        color="red"
                        size="small"
                        onClick={() => deleteEmployee(employee.uuid)}
                      >
                        Confirm Deletion
                      </Button>
                    </div>
                  }
                  trigger={
                    <Button basic color="red" size="small">
                      Delete
                    </Button>
                  }
                  on="click"
                  position="top right"
                />
              </Card.Content>
            </Card>
          ))}
      </Card.Group>
    )}
  </Container>
);

export default connect(mapStateToProps)(ClientProviders);