Skip to content

Commit

Permalink
Creating 'AmountBox' component. Adding indicator boxes
Browse files Browse the repository at this point in the history
  • Loading branch information
@fervisa
fervisa committed May 18, 2015
1 parent f4708e1 commit 8d6f0a4
Show file tree
Hide file tree
Showing 2 changed files with 32 additions and 0 deletions.
12 changes: 12 additions & 0 deletions app/assets/javascripts/components/amount_box.js.coffee
View file
@@ -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)
20 changes: 20 additions & 0 deletions app/assets/javascripts/components/records.js.coffee
View file
Expand Up @@ -5,6 +5,21 @@
getDefaultProps: ->
records: []

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

This comment has been minimized.

Sign in to view

Copy link
@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
Expand All @@ -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
Expand Down

3 comments on commit 8d6f0a4

@jwgoh
Copy link

@jwgoh jwgoh commented on 8d6f0a4 Aug 24, 2015

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@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
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@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
Copy link

@jwgoh jwgoh commented on 8d6f0a4 Oct 28, 2015

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@philmill I see. Thank you!

Please sign in to comment.