Example "Smart Component"

EmailAddressList.tsx

import React from 'react'
import { UIController, useController } from '../core'
import { stylesheet } from '../theme'
import { DomainObjectList } from 'fp-api'

type EmailAddressListProps = {
  customerId: number
}

class EmailAddressListController extends UIController<EmailAddressListProps> {
  emails: DomainObjectList<CustomerEmailAddress>
  
  async initialize() {
    const { customerId } = this.params
    const { rest } = this.services
    
    this.emails = await rest.fetchList<CustomerEmailAddress>("CustomerEmailAddress", { customerId })
  }
  
}
 
export const EmailAddressList = (props: EmailAddressListProps) => {
  const ctrl = useController(EmailAddressListController, props)
  
  return ctrl.render(() => (
    <div className={CSS.EmailAddressList}>
      {ctrl.emails.map(email => (<EmailListItem email={email} key={email.emailAddressId} />))}
    </div>
  ))
}

export default EmailAddressList

const CSS = stylesheet({
  EmailAddressList: {},
})

EmailAddressList_MultiView.tsx

/**
  We could have different form factor views in the same Smart Component, if/when it makes sense.
*/
import React from 'react'
import { UIController, useController } from '../core'
import { stylesheet } from '../theme'
import { DomainObjectList } from 'fp-api'

type EmailAddressListProps = {
  customerId: number
}

class EmailAddressListController extends UIController<EmailAddressListProps> {
  emails: DomainObjectList<CustomerEmailAddress>
  
  async initialize() {
    const { customerId } = this.params
    const { rest } = this.services
    
    this.emails = await rest.fetchList<CustomerEmailAddress>("CustomerEmailAddress", { customerId })
  }
  
}
 
export const EmailAddressList = (props: EmailAddressListProps) => {
  const ctrl = useController(EmailAddressListController, props)
  
  return ctrl.render(() => (
    <div className={CSS.EmailAddressList}>
      {ctrl.emails.map(email => (<EmailListItem email={email} key={email.emailAddressId} />))}
    </div>
  ))
}

export const EmailAddressListMobile = (props: EmailAddressListProps) => {
  const ctrl = useController(EmailAddressListController, props)
  
  return ctrl.render(() => (
    <ion-list className={CSS.EmailAddressListMobile}>
      {ctrl.emails.map(email => (<EmailListItemMobile email={email} key={email.emailAddressId} />))}
    </ion-list>
  ))
}

  
export default EmailAddressList

const CSS = stylesheet({
  EmailAddressList: {},
  
  EmailAddressListMobile: {},
})