added provider users approve clients functionality

src/components/App.jsx

@@ -12,6 +12,7 @@ import UpdateWorkTypeForm from "./Worktype/UpdateWorkTypeForm";
 import Worktypes from "./Worktype/Worktypes";
 import ClientProviders from "./User/Client/ClientProviders";
 import ClientAddProviderForm from "./User/Client/ClientAddProviderForm";
+import ProviderClients from "./User/Provider/ProviderClients";
 import CompleteRegistration from "./User/CompleteRegistration";
 import EditProfile from "./User/EditProfile";
 import Profile from "./User/Profile";
@@ -71,6 +72,10 @@ class App extends Component {
                 path="/user/profile/client/add-provider"
                 component={ClientAddProviderForm}
               />
+              <PrivateRoute
+                path="/user/profile/provider/clients"
+                component={ProviderClients}
+              />
               <PrivateRoute path="/user/profile/edit" component={EditProfile} />
               <PrivateRoute path="/user/profile" component={Profile} />
               <Route path="/user/complete-registration" component={Profile} />

src/components/Navbar.jsx

@@ -73,6 +73,11 @@ const NavbarView = ({ isAuthenticated, dispatchLogoutRequest, selfUser }) => (
                 Providers
               </Dropdown.Item>
             )}
+            {selfUser.provider && (
+              <Dropdown.Item as={Link} to="/user/profile/provider/clients">
+                Clients
+              </Dropdown.Item>
+            )}
             <Dropdown.Item as={Link} to="/auth/settings">
               Settings
             </Dropdown.Item>

src/components/User/Client/ClientAddProviderForm.jsx

