simple react componnet

import React, { Component } from "react";
import {
  SimpleForm,
  Create,
  SelectInput,
  TextInput,
  showNotification,
  withDataProvider,
  DisabledInput,
  required,
  number
} from "react-admin";
import Button from "@material-ui/core/Button";
import { connect } from "react-redux";
import { getFormValues } from "redux-form";
import { getFieldValue } from "helpers/fields";
import { withStyles } from "@material-ui/core/styles";
import { getBearerAccessToken } from "helpers/security/helper";

const style = {
  root: {
    display: "inline-block",
    marginRight: 10
  }
};

const validateNumberInputs = [required(), number("Should be number")];

class NewOrder extends Component {
  state = {
    dropdownOptionsVendor: [],
    dropdownOptionsProfileDescription: [],
    dropdownOptionsRange: [],
    dropdownOptionsType: [],
    previewData: null
  };

  componentWillMount() {
    const options = {
      headers: new Headers({
        Accept: "application/json",
        Authorization: getBearerAccessToken()
      })
    };
    fetch(`${process.env.REACT_APP_SIMCARDS_API}/simcard/neworder`, options)
      .then(response => response.json())
      .then(data => {
        this.setState({
          dropdownOptionsType: data.fields[0].options,
          dropdownOptionsVendor: data.fields[2].options
        });
      })
      .catch(e => {
        showNotification("Error", "warning");
      });
  }

  updateHandler = data => {
    if (Object.keys(data).length - 1 <= 2) {
      let vendorId = data["vendor"];

      let profileOption = data.hasOwnProperty("profileDescription")
        ? data["profileDescription"]
        : "";

      let queryString = data.hasOwnProperty("profileDescription")
        ? `/?profileOption=${profileOption}&vendorId=${vendorId}`
        : `/?vendorId=${vendorId}`;
      const options = {
        headers: new Headers({
          Accept: "application/json",
          Authorization: getBearerAccessToken()
        })
      };
      fetch(
        `${process.env.REACT_APP_SIMCARDS_API}/simcard/neworder` + queryString,
        options
      )
        .then(response => response.json())
        .then(data => {
          this.setState({
            dropdownOptionsProfileDescription: data.fields[1].options,
            dropdownOptionsRange: data.fields[3].options
          });
        })
        .catch(e => {
          showNotification("Error", "warning");
        });
    }
  };

  preview = () => {
    let {
      vendor,
      profileDescription,
      quantity,
      type,
      range
    } = this.props.values;

    if (typeof range === "undefined") {
      range = 10;
    }

    const queryString = `/?vendor=${vendor}&profileDescription=${profileDescription}&quantity=${quantity}&type=${type}&range=${range}`;
    fetch(
      `${
        process.env.REACT_APP_SIMCARDS_API
      }/simcard/getOrderFields${queryString}`,
      this.options
    )
      .then(response => response.json())
      .then(data => {
        const newData = {
          date: getFieldValue(data, "date"),
          profileNum: getFieldValue(data, "profileNum"),
          batch: getFieldValue(data, "batch"),
          keyindexOTA: getFieldValue(data, "keyindexOTA"),
          tkOTA: getFieldValue(data, "tkOTA"),
          artwork: getFieldValue(data, "artwork"),
          start_iccid: getFieldValue(data, "start_iccid"),
          end_iccid: getFieldValue(data, "end_iccid"),
          start_imsi: getFieldValue(data, "start_imsi"),
          end_imsi: getFieldValue(data, "end_imsi"),
          address1: "A1",
          address2: "Sofia",
          address3: "1, Kukush str.",
          address4: "Bulgaria",
          customer: "A1"
        };

        this.setState({ previewData: newData });
      })
      .catch(e => {
        showNotification("Error", "warning");
      });
  };

