working page pagination controls

src/components/User/Client/ClientAddShiftForm.jsx

@@ -132,10 +132,6 @@ class ClientAddShiftForm extends Component {
       return <Redirect to="/" />;
     }
 
-    if (cShiftRequestSuccess) {
-      console.log(cShiftRequestSuccess);
-    }
-
     const employeeChoices = selfUser.client.employees
       .filter(employee => !employee.deleted && !!employee.approved)
       .map(({ uuid, provider }) => ({

src/components/User/Client/ClientShifts.jsx

@@ -1,13 +1,62 @@
 import React, { Component } from "react";
 import { connect } from "react-redux";
 import { Redirect, Link } from "react-router-dom";
-import { Button, Container, Header, Segment } from "semantic-ui-react";
+import {
+  Button,
+  Container,
+  Header,
+  Item,
+  Segment,
+  Pagination
+} 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 { selfUser } = this.props;
+    const {
+      isSendingCShiftRequest,
+      cShiftRequestSuccess,
+      selfUser
+    } = this.props;
+    const { page, pageSize } = this.state;
     if (selfUser.client) {
-      return <ClientShiftsView user={selfUser} />;
+      return (
+        <ClientShiftsView
+          isSendingCShiftRequest={isSendingCShiftRequest}
+          cShiftRequestSuccess={cShiftRequestSuccess}
+          page={page}
+          pageSize={pageSize}
+          user={selfUser}
+          handlePaginationChange={this.handlePaginationChange}
+        />
+      );
     } else {
       return <Redirect to="/" />;
     }
@@ -15,25 +64,62 @@ class ClientShifts extends Component {
 }
 
 function mapStateToProps(state) {
-  return { selfUser: state.user.selfUser };
+  return { ...state.cShift, selfUser: state.user.selfUser };
 }
 
-const ClientShiftsView = ({ user }) => (
-  <Container>
-    <Header>Shifts</Header>
-    <Segment>
-      <Button
-        basic
-        color="green"
-        size="small"
-        as={Link}
-        to="/user/profile/client/add-shift"
-      >
-        Schedule a Shift
-      </Button>
-    </Segment>
-    <p>Todo: List Shifts</p>
-  </Container>
-);
+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 &&
+        results.length > 0 && (
+          <Item.Group>
+            {results.map(result => (
+              <Item key={result.uuid}>
+                <Item.Content>
+                  <Item.Header content={result.uuid} />
+                  <code>{JSON.stringify(result, null, 2)}</code>
+                </Item.Content>
+              </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);