How to use the xadmin.app.context function in xadmin

const BatchChangeBtn = props => {
  const { _t } = app.context
  const [ show, setShow ] = React.useState(false)
  const { canEdit, fields, onBatchChange } = use('actons.batch_change', props)
  const { selected } = use('model.select', props)
  const { model } = use('model', props)

  const onClose = () => setShow(false)

  const renderModel = () => {
    const fs = fields.map(f => f.split('.')[0])
    return (
       _.find(model.form, f => f && f.key == name) || name ) : [ '*' ]
        }, 'required')}

render() {
    const { _t } = app.context
    const { selected, fields } = this.props
    let items = []
    const showFields = Object.keys(fields).filter(name => fields[name].showInGrid !== false)
    const menuShow = showFields.length <= 10

    for (let name of showFields) {
      let field = fields[name]
        , fieldName = name
        , title = field.title || name
        , fieldSelected = _.indexOf(selected, name) !== -1
        , icon = fieldSelected ?  : 
        , onClick = (e) => {
          this.props.changeFieldDisplay([ fieldName, !fieldSelected ])
        }
      if(menuShow) {
        items.push({icon} {title})

React.useEffect(() => {
    if(state == null) {
      let initial = initialValues
      if(!initial && model.initialValues) {
        initial = _.isFunction(model.initialValues) ? model.initialValues() : model.initialValues
      }
      app.context.store.dispatch({ type: 'INITIALIZE', model, initial })
      setState('INITIALIZE')
    } else if(state == 'DESTROY') {
      app.context.store.dispatch({ type: 'DESTROY', model })
    }
  }, [ state ])
  if(!model || state != 'INITIALIZE') return null

render() {
    const { _t } = app.context
    return <div>{_t('Welcome, Have a nice day!')}</div>{Block('dashboard.main', this)}
  }
}

render() {
    const { input, field } = this.props
    const { _t } = app.context

    return (
      
        
          <input>
        
        
          
            <img style="{{">this.setState({ url: this.getCodeUrl() })} src={ this.state.url } /&gt;
          
        
      
    )
  }
}

const SignUpForm = StoreWrap('auth.sign_up')(({ onSuccess }) => {
  const { _t } = app.context
  return (
    
      
    
  )
})

const UserMenu = StoreWrap('auth.user')(({ user, onLogout, onChangePassword }) => {
  const { _t } = app.context
  return user && (
     {user.username}} id="basic-nav-dropdown">
      
      {_t('Change password')}
      {_t('Logout')}
    
  )
})

render() {
    const { count, add } = this.props
    const { _t } = app.context

    const FormLayout = (props) => {
      const { children, invalid, handleSubmit, submitSucceeded, submitting, isCreate } = props
      return (
        <form>
          {children}
          <a>{_t('Add Count')}</a>
        </form>
      )
    }

    return (
      
        {count}

export default StoreWrap('auth.reset_password')(({ onSuccess, location: { query } }) => {
  const { _t } = app.context
  return (
    
      
    
  )
})

renderOrder() {
    const { field, order, canOrder } = this.props
    const { _t } = app.context
    let orderItems = []

    if(canOrder) {
      orderItems = [
        { this.props.changeOrder('ASC') }} active={order==='ASC'}> {_t('Sort ASC')},
        { this.props.changeOrder('DESC') }} active={order==='DESC'}> {_t('Sort DESC')}
      ]
      if(order != '') {
        orderItems.push({ this.props.changeOrder('') }}> {_t('Clear order')})
      }
    }
    return orderItems
  }