caremyway-client/src/components/User/Client/ClientAddShiftForm.jsx

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