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

import React, { Component } from "react";
import { connect } from "react-redux";
import { Redirect, Link } from "react-router-dom";
import {
  Button,
  Container,
  Header,
  Item,
  Segment,
  Pagination,
  Loader
} from "semantic-ui-react";
import { getCShiftsRequest } from "../../../actions/cShift/saga.actions";

class ClientShifts extends Component {
  constructor(props) {
    super(props);
    this.state = {
      page: 1,
      pageSize: 10 // client can't control this, but set here just in case
    };
  }

  componentWillMount = () => {
    this.props.dispatch(
      getCShiftsRequest({
        page: this.state.page,
        page_size: this.state.pageSize
      })
    );
  };

  handlePaginationChange = (event, { activePage }) => {
    this.props.dispatch(
      getCShiftsRequest({
        page: activePage,
        page_size: this.state.pageSize
      })
    );
    this.setState({ page: activePage });
  };

  render() {
    const {
      isSendingCShiftRequest,
      cShiftRequestSuccess,
      selfUser
    } = this.props;
    const { page, pageSize } = this.state;
    if (selfUser.client) {
      return (
        <ClientShiftsView
          isSendingCShiftRequest={isSendingCShiftRequest}
          cShiftRequestSuccess={cShiftRequestSuccess}
          page={page}
          pageSize={pageSize}
          user={selfUser}
          handlePaginationChange={this.handlePaginationChange}
        />
      );
    } else {
      return <Redirect to="/" />;
    }
  }
}

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

const ClientShiftsView = ({
  isSendingCShiftRequest,
  cShiftRequestSuccess,
  user,
  page,
  pageSize,
  handlePaginationChange
}) => {
  const { count = 0, results = [] } = cShiftRequestSuccess;

  return (
    <Container>
      <Header>Shifts</Header>
      <Segment>
        <Button
          basic
          color="green"
          size="small"
          as={Link}
          to="/user/profile/client/add-shift"
        >
          Schedule a Shift
        </Button>
      </Segment>
      {!!isSendingCShiftRequest && <Loader content="Loading" />}
      {!isSendingCShiftRequest &&
        results.length > 0 && (
          <Item.Group divided>
            {results.map(result => (
              <Item key={result.uuid}>
                <Item.Content>
                  <Item.Header content={result.uuid} />
                  <code>{JSON.stringify(result, null, 2)}</code>
                </Item.Content>
                <Item.Extra>
                  <Button
                    primary
                    floated="right"
                    as={Link}
                    to={`/user/profile/client/edit-shift/${result.uuid}`}
                  >
                    Edit
                  </Button>
                  <Button color="red" floated="right">
                    Delete
                  </Button>
                </Item.Extra>
              </Item>
            ))}
          </Item.Group>
        )}
      <div style={{ textAlign: "center" }}>
        <Pagination
          activePage={page}
          onPageChange={handlePaginationChange}
          totalPages={Math.ceil(count / pageSize)}
          boundaryRange={1}
          siblingRange={1}
          size="mini"
          firstItem={undefined}
          lastItem={undefined}
          prevItem={null}
          nextItem={null}
        />
      </div>
    </Container>
  );
};

export default connect(mapStateToProps)(ClientShifts);