Implement flash messages as react component

app/assets/javascripts/components/flash_messages.js.jsx

@@ -0,0 +1,65 @@
+var FlashMessages = React.createClass({
+  getInitialState: function() {
+    return {messages: this.props.messages};
+  },
+
+  messages: function (messageArray) {
+    this.replaceState({messages: messageArray});
+  },
+
+  render: function() {
+    return (
+      <div className='flash_messages_component'>
+        {this.state.messages.map(function(message, index) {
+          _level = message[0];
+          _text  = message[1];
+          return (
+            <div key={index} className={this._flash_class(_level)}>
+              {_text}
+            </div>
+          );
+        }.bind(this))}
+      </div>
+    )
+  },
+
+  _flash_class: function(level) {
+    var _result = 'alert alert-error';
+    if (level === 'notice') {
+      _result = 'alert alert-info';
+    } else if (level === 'success') {
+      _result = 'alert alert-success';
+    } else if (level === 'error') {
+      _result = 'alert alert-error';
+    } else if (level === 'alert') {
+      _result = 'alert alert-error';
+    }
+    return _result;
+  }
+
+});
+
+function handleFlashMessagesHeader(node, xhr) {
+  var _message_array = new Array();
+  var _raw_messages = xhr.getResponseHeader("X-FlashMessages")
+  if (_raw_messages) {
+    var _json_messages = JSON.parse(_raw_messages);
+    count = 0
+    for (var key in _json_messages) {
+      _message_array[count] = new Array();
+      _message_array[count][0] = key;
+      _message_array[count][1] = _json_messages[key];
+      count += 1;
+    }
+  }
+  node.messages(_message_array);
+}
+
+$(document).ready(function() {
+  var dummy = new Array();
+  var flashDiv = React.render(<FlashMessages messages={dummy} />, $('#flash_messages')[0]);
+
+  $(document).ajaxComplete(function(event, xhr, settings) {
+    handleFlashMessagesHeader(flashDiv, xhr);
+  });
+});

app/controllers/application_controller.rb

@@ -2,6 +2,7 @@ class ApplicationController < ActionController::Base
   # Prevent CSRF attacks by raising an exception.
   # For APIs, you may want to use :null_session instead.
   protect_from_forgery with: :exception
+  after_filter :flash_to_http_header
 
   if (Rails.env.development? || Rails.env.test?)
     # https://github.com/RailsApps/rails-devise-pundit/issues/10
@@ -14,6 +15,13 @@ class ApplicationController < ActionController::Base
 
     private
 
+    def flash_to_http_header
+      return unless request.xhr?
+      return if flash.empty?
+      response.headers['X-FlashMessages'] = flash.to_hash.to_json
+      flash.discard  # don't want the flash to appear when you reload page
+    end
+
     def user_not_authorized
       flash[:alert] = 'Access denied.'
       redirect_to (request.referrer || root_path)

app/controllers/games_controller.rb

@@ -63,7 +63,11 @@ class GamesController < ApplicationController
       #@play.player_cards << card
     #end
 
-    redirect_to(@game)
+    respond_to do |format|
+      format.html { redirect_to(@game) }
+      format.js {}
+    end
+    #redirect_to(@game)
 
     # TODO: add current_hand logic
     # @hand > @game.hand_to_beat

app/views/layouts/_flashmessages.html.haml

@@ -1,3 +1,7 @@
-- flash.each do |key, value|
-  %div{class: "alert alert-#{key}"}
-    = value
+.original_flash_message_code
+  - flash.each do |key, value|
+    %div{class: "alert alert-#{key}"}
+      = value
+
+.react_flash_messages
+  %div#flash_messages