How to use cozy-ui - 10 common examples

onError: err => {
        // eslint-disable-next-line no-console
        console.error(err)
        Alerter.error(t('AccountSettings.failure'))
      }
    })

const onError = err => {
      // eslint-disable-next-line no-console
      console.warn('Could not save rule')
      // eslint-disable-next-line no-console
      console.error(err)
      Alerter.error(t('Settings.rules.saving-error'))
    }

if (!doctype || !id) {
    throw new Error('Invoice is malformed. invoice: ' + bill.invoice)
  }

  return [doctype, id]
}

const getBill = (transaction, actionProps) => {
  if (actionProps.bill) {
    return actionProps.bill
  }

  return get(transaction, 'bills.data[0]')
}

const transactionModalRowStyle = { color: palette.dodgerBlue }
export class BillComponent extends Component {
  state = {
    fileId: false
  }

  findFileId = async () => {
    const { transaction, actionProps } = this.props
    try {
      const bill = await getBill(transaction, actionProps)
      const [, fileId] = getBillInvoice(bill)
      this.setState({ fileId })
    } catch (e) {
      // eslint-disable-next-line no-console
      console.log(e)
    }
  }

const handleNotification = notification => {
  if (notification.additionalData.foreground && isIOS()) {
    // on iOS the the notification does not appear if the application is in foreground
    Alerter.info(notification.title + ' : ' + notification.message)
  }
  if (flag('debug')) {
    // eslint-disable-next-line no-console
    console.log('Received notification', notification)
  }
  if (
    !notification.additionalData.foreground &&
    notification.additionalData.route
  ) {
    hashHistory.push(notification.additionalData.route)
  }
}

// TODO use stack layout when https://github.com/cozy/cozy-banks/pull/1312 has been merged (see https://github.com/cozy/cozy-banks/pull/1312/commits/2bc1d75a25fe2c61f219579ac56407e356997105 more particularly)
                    className={cx({
                      'u-mt-1-half': index !== 0
                    })}
                  />
                ))}
            
          ) : null}
        
      
    )
  }
}

const ReimbursementStatusModal = compose(
  translate(),
  withBreakpoints()
)(_ReimbursementStatusModal)

export default ReimbursementStatusModal

* to show possible actions related to a transaction.
 *
 * The TransactionAction (the action the user is most susceptible
 * to need) can also be shown in desktop mode, directly in the
 * table.
 */

import React, { Component } from 'react'
import PropTypes from 'prop-types'
import palette from 'cozy-ui/transpiled/react/palette'
import { findMatchingActions } from 'ducks/transactions/actions'
import { TransactionActionsContext } from 'ducks/transactions/TransactionActionsContext'
import withContext from 'components/withContext'

// TODO delete or rename this variable (see https://gitlab.cozycloud.cc/labs/cozy-bank/merge_requests/237)
const PRIMARY_ACTION_COLOR = palette.dodgerBlue

const MenuAction = ({
  action,
  transaction,
  actionProps,
  compact = false,
  menuPosition,
  isModalItem
}) => {
  const { Component } = action
  const color = action.disabled
    ? palette.charcoalGrey
    : action.color || actionProps.color || PRIMARY_ACTION_COLOR

  return (

handleClick() {
    this.clicks.push({ date: Date.now() })
    this.clicks = takeLast(this.clicks, 3)
    if (this.clicks.length < 3) {
      return
    }
    for (const [prevClick, click] of pairs(this.clicks)) {
      const delta = click.date - prevClick.date
      if (delta > 1000) {
        // Clicks are not close enough
        return
      }
    }
    Alerter.info('Debug flag activated')
    flag('debug', true)
  }

'%{nbReimbursements}',
        vendors.length
      )
    : t('Transactions.actions.healthExpenseProcessed.single')

  // Normally, pending color is not error/red, but for now we handle this state like this
  const type = pending ? 'error' : 'normal'
  const icon = pending ? 'hourglass' : 'file'
  const reimbursements =
    transaction.reimbursements && transaction.reimbursements.data

  if (pending) {
    if (isModalItem) {
      return (
        }
          style={transactionModalRowStyle}
        >
          {text}
        
      )
    }

    return (
      }
        compact={compact}
      />
    )
  }

const configureStore = (cozyClient, persistedState) => {
  // Enable Redux dev tools
  const composeEnhancers =
    (__DEVELOPMENT__ && window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__) || compose

  // middlewares
  const middlewares = [thunkMiddleware]
  if (shouldEnableTracking() && getTracker()) {
    middlewares.push(createTrackerMiddleware())
  }
  if (flag('logs') && __DEVELOPMENT__) { // eslint-disable-line
    // must be the last middleware in chain https://git.io/vHQpt
    const loggerMiddleware = createLogger()
    middlewares.push(loggerMiddleware)
  }
  if (isSentryEnabled()) {
    middlewares.push(getSentryMiddleware(cozyClient))
  }

  const store = createStore(
    combineReducers({
      filters,
      cozy: cozyClient.reducer()
    }),

export const setupHistory = () => {
  const piwikEnabled = shouldEnableTracking() && getTracker()
  let history = hashHistory
  if (piwikEnabled) {
    const trackerInstance = getTracker()
    history = trackerInstance.connectToHistory(history)
    trackerInstance.track(history.getCurrentLocation()) // when using a hash history, the initial visit is not tracked by piwik react router
  }
  return history
}