added filter by approval

src/actions/cShift/reducer.actions.js

@@ -11,6 +11,8 @@ import {
   SET_FORM_SHIFT_NOTE,
   SET_FORM_SHIFT_DATES,
   SET_CSHIFT_UUID,
+  SET_CSHIFT_PAGE,
+  SET_CSHIFT_APPROVAL_FILTER,
   SET_CLEAR_CSHIFT_STATE
 } from "../../constants/cShift.constants";
 import { parseError } from "../common.actions";
@@ -115,6 +117,20 @@ export function setCShiftUUID(uuid) {
   };
 }
 
+export function setCShiftPage(page) {
+  return {
+    type: SET_CSHIFT_PAGE,
+    data: page
+  };
+}
+
+export function setCShiftApprovalFilter(approvalFilter) {
+  return {
+    type: SET_CSHIFT_APPROVAL_FILTER,
+    data: approvalFilter
+  };
+}
+
 export function setClearCShiftState() {
   return {
     type: SET_CLEAR_CSHIFT_STATE

src/actions/pShift/reducer.actions.js

@@ -5,6 +5,8 @@ import {
   CLEAR_PSHIFT_REQUEST_ERROR,
   CLEAR_PSHIFT_REQUEST_SUCCESS,
   SET_FORM_SHIFT_CHART,
+  SET_PSHIFT_PAGE,
+  SET_PSHIFT_APPROVAL_FILTER,
   SET_CLEAR_PSHIFT_STATE
 } from "../../constants/pShift.constants";
 import { parseError } from "../common.actions";
@@ -50,6 +52,20 @@ export function setFormShiftChart(chart) {
   };
 }
 
+export function setPShiftPage(page) {
+  return {
+    type: SET_PSHIFT_PAGE,
+    data: page
+  };
+}
+
+export function setPShiftApprovalFilter(approvalFilter) {
+  return {
+    type: SET_PSHIFT_APPROVAL_FILTER,
+    data: approvalFilter
+  }
+}
+
 export function setClearPShiftState() {
   return {
     type: SET_CLEAR_PSHIFT_STATE

src/components/User/Client/ClientShifts.jsx

@@ -5,6 +5,7 @@ import { Redirect, Link } from "react-router-dom";
 import {
   Button,
   Container,
+  Dropdown,
   Header,
   Item,
   Segment,
@@ -15,6 +16,10 @@ import {
   List,
   Message
 } from "semantic-ui-react";
+import {
+  setCShiftPage,
+  setCShiftApprovalFilter
+} from "../../../actions/cShift/reducer.actions";
 import {
   getCShiftsRequest,
   deleteCShiftRequest
@@ -25,7 +30,6 @@ 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
     };
   }
@@ -33,7 +37,8 @@ class ClientShifts extends Component {
   componentWillMount = () => {
     this.props.dispatch(
       getCShiftsRequest({
-        page: this.state.page,
+        page: this.props.page,
+        approved: this.props.approvalFilter,
         page_size: this.state.pageSize
       })
     );
@@ -43,10 +48,23 @@ class ClientShifts extends Component {
     this.props.dispatch(
       getCShiftsRequest({
         page: activePage,
+        approved: this.props.approvalFilter,
         page_size: this.state.pageSize
       })
     );
-    this.setState({ page: activePage });
+    this.props.dispatch(setCShiftPage(activePage));
+  };
+
+  handleChangeApprovalFilter = (event, { value }) => {
+    this.props.dispatch(
+      getCShiftsRequest({
+        page: 1,
+        approved: value,
+        page_size: this.state.pageSize
+      })
+    );
+    this.props.dispatch(setCShiftApprovalFilter(value));
+    this.props.dispatch(setCShiftPage(1));
   };
 
   deleteCShift = uuid => {
@@ -57,18 +75,22 @@ class ClientShifts extends Component {
     const {
       isSendingCShiftRequest,
       cShiftRequestSuccess,
-      selfUser
+      selfUser,
+      page,
+      approvalFilter
     } = this.props;
-    const { page, pageSize } = this.state;
+    const { pageSize } = this.state;
     if (selfUser.client) {
       return (
         <ClientShiftsView
           isSendingCShiftRequest={isSendingCShiftRequest}
           cShiftRequestSuccess={cShiftRequestSuccess}
           page={page}
+          approvalFilter={approvalFilter}
           pageSize={pageSize}
           user={selfUser}
           handlePaginationChange={this.handlePaginationChange}
+          handleChangeApprovalFilter={this.handleChangeApprovalFilter}
           deleteCShift={this.deleteCShift}
         />
       );
@@ -87,26 +109,44 @@ const ClientShiftsView = ({
   cShiftRequestSuccess,
   user,
   page,
+  approvalFilter,
   pageSize,
   handlePaginationChange,
+  handleChangeApprovalFilter,
   deleteCShift
 }) => {
   const { count = 0, results = [] } = cShiftRequestSuccess;
-
+  const approvedOptions = [
+    { text: "Approved", value: true },
+    { text: "Rejected", value: false },
+    { text: "All", value: null }
+  ];
   return (
     <Container>
       <Header>Shifts</Header>
-      <Segment>
+      <Segment.Group horizontal>
-        <Button
+        <Segment>
-          basic
+          <Button
-          color="green"
+            basic
-          size="small"
+            color="green"
-          as={Link}
+            size="small"
-          to="/user/profile/client/add-shift"
+            as={Link}
-        >
+            to="/user/profile/client/add-shift"
-          Schedule a Shift
+          >
-        </Button>
+            Schedule a Shift
-      </Segment>
+          </Button>
+        </Segment>
+        <Segment textAlign="right">
+          {"Filter by Approval: "}
+          <Dropdown
+            inline
+            placeholder="All"
+            options={approvedOptions}
+            onChange={handleChangeApprovalFilter}
+            value={approvalFilter}
+          />
+        </Segment>
+      </Segment.Group>
       {!!isSendingCShiftRequest && <Loader content="Loading" active />}
       {!isSendingCShiftRequest &&
         results.length > 0 && (

src/components/User/Provider/ProviderShifts.jsx

@@ -5,8 +5,10 @@ import { Redirect, Link } from "react-router-dom";
 import {
   Button,
   Container,
+  Dropdown,
   Header,
   Item,
+  Segment,
   Pagination,
   Loader,
   Label
@@ -15,6 +17,10 @@ import {
   getEmployerFromPrice,
   getPriceFromPrice
 } from "./ProviderShiftsShared";
+import {
+  setPShiftPage,
+  setPShiftApprovalFilter
+} from "../../../actions/pShift/reducer.actions";
 import {
   getPShiftsRequest,
   updatePShiftRequest
@@ -24,7 +30,6 @@ class ProviderShifts extends Component {
   constructor(props) {
     super(props);
     this.state = {
-      page: 1,
       pageSize: 10 // client can't control this, but set here just in case
     };
   }
@@ -32,7 +37,8 @@ class ProviderShifts extends Component {
   componentWillMount = () => {
     this.props.dispatch(
       getPShiftsRequest({
-        page: this.state.page,
+        page: this.props.page,
+        approved: this.props.approvalFilter,
         page_size: this.state.pageSize
       })
     );
@@ -42,10 +48,23 @@ class ProviderShifts extends Component {
     this.props.dispatch(
       getPShiftsRequest({
         page: activePage,
+        approved: this.props.approvalFilter,
         page_size: this.state.pageSize
       })
     );
-    this.setState({ page: activePage });
+    this.props.dispatch(setPShiftPage(activePage));
+  };
+
+  handleChangeApprovalFilter = (event, { value }) => {
+    this.props.dispatch(
+      getPShiftsRequest({
+        page: 1,
+        approved: value,
+        page_size: this.state.pageSize
+      })
+    );
+    this.props.dispatch(setPShiftApprovalFilter(value));
+    this.props.dispatch(setPShiftPage(1));
   };
 
   handleChangePShiftApproval = (uuid, approved) => {
@@ -60,17 +79,21 @@ class ProviderShifts extends Component {
     const {
       isSendingPShiftRequest,
       pShiftRequestSuccess,
-      selfUser
+      selfUser,
+      page,
+      approvalFilter
     } = this.props;
-    const { page, pageSize } = this.state;
+    const { pageSize } = this.state;
     if (selfUser.provider) {
       return (
         <ProviderShiftsView
           isSendingPShiftRequest={isSendingPShiftRequest}
           pShiftRequestSuccess={pShiftRequestSuccess}
           page={page}
+          approvalFilter={approvalFilter}
           pageSize={pageSize}
           user={selfUser}
+          handleChangeApprovalFilter={this.handleChangeApprovalFilter}
           handlePaginationChange={this.handlePaginationChange}
           handleChangePShiftApproval={this.handleChangePShiftApproval}
         />
@@ -90,14 +113,33 @@ const ProviderShiftsView = ({
   pShiftRequestSuccess,
   user,
   page,
+  approvalFilter,
   pageSize,
+  handleChangeApprovalFilter,
   handlePaginationChange,
   handleChangePShiftApproval
 }) => {
   const { count = 0, results = [] } = pShiftRequestSuccess;
+  const approvedOptions = [
+    { text: "Approved", value: true },
+    { text: "Rejected", value: false },
+    { text: "All", value: null }
+  ];
   return (
     <Container>
       <Header>Shifts</Header>
+      <Segment.Group horizontal>
+        <Segment>
+          {"Filter by Approval: "}
+          <Dropdown
+            inline
+            placeholder="All"
+            options={approvedOptions}
+            onChange={handleChangeApprovalFilter}
+            value={approvalFilter}
+          />
+        </Segment>
+      </Segment.Group>
       {!!isSendingPShiftRequest && <Loader content="Loading" active />}
       {!isSendingPShiftRequest &&
         results.length > 0 && (

src/constants/cShift.constants.js

@@ -11,6 +11,8 @@ export const SET_FORM_SHIFT_DURATION = "SET_FORM_SHIFT_DURATION";
 export const SET_FORM_SHIFT_NOTE = "SET_FORM_SHIFT_NOTE";
 export const SET_FORM_SHIFT_DATES = "SET_FORM_SHIFT_DATES";
 export const SET_CSHIFT_UUID = "SET_CSHIFT_UUID";
+export const SET_CSHIFT_PAGE = "SET_CSHIFT_PAGE";
+export const SET_CSHIFT_APPROVAL_FILTER = "SET_CSHIFT_APPROVAL_FILTER";
 export const SET_CLEAR_CSHIFT_STATE = "SET_CLEAR_CSHIFT_STATE";
 
 // Saga CShift Action Constants

src/constants/pShift.constants.js

@@ -5,6 +5,8 @@ export const CLEAR_PSHIFT_REQUEST_ERROR = "CLEAR_PSHIFT_REQUEST_ERROR";
 export const SET_PSHIFT_REQUEST_SUCCESS = "SET_PSHIFT_REQUEST_SUCCESS";
 export const CLEAR_PSHIFT_REQUEST_SUCCESS = "CLEAR_PSHIFT_REQUEST_SUCCESS";
 export const SET_FORM_SHIFT_CHART = "SET_FORM_SHIFT_CHART";
+export const SET_PSHIFT_PAGE = "SET_PSHIFT_PAGE";
+export const SET_PSHIFT_APPROVAL_FILTER = "SET_PSHIFT_APPROVAL_FILTER";
 export const SET_CLEAR_PSHIFT_STATE = "SET_CLEAR_PSHIFT_STATE";
 
 // Saga PShift Action Constants

src/reducers/cShiftReducer.js

@@ -11,6 +11,8 @@ import {
   SET_FORM_SHIFT_NOTE,
   SET_FORM_SHIFT_DATES,
   SET_CSHIFT_UUID,
+  SET_CSHIFT_PAGE,
+  SET_CSHIFT_APPROVAL_FILTER,
   SET_CLEAR_CSHIFT_STATE
 } from "../constants/cShift.constants";
 
@@ -24,7 +26,9 @@ const initialState = {
   duration: "", // Duration of shift in minutes
   note: "", // Optional note
   shiftDates: {}, // Dates, map of "YYYY-MM-DD" > moment instance
-  cShiftUUID: ""
+  cShiftUUID: "",
+  page: 1,
+  approvalFilter: null
 };
 
 function cShiftReducer(state = initialState, action) {
@@ -89,9 +93,21 @@ function cShiftReducer(state = initialState, action) {
         ...state,
         cShiftUUID: action.data
       };
+    case SET_CSHIFT_PAGE:
+      return {
+        ...state,
+        page: action.data
+      };
+    case SET_CSHIFT_APPROVAL_FILTER:
+      return {
+        ...state,
+        approvalFilter: action.data
+      };
     case SET_CLEAR_CSHIFT_STATE:
       return {
-        ...initialState
+        ...initialState,
+        page: state.page,
+        approvalFilter: state.approvalFilter
       };
     default:
       return state;

src/reducers/pShiftReducer.js

@@ -5,6 +5,8 @@ import {
   CLEAR_PSHIFT_REQUEST_ERROR,
   CLEAR_PSHIFT_REQUEST_SUCCESS,
   SET_FORM_SHIFT_CHART,
+  SET_PSHIFT_PAGE,
+  SET_PSHIFT_APPROVAL_FILTER,
   SET_CLEAR_PSHIFT_STATE
 } from "../constants/pShift.constants";
 
@@ -12,7 +14,9 @@ const initialState = {
   isSendingPShiftRequest: false,
   pShiftRequestError: "",
   pShiftRequestSuccess: "",
-  chart: ""
+  chart: "",
+  page: 1,
+  approvalFilter: null
 };
 
 function pShiftReducer(state = initialState, action) {
@@ -47,9 +51,21 @@ function pShiftReducer(state = initialState, action) {
         ...state,
         chart: action.data
       };
+    case SET_PSHIFT_PAGE:
+      return {
+        ...state,
+        page: action.data
+      };
+    case SET_PSHIFT_APPROVAL_FILTER:
+      return {
+        ...state,
+        approvalFilter: action.data
+      };
     case SET_CLEAR_PSHIFT_STATE:
       return {
-        ...initialState
+        ...initialState,
+        page: state.page,
+        approvalFilter: state.approvalFilter
       };
     default:
       return { ...state };