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,
  Icon,
  Label,
  List,
  Popup,
  Segment
} from "semantic-ui-react";
import { deleteEmployeeRequest } from "../../../actions/employee/saga.actions";
import { deletePriceRequest } from "../../../actions/price/saga.actions";

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

  deletePrice = uuid => {
    this.props.dispatch(deletePriceRequest(uuid));
  };

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

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

const ClientProvidersView = ({ user, deleteEmployee, deletePrice }) => (
  <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="h3">{employee.provider}</Card.Header>
                    <Card.Description>{employee.note}</Card.Description>
                  </div>
                )}
                {employee.approved && (
                  <div>
                    <Card.Header as="h3">
                      {`${employee.provider.first_name} ${
                        employee.provider.last_name
                      }`.trim() || "No Name!"}
                    </Card.Header>
                    <Card.Description>
                      {employee.provider.userinfo && (
                        <List>
                          {employee.provider.email && (
                            <List.Item>
                              Email:{" "}
                              <a href={`mailto:${employee.provider.email}`}>
                                {employee.provider.email}
                              </a>
                            </List.Item>
                          )}
                          {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>
              {employee.approved && (
                <Card.Content extra>
                  <Card.Description>
                    <Card.Header as="h3">
                      Assigned Work{" "}
                      <Button
                        size="mini"
                        floated="right"
                        as={Link}
                        to={`/user/profile/client/providers/${
                          employee.uuid
                        }/create-price`}
                      >
                        Assign Work
                      </Button>
                    </Card.Header>
                    <List>
                      {employee.prices
                        .filter(price => !price.deleted)
                        .map((price, index) => (
                          <List.Item key={index}>
                            <List.Content floated="right">
                              <Button.Group>
                                <Button
                                  as={Link}
                                  to={`/user/profile/client/providers/${
                                    employee.uuid
                                  }/update-price/${price.uuid}`}
                                  color="yellow"
                                  size="mini"
                                  icon
                                >
                                  <Icon name="pencil" />
                                </Button>
                                <Popup
                                  content={
                                    <div>
                                      Are you sure you want to delete this work?<br />
                                      <Button
                                        basic
                                        color="red"
                                        size="small"
                                        onClick={() => deletePrice(price.uuid)}
                                      >
                                        Confirm Deletion
                                      </Button>
                                    </div>
                                  }
                                  trigger={
                                    <Button color="red" size="mini" icon>
                                      <Icon name="trash" />
                                    </Button>
                                  }
                                  on="click"
                                  position="top right"
                                />
                              </Button.Group>
                            </List.Content>
                            <List.Header>
                              <Label
                                circular
                                empty
                                style={{
                                  backgroundColor: price.work_type.color,
                                  borderColor: price.work_type.color
                                }}
                              />
                              <span>
                                {" "}
                                {price.work_type.label || "No Label"}
                              </span>
                            </List.Header>
                            <List.Description>
                              Hourly Rate: ${price.amount}
                            </List.Description>
                          </List.Item>
                        ))}
                      {employee.prices.filter(price => !price.deleted)
                        .length === 0 && (
                        <List.Item>
                          <List.Header>No Prices for this Provider</List.Header>
                        </List.Item>
                      )}
                    </List>
                  </Card.Description>
                </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);