Creating 'RecordForm' component. Adding new records

fervisa · fervisa · commit f4708e19f8be · 2015-05-17T20:28:43.000-05:00
diff --git a/app/assets/javascripts/components/record_form.js.coffee b/app/assets/javascripts/components/record_form.js.coffee
@@ -0,0 +1,56 @@
+@RecordForm = React.createClass
+  getInitialState: ->
+    title: ''
+    date: ''
+    amount: ''
+
+  valid: ->
+    @state.title && @state.date && @state.amount
+
+  handleChange: (e) ->
+    name = e.target.name
+    @setState "#{ name }": e.target.value
+
+  handleSubmit: (e) ->
+    e.preventDefault()
+    $.post '', { record: @state }, (data) =>
+      @props.handleNewRecord data
+      @setState @getInitialState()
+    , 'JSON'
+
+  render: ->
+    React.DOM.form
+      className: 'form-inline'
+      onSubmit: @handleSubmit
+      React.DOM.div
+        className: 'form-group'
+        React.DOM.input
+          type: 'text'
+          className: 'form-control'
+          placeholder: 'Date'
+          name: 'date'
+          value: @state.date
+          onChange: @handleChange
+      React.DOM.div
+        className: 'form-group'
+        React.DOM.input
+          type: 'text'
+          className: 'form-control'
+          placeholder: 'Title'
+          name: 'title'
+          value: @state.title
+          onChange: @handleChange
+      React.DOM.div
+        className: 'form-group'
+        React.DOM.input
+          type: 'number'
+          className: 'form-control'
+          placeholder: 'Amount'
+          name: 'amount'
+          value: @state.amount
+          onChange: @handleChange
+      React.DOM.button
+        type: 'submit'
+        className: 'btn btn-primary'
+        disabled: !@valid()
+        'Create record'
diff --git a/app/assets/javascripts/components/records.js.coffee b/app/assets/javascripts/components/records.js.coffee
@@ -1,14 +1,23 @@
 @Records = React.createClass
   getInitialState: ->
     records: @props.data
+
   getDefaultProps: ->
     records: []
+
+  addRecord: (record) ->
+    records = @state.records.slice()
+    records.push record
+    @setState records: records
+
   render: ->
     React.DOM.div
       className: 'records'
       React.DOM.h2
         className: 'title'
         'Records'
+      React.createElement RecordForm, handleNewRecord: @addRecord
+      React.DOM.hr null
       React.DOM.table
         className: 'table table-bordered'
         React.DOM.thead null,
diff --git a/app/controllers/records_controller.rb b/app/controllers/records_controller.rb
@@ -2,4 +2,20 @@ class RecordsController < ApplicationController
   def index
     @records = Record.all
   end
+
+  def create
+    @record = Record.new(record_params)
+
+    if @record.save
+      render json: @record
+    else
+      render json: @record.errors, status: :unprocessable_entity
+    end
+  end
+
+  private
+
+    def record_params
+      params.require(:record).permit(:title, :amount, :date)
+    end
 end
