caremyway-client/src/components/User/Provider/ProviderClients.jsx

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

class ProviderClients extends Component {
  updateEmployer = (uuid, approved) => {
    this.props.dispatch(updateEmployerRequest({ uuid, approved }));
  };

  render() {
    const { selfUser } = this.props;
    if (selfUser.provider) {
      return (
        <ProviderClientsView
          user={selfUser}
          updateEmployer={this.updateEmployer}
        />
      );
    } else {
      return <Redirect to="/" />;
    }
  }
}

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

const ProviderClientsView = ({ user, updateEmployer }) => (
  <Container>
    <Header>Clients</Header>
    {(user.provider.employers || []).filter(employer => !employer.deleted)
      .length > 0 && (
      <Card.Group>
        {user.provider.employers
          .filter(employer => !employer.deleted)
          .map((employer, index) => (
            <Card key={index}>
              <Card.Content>
                {(employer.approved === null ||
                  employer.approved === false) && (
                  <div>
                    <Card.Header as="h3">
                      {employer.client.trim() || "No Name!"}
                    </Card.Header>
                    <Card.Description>{employer.note}</Card.Description>
                  </div>
                )}
                {employer.approved && (
                  <div>
                    <Card.Header as="h3">
                      {`${employer.client.first_name} ${
                        employer.client.last_name
                      }`.trim() || "No Name!"}
                    </Card.Header>
                    <Card.Description>
                      {employer.client.userinfo && (
                        <List>
                          {employer.client.userinfo.phone_number && (
                            <List.Item>
                              Phone Number:{" "}
                              {employer.client.userinfo.phone_number}
                            </List.Item>
                          )}
                        </List>
                      )}
                    </Card.Description>
                  </div>
                )}
                <Label
                  attached="bottom right"
                  color={
                    employer.approved === null
                      ? "grey"
                      : !!employer.approved ? "green" : "red"
                  }
                >
                  {employer.approved === null
                    ? "Pending"
                    : !!employer.approved ? "Approved" : "Ended"}
                </Label>
              </Card.Content>
              {employer.approved && (
                <Card.Content extra>
                  <Card.Description>
                    <Card.Header as="h3">Assigned Work</Card.Header>
                    <List>
                      {employer.prices
                        .filter(price => !price.deleted)
                        .map((price, index) => (
                          <List.Item key={index}>
                            <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>
                        ))}
                      {employer.prices.filter(price => !price.deleted)
                        .length === 0 && (
                        <List.Item>
                          <List.Header>No Prices for this Client</List.Header>
                        </List.Item>
                      )}
                    </List>
                  </Card.Description>
                </Card.Content>
              )}
              <Card.Content extra>
                <Button.Group>
                  {!employer.approved && (
                    <Button
                      basic
                      color="green"
                      size="small"
                      onClick={() => updateEmployer(employer.uuid, true)}
                    >
                      Approve
                    </Button>
                  )}
                  {employer.approved === null && (
                    <Button
                      basic
                      color="red"
                      size="small"
                      onClick={() => updateEmployer(employer.uuid, false)}
                    >
                      Reject
                    </Button>
                  )}
                  {employer.approved && (
                    <Button
                      basic
                      color="red"
                      size="small"
                      onClick={() => updateEmployer(employer.uuid, false)}
                    >
                      End
                    </Button>
                  )}
                </Button.Group>
              </Card.Content>
            </Card>
          ))}
      </Card.Group>
    )}
  </Container>
);

export default connect(mapStateToProps)(ProviderClients);