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

import React, { Component } from "react";
import { connect } from "react-redux";
import { Link } from "react-router-dom";
import { Card, Button, Label } from "semantic-ui-react";

import { deleteWorktypeRequest } from "../../../actions/worktype/saga.actions";

class ClientProfile extends Component {
  deleteWorkType = uuid => {
    this.props.dispatch(deleteWorktypeRequest(uuid));
  };

  render() {
    const { selfUser } = this.props;
    return (
      <ClientProfileView user={selfUser} deleteWorkType={this.deleteWorkType} />
    );
  }
}

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

const ClientProfileView = ({ user, deleteWorkType }) => (
  <div>
    <Card fluid={true}>
      <Card.Content>
        <Card.Header>Client Information</Card.Header>
        <Card.Meta>Business Number: {user.client.business_number}</Card.Meta>
        <Card.Description>
          <Button
            basic
            color="green"
            size="small"
            as={Link}
            to="/user/profile/client/create-worktype"
          >
            Create Worktype
          </Button>
        </Card.Description>
      </Card.Content>
    </Card>
    {(user.client.work_types || []).filter(worktype => !worktype.deleted)
      .length > 0 &&
      <Card.Group>
        {user.client.work_types
          .filter(worktype => !worktype.deleted)
          .map((worktype, index) => (
            <Card key={index}>
              <Card.Content>
                <Card.Header as="h4">
                  <Label
                    circular
                    empty
                    style={{
                      backgroundColor: worktype.color,
                      borderColor: worktype.color
                    }}
                  />{"  " + worktype.label}
                </Card.Header>
                <Card.Meta>
                  Worktype
                </Card.Meta>
              </Card.Content>
              <Card.Content extra>
                <Button.Group>
                  <Button
                    basic
                    color="yellow"
                    size="small"
                    as={Link}
                    to={`/user/profile/client/update-worktype/${worktype.uuid}`}
                  >
                    Edit
                  </Button>
                  <Button
                    basic
                    color="red"
                    size="small"
                    onClick={() => deleteWorkType(worktype.uuid)}
                  >
                    Delete
                  </Button>
                </Button.Group>
              </Card.Content>
            </Card>
          ))}
      </Card.Group>}
  </div>
);

export default connect(mapStateToProps)(ClientProfile);