Agnostic Web Application Foundation

Class: ProductsEdit

ProductsEdit

new ProductsEdit()

React component that edits a Product data by biding it to a form.

React component that edits a Product data by biding it to a form
Author:
Source:

Extends

  • React.Component

Members

entity

Entity name which this component represents to.

Entity name which this component represents to
Source:

foundation

access to foundation instance.

access to foundation instance
Source:

pagination

default pagination to list data.

default pagination to list data
Source:

state

component state.

component state
Source:

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 Product data in database and bind to state.product
Source:
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 { Product } = this.foundation.data
    const { __id } = params
    this.#__id = __id
    const findProduct = await Product.findById(this.#__id)
    if (findProduct.error) {
      // console.error('findProduct.error', findProduct.error)
      return
    }
    if (findProduct.data) {
      this.setState({
        product: findProduct.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:
Example
handleChangeFieldValue(e) {
  const newHash = { ...this.state.product }
  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({ product: 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:
Example
async handleFormSubmit(e) {
  const { Product } = 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.product }
  const { data, error } = await Product.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 Product data
Source: