caremyway-client/src/components/Worktype/Worktypes.jsx

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

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

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

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

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

const WorktypesView = ({ user, deleteWorkType, worktypeSuccess }) => (
  <Container>
    <Header>Worktypes</Header>
    <Segment>
      <Button
        basic
        color="green"
        size="small"
        as={Link}
        to="/user/profile/client/create-worktype"
      >
        Create Worktype
      </Button>
    </Segment>
    {(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>
                  <Popup
                    content={
                      <div>
                        Are you sure you want to delete this work type?<br />
                        <Button
                          basic
                          color="red"
                          size="small"
                          onClick={() => deleteWorkType(worktype.uuid)}
                        >
                          Confirm Deletion
                        </Button>
                      </div>
                    }
                    trigger={
                      <Button basic color="red" size="small">Delete</Button>
                    }
                    on="click"
                    position="top right"
                  />
                </Button.Group>
              </Card.Content>
            </Card>
          ))}
      </Card.Group>}
  </Container>
);

export default connect(mapStateToProps)(Worktypes);