Permalink
Browse files

Creating 'AmountBox' component. Adding indicator boxes

  • Loading branch information...
fervisa committed May 18, 2015
1 parent f4708e1 commit 8d6f0a4fb62f2a9abd5d34d502461388863302cb
@@ -0,0 +1,12 @@
@AmountBox = React.createClass
render: ->
React.DOM.div
className: 'col-md-4'
React.DOM.div
className: "panel panel-#{ @props.type }"
React.DOM.div
className: 'panel-heading'
@props.text
React.DOM.div
className: 'panel-body'
amountFormat(@props.amount)
@@ -5,6 +5,21 @@
getDefaultProps: ->
records: []

credits: ->
credits = @state.records.filter (val) -> val.amount >= 0

This comment has been minimized.

@a0x

a0x Nov 18, 2015

In this line of code, as well as follows and the next section, @state.records is not Array but Object.
So in my browser, something went wrong here, which means filter() and slice() function cannot run.

credits.reduce ((prev, curr) ->
prev + parseFloat(curr.amount)
), 0

debits: ->
debits = @state.records.filter (val) -> val.amount < 0
debits.reduce ((prev, curr) ->
prev + parseFloat(curr.amount)
), 0

balance: ->
@debits() + @credits()

addRecord: (record) ->
records = @state.records.slice()
records.push record
@@ -16,6 +31,11 @@
React.DOM.h2
className: 'title'
'Records'
React.DOM.div
className: 'row'
React.createElement AmountBox, type: 'success', amount: @credits(), text: 'Credit'
React.createElement AmountBox, type: 'danger', amount: @debits(), text: 'Debit'
React.createElement AmountBox, type: 'info', amount: @balance(), text: 'Balance'
React.createElement RecordForm, handleNewRecord: @addRecord
React.DOM.hr null
React.DOM.table

3 comments on commit 8d6f0a4

@jwgoh

This comment has been minimized.

Copy link

jwgoh replied Aug 24, 2015

@fervisa Are line 12 and line 18 correct?
According to the documentation here, the syntax for reduce is
arr.reduce(callback[, initialValue])
Shouldn't it be , 0)?
Thanks for the tutorial btw, pretty easy to follow 👍

@philmill

This comment has been minimized.

Copy link

philmill replied Oct 28, 2015

@jwgoh, those lines are correct. The author is wrapping the callback in parenthesis which aren't necessary but reads better. In Coffeescript, method parens are optional, so the alternative would be

credits: ->
    credits = @state.records.filter (val) -> val.amount >= 0
    credits.reduce (prev, curr) ->
        prev + parseFloat(curr.amount)
    , 0
@jwgoh

This comment has been minimized.

Copy link

jwgoh replied Oct 28, 2015

@philmill I see. Thank you!

Please sign in to comment.