shift stub

src/components/App.jsx

@@ -12,6 +12,8 @@ import UpdateWorkTypeForm from "./Worktype/UpdateWorkTypeForm";
 import Worktypes from "./Worktype/Worktypes";
 import ClientProviders from "./User/Client/ClientProviders";
 import ClientAddProviderForm from "./User/Client/ClientAddProviderForm";
+import ClientShifts from "./User/Client/ClientShifts";
+import ClientAddShiftForm from "./User/Client/ClientAddShiftForm";
 import ProviderClients from "./User/Provider/ProviderClients";
 import CompleteRegistration from "./User/CompleteRegistration";
 import EditProfile from "./User/EditProfile";
@@ -72,6 +74,14 @@ class App extends Component {
                 path="/user/profile/client/add-provider"
                 component={ClientAddProviderForm}
               />
+              <PrivateRoute
+                path="/user/profile/client/shifts"
+                component={ClientShifts}
+              />
+              <PrivateRoute
+                path="/user/profile/client/add-shift"
+                component={ClientAddShiftForm}
+              />
               <PrivateRoute
                 path="/user/profile/provider/clients"
                 component={ProviderClients}

src/components/Navbar.jsx

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

src/components/User/Client/ClientAddShiftForm.jsx

@@ -0,0 +1,83 @@
+import React, { Component } from "react";
+import { connect } from "react-redux";
+import { Redirect } from "react-router-dom";
+import {
+  Container,
+  Dropdown,
+  Form,
+  Header,
+  Input,
+  TextArea
+} from "semantic-ui-react";
+
+class ClientAddShiftForm extends Component {
+  render() {
+    const { selfUser } = this.props;
+
+    if (!selfUser.client) {
+      return <Redirect to="/" />;
+    }
+
+    const employeeChoices = selfUser.client.employees
+      .filter(employee => !employee.deleted)
+      .map((val, idx, arr) => ({
+        key: val.uuid,
+        value: val.uuid,
+        text: val.provider.email
+      }));
+
+    const priceChoices = selfUser.client;
+
+    return (
+      <ClientAddShiftFormView
+        user={selfUser}
+        employeeChoices={employeeChoices}
+      />
+    );
+  }
+}
+
+function mapStateToProps(state) {
+  return { ...state.employee, selfUser: state.user.selfUser };
+}
+
+const ClientAddShiftFormView = ({ employeeChoices, user }) => (
+  <Container>
+    <Header>Schedule a Shift</Header>
+    <Form>
+      <Form.Group widths="equal">
+        <Form.Field>
+          <label>Employee</label>
+          <Dropdown
+            placeholder="Select employee"
+            selection
+            options={employeeChoices}
+          />
+        </Form.Field>
+        <Form.Field>
+          <label>Price</label>
+          <Input placeholder="Price" type="text" />
+        </Form.Field>
+        <Form.Field>
+          <label>Time</label>
+          <Input placeholder="Time" type="text" />
+        </Form.Field>
+        <Form.Field>
+          <label>Duration</label>
+          <Input placeholder="Duration" type="text" />
+        </Form.Field>
+      </Form.Group>
+      <Form.Field>
+        <label>Note</label>
+        <TextArea placeholder="Employee notes" />
+      </Form.Field>
+      <Form.Field>
+        <label>Days</label>
+        <TextArea placeholder="Date Picker" />
+      </Form.Field>
+      <Form.Button>Schedule Shift</Form.Button>
+    </Form>
+  </Container>
+);
+
+export default connect(mapStateToProps)(ClientAddShiftForm);

src/components/User/Client/ClientShifts.jsx

@@ -0,0 +1,39 @@
+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";
+
+class ClientShifts extends Component {
+  render() {
+    const { selfUser } = this.props;
+    if (selfUser.client) {
+      return <ClientShiftsView user={selfUser} />;
+    } else {
+      return <Redirect to="/" />;
+    }
+  }
+}
+
+function mapStateToProps(state) {
+  return { 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>
+);
+
+export default connect(mapStateToProps)(ClientShifts);