Form Component

EventFormIndex.js

import React, { Component } from "react";
import { compose, graphql } from "react-apollo";
import { withRouter, Link } from "react-router-dom";
import _forOwn from "lodash/forOwn";
import { Row, Col, Form, Button } from "antd";
const FormItem = Form.Item;

import "./eventForm.scss";
import FormItems, { formItemLayout } from "./FormItems";

import query_getEventGroup from "../../../queries/booking/getEventGroup";
import query_getEventType from "../../../queries/booking/getEventType";
import mutation_createEvent from "../../../mutations/event/createEvent";

import clientQuery_eventFormData from "../../../localState/queries/booking/eventFormData";
import clientMutation_setEventFormData from "../../../localState/mutations/booking/setEventFormData";
import clientQuery_userTimezone from "../../../localState/queries/booking/userTimezone";
import clientQuery_selectedEventOption from "../../../localState/queries/booking/selectedEventOption";

function hasErrors(fieldsError) {return Object.keys(fieldsError).some(field => fieldsError[field]);}

class EventFormIndex extends Component {
  onSubmit(e) {
    e.preventDefault();
    this.props.form.validateFields();
    if (!hasErrors(this.props.form.getFieldsError())) {
      const eventFormData_object = JSON.stringify(this.props.form.getFieldsValue());
      this.props
        .setEventFormData({
          variables: { eventFormData_object }
        })
        .then(res => {
          if (!res.err) {
            // Submit the event to the server, after saving the event to the cache.
            this.handleSubmitEvent();
          }
        })
        .catch(err => console.log(err));
    }
  }

  formDataToJsonString() {
    const formFieldsData_object = JSON.parse(this.props.eventFormData.eventFormData);
    let formFieldData = [];
    _forOwn(formFieldsData_object, (value, key) => {
      if (key !== "attendeeName" && key !== "attendeeEmail") {
        this.props.getEventType.getEventType.formFields.map(formField => {
          try {
            if (key === formField.id) {
              let mappedUserFieldData = { formFieldId: formField.id, fieldName: formField.name, fieldType: formField.fieldType };
              if (formField.fieldType === "NUMBER_INPUT") {
                mappedUserFieldData.dataNumber = value;
              } else if (formField.fieldType === "SELECTION") {
                mappedUserFieldData.dataStringArray = value;
              } else {
                mappedUserFieldData.dataString = value;
              }
              formFieldData.push(mappedUserFieldData);
            }
          } catch (err) {}
        });
      }
    });
    return JSON.stringify(formFieldData);
  }

  handleSubmitEvent() {
    const { username } = this.props.match.params;
    const eventGroupId = this.props.getEventGroup.getEventGroup.id;
    const eventTypeId = this.props.getEventType.getEventType.id;
    const { dateYMD, startMinutes, endMinutes, start, end } = this.props.selectedEventOption.selectedEventOption;
    const { attendeeName, attendeeEmail } = JSON.parse(this.props.eventFormData.eventFormData);
    const attendeeTimezone = this.props.userTimezone.userTimezone;
    const attendeeFormFieldData_jsonString = this.formDataToJsonString();
    this.props
      .createEvent({
        variables: {
          username,
          eventGroupId,
          eventTypeId,
          dateYMD,
          startMinutes,
          endMinutes,
          start,
          end,
          attendeeName,
          attendeeEmail,
          attendeeTimezone,
          attendeeFormFieldData_jsonString
        }
      })
      .then(res => {
        if (!res.err) {
          const { username, eventGroupUrl } = this.props.match.params;
          this.props.history.push(`/booking/${username}/${eventGroupUrl}/success`);
        }
      })
      .catch(err => {
        console.log(err);
      });
  }

  renderSystemFields() {
    const systemFormFields = [
      {
        id: "attendeeName",
        name: "Name",
        details: null,
        fieldType: "NAME_INPUT",
        options: [],
        required: true
      },
      {
        id: "attendeeEmail",
        name: "Email",
        details: null,
        fieldType: "EMAIL_INPUT",
        options: [],
        required: true
      }
    ];
    return <FormItems isFieldTouched={this.props.form.isFieldTouched} getFieldDecorator={this.props.form.getFieldDecorator} formFields={systemFormFields} />;
  }

  render() {
    if (this.props.getEventGroup.loading || this.props.getEventType.loading) return <div />;
    const { formFields } = this.props.getEventType.getEventType;
    const { username, eventGroupUrl, eventTypeUrl } = this.props.match.params;
    const { getFieldDecorator } = this.props.form;
    return (
      <Form onSubmit={e => this.onSubmit(e)}>
        <h2 className="booking-step-title">Your Information</h2>

        {this.renderSystemFields()}

        <FormItems isFieldTouched={this.props.form.isFieldTouched} getFieldDecorator={getFieldDecorator} formFields={formFields} />
        <Row style={{marginBottom: 20}}>
          <Col xs={24} sm={8} />
          <Col xs={24} sm={10} style={{paddingLeft: 30}}>
            <Link to={`/booking/${username}/${eventGroupUrl}/${eventTypeUrl}/time`}>
              <Button>Go Back</Button>
            </Link>
            <Button type="primary" htmlType="submit" style={{ float: "right", marginRight: 30 }}>
              Finish
            </Button>
          </Col>
        </Row>
      </Form>
    );
  }
}

export default withRouter(
  compose(
    graphql(query_getEventGroup, {
      name: "getEventGroup",
      options: props => {
        const { username, eventGroupUrl } = props.match.params;
        return { variables: { username, eventGroupUrl } };
      }
    }),
    graphql(query_getEventType, {
      name: "getEventType",
      options: props => {
        const { username, eventTypeUrl } = props.match.params;
        return { variables: { username, eventTypeUrl } };
      }
    }),
    graphql(clientQuery_eventFormData, {
      name: "eventFormData"
    }),
    graphql(clientMutation_setEventFormData, {
      name: "setEventFormData"
    }),
    graphql(clientQuery_selectedEventOption, {
      name: "selectedEventOption"
    }),
    graphql(clientQuery_userTimezone, {
      name: "userTimezone"
    }),
    graphql(mutation_createEvent, {
      name: "createEvent"
    })
  )(
    Form.create({
      onValuesChange: (props, newValues, allValues) => {
        const eventFormData_object = JSON.stringify(allValues);
        props.setEventFormData({
          variables: { eventFormData_object }
        });
      },
      mapPropsToFields: props => {
        let eventFormData = JSON.parse(props.eventFormData.eventFormData);
        let mappedValues = {};
        if (eventFormData) {
          _forOwn(eventFormData, (value, key) => {
            mappedValues[key] = Form.createFormField({ value });
          });
        }
        return mappedValues;
      }
    })(EventFormIndex)
  )
);