Creating 'Record' and 'Records' components. Displaying records

fervisa · fervisa · commit bf1d80cf3d23 · 2015-05-16T13:19:12.000-05:00
diff --git a/app/assets/javascripts/components/record.js.coffee b/app/assets/javascripts/components/record.js.coffee
@@ -0,0 +1,6 @@
+@Record = React.createClass
+  render: ->
+    React.DOM.tr null,
+      React.DOM.td null, @props.record.date
+      React.DOM.td null, @props.record.title
+      React.DOM.td null, amountFormat(@props.record.amount)
diff --git a/app/assets/javascripts/components/records.js.coffee b/app/assets/javascripts/components/records.js.coffee
@@ -0,0 +1,21 @@
+@Records = React.createClass
+  getInitialState: ->
+    records: @props.data
+  getDefaultProps: ->
+    records: []
+  render: ->
+    React.DOM.div
+      className: 'records'
+      React.DOM.h2
+        className: 'title'
+        'Records'
+      React.DOM.table
+        className: 'table table-bordered'
+        React.DOM.thead null,
+          React.DOM.tr null,
+            React.DOM.th null, 'Date'
+            React.DOM.th null, 'Title'
+            React.DOM.th null, 'Amount'
+        React.DOM.tbody null,
+          for record in @state.records
+            React.createElement Record, key: record.id, record: record
diff --git a/app/assets/javascripts/utils.js.coffee b/app/assets/javascripts/utils.js.coffee
@@ -0,0 +1,2 @@
+@amountFormat = (amount) ->
+  '$ ' + Number(amount).toLocaleString()
diff --git a/app/controllers/records_controller.rb b/app/controllers/records_controller.rb
@@ -1,2 +1,5 @@
 class RecordsController < ApplicationController
+  def index
+    @records = Record.all
+  end
 end
diff --git a/app/views/records/index.html.erb b/app/views/records/index.html.erb
@@ -0,0 +1 @@
+<%= react_component 'Records', { data: @records } %>

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,2 @@`
	`1`	`+@amountFormat = (amount) ->`
	`2`	`+ '$ ' + Number(amount).toLocaleString()`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1 @@`
	`1`	`+<%= react_component 'Records', { data: @records } %>`