content: import React, { Component } from 'react';
  import IconButton from 'material-ui/IconButton';
  import Dialog from 'material-ui/Dialog';
  import FlatButton from 'material-ui/FlatButton';
  import RaisedButton from 'material-ui/RaisedButton';
  import Divider from 'material-ui/Divider';
  import {List, ListItem} from 'material-ui/List';
  import Checkbox from 'material-ui/Checkbox';
  import FontIcon from 'material-ui/FontIcon';
  import NewPayment from './newPayment';
  
  const archivePaymentIcon = <FontIcon className="material-icons">delete</FontIcon>;
  const isArchivedIcon = <FontIcon className="material-icons">not_interested</FontIcon>;
  
  export default class Payment extends Component {
    static categories = {1: 'Groceries',
                         2: 'Coffee',
                         3: 'Liquor',
                         4: 'Breakfast',
                         5: 'Lunch',
                         6: 'Dinner',
                         7: 'Home',
                         8: 'Trip',
                         9: 'Other',
                         10: 'Bills',
                         11: 'Car'}
    state = {open: false}
  
    handleOpen = () => { this.setState({open: true}); };
    handleClose = () => { this.setState({open: false}); };
    formatDate = date => ` ${date.getDate()}.${date.getMonth()}`
  
    deletePayment = () => {
      Meteor.call("deletePayment", this.props.item._id, (err, res) => {
        if(err) { console.log(err) }
      });
    }
  
    archivePayment = () => {
      Meteor.call("archivePayment", this.props.item._id, (err, res) => {
        if(res){ console.log(res) }
        if(err){ console.log(err) }
      });
    }
  
    render() {
      return (
        <div>
          <Dialog
            title="Update your Payment"
            modal={false}
            open={this.state.open}
            onRequestClose={this.handleClose} >
  
            <div className='paymentFormCont'>
              <NewPayment
                mode="update"
                id={this.props.item._id}
                item={this.props.item}
                onClosePaymentForm={this.handleClose} />
            </div>
          </Dialog>
          <div style={this.props.item.archived ? {background: '#FF5964'} : {background: '#35A7FF'}}>
            <ListItem
              primaryText={`${this.props.item.amount}$  ${this.formatDate(this.props.item.createdAt)}`}
              secondaryText={`${Payment.categories[this.props.item.category]}: ${this.props.item.name.slice(0, 15)}`}
              onClick={this.handleOpen}
              rightIconButton={
                <IconButton tooltip={this.props.item.archived ? 'Delete' : 'Archive'} onClick={() => {
                  this.props.item.archived ? this.deletePayment() : this.archivePayment();
                }} >
                  {this.props.item.archived ? isArchivedIcon : archivePaymentIcon}
                </IconButton>} >
            </ListItem>
            <Divider />
          </div>
        </div>
      );
    }
  }
  