@@ -111,13 +111,13 @@ const ClientAddProviderFormView = ({
       </Form.Field>
       <Error header="Add Provider failed!" error={employeeRequestError} />
       <Message success>
-        <Message.Header>Create Worktype successful!</Message.Header>
-        <p>Worktype successfully created.</p>
+        <Message.Header>Create Provider successful!</Message.Header>
+        <p>Provider successfully created.</p>
         {!!employeeRequestSuccess && (
           <Redirect to="/user/profile/client/providers" />
         )}
       </Message>
-      <Form.Button>Submit Worktype</Form.Button>
+      <Form.Button>Submit Provider</Form.Button>
     </Form>
   </Container>
 );

src/components/User/Client/ClientProviders.jsx

@@ -6,6 +6,8 @@ import {
   Card,
   Container,
   Header,
+  Label,
+  List,
   Popup,
   Segment
 } from "semantic-ui-react";
@@ -57,8 +59,48 @@ const ClientProvidersView = ({ user, deleteEmployee }) => (
           .map((employee, index) => (
             <Card key={index}>
               <Card.Content>
-                <Card.Header as="h4">{employee.provider}</Card.Header>
-                <Card.Description>{employee.note}</Card.Description>
+                {(employee.approved === null ||
+                  employee.approved === false) && (
+                  <div>
+                    <Card.Header as="h4">{employee.provider}</Card.Header>
+                    <Card.Description>{employee.note}</Card.Description>
+                  </div>
+                )}
+                {employee.approved && (
+                  <div>
+                    <Card.Header as="h4">
+                      {`${employee.provider.first_name} ${
+                        employee.provider.last_name
+                      }`.trim() || "No Name!"}
+                    </Card.Header>
+                    <Card.Description>
+                      {employee.provider.userinfo && (
+                        <List>
+                          {employee.provider.userinfo.phone_number && (
+                            <List.Item>
+                              Phone Number:{" "}
+                              {employee.provider.userinfo.phone_number}
+                            </List.Item>
+                          )}
+                        </List>
+                      )}
+                    </Card.Description>
+                  </div>
+                )}
+                <Label
+                  attached="bottom right"
+                  color={
+                    employee.approved === null
+                      ? "grey"
+                      : !!employee.approved ? "green" : "red"
+                  }
+                >
+                  {employee.approved === null
+                    ? "Pending"
+                    : !!employee.approved ? "Approved" : "Ended"}
+                </Label>
+              </Card.Content>
+              <Card.Content extra>
                 <Popup
                   content={
                     <div>

src/components/User/Provider/ProviderClients.jsx

@@ -0,0 +1,133 @@
+import React, { Component } from "react";
+import { connect } from "react-redux";
+import { Redirect } from "react-router-dom";
+import {
+  Button,
+  Card,
+  Container,
+  Header,
+  Label,
+  List
+} from "semantic-ui-react";
+import { updateEmployerRequest } from "../../../actions/employer/saga.actions";
+
+class ProviderClients extends Component {
+  updateEmployer = (uuid, approved) => {
+    this.props.dispatch(updateEmployerRequest({ uuid, approved }));
+  };
+
+  render() {
+    const { selfUser } = this.props;
+    if (selfUser.provider) {
+      return (
+        <ProviderClientsView
+          user={selfUser}
+          updateEmployer={this.updateEmployer}
+        />
+      );
+    } else {
+      return <Redirect to="/" />;
+    }
+  }
+}
+
+function mapStateToProps(state) {
+  return { selfUser: state.user.selfUser };
+}
+
+const ProviderClientsView = ({ user, updateEmployer }) => (
+  <Container>
+    <Header>Clients</Header>
+    {(user.provider.employers || []).filter(employer => !employer.deleted)
+      .length > 0 && (
+      <Card.Group>
+        {user.provider.employers
+          .filter(employer => !employer.deleted)
+          .map((employer, index) => (
+            <Card key={index}>
+              <Card.Content>
+                {(employer.approved === null ||
+                  employer.approved === false) && (
+                  <div>
+                    <Card.Header as="h4">
+                      {employer.client.trim() || "No Name!"}
+                    </Card.Header>
+                    <Card.Description>{employer.note}</Card.Description>
+                  </div>
+                )}
+                {employer.approved && (
+                  <div>
+                    <Card.Header as="h4">
+                      {`${employer.client.first_name} ${
+                        employer.client.last_name
+                      }`.trim() || "No Name!"}
+                    </Card.Header>
+                    <Card.Description>
+                      {employer.client.userinfo && (
+                        <List>
+                          {employer.client.userinfo.phone_number && (
+                            <List.Item>
+                              Phone Number:{" "}
+                              {employer.client.userinfo.phone_number}
+                            </List.Item>
+                          )}
+                        </List>
+                      )}
+                    </Card.Description>
+                  </div>
+                )}
+                <Label
+                  attached="bottom right"
+                  color={
+                    employer.approved === null
+                      ? "grey"
+                      : !!employer.approved ? "green" : "red"
+                  }
+                >
+                  {employer.approved === null
+                    ? "Pending"
+                    : !!employer.approved ? "Approved" : "Ended"}
+                </Label>
+              </Card.Content>
+              <Card.Content extra>
+                <Button.Group>
+                  {!employer.approved && (
+                    <Button
+                      basic
+                      color="green"
+                      size="small"
+                      onClick={() => updateEmployer(employer.uuid, true)}
+                    >
+                      Approve
+                    </Button>
+                  )}
+                  {employer.approved === null && (
+                    <Button
+                      basic
+                      color="red"
+                      size="small"
+                      onClick={() => updateEmployer(employer.uuid, false)}
+                    >
+                      Reject
+                    </Button>
+                  )}
+                  {employer.approved && (
+                    <Button
+                      basic
+                      color="red"
+                      size="small"
+                      onClick={() => updateEmployer(employer.uuid, false)}
+                    >
+                      End
+                    </Button>
+                  )}
+                </Button.Group>
+              </Card.Content>
+            </Card>
+          ))}
+      </Card.Group>
+    )}
+  </Container>
+);
+
+export default connect(mapStateToProps)(ProviderClients);