Class: CustomersEdit

Extends

• React.Component

Members

---

entity

Entity name which this component represents to.

Entity name which this component represents to

Source:

• customers/CustomersEdit.js, line 35

---

foundation

access to foundation instance.

access to foundation instance

Source:

• customers/CustomersEdit.js, line 39

---

pagination

default pagination to list data.

default pagination to list data

Source:

• customers/CustomersEdit.js, line 43

---

state

component state.

component state

Source:

• customers/CustomersEdit.js, line 50

Methods

---

<async, static> componentDidMount()

Called immediately after a component is mounted. Setting state here will trigger re-rendering.

Once component is monted we are now ready to get the desired Customer data in database and bind to state.customer

Source:

• customers/CustomersEdit.js, line 62

Example

async componentDidMount() {
    if (!this.state.toDashboard) {
      this.form = document.querySelectorAll('.needs-validation')[0]
      this.form.addEventListener('submit', this.handleFormSubmit, false)
    }
    const { match: { params } } = this.props
    const { Customer } = this.foundation.data
    const { __id } = params
    this.#__id = __id
    const findCustomer = await Customer.findById(this.#__id)
    if (findCustomer.error) {
      // console.error('findCustomer.error', findCustomer.error)
      return
    }
    if (findCustomer.data) {
      this.setState({
        customer: findCustomer.data
      })
    }
  }

---

<static> handleChangeFieldValue(event)

Event handler that change form field values and set it state

Parameters:

Name	Type	Description
event	event	The HTML event triggered on User interation

Source:

• customers/CustomersEdit.js, line 108

Example

handleChangeFieldValue(e) {
  const newHash = { ...this.state.customer }
  const name = e.target.id || e.target.name
  const value = e.target.value
  newHash[name] = value
  if (name === 'cards') {
    if (value !== '') {
      newHash[name] = [value]
    } else {
      newHash[name] = []
    }
  }
  this.setState({ customer: newHash })
}

---

<async, static> handleFormSubmit(event)

Event handler that handles the form submission

Parameters:

Name	Type	Description
event	event	The HTML event triggered on User interation

Source:

• customers/CustomersEdit.js, line 143

Example

async handleFormSubmit(e) {
  const { Customer } = this.foundation.data
  if (!this.form.checkValidity()) {
    // console.log('not validated')
  }
  e.preventDefault()
  e.stopPropagation()
  this.form.classList.add('was-validated')
  const doc = { ...this.state.customer }
  const { data, error } = await Customer.edit(this.#__id, doc)
  if (error) {
    swal('Database error', error.message, 'error')
    return
  }
  this.setState({ toDashboard: true })
}

---

<async, static> render()

Component render function.

Renders a form to edit the Customer data

Source:

• customers/CustomersEdit.js, line 183