  submit = () => {
    let object = { ...this.props.values };
    let formData = new FormData();
    for (let property in object) {
      if (object.hasOwnProperty(property)) {
        formData.append(property, object[property]);
      }
    }
    fetch(`${process.env.REACT_APP_SIMCARDS_API}/simcard/neworder/order`, {
      method: "POST",
      mode: "cors",
      headers: {
        Authorization: getBearerAccessToken()
      },
      responseType: "blob",
      body: formData
    })
      .then(response => {
        if (response.ok) {
          return {
            name: response.headers.get("X-File-Name"),
            blob: response.blob()
          };
        } else {
          throw Error(`Request rejected with status ${response.status}`);
        }
      })
      .then(data => {
        return Promise.resolve(data);
      })
      .then(data => {
        return data.blob.then(blob => {
          if (window.navigator && window.navigator.msSaveOrOpenBlob) {
            window.navigator.msSaveOrOpenBlob(blob, data.name);
          } else {
            var url = window.URL.createObjectURL(blob);
            var a = document.createElement("a");
            a.href = url;
            a.download = data.name;
            document.body.appendChild(a);
            a.click();
            a.remove();
          }
        });
      })
      .then(() => {
        setTimeout(() => {
          window.location.reload();
        }, 250);
      });
  };

  render() {
    return (
      <Create {...this.props}>
        <SimpleForm
          defaultValue={this.state.previewData}
          form="NewOrderForm"
          toolbar={null}
          onChange={this.updateHandler}
          redirect="sim-simcard/neworder"
        >
          <SelectInput
            formClassName={this.props.classes.root}
            source="vendor"
            choices={this.state.dropdownOptionsVendor}
          />
          <SelectInput
            formClassName={this.props.classes.root}
            source="profileDescription"
            choices={this.state.dropdownOptionsProfileDescription}
          />
          <SelectInput
            formClassName={this.props.classes.root}
            source="range"
            choices={this.state.dropdownOptionsRange}
          />
          <TextInput
            formClassName={this.props.classes.root}
            source="quantity"
            validate={validateNumberInputs}
          />
          <SelectInput
            formClassName={this.props.classes.root}
            source="type"
            choices={this.state.dropdownOptionsType}
          />
          <DisabledInput
            formClassName={this.props.classes.root}
            source="date"
          />
          <TextInput
            formClassName={this.props.classes.root}
            source="profileNum"
            validate={validateNumberInputs}
          />
          <DisabledInput
            formClassName={this.props.classes.root}
            source="batch"
          />
          <DisabledInput
            formClassName={this.props.classes.root}
            source="artwork"
          />
          <DisabledInput
            formClassName={this.props.classes.root}
            source="address1"
          />
          <DisabledInput
            formClassName={this.props.classes.root}
            source="address2"
          />
          <DisabledInput
            formClassName={this.props.classes.root}
            source="address3"
          />
          <DisabledInput
            formClassName={this.props.classes.root}
            source="address4"
          />
          <DisabledInput
            formClassName={this.props.classes.root}
            source="start_imsi"
          />
          <DisabledInput
            formClassName={this.props.classes.root}
            source="end_imsi"
          />
          <DisabledInput
            formClassName={this.props.classes.root}
            source="start_iccid"
          />
          <DisabledInput
            formClassName={this.props.classes.root}
            source="end_iccid"
          />
          <TextInput
            formClassName={this.props.classes.root}
            source="po_ref"
            validate={validateNumberInputs}
          />
          <DisabledInput
            formClassName={this.props.classes.root}
            source="tkOTA"
          />
          <DisabledInput
            formClassName={this.props.classes.root}
            source="keyindexOTA"
          />

          <Button color="primary" onClick={() => this.preview()}>
            Preview order
          </Button>
          <Button color="secondary" onClick={() => this.submit()}>
            Save
          </Button>
        </SimpleForm>
      </Create>
    );
  }
}

const NewOrderWithConnect = connect(state => ({
  values: getFormValues("NewOrderForm")(state)
}))(NewOrder);

const NewOrderWithDataProvider = withDataProvider(NewOrderWithConnect);

const NewOrderWithtyles = withStyles(style)(NewOrderWithDataProvider);

export default NewOrderWithtyles;