From 751cf946542f9e7b19728823d6b06547a53c172c Mon Sep 17 00:00:00 2001
From: "Jesse C. Fisher" <jessecfisher@gmail.com>
Date: Fri, 30 Oct 2015 04:35:38 -0700
Subject: [PATCH] Implement flash messages as react component

---
 .../components/flash_messages.js.jsx          | 65 +++++++++++++++++++
 app/controllers/application_controller.rb     |  8 +++
 app/controllers/games_controller.rb           |  6 +-
 app/views/games/play_hand.js.erb              |  0
 app/views/layouts/_flashmessages.html.haml    | 10 ++-
 5 files changed, 85 insertions(+), 4 deletions(-)
 create mode 100644 app/assets/javascripts/components/flash_messages.js.jsx
 create mode 100644 app/views/games/play_hand.js.erb

diff --git a/app/assets/javascripts/components/flash_messages.js.jsx b/app/assets/javascripts/components/flash_messages.js.jsx
new file mode 100644
index 00000000..dae9e41a
--- /dev/null
+++ b/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);
+  });
+});
diff --git a/app/controllers/application_controller.rb b/app/controllers/application_controller.rb
index ffcfe1ab..5813997f 100644
--- a/app/controllers/application_controller.rb
+++ b/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)
diff --git a/app/controllers/games_controller.rb b/app/controllers/games_controller.rb
index 81bc47cd..06116b0d 100644
--- a/app/controllers/games_controller.rb
+++ b/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
diff --git a/app/views/games/play_hand.js.erb b/app/views/games/play_hand.js.erb
new file mode 100644
index 00000000..e69de29b
diff --git a/app/views/layouts/_flashmessages.html.haml b/app/views/layouts/_flashmessages.html.haml
index 092dc473..d273f3fd 100644
--- a/app/views/layouts/_flashmessages.html.haml
+++ b/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