Agnostic Web Application Foundation

Class: Products

Products

new Products()

React component consuming a Product Data Entity collection to feed a grid.

React component consuming a Product Data Entity collection to feed a grid
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:

onAddDocEventListener

listen to add Product Data Entity change event on Data API.

listen to add Product Data Entity change event on Data API
Source:

onDeleteDocEventListener

listen to delete Product Data Entity change event on Data API.

listen to delete Product Data Entity change event on Data API
Source:

onEditDocEventListener

listen to edit Product Data Entity change event on Data API.

listen to edit Product Data Entity change event on Data API
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 start listen to changes on Product data entity and get a list of product in database to fill out the state.products
Source:
Example
componentDidMount() {
  const { Product } = this.foundation.data

  this.onAddDocEventListener = Product.on(
    'add',
    handlerOnAddDocEventListener.bind(this)
  )

  this.onEditDocEventListener = Product.on(
    'edit',
    handlerOnEditDocEventListener.bind(this)
  )

  this.onDeleteDocEventListener = Product.on(
    'delete',
    handlerOnDeleteDocEventListener.bind(this)
  )

  const { error, data } = await Product.find({}, { ...this.pagination })
  if (!error) {
    this.setState({ products: products.data })
  }
}

<static> componentWillUnmount()

Called immediately before a component is destroyed. Perform any necessary cleanup in this method, such as cancelled network requests, or cleaning up any DOM elements created in componentDidMount.

lets stop listen to Product Data State Change Events
Source:
Example
componentWillUnmount() {
  const { Product } = this.foundation.data
  Product.stopListenTo(this.onAddDocEventListener)
  Product.stopListenTo(this.onEditDocEventListener)
  Product.stopListenTo(this.onDeleteDocEventListener)
}

<static> handleDeleteProduct(event, __id)

Event handler that Deletes a product

Once component is monted we are now ready to start listen to changes on Product data entity and get a list of product in database to fill out the state.products
Parameters:
Name Type Description
event event The HTML event triggered on User interation
__id number The primaryKey value of the record willing to be deleted
Source:
Example
handleDeleteProduct(e, ___id) {
  const { Product } = this.foundation.data
  e.preventDefault()
  swal({
    title: 'Are you sure?',
    text: 'Once deleted, you will not be able to recover this!',
    icon: 'warning',
    buttons: true,
    dangerMode: true
  }).then(async (willDelete) => {
    if (willDelete) {
      const r = await Product.delete(___id)
      if (r.error) {
        swal('Database error', e.error.message, 'error')
        return
      }
      swal('Poof! The product has been deleted!', {
        icon: 'success'
      })
      return <Redirect to = '/dashboard' / >
    } else {
      swal('The Product is safe!')
    }
  })
}

// <a color='primary' href='#' onClick={e => this.handleDeleteProduct(e, doc.__id)}>[delete]</a>

<async, static> render()

Component render function.

Renders a grid of Products
Source: