functionality for client users to add providers

src/components/User/Client/ClientAddProviderForm.jsx

@@ -0,0 +1,125 @@
+import React, { Component } from "react";
+import { connect } from "react-redux";
+import { Redirect } from "react-router-dom";
+import {
+  Container,
+  Form,
+  Header,
+  Input,
+  Message,
+  TextArea
+} from "semantic-ui-react";
+
+import {
+  clearEmployeeRequestError,
+  clearEmployeeRequestSuccess,
+  setFormEmployeeEmail,
+  setFormEmployeeNote
+} from "../../../actions/employee/reducer.actions";
+import { createEmployeeRequest } from "../../../actions/employee/saga.actions";
+import Error from "../../Shared/Error";
+
+class ClientAddProviderForm extends Component {
+  componentWillMount = () => {
+    this.props.dispatch(clearEmployeeRequestError());
+    this.props.dispatch(clearEmployeeRequestSuccess());
+    this.props.dispatch(setFormEmployeeEmail(""));
+    this.props.dispatch(setFormEmployeeNote(""));
+  };
+
+  changeProviderEmail = event => {
+    this.props.dispatch(setFormEmployeeEmail(event.target.value));
+  };
+
+  changeEmployeeNote = event => {
+    this.props.dispatch(setFormEmployeeNote(event.target.value));
+  };
+
+  onSubmitEmployee = event => {
+    event.preventDefault();
+    const { email, note } = this.props;
+    this.props.dispatch(createEmployeeRequest({ provider_email: email, note }));
+  };
+
+  render() {
+    const {
+      isSendingEmployeeRequest,
+      employeeRequestError,
+      employeeRequestSuccess,
+      email,
+      note,
+      selfUser
+    } = this.props;
+
+    if (!selfUser.client) {
+      return <Redirect to="/" />;
+    }
+
+    return (
+      <ClientAddProviderFormView
+        isSendingEmployeeRequest={isSendingEmployeeRequest}
+        employeeRequestError={employeeRequestError}
+        employeeRequestSuccess={employeeRequestSuccess}
+        email={email}
+        note={note}
+        changeProviderEmail={this.changeProviderEmail}
+        changeEmployeeNote={this.changeEmployeeNote}
+        onSubmitEmployee={this.onSubmitEmployee}
+      />
+    );
+  }
+}
+
+function mapStateToProps(state) {
+  return { ...state.employee, selfUser: state.user.selfUser };
+}
+
+const ClientAddProviderFormView = ({
+  isSendingEmployeeRequest,
+  employeeRequestError,
+  employeeRequestSuccess,
+  email,
+  note,
+  changeProviderEmail,
+  changeEmployeeNote,
+  onSubmitEmployee
+}) => (
+  <Container>
+    <Header>Add a Provider</Header>
+    <Form
+      loading={isSendingEmployeeRequest}
+      onSubmit={onSubmitEmployee}
+      error={!!employeeRequestError}
+      success={!!employeeRequestSuccess}
+    >
+      <Form.Field>
+        <label>Email Address</label>
+        <Input
+          placeholder="provider@caremyway.ca"
+          type="email"
+          value={email || ""}
+          onChange={changeProviderEmail}
+        />
+      </Form.Field>
+      <Form.Field>
+        <label>Note</label>
+        <TextArea
+          placeholder="Employee notes"
+          value={note}
+          onChange={changeEmployeeNote}
+        />
+      </Form.Field>
+      <Error header="Add Provider failed!" error={employeeRequestError} />
+      <Message success>
+        <Message.Header>Create Worktype successful!</Message.Header>
+        <p>Worktype successfully created.</p>
+        {!!employeeRequestSuccess && (
+          <Redirect to="/user/profile/client/providers" />
+        )}
+      </Message>
+      <Form.Button>Submit Worktype</Form.Button>
+    </Form>
+  </Container>
+);
+
+export default connect(mapStateToProps)(ClientAddProviderForm);

src/components/User/Client/ClientProviders.jsx

@@ -0,0 +1,92 @@
+import React, { Component } from "react";
+import { connect } from "react-redux";
+import { Redirect, Link } from "react-router-dom";
+import {
+  Button,
+  Card,
+  Container,
+  Header,
+  Popup,
+  Segment
+} from "semantic-ui-react";
+import { deleteEmployeeRequest } from "../../../actions/employee/saga.actions";
+
+class ClientProviders extends Component {
+  deleteEmployee = uuid => {
+    this.props.dispatch(deleteEmployeeRequest(uuid));
+  };
+
+  render() {
+    const { selfUser } = this.props;
+    if (selfUser.client) {
+      return (
+        <ClientProvidersView
+          user={selfUser}
+          deleteEmployee={this.deleteEmployee}
+        />
+      );
+    } else {
+      return <Redirect to="/" />;
+    }
+  }
+}
+
+function mapStateToProps(state) {
+  return { selfUser: state.user.selfUser };
+}
+
+const ClientProvidersView = ({ user, deleteEmployee }) => (
+  <Container>
+    <Header>Providers</Header>
+    <Segment>
+      <Button
+        basic
+        color="green"
+        size="small"
+        as={Link}
+        to="/user/profile/client/add-provider"
+      >
+        Add a Provider
+      </Button>
+    </Segment>
+    {(user.client.employees || []).filter(employee => !employee.deleted)
+      .length > 0 && (
+      <Card.Group>
+        {user.client.employees
+          .filter(employee => !employee.deleted)
+          .map((employee, index) => (
+            <Card key={index}>
+              <Card.Content>
+                <Card.Header as="h4">{employee.provider}</Card.Header>
+                <Card.Description>{employee.note}</Card.Description>
+                <Popup
+                  content={
+                    <div>
+                      Are you sure you want to delete this employee?<br />
+                      <Button
+                        basic
+                        color="red"
+                        size="small"
+                        onClick={() => deleteEmployee(employee.uuid)}
+                      >
+                        Confirm Deletion
+                      </Button>
+                    </div>
+                  }
+                  trigger={
+                    <Button basic color="red" size="small">
+                      Delete
+                    </Button>
+                  }
+                  on="click"
+                  position="top right"
+                />
+              </Card.Content>
+            </Card>
+          ))}
+      </Card.Group>
+    )}
+  </Container>
+);
+
+export default connect(mapStateToProps)(ClientProviders);