shift stub

package.json

@@ -3,7 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "axios": "^0.17.1",
+    "axios": "^0.18.0",
     "localStorage": "^1.0.3",
     "react": "^16.2.0",
     "react-color": "^2.13.8",
@@ -11,11 +11,11 @@
     "react-redux": "^5.0.6",
     "react-router": "^4.2.0",
     "react-router-dom": "^4.2.2",
-    "react-scripts": "1.1.0",
+    "react-scripts": "^1.1.0",
-    "redux": "^3.7.2",
+    "redux": "^4.0.0",
     "redux-logger": "^3.0.6",
     "redux-saga": "^0.16.0",
-    "semantic-ui-react": "^0.77.2"
+    "semantic-ui-react": "^0.79.1"
   },
   "scripts": {
     "start": "react-scripts start",

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);

src/reducers/index.js

@@ -3,12 +3,14 @@ import authReducer from "./authReducer";
 import userReducer from "./userReducer";
 import worktypeReducer from "./worktypeReducer";
 import employeeReducer from "./employeeReducer";
+// import employerReducer from "./employerReducer"; // unused
 
 const reducer = combineReducers({
   auth: authReducer,
   user: userReducer,
   worktype: worktypeReducer,
   employee: employeeReducer
+  // employer: employerReducer // unused
 });
 
 export default reducer;