working page pagination controls

src/actions/cShift/saga.actions.js

@@ -1,4 +1,7 @@
-import { CREATE_MULTIPLE_CSHIFT_REQUEST } from "../../constants/cShift.constants";
+import {
+  CREATE_MULTIPLE_CSHIFT_REQUEST,
+  GET_CSHIFTS_REQUEST
+} from "../../constants/cShift.constants";
 
 /**
  * Saga action for creating a list of shifts
@@ -10,3 +13,10 @@ export function createMultipleCShiftRequest(postBodies) {
     data: postBodies
   };
 }
+
+export function getCShiftsRequest(params) {
+  return {
+    type: GET_CSHIFTS_REQUEST,
+    data: params
+  };
+}

src/api/cShift.api.js

@@ -1,15 +1,9 @@
-import { post } from "./baseApi";
+import { get, post } from "./baseApi";
 
 export function createCShifts(postBodies) {
-  const cShiftUrl = `/cshift/`;
-  // return Promise.all(
-  //   postBodies.map(postBody => post(cShiftUrl, postBody).catch(() => false))
-  // ).then(postResponses => {
-  //   Promise.resolve(postResponses);
-  // });
   return Promise.all(
     postBodies.map(postBody =>
-      post(cShiftUrl, postBody).catch(err => {
+      post("/cshift/", postBody).catch(err => {
         return { error: true, ...err };
       })
     )
@@ -17,3 +11,7 @@ export function createCShifts(postBodies) {
     return Promise.resolve(resp);
   });
 }
+
+export function getCShifts(params) {
+  return get("/cshift/", params).then(resp => Promise.resolve(resp));
+}

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);

src/constants/cShift.constants.js

@@ -14,3 +14,4 @@ export const SET_CLEAR_CSHIFT_STATE = "SET_CLEAR_CSHIFT_STATE";
 
 // Saga CShift Action Constants
 export const CREATE_MULTIPLE_CSHIFT_REQUEST = "CREATE_MULTIPLE_CSHIFT_REQUEST";
+export const GET_CSHIFTS_REQUEST = "GET_CSHIFTS_REQUEST";

src/sagas/cShift.sagas.js

@@ -13,7 +13,7 @@ import {
   setFormShiftNote,
   setFormShiftStartTime
 } from "../actions/cShift/reducer.actions";
-import { createCShifts } from "../api/cShift.api";
+import { createCShifts, getCShifts } from "../api/cShift.api";
 
 function* createCShiftsCall(postBodies) {
   yield effects.put(isSendingCShiftRequest(true));
@@ -36,15 +36,25 @@ function* createCShiftsCall(postBodies) {
   }
 }
 
+function* getCShiftsCall(params) {
+  yield effects.put(isSendingCShiftRequest(true));
+  try {
+    return yield effects.call(getCShifts, params);
+  } catch (exception) {
+    yield effects.put(setCShiftRequestError(exception));
+    return false;
+  } finally {
+    yield effects.put(isSendingCShiftRequest(false));
+  }
+}
+
 export function* createCShiftsFlow(request) {
   yield effects.put(clearCShiftRequestSuccess());
   yield effects.put(clearCShiftRequestError());
   const arrResponses = yield effects.call(createCShiftsCall, request.data);
-  console.log(arrResponses);
   if (arrResponses) {
     const errorResps = arrResponses.filter(resp => !!resp.error);
     if (errorResps.length > 0) {
-      console.log(arrResponses);
       yield effects.put(setCShiftRequestErrors(errorResps));
     }
     const succResps = arrResponses.filter(resp => !resp.error);
@@ -59,3 +69,12 @@ export function* createCShiftsFlow(request) {
     }
   }
 }
+
+export function* getCShiftsFlow(request) {
+  yield effects.put(clearCShiftRequestSuccess());
+  yield effects.put(clearCShiftRequestError());
+  const isSuccessful = yield effects.call(getCShiftsCall, request.data);
+  if (isSuccessful) {
+    yield effects.put(setCShiftRequestSuccess(isSuccessful));
+  }
+}

src/sagas/index.js

@@ -69,8 +69,11 @@ import {
   updatePriceFlow,
   deletePriceFlow
 } from "./price.sagas";
-import { CREATE_MULTIPLE_CSHIFT_REQUEST } from "../constants/cShift.constants";
-import { createCShiftsFlow } from "./cShift.sagas";
+import {
+  CREATE_MULTIPLE_CSHIFT_REQUEST,
+  GET_CSHIFTS_REQUEST
+} from "../constants/cShift.constants";
+import { createCShiftsFlow, getCShiftsFlow } from "./cShift.sagas";
 
 export default function* rootSaga() {
   yield takeLatest(SEND_REGISTER_REQUEST, registerUserFlow);
@@ -99,4 +102,5 @@ export default function* rootSaga() {
   yield takeLatest(UPDATE_PRICE_REQUEST, updatePriceFlow);
   yield takeLatest(DELETE_PRICE_REQUEST, deletePriceFlow);
   yield takeLatest(CREATE_MULTIPLE_CSHIFT_REQUEST, createCShiftsFlow);
+  yield takeLatest(GET_CSHIFTS_REQUEST, getCShiftsFlow);
 }