added filter by approval

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>
-        <Button
-          basic
-          color="green"
-          size="small"
-          as={Link}
-          to="/user/profile/client/add-shift"
-        >
-          Schedule a Shift
-        </Button>
-      </Segment>
+      <Segment.Group horizontal>
+        <Segment>
+          <Button
+            basic
+            color="green"
+            size="small"
+            as={Link}
+            to="/user/profile/client/add-shift"
+          >
+            Schedule a Shift
+          </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 && (