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

fervisa · May 16, 2015 · bf1d80c · bf1d80c
1 parent 9b32481
commit bf1d80c
Show file tree

Hide file tree

Showing 5 changed files with 33 additions and 0 deletions.
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 } %>