Class: Customers

Extends

• React.Component

Members

---

entity

Entity name which this component represents to.

Entity name which this component represents to

Source:

• customers/index.js, line 69

---

foundation

access to foundation instance.

access to foundation instance

Source:

• customers/index.js, line 73

---

onAddDocEventListener

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

listen to add Customer Data Entity change event on Data API

Source:

• customers/index.js, line 157

---

onDeleteDocEventListener

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

listen to delete Customer Data Entity change event on Data API

Source:

• customers/index.js, line 167

---

onEditDocEventListener

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

listen to edit Customer Data Entity change event on Data API

Source:

• customers/index.js, line 162

---

pagination

default pagination to list data.

default pagination to list data

Source:

• customers/index.js, line 77

---

state

component state.

component state

Source:

• customers/index.js, line 84

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 Customer data entity and get a list of customer in database to fill out the state.customers

Source:

• customers/index.js, line 119

Example

componentDidMount() {
  const { Customer } = this.foundation.data

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

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

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

  const { error, data } = await Customer.find({}, { ...this.pagination })
  if (!error) {
    this.setState({ customers: customers.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 Customer Data State Change Events

Source:

• customers/index.js, line 93

Example

componentWillUnmount() {
  const { Customer } = this.foundation.data
  Customer.stopListenTo(this.onAddDocEventListener)
  Customer.stopListenTo(this.onEditDocEventListener)
  Customer.stopListenTo(this.onDeleteDocEventListener)
}

---

<static> handleDeleteCustomer(event, __id)

Event handler that Deletes a customer

Once component is monted we are now ready to start listen to changes on Customer data entity and get a list of customer in database to fill out the state.customers

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:

• customers/index.js, line 178

Example

handleDeleteCustomer(e, ___id) {
  const { Customer } = 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 Customer.delete(___id)
      if (r.error) {
        swal('Database error', e.error.message, 'error')
        return
      }
      swal('Poof! The customer has been deleted!', {
        icon: 'success'
      })
      return <Redirect to = '/dashboard' / >
    } else {
      swal('The Customer is safe!')
    }
  })
}

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

---

<async, static> render()

Component render function.

Renders a grid of Customers

Source:

• customers/index.js, line 241