From ac238a77e465f5b13810dff4b3c5a56360c8677a Mon Sep 17 00:00:00 2001 From: Richa Bhardwaj Date: Fri, 30 Dec 2016 18:11:47 +0530 Subject: [PATCH 01/19] WIP : actioncable with React --- Gemfile | 1 + Gemfile.lock | 2 ++ app/channels/application_cable/channel.rb | 4 +++ app/channels/application_cable/connection.rb | 4 +++ app/channels/comments_channel.rb | 5 ++++ app/controllers/comments_controller.rb | 1 + app/jobs/application_job.rb | 2 ++ app/jobs/comment_relay_job.rb | 5 ++++ app/models/comment.rb | 7 +++-- .../components/CommentBox/CommentBox.jsx | 29 ++++++++++++++++++- client/app/libs/requestsManager.js | 2 +- client/npm-shrinkwrap.json | 5 ++++ client/package.json | 1 + config/environments/development.rb | 1 + config/initializers/cors.rb | 18 ++++++------ config/routes.rb | 1 + package.json | 4 ++- 17 files changed, 78 insertions(+), 14 deletions(-) create mode 100644 app/channels/application_cable/channel.rb create mode 100644 app/channels/application_cable/connection.rb create mode 100644 app/channels/comments_channel.rb create mode 100644 app/jobs/application_job.rb create mode 100644 app/jobs/comment_relay_job.rb diff --git a/Gemfile b/Gemfile index f5a39a4d9..34dd606cc 100644 --- a/Gemfile +++ b/Gemfile @@ -27,6 +27,7 @@ gem "coffee-rails" # Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder gem "jbuilder" +gem 'rack-cors', require: 'rack/cors' # bundle exec rake doc:rails generates the API under doc/api. gem "sdoc", group: :doc diff --git a/Gemfile.lock b/Gemfile.lock index 4839f1b35..1889394bc 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -168,6 +168,7 @@ GEM public_suffix (2.0.4) puma (3.6.2) rack (2.0.1) + rack-cors (0.4.0) rack-test (0.6.3) rack (>= 1.0) rails (5.0.0.1) @@ -326,6 +327,7 @@ DEPENDENCIES pry-rescue pry-stack_explorer puma + rack-cors rails rails-html-sanitizer rainbow diff --git a/app/channels/application_cable/channel.rb b/app/channels/application_cable/channel.rb new file mode 100644 index 000000000..c574928ee --- /dev/null +++ b/app/channels/application_cable/channel.rb @@ -0,0 +1,4 @@ +module ApplicationCable + class Channel < ActionCable::Channel::Base + end +end diff --git a/app/channels/application_cable/connection.rb b/app/channels/application_cable/connection.rb new file mode 100644 index 000000000..0ff5442f4 --- /dev/null +++ b/app/channels/application_cable/connection.rb @@ -0,0 +1,4 @@ +module ApplicationCable + class Connection < ActionCable::Connection::Base + end +end diff --git a/app/channels/comments_channel.rb b/app/channels/comments_channel.rb new file mode 100644 index 000000000..2198c4524 --- /dev/null +++ b/app/channels/comments_channel.rb @@ -0,0 +1,5 @@ +class CommentsChannel < ApplicationCable::Channel + def subscribed + stream_from "CommentsChannel" + end +end diff --git a/app/controllers/comments_controller.rb b/app/controllers/comments_controller.rb index 440e2096c..9785fef14 100644 --- a/app/controllers/comments_controller.rb +++ b/app/controllers/comments_controller.rb @@ -1,5 +1,6 @@ class CommentsController < ApplicationController before_action :set_comment, only: [:show, :edit, :update, :destroy] + skip_before_filter :verify_authenticity_token # GET /comments # GET /comments.json diff --git a/app/jobs/application_job.rb b/app/jobs/application_job.rb new file mode 100644 index 000000000..a009ace51 --- /dev/null +++ b/app/jobs/application_job.rb @@ -0,0 +1,2 @@ +class ApplicationJob < ActiveJob::Base +end diff --git a/app/jobs/comment_relay_job.rb b/app/jobs/comment_relay_job.rb new file mode 100644 index 000000000..781b5c51d --- /dev/null +++ b/app/jobs/comment_relay_job.rb @@ -0,0 +1,5 @@ +class CommentRelayJob < ApplicationJob + def perform(comment) + ActionCable.server.broadcast "CommentsChannel", comment: comment.slice(:id, :author, :text) + end +end diff --git a/app/models/comment.rb b/app/models/comment.rb index c86b86c6b..70a235bcc 100644 --- a/app/models/comment.rb +++ b/app/models/comment.rb @@ -1,4 +1,7 @@ class Comment < ActiveRecord::Base - validates_presence_of :author - validates_presence_of :text + + validates :author, :text, presence: true + + after_commit { CommentRelayJob.perform_later(self) } + end diff --git a/client/app/bundles/comments/components/CommentBox/CommentBox.jsx b/client/app/bundles/comments/components/CommentBox/CommentBox.jsx index 9ffa6a64a..fc10cf804 100644 --- a/client/app/bundles/comments/components/CommentBox/CommentBox.jsx +++ b/client/app/bundles/comments/components/CommentBox/CommentBox.jsx @@ -4,6 +4,9 @@ import React, { PropTypes } from 'react'; import CommentForm from './CommentForm/CommentForm'; import CommentList, { CommentPropTypes } from './CommentList/CommentList'; import css from './CommentBox.scss'; +import { ActionCable } from 'actioncable-js'; + +var App = {}; export default class CommentBox extends BaseComponent { static propTypes = { @@ -19,10 +22,32 @@ export default class CommentBox extends BaseComponent { }).isRequired, }; + createConsumer() { + App.cable = ActionCable.createConsumer("ws://localhost:3000/cable"); + } + + createSubscription() { + App.commentsChannel = App.cable.subscriptions.create({channel: "CommentsChannel"}, { + // ActionCable callbacks + connected: function() { + console.log("connected", this.identifier) + }, + disconnected: function() { + console.log("disconnected", this.identifier) + }, + received: function(data) { + console.log("received") + console.log(data) + } + }); + } + componentDidMount() { const { fetchComments } = this.props.actions; fetchComments(); - this.intervalId = setInterval(fetchComments, this.props.pollInterval); + this.createConsumer(); + this.createSubscription(); + //this.intervalId = setInterval(fetchComments, this.props.pollInterval); } componentWillUnmount() { @@ -37,6 +62,7 @@ export default class CommentBox extends BaseComponent { leave: css.elementLeave, leaveActive: css.elementLeaveActive, }; + const app = App; return (
@@ -53,6 +79,7 @@ export default class CommentBox extends BaseComponent { error={data.get('submitCommentError')} actions={actions} cssTransitionGroupClassNames={cssTransitionGroupClassNames} + app={app} /> =4.7.0 <5.0.0", diff --git a/client/package.json b/client/package.json index d197a1160..384ef87eb 100644 --- a/client/package.json +++ b/client/package.json @@ -39,6 +39,7 @@ "lint": "eslint --ext .js,.jsx ." }, "dependencies": { + "actioncable-js": "^5.0.0-rc2", "autoprefixer": "^6.5.3", "axios": "^0.15.2", "babel": "^6.5.2", diff --git a/config/environments/development.rb b/config/environments/development.rb index 09d7964f4..51e1d9670 100644 --- a/config/environments/development.rb +++ b/config/environments/development.rb @@ -59,4 +59,5 @@ # Use an evented file watcher to asynchronously detect changes in source code, # routes, locales, etc. This feature depends on the listen gem. config.file_watcher = ActiveSupport::EventedFileUpdateChecker + config.action_cable.allowed_request_origins = ['http://localhost:4000'] end diff --git a/config/initializers/cors.rb b/config/initializers/cors.rb index 3b1c1b5ed..4961b9c18 100644 --- a/config/initializers/cors.rb +++ b/config/initializers/cors.rb @@ -5,12 +5,12 @@ # Read more: https://github.com/cyu/rack-cors -# Rails.application.config.middleware.insert_before 0, Rack::Cors do -# allow do -# origins 'example.com' -# -# resource '*', -# headers: :any, -# methods: [:get, :post, :put, :patch, :delete, :options, :head] -# end -# end +Rails.application.config.middleware.insert_before 0, Rack::Cors do + allow do + origins 'localhost:4000' + + resource '*', + headers: :any, + methods: [:get, :post, :put, :patch, :delete, :options, :head] + end +end diff --git a/config/routes.rb b/config/routes.rb index 1ceda4475..d6cf0e376 100644 --- a/config/routes.rb +++ b/config/routes.rb @@ -13,4 +13,5 @@ get "react-router(/*all)", to: "pages#index" resources :comments + mount ActionCable.server => '/cable' end diff --git a/package.json b/package.json index 262f0131d..2e6aa6690 100644 --- a/package.json +++ b/package.json @@ -39,7 +39,9 @@ "url": "https://github.com/shakacode/react-webpack-rails-tutorial/issues" }, "homepage": "https://github.com/shakacode/react-webpack-rails-tutorial", - "dependencies": {}, + "dependencies": { + "action-cable": "0.0.9" + }, "devDependencies": {}, "cacheDirectories": [ "node_modules", From 2b24c5d1c250a97364a4b01bbb8bd02cf13856a4 Mon Sep 17 00:00:00 2001 From: Richa Bhardwaj Date: Tue, 3 Jan 2017 18:52:34 +0530 Subject: [PATCH 02/19] WIP : cable on redis --- Gemfile | 1 + Gemfile.lock | 2 ++ app/channels/comments_channel.rb | 10 ++++++++++ app/jobs/comment_relay_job.rb | 2 +- app/models/comment.rb | 2 -- .../actions/commentsActionCreators.js | 12 +++++++++++ .../components/CommentBox/CommentBox.jsx | 20 +++++-------------- .../CommentBox/CommentForm/CommentForm.jsx | 12 ++++++++--- client/app/libs/requestsManager.js | 2 +- client/package.json | 1 + config/cable.yml | 3 ++- 11 files changed, 44 insertions(+), 23 deletions(-) diff --git a/Gemfile b/Gemfile index 34dd606cc..be3a553d0 100644 --- a/Gemfile +++ b/Gemfile @@ -28,6 +28,7 @@ gem "coffee-rails" # Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder gem "jbuilder" gem 'rack-cors', require: 'rack/cors' +gem 'redis' # bundle exec rake doc:rails generates the API under doc/api. gem "sdoc", group: :doc diff --git a/Gemfile.lock b/Gemfile.lock index 1889394bc..5776ab27e 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -207,6 +207,7 @@ GEM foreman rails (>= 3.2) rainbow (~> 2.1) + redis (3.3.0) rspec-core (3.5.4) rspec-support (~> 3.5.0) rspec-expectations (3.5.0) @@ -332,6 +333,7 @@ DEPENDENCIES rails-html-sanitizer rainbow react_on_rails (~> 6.1) + redis rspec-rails (~> 3) rspec-retry rubocop diff --git a/app/channels/comments_channel.rb b/app/channels/comments_channel.rb index 2198c4524..d25ef5436 100644 --- a/app/channels/comments_channel.rb +++ b/app/channels/comments_channel.rb @@ -2,4 +2,14 @@ class CommentsChannel < ApplicationCable::Channel def subscribed stream_from "CommentsChannel" end + + def send(comment) + puts "here" + Comment.create!(comment) + end + + def receive(comment) + ActionCable.server.broadcast "CommentsChannel", comment.slice("author", "text") + end + end diff --git a/app/jobs/comment_relay_job.rb b/app/jobs/comment_relay_job.rb index 781b5c51d..75580ee5f 100644 --- a/app/jobs/comment_relay_job.rb +++ b/app/jobs/comment_relay_job.rb @@ -1,5 +1,5 @@ class CommentRelayJob < ApplicationJob def perform(comment) - ActionCable.server.broadcast "CommentsChannel", comment: comment.slice(:id, :author, :text) + ActionCable.server.broadcast "comments", comment.slice(:id, :author, :text) end end diff --git a/app/models/comment.rb b/app/models/comment.rb index 70a235bcc..c4c199cbb 100644 --- a/app/models/comment.rb +++ b/app/models/comment.rb @@ -2,6 +2,4 @@ class Comment < ActiveRecord::Base validates :author, :text, presence: true - after_commit { CommentRelayJob.perform_later(self) } - end diff --git a/client/app/bundles/comments/actions/commentsActionCreators.js b/client/app/bundles/comments/actions/commentsActionCreators.js index ba87b1b21..7581b0988 100644 --- a/client/app/bundles/comments/actions/commentsActionCreators.js +++ b/client/app/bundles/comments/actions/commentsActionCreators.js @@ -64,3 +64,15 @@ export function submitComment(comment) { ); }; } + +export function sendComment(comment) { + return (dispatch) => { + dispatch(setIsSaving()); + return ( + requestsManager + .submitEntity({ comment }) + .then(res => dispatch(submitCommentSuccess(res.data))) + .catch(error => dispatch(submitCommentFailure(error))) + ); + }; +} diff --git a/client/app/bundles/comments/components/CommentBox/CommentBox.jsx b/client/app/bundles/comments/components/CommentBox/CommentBox.jsx index fc10cf804..b0140b30b 100644 --- a/client/app/bundles/comments/components/CommentBox/CommentBox.jsx +++ b/client/app/bundles/comments/components/CommentBox/CommentBox.jsx @@ -4,9 +4,10 @@ import React, { PropTypes } from 'react'; import CommentForm from './CommentForm/CommentForm'; import CommentList, { CommentPropTypes } from './CommentList/CommentList'; import css from './CommentBox.scss'; -import { ActionCable } from 'actioncable-js'; +import ActionCable from 'actioncable'; -var App = {}; +var cable = ActionCable.createConsumer("ws://localhost:3000/cable"); +var commentChannel; export default class CommentBox extends BaseComponent { static propTypes = { @@ -22,22 +23,13 @@ export default class CommentBox extends BaseComponent { }).isRequired, }; - createConsumer() { - App.cable = ActionCable.createConsumer("ws://localhost:3000/cable"); - } - createSubscription() { - App.commentsChannel = App.cable.subscriptions.create({channel: "CommentsChannel"}, { - // ActionCable callbacks + cable.subscriptions.create("CommentsChannel", { connected: function() { console.log("connected", this.identifier) }, disconnected: function() { console.log("disconnected", this.identifier) - }, - received: function(data) { - console.log("received") - console.log(data) } }); } @@ -45,7 +37,6 @@ export default class CommentBox extends BaseComponent { componentDidMount() { const { fetchComments } = this.props.actions; fetchComments(); - this.createConsumer(); this.createSubscription(); //this.intervalId = setInterval(fetchComments, this.props.pollInterval); } @@ -62,7 +53,6 @@ export default class CommentBox extends BaseComponent { leave: css.elementLeave, leaveActive: css.elementLeaveActive, }; - const app = App; return (
@@ -79,7 +69,7 @@ export default class CommentBox extends BaseComponent { error={data.get('submitCommentError')} actions={actions} cssTransitionGroupClassNames={cssTransitionGroupClassNames} - app={app} + cable={cable} /> Date: Thu, 5 Jan 2017 16:08:33 +0530 Subject: [PATCH 03/19] ActionCable updates comments in real time --- app/channels/comments_channel.rb | 12 +--------- app/controllers/comments_controller.rb | 2 +- app/jobs/comment_relay_job.rb | 4 +++- app/models/comment.rb | 2 ++ app/views/layouts/application.html.erb | 1 - .../actions/commentsActionCreators.js | 10 +++++++- .../components/CommentBox/CommentBox.jsx | 23 ++++++++----------- .../CommentBox/CommentForm/CommentForm.jsx | 11 +++------ .../comments/constants/commentsConstants.js | 1 + .../comments/reducers/commentsReducer.js | 11 +++++++++ config/environments/development.rb | 4 +++- config/initializers/cors.rb | 18 +++++++-------- 12 files changed, 53 insertions(+), 46 deletions(-) diff --git a/app/channels/comments_channel.rb b/app/channels/comments_channel.rb index d25ef5436..cf1a1c535 100644 --- a/app/channels/comments_channel.rb +++ b/app/channels/comments_channel.rb @@ -1,15 +1,5 @@ class CommentsChannel < ApplicationCable::Channel def subscribed - stream_from "CommentsChannel" + stream_from "comments" end - - def send(comment) - puts "here" - Comment.create!(comment) - end - - def receive(comment) - ActionCable.server.broadcast "CommentsChannel", comment.slice("author", "text") - end - end diff --git a/app/controllers/comments_controller.rb b/app/controllers/comments_controller.rb index 9785fef14..9d80307f4 100644 --- a/app/controllers/comments_controller.rb +++ b/app/controllers/comments_controller.rb @@ -1,6 +1,6 @@ class CommentsController < ApplicationController before_action :set_comment, only: [:show, :edit, :update, :destroy] - skip_before_filter :verify_authenticity_token + skip_before_action :verify_authenticity_token # GET /comments # GET /comments.json diff --git a/app/jobs/comment_relay_job.rb b/app/jobs/comment_relay_job.rb index 75580ee5f..2a796e8ce 100644 --- a/app/jobs/comment_relay_job.rb +++ b/app/jobs/comment_relay_job.rb @@ -1,5 +1,7 @@ class CommentRelayJob < ApplicationJob + def perform(comment) - ActionCable.server.broadcast "comments", comment.slice(:id, :author, :text) + ActionCable.server.broadcast "comments", comment.slice(:id, :author, :text) unless comment.destroyed? end + end diff --git a/app/models/comment.rb b/app/models/comment.rb index c4c199cbb..ecf445a76 100644 --- a/app/models/comment.rb +++ b/app/models/comment.rb @@ -2,4 +2,6 @@ class Comment < ActiveRecord::Base validates :author, :text, presence: true + after_commit { CommentRelayJob.perform_now(self) } + end diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb index 841075b77..ef1b805db 100644 --- a/app/views/layouts/application.html.erb +++ b/app/views/layouts/application.html.erb @@ -22,7 +22,6 @@ <%= react_component "NavigationBarApp" %> -
<%= yield %>
diff --git a/client/app/bundles/comments/actions/commentsActionCreators.js b/client/app/bundles/comments/actions/commentsActionCreators.js index 7581b0988..629d21b5b 100644 --- a/client/app/bundles/comments/actions/commentsActionCreators.js +++ b/client/app/bundles/comments/actions/commentsActionCreators.js @@ -27,6 +27,14 @@ export function fetchCommentsFailure(error) { }; } +//RB-To-Do : There could be a better way to handle response in submitCommentSuccess instead of defining submitCommentStatusOk +export function submitCommentStatusOk(comment) { + return { + type: actionTypes.SUBMIT_COMMENT_STATUS_OK, + comment, + }; +} + export function submitCommentSuccess(comment) { return { type: actionTypes.SUBMIT_COMMENT_SUCCESS, @@ -59,7 +67,7 @@ export function submitComment(comment) { return ( requestsManager .submitEntity({ comment }) - .then(res => dispatch(submitCommentSuccess(res.data))) + .then(res => dispatch(submitCommentStatusOk(res.data))) .catch(error => dispatch(submitCommentFailure(error))) ); }; diff --git a/client/app/bundles/comments/components/CommentBox/CommentBox.jsx b/client/app/bundles/comments/components/CommentBox/CommentBox.jsx index b0140b30b..6d799336e 100644 --- a/client/app/bundles/comments/components/CommentBox/CommentBox.jsx +++ b/client/app/bundles/comments/components/CommentBox/CommentBox.jsx @@ -4,11 +4,9 @@ import React, { PropTypes } from 'react'; import CommentForm from './CommentForm/CommentForm'; import CommentList, { CommentPropTypes } from './CommentList/CommentList'; import css from './CommentBox.scss'; +import Immutable from 'immutable'; import ActionCable from 'actioncable'; -var cable = ActionCable.createConsumer("ws://localhost:3000/cable"); -var commentChannel; - export default class CommentBox extends BaseComponent { static propTypes = { pollInterval: PropTypes.number.isRequired, @@ -23,13 +21,12 @@ export default class CommentBox extends BaseComponent { }).isRequired, }; - createSubscription() { - cable.subscriptions.create("CommentsChannel", { - connected: function() { - console.log("connected", this.identifier) - }, - disconnected: function() { - console.log("disconnected", this.identifier) + subscribeChannel() { + const { submitCommentSuccess } = this.props.actions; + const cable = ActionCable.createConsumer("ws://localhost:5000/cable"); + cable.subscriptions.create({channel: "CommentsChannel"}, { + received: (comment) => { + submitCommentSuccess(Immutable.fromJS(comment)); } }); } @@ -37,12 +34,13 @@ export default class CommentBox extends BaseComponent { componentDidMount() { const { fetchComments } = this.props.actions; fetchComments(); - this.createSubscription(); + this.subscribeChannel(); //this.intervalId = setInterval(fetchComments, this.props.pollInterval); } componentWillUnmount() { - clearInterval(this.intervalId); + App.cable.subscriptions.remove({ channel: "CommentsChannel" }); + //clearInterval(this.intervalId); } render() { @@ -69,7 +67,6 @@ export default class CommentBox extends BaseComponent { error={data.get('submitCommentError')} actions={actions} cssTransitionGroupClassNames={cssTransitionGroupClassNames} - cable={cable} /> ( + state + .merge({ + submitCommentError: null, + isSaving: false, + }) + )); + } + case actionTypes.SUBMIT_COMMENT_SUCCESS: { return $$state.withMutations(state => ( state diff --git a/config/environments/development.rb b/config/environments/development.rb index 51e1d9670..b5af8af24 100644 --- a/config/environments/development.rb +++ b/config/environments/development.rb @@ -59,5 +59,7 @@ # Use an evented file watcher to asynchronously detect changes in source code, # routes, locales, etc. This feature depends on the listen gem. config.file_watcher = ActiveSupport::EventedFileUpdateChecker - config.action_cable.allowed_request_origins = ['http://localhost:4000'] + + #RB-To-Do : Remove hardcoded request_origin + config.action_cable.allowed_request_origins = ["http://localhost:5000"] end diff --git a/config/initializers/cors.rb b/config/initializers/cors.rb index 4961b9c18..260652ff7 100644 --- a/config/initializers/cors.rb +++ b/config/initializers/cors.rb @@ -5,12 +5,12 @@ # Read more: https://github.com/cyu/rack-cors -Rails.application.config.middleware.insert_before 0, Rack::Cors do - allow do - origins 'localhost:4000' - - resource '*', - headers: :any, - methods: [:get, :post, :put, :patch, :delete, :options, :head] - end -end +# Rails.application.config.middleware.insert_before 0, Rack::Cors do +# allow do +# origins 'localhost:5000' +# +# resource '*', +# headers: :any, +# methods: [:get, :post, :put, :patch, :delete, :options, :head] +# end +# end From 35f05a3073ff5555b51a6ff62ac28bf0044b23a8 Mon Sep 17 00:00:00 2001 From: Richa Bhardwaj Date: Thu, 5 Jan 2017 16:27:19 +0530 Subject: [PATCH 04/19] code cleanup --- Gemfile | 1 - Gemfile.lock | 2 -- app/controllers/comments_controller.rb | 1 - .../comments/actions/commentsActionCreators.js | 12 ------------ .../comments/components/CommentBox/CommentBox.jsx | 6 ++++++ .../CommentBox/CommentForm/CommentForm.jsx | 1 - client/app/libs/requestsManager.js | 2 +- client/package.json | 1 - config/initializers/cors.rb | 2 +- 9 files changed, 8 insertions(+), 20 deletions(-) diff --git a/Gemfile b/Gemfile index be3a553d0..338c45e1d 100644 --- a/Gemfile +++ b/Gemfile @@ -27,7 +27,6 @@ gem "coffee-rails" # Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder gem "jbuilder" -gem 'rack-cors', require: 'rack/cors' gem 'redis' # bundle exec rake doc:rails generates the API under doc/api. diff --git a/Gemfile.lock b/Gemfile.lock index 5776ab27e..233be69f4 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -168,7 +168,6 @@ GEM public_suffix (2.0.4) puma (3.6.2) rack (2.0.1) - rack-cors (0.4.0) rack-test (0.6.3) rack (>= 1.0) rails (5.0.0.1) @@ -328,7 +327,6 @@ DEPENDENCIES pry-rescue pry-stack_explorer puma - rack-cors rails rails-html-sanitizer rainbow diff --git a/app/controllers/comments_controller.rb b/app/controllers/comments_controller.rb index 9d80307f4..440e2096c 100644 --- a/app/controllers/comments_controller.rb +++ b/app/controllers/comments_controller.rb @@ -1,6 +1,5 @@ class CommentsController < ApplicationController before_action :set_comment, only: [:show, :edit, :update, :destroy] - skip_before_action :verify_authenticity_token # GET /comments # GET /comments.json diff --git a/client/app/bundles/comments/actions/commentsActionCreators.js b/client/app/bundles/comments/actions/commentsActionCreators.js index 629d21b5b..f851ab599 100644 --- a/client/app/bundles/comments/actions/commentsActionCreators.js +++ b/client/app/bundles/comments/actions/commentsActionCreators.js @@ -72,15 +72,3 @@ export function submitComment(comment) { ); }; } - -export function sendComment(comment) { - return (dispatch) => { - dispatch(setIsSaving()); - return ( - requestsManager - .submitEntity({ comment }) - .then(res => dispatch(submitCommentSuccess(res.data))) - .catch(error => dispatch(submitCommentFailure(error))) - ); - }; -} diff --git a/client/app/bundles/comments/components/CommentBox/CommentBox.jsx b/client/app/bundles/comments/components/CommentBox/CommentBox.jsx index 6d799336e..293c2313a 100644 --- a/client/app/bundles/comments/components/CommentBox/CommentBox.jsx +++ b/client/app/bundles/comments/components/CommentBox/CommentBox.jsx @@ -25,6 +25,12 @@ export default class CommentBox extends BaseComponent { const { submitCommentSuccess } = this.props.actions; const cable = ActionCable.createConsumer("ws://localhost:5000/cable"); cable.subscriptions.create({channel: "CommentsChannel"}, { + connected: () => { + console.log("connected") + }, + disconnected: () => { + console.log("disconnected") + }, received: (comment) => { submitCommentSuccess(Immutable.fromJS(comment)); } diff --git a/client/app/bundles/comments/components/CommentBox/CommentForm/CommentForm.jsx b/client/app/bundles/comments/components/CommentBox/CommentForm/CommentForm.jsx index 2c6fc2f1b..df2155c00 100644 --- a/client/app/bundles/comments/components/CommentBox/CommentForm/CommentForm.jsx +++ b/client/app/bundles/comments/components/CommentBox/CommentForm/CommentForm.jsx @@ -102,7 +102,6 @@ export default class CommentForm extends BaseComponent { if (this.props.error) return; const comment = { author: this.state.comment.author, text: '' }; - this.setState({ comment }); let ref; diff --git a/client/app/libs/requestsManager.js b/client/app/libs/requestsManager.js index f04daabbd..384078a8c 100644 --- a/client/app/libs/requestsManager.js +++ b/client/app/libs/requestsManager.js @@ -1,7 +1,7 @@ import request from 'axios'; import ReactOnRails from 'react-on-rails'; -const API_URL = '/comments.json'; +const API_URL = 'comments.json'; export default { diff --git a/client/package.json b/client/package.json index 156125bd9..253b253c0 100644 --- a/client/package.json +++ b/client/package.json @@ -40,7 +40,6 @@ }, "dependencies": { "actioncable": "^5.0.1", - "actioncable-js": "^5.0.0-rc2", "autoprefixer": "^6.5.3", "axios": "^0.15.2", "babel": "^6.5.2", diff --git a/config/initializers/cors.rb b/config/initializers/cors.rb index 260652ff7..3b1c1b5ed 100644 --- a/config/initializers/cors.rb +++ b/config/initializers/cors.rb @@ -7,7 +7,7 @@ # Rails.application.config.middleware.insert_before 0, Rack::Cors do # allow do -# origins 'localhost:5000' +# origins 'example.com' # # resource '*', # headers: :any, From 00ef595689901ae9759041ccb38e45f391e67de3 Mon Sep 17 00:00:00 2001 From: Richa Bhardwaj Date: Fri, 6 Jan 2017 16:32:49 +0530 Subject: [PATCH 05/19] replaced SUBMIT_COMMENT_STATUS_OK with MESSAGE_RECEIVED --- app/jobs/comment_relay_job.rb | 2 +- app/models/comment.rb | 2 +- .../comments/actions/commentsActionCreators.js | 7 +++---- .../comments/components/CommentBox/CommentBox.jsx | 6 +++--- .../bundles/comments/constants/commentsConstants.js | 2 +- .../bundles/comments/reducers/commentsReducer.js | 13 +++++++------ config/environments/development.rb | 3 +-- config/environments/production.rb | 2 +- config/secrets.yml | 3 +++ 9 files changed, 21 insertions(+), 19 deletions(-) diff --git a/app/jobs/comment_relay_job.rb b/app/jobs/comment_relay_job.rb index 2a796e8ce..5ea10ef6b 100644 --- a/app/jobs/comment_relay_job.rb +++ b/app/jobs/comment_relay_job.rb @@ -1,7 +1,7 @@ class CommentRelayJob < ApplicationJob def perform(comment) - ActionCable.server.broadcast "comments", comment.slice(:id, :author, :text) unless comment.destroyed? + ActionCable.server.broadcast "comments", comment unless comment.destroyed? end end diff --git a/app/models/comment.rb b/app/models/comment.rb index ecf445a76..4ca6ba256 100644 --- a/app/models/comment.rb +++ b/app/models/comment.rb @@ -2,6 +2,6 @@ class Comment < ActiveRecord::Base validates :author, :text, presence: true - after_commit { CommentRelayJob.perform_now(self) } + after_commit { CommentRelayJob.perform_later(self) } end diff --git a/client/app/bundles/comments/actions/commentsActionCreators.js b/client/app/bundles/comments/actions/commentsActionCreators.js index f851ab599..b02788a2d 100644 --- a/client/app/bundles/comments/actions/commentsActionCreators.js +++ b/client/app/bundles/comments/actions/commentsActionCreators.js @@ -27,10 +27,9 @@ export function fetchCommentsFailure(error) { }; } -//RB-To-Do : There could be a better way to handle response in submitCommentSuccess instead of defining submitCommentStatusOk -export function submitCommentStatusOk(comment) { +export function messageReceived(comment) { return { - type: actionTypes.SUBMIT_COMMENT_STATUS_OK, + type: actionTypes.MESSAGE_RECEIVED, comment, }; } @@ -67,7 +66,7 @@ export function submitComment(comment) { return ( requestsManager .submitEntity({ comment }) - .then(res => dispatch(submitCommentStatusOk(res.data))) + .then(res => dispatch(submitCommentSuccess(res.data))) .catch(error => dispatch(submitCommentFailure(error))) ); }; diff --git a/client/app/bundles/comments/components/CommentBox/CommentBox.jsx b/client/app/bundles/comments/components/CommentBox/CommentBox.jsx index 293c2313a..ea88e61ec 100644 --- a/client/app/bundles/comments/components/CommentBox/CommentBox.jsx +++ b/client/app/bundles/comments/components/CommentBox/CommentBox.jsx @@ -22,8 +22,8 @@ export default class CommentBox extends BaseComponent { }; subscribeChannel() { - const { submitCommentSuccess } = this.props.actions; - const cable = ActionCable.createConsumer("ws://localhost:5000/cable"); + const { messageReceived } = this.props.actions; + const cable = ActionCable.createConsumer("ws://"+window.location.hostname+":"+window.location.port+"/cable"); cable.subscriptions.create({channel: "CommentsChannel"}, { connected: () => { console.log("connected") @@ -32,7 +32,7 @@ export default class CommentBox extends BaseComponent { console.log("disconnected") }, received: (comment) => { - submitCommentSuccess(Immutable.fromJS(comment)); + messageReceived(Immutable.fromJS(comment)); } }); } diff --git a/client/app/bundles/comments/constants/commentsConstants.js b/client/app/bundles/comments/constants/commentsConstants.js index fc9894026..03749319a 100644 --- a/client/app/bundles/comments/constants/commentsConstants.js +++ b/client/app/bundles/comments/constants/commentsConstants.js @@ -3,7 +3,7 @@ export const FETCH_COMMENTS_FAILURE = 'FETCH_COMMENTS_FAILURE'; export const SUBMIT_COMMENT_SUCCESS = 'SUBMIT_COMMENT_SUCCESS'; export const SUBMIT_COMMENT_FAILURE = 'SUBMIT_COMMENT_FAILURE'; -export const SUBMIT_COMMENT_STATUS_OK = 'SUBMIT_COMMENT_STATUS_OK'; +export const MESSAGE_RECEIVED = 'MESSAGE_RECEIVED'; export const SET_IS_FETCHING = 'SET_IS_FETCHING'; export const SET_IS_SAVING = 'SET_IS_SAVING'; diff --git a/client/app/bundles/comments/reducers/commentsReducer.js b/client/app/bundles/comments/reducers/commentsReducer.js index 1cf99f053..50038d020 100644 --- a/client/app/bundles/comments/reducers/commentsReducer.js +++ b/client/app/bundles/comments/reducers/commentsReducer.js @@ -32,14 +32,15 @@ export default function commentsReducer($$state = $$initialState, action = null) }); } - //RB-To-Do : Can we remove this method it doesn't make much sense to update state here - case actionTypes.SUBMIT_COMMENT_STATUS_OK: { + case actionTypes.MESSAGE_RECEIVED: { return $$state.withMutations(state => ( state - .merge({ - submitCommentError: null, - isSaving: false, - }) + .updateIn( + ['$$comments'], + $$comments => { + return ($$comments.findIndex(com => com.get('id') === comment.get('id')) == -1) ? $$comments.unshift(Immutable.fromJS(comment)) : $$comments + }, + ) )); } diff --git a/config/environments/development.rb b/config/environments/development.rb index b5af8af24..0c7a2b935 100644 --- a/config/environments/development.rb +++ b/config/environments/development.rb @@ -60,6 +60,5 @@ # routes, locales, etc. This feature depends on the listen gem. config.file_watcher = ActiveSupport::EventedFileUpdateChecker - #RB-To-Do : Remove hardcoded request_origin - config.action_cable.allowed_request_origins = ["http://localhost:5000"] + config.action_cable.allowed_request_origins = [Rails.application.secrets.action_cable_url] end diff --git a/config/environments/production.rb b/config/environments/production.rb index c146c7dc3..a1aa84c90 100644 --- a/config/environments/production.rb +++ b/config/environments/production.rb @@ -40,7 +40,7 @@ # Action Cable endpoint configuration # config.action_cable.url = 'wss://example.com/cable' - # config.action_cable.allowed_request_origins = [ 'http://example.com', /http:\/\/example.*/ ] + config.action_cable.allowed_request_origins = [Rails.application.secrets.action_cable_url] # Force all access to the app over SSL, use Strict-Transport-Security, and use secure cookies. config.force_ssl = true diff --git a/config/secrets.yml b/config/secrets.yml index bad5014a8..9e809cfd4 100644 --- a/config/secrets.yml +++ b/config/secrets.yml @@ -12,11 +12,14 @@ development: secret_key_base: 231bf79489c63f8c8facd7bf27db1c2582a42a7f4302fccdb74ef35bc5dc91fb4e19dbf167f3003bdb4073818dfab4a9916890d193d535a7be458dbef1609800 + action_cable_url : <%= ENV["SERVER_PORT"] %> test: secret_key_base: 1ab8adbcf8410aebbce9b6dd6db7b5d090297bd22cf789b91ff44ae02711e8c128453d3e5c97eadf9066efe1a1e0dc1921faf7314d566c114d3ed60ae7ea614c + action_cable_url : <%= ENV["SERVER_PORT"] %> # Do not keep production secrets in the repository, # instead read values from the environment. production: secret_key_base: <%= ENV["SECRET_KEY_BASE"] %> + action_cable_url : <%= ENV["SERVER_PORT"] %> From b15b46a78e0be4177a6b9d8f4ea73e58b9d3e3dd Mon Sep 17 00:00:00 2001 From: Richa Bhardwaj Date: Fri, 6 Jan 2017 16:58:29 +0530 Subject: [PATCH 06/19] added action_cable configuration in application --- config/application.rb | 1 + config/environments/development.rb | 2 -- config/environments/production.rb | 1 - 3 files changed, 1 insertion(+), 3 deletions(-) diff --git a/config/application.rb b/config/application.rb index 57d8053f1..c0d8ea141 100644 --- a/config/application.rb +++ b/config/application.rb @@ -11,5 +11,6 @@ class Application < Rails::Application # Settings in config/environments/* take precedence over those specified here. # Application configuration should go into files in config/initializers # -- all .rb files in that directory are automatically loaded. + config.action_cable.allowed_request_origins = [Rails.application.secrets.action_cable_url] end end diff --git a/config/environments/development.rb b/config/environments/development.rb index 0c7a2b935..09d7964f4 100644 --- a/config/environments/development.rb +++ b/config/environments/development.rb @@ -59,6 +59,4 @@ # Use an evented file watcher to asynchronously detect changes in source code, # routes, locales, etc. This feature depends on the listen gem. config.file_watcher = ActiveSupport::EventedFileUpdateChecker - - config.action_cable.allowed_request_origins = [Rails.application.secrets.action_cable_url] end diff --git a/config/environments/production.rb b/config/environments/production.rb index a1aa84c90..3be9a24fb 100644 --- a/config/environments/production.rb +++ b/config/environments/production.rb @@ -40,7 +40,6 @@ # Action Cable endpoint configuration # config.action_cable.url = 'wss://example.com/cable' - config.action_cable.allowed_request_origins = [Rails.application.secrets.action_cable_url] # Force all access to the app over SSL, use Strict-Transport-Security, and use secure cookies. config.force_ssl = true From 7954724656d0261b5361de99c2bd93f0652effbb Mon Sep 17 00:00:00 2001 From: Richa Bhardwaj Date: Fri, 6 Jan 2017 17:19:24 +0530 Subject: [PATCH 07/19] added 12_factor --- Gemfile | 4 ++++ Gemfile.lock | 6 ++++++ 2 files changed, 10 insertions(+) diff --git a/Gemfile b/Gemfile index 338c45e1d..72b6f84e0 100644 --- a/Gemfile +++ b/Gemfile @@ -105,3 +105,7 @@ group :test do gem "rspec-retry" gem "selenium-webdriver", "<3.0.0" end + +group :production do + gem 'rails_12factor' +end diff --git a/Gemfile.lock b/Gemfile.lock index 233be69f4..a845146b2 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -187,6 +187,11 @@ GEM nokogiri (~> 1.6.0) rails-html-sanitizer (1.0.3) loofah (~> 2.0) + rails_12factor (0.0.3) + rails_serve_static_assets + rails_stdout_logging + rails_serve_static_assets (0.0.5) + rails_stdout_logging (0.0.5) railties (5.0.0.1) actionpack (= 5.0.0.1) activesupport (= 5.0.0.1) @@ -329,6 +334,7 @@ DEPENDENCIES puma rails rails-html-sanitizer + rails_12factor rainbow react_on_rails (~> 6.1) redis From 9a6404e586e8d45a86a5b653134e4e142f75d8a4 Mon Sep 17 00:00:00 2001 From: Richa Bhardwaj Date: Fri, 6 Jan 2017 17:21:59 +0530 Subject: [PATCH 08/19] fixed database.yml indentation --- config/database.yml | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/config/database.yml b/config/database.yml index 0662a56ac..c96d90929 100644 --- a/config/database.yml +++ b/config/database.yml @@ -26,21 +26,21 @@ # database: db/production.sqlite3 # Uncomment below for a setup with just postgres and change your Gemfile to reflect this - default: &default - adapter: postgresql - username: - password: +default: &default + adapter: postgresql + username: + password: - development: - <<: *default - database: react_webpack_dev +development: + <<: *default + database: react_webpack_dev # Warning: The database defined as "test" will be erased and # re-generated from your development database when you run "rake". # Do not set this db to the same as development or production. - test: - <<: *default - database: react_webpack_test +test: + <<: *default + database: react_webpack_test production: <<: *default From 905134b7f80f6e3bc8ba0ef3505c52690668472d Mon Sep 17 00:00:00 2001 From: Richa Bhardwaj Date: Fri, 6 Jan 2017 18:14:26 +0530 Subject: [PATCH 09/19] added actioncable in webpack config --- client/webpack.client.base.config.js | 1 + 1 file changed, 1 insertion(+) diff --git a/client/webpack.client.base.config.js b/client/webpack.client.base.config.js index 1a41918c3..6d29af922 100644 --- a/client/webpack.client.base.config.js +++ b/client/webpack.client.base.config.js @@ -27,6 +27,7 @@ module.exports = { // vendor-bundle.js. Note, if we added some library here, but don't use it in the // app-bundle.js, then we just wasted a bunch of space. 'axios', + 'actioncable', 'classnames', 'immutable', 'lodash', From 03544722c786989166544714f0a191464e07d73e Mon Sep 17 00:00:00 2001 From: Richa Bhardwaj Date: Fri, 6 Jan 2017 21:00:52 +0530 Subject: [PATCH 10/19] udpated cable.yml for production --- config/cable.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/config/cable.yml b/config/cable.yml index e8f74459d..c29230ed7 100644 --- a/config/cable.yml +++ b/config/cable.yml @@ -1,7 +1,7 @@ # Action Cable uses Redis by default to administer connections, channels, and sending/receiving messages over the WebSocket. production: adapter: redis - url: redis://localhost:6379/1 + url: <%= ENV["REDISCLOUD_URL"] %> development: adapter: redis From c2661a23885957f7360921d7f921cf3322d49d1d Mon Sep 17 00:00:00 2001 From: Richa Bhardwaj Date: Fri, 6 Jan 2017 21:10:11 +0530 Subject: [PATCH 11/19] updated npm-shrinkwrap.json --- client/npm-shrinkwrap.json | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/client/npm-shrinkwrap.json b/client/npm-shrinkwrap.json index e8d7f8180..9db0f9cbd 100644 --- a/client/npm-shrinkwrap.json +++ b/client/npm-shrinkwrap.json @@ -44,10 +44,10 @@ "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-3.0.1.tgz", "dev": true }, - "actioncable-js": { - "version": "5.0.0-rc2", - "from": "actioncable-js@latest", - "resolved": "https://registry.npmjs.org/actioncable-js/-/actioncable-js-5.0.0-rc2.tgz" + "actioncable": { + "version": "5.0.1", + "from": "actioncable@latest", + "resolved": "https://registry.npmjs.org/actioncable/-/actioncable-5.0.1.tgz" }, "ajv": { "version": "4.9.0", From d68139a66ff758dc183dbbc6d6f690f5e1d3fe24 Mon Sep 17 00:00:00 2001 From: Richa Bhardwaj Date: Fri, 6 Jan 2017 21:18:11 +0530 Subject: [PATCH 12/19] wss socket for heroku --- .../app/bundles/comments/components/CommentBox/CommentBox.jsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/client/app/bundles/comments/components/CommentBox/CommentBox.jsx b/client/app/bundles/comments/components/CommentBox/CommentBox.jsx index ea88e61ec..849db2268 100644 --- a/client/app/bundles/comments/components/CommentBox/CommentBox.jsx +++ b/client/app/bundles/comments/components/CommentBox/CommentBox.jsx @@ -23,7 +23,8 @@ export default class CommentBox extends BaseComponent { subscribeChannel() { const { messageReceived } = this.props.actions; - const cable = ActionCable.createConsumer("ws://"+window.location.hostname+":"+window.location.port+"/cable"); + const protocol = window.location.protocol === "https:" ? "wss://" : "ws://" + const cable = ActionCable.createConsumer(protocol+window.location.hostname+":"+window.location.port+"/cable"); cable.subscriptions.create({channel: "CommentsChannel"}, { connected: () => { console.log("connected") From 1bd7549d8f22388d183d3f63cd3250e2689d0b14 Mon Sep 17 00:00:00 2001 From: Richa Bhardwaj Date: Fri, 6 Jan 2017 21:33:08 +0530 Subject: [PATCH 13/19] updated package.json --- package.json | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/package.json b/package.json index 2e6aa6690..262f0131d 100644 --- a/package.json +++ b/package.json @@ -39,9 +39,7 @@ "url": "https://github.com/shakacode/react-webpack-rails-tutorial/issues" }, "homepage": "https://github.com/shakacode/react-webpack-rails-tutorial", - "dependencies": { - "action-cable": "0.0.9" - }, + "dependencies": {}, "devDependencies": {}, "cacheDirectories": [ "node_modules", From 33f56519f67bfc967faa60dc2a1fb14d038d4c24 Mon Sep 17 00:00:00 2001 From: Richa Bhardwaj Date: Fri, 6 Jan 2017 22:13:22 +0530 Subject: [PATCH 14/19] fixed selenium offenses --- app/channels/application_cable/channel.rb | 2 +- app/jobs/comment_relay_job.rb | 2 -- app/models/comment.rb | 5 +---- client/app/bundles/comments/reducers/commentsReducer.js | 4 +--- config/routes.rb | 2 +- 5 files changed, 4 insertions(+), 11 deletions(-) diff --git a/app/channels/application_cable/channel.rb b/app/channels/application_cable/channel.rb index c574928ee..d67269728 100644 --- a/app/channels/application_cable/channel.rb +++ b/app/channels/application_cable/channel.rb @@ -1,4 +1,4 @@ -module ApplicationCable +module ApplicationCable class Channel < ActionCable::Channel::Base end end diff --git a/app/jobs/comment_relay_job.rb b/app/jobs/comment_relay_job.rb index 5ea10ef6b..bce0317e5 100644 --- a/app/jobs/comment_relay_job.rb +++ b/app/jobs/comment_relay_job.rb @@ -1,7 +1,5 @@ class CommentRelayJob < ApplicationJob - def perform(comment) ActionCable.server.broadcast "comments", comment unless comment.destroyed? end - end diff --git a/app/models/comment.rb b/app/models/comment.rb index 4ca6ba256..90faf1e93 100644 --- a/app/models/comment.rb +++ b/app/models/comment.rb @@ -1,7 +1,4 @@ class Comment < ActiveRecord::Base - validates :author, :text, presence: true - - after_commit { CommentRelayJob.perform_later(self) } - + after_commit { CommentRelayJob.perform_later(self) } end diff --git a/client/app/bundles/comments/reducers/commentsReducer.js b/client/app/bundles/comments/reducers/commentsReducer.js index 50038d020..3405ff639 100644 --- a/client/app/bundles/comments/reducers/commentsReducer.js +++ b/client/app/bundles/comments/reducers/commentsReducer.js @@ -37,9 +37,7 @@ export default function commentsReducer($$state = $$initialState, action = null) state .updateIn( ['$$comments'], - $$comments => { - return ($$comments.findIndex(com => com.get('id') === comment.get('id')) == -1) ? $$comments.unshift(Immutable.fromJS(comment)) : $$comments - }, + $$comments => { return ($$comments.findIndex(com => com.get('id') === comment.get('id')) == -1) ? $$comments.unshift(Immutable.fromJS(comment)) : $$comments }, ) )); } diff --git a/config/routes.rb b/config/routes.rb index d6cf0e376..83bc46408 100644 --- a/config/routes.rb +++ b/config/routes.rb @@ -13,5 +13,5 @@ get "react-router(/*all)", to: "pages#index" resources :comments - mount ActionCable.server => '/cable' + mount ActionCable.server => "/cable" end From d2e8919b310c3fb906e9f48d92b26d6b1a39bdd7 Mon Sep 17 00:00:00 2001 From: Richa Bhardwaj Date: Tue, 10 Jan 2017 12:37:20 +0530 Subject: [PATCH 15/19] fixed lint errors/warnings --- client/app/bundles/comments/reducers/commentsReducer.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/app/bundles/comments/reducers/commentsReducer.js b/client/app/bundles/comments/reducers/commentsReducer.js index 3405ff639..91cbc5a62 100644 --- a/client/app/bundles/comments/reducers/commentsReducer.js +++ b/client/app/bundles/comments/reducers/commentsReducer.js @@ -37,7 +37,7 @@ export default function commentsReducer($$state = $$initialState, action = null) state .updateIn( ['$$comments'], - $$comments => { return ($$comments.findIndex(com => com.get('id') === comment.get('id')) == -1) ? $$comments.unshift(Immutable.fromJS(comment)) : $$comments }, + $$comments => ($$comments.findIndex(com => com.get('id') === comment.get('id')) === -1 ? $$comments.unshift(Immutable.fromJS(comment)) : $$comments), ) )); } From ef1c1737923a6704f7c9b9e2d6fb3599a92c7959 Mon Sep 17 00:00:00 2001 From: Richa Bhardwaj Date: Tue, 10 Jan 2017 13:05:48 +0530 Subject: [PATCH 16/19] CR fixes : removed rails_12factor and commented code --- Gemfile | 4 ---- Gemfile.lock | 6 ------ .../bundles/comments/components/CommentBox/CommentBox.jsx | 2 -- config/secrets.yml | 1 - 4 files changed, 13 deletions(-) diff --git a/Gemfile b/Gemfile index 72b6f84e0..338c45e1d 100644 --- a/Gemfile +++ b/Gemfile @@ -105,7 +105,3 @@ group :test do gem "rspec-retry" gem "selenium-webdriver", "<3.0.0" end - -group :production do - gem 'rails_12factor' -end diff --git a/Gemfile.lock b/Gemfile.lock index a845146b2..233be69f4 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -187,11 +187,6 @@ GEM nokogiri (~> 1.6.0) rails-html-sanitizer (1.0.3) loofah (~> 2.0) - rails_12factor (0.0.3) - rails_serve_static_assets - rails_stdout_logging - rails_serve_static_assets (0.0.5) - rails_stdout_logging (0.0.5) railties (5.0.0.1) actionpack (= 5.0.0.1) activesupport (= 5.0.0.1) @@ -334,7 +329,6 @@ DEPENDENCIES puma rails rails-html-sanitizer - rails_12factor rainbow react_on_rails (~> 6.1) redis diff --git a/client/app/bundles/comments/components/CommentBox/CommentBox.jsx b/client/app/bundles/comments/components/CommentBox/CommentBox.jsx index 849db2268..964842876 100644 --- a/client/app/bundles/comments/components/CommentBox/CommentBox.jsx +++ b/client/app/bundles/comments/components/CommentBox/CommentBox.jsx @@ -42,12 +42,10 @@ export default class CommentBox extends BaseComponent { const { fetchComments } = this.props.actions; fetchComments(); this.subscribeChannel(); - //this.intervalId = setInterval(fetchComments, this.props.pollInterval); } componentWillUnmount() { App.cable.subscriptions.remove({ channel: "CommentsChannel" }); - //clearInterval(this.intervalId); } render() { diff --git a/config/secrets.yml b/config/secrets.yml index 9e809cfd4..538e0076c 100644 --- a/config/secrets.yml +++ b/config/secrets.yml @@ -16,7 +16,6 @@ development: test: secret_key_base: 1ab8adbcf8410aebbce9b6dd6db7b5d090297bd22cf789b91ff44ae02711e8c128453d3e5c97eadf9066efe1a1e0dc1921faf7314d566c114d3ed60ae7ea614c - action_cable_url : <%= ENV["SERVER_PORT"] %> # Do not keep production secrets in the repository, # instead read values from the environment. From 4311ff5147b9dcae8be17b038ccee4fe762f1578 Mon Sep 17 00:00:00 2001 From: Richa Bhardwaj Date: Tue, 10 Jan 2017 13:17:28 +0530 Subject: [PATCH 17/19] updated action_cable_url for development and test env in secrets.yml --- config/secrets.yml | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/config/secrets.yml b/config/secrets.yml index 538e0076c..3a014e1f2 100644 --- a/config/secrets.yml +++ b/config/secrets.yml @@ -12,10 +12,11 @@ development: secret_key_base: 231bf79489c63f8c8facd7bf27db1c2582a42a7f4302fccdb74ef35bc5dc91fb4e19dbf167f3003bdb4073818dfab4a9916890d193d535a7be458dbef1609800 - action_cable_url : <%= ENV["SERVER_PORT"] %> + action_cable_url : http://localhost:3000 test: secret_key_base: 1ab8adbcf8410aebbce9b6dd6db7b5d090297bd22cf789b91ff44ae02711e8c128453d3e5c97eadf9066efe1a1e0dc1921faf7314d566c114d3ed60ae7ea614c + action_cable_url : http://localhost:3000 # Do not keep production secrets in the repository, # instead read values from the environment. From 6fb98ddf935032e07b732760937ff74380d14ceb Mon Sep 17 00:00:00 2001 From: Richa Bhardwaj Date: Tue, 10 Jan 2017 22:25:49 +0530 Subject: [PATCH 18/19] added 'Refresh' link to load comments manually --- .../comments/components/CommentBox/CommentBox.jsx | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/client/app/bundles/comments/components/CommentBox/CommentBox.jsx b/client/app/bundles/comments/components/CommentBox/CommentBox.jsx index 964842876..5fbc83514 100644 --- a/client/app/bundles/comments/components/CommentBox/CommentBox.jsx +++ b/client/app/bundles/comments/components/CommentBox/CommentBox.jsx @@ -21,6 +21,13 @@ export default class CommentBox extends BaseComponent { }).isRequired, }; + constructor() { + super(); + _.bindAll(this, [ + 'refreshComments', + ]); + } + subscribeChannel() { const { messageReceived } = this.props.actions; const protocol = window.location.protocol === "https:" ? "wss://" : "ws://" @@ -48,6 +55,11 @@ export default class CommentBox extends BaseComponent { App.cable.subscriptions.remove({ channel: "CommentsChannel" }); } + refreshComments() { + const { fetchComments } = this.props.actions; + fetchComments(); + } + render() { const { actions, data } = this.props; const cssTransitionGroupClassNames = { @@ -62,6 +74,7 @@ export default class CommentBox extends BaseComponent {

Comments {data.get('isFetching') && 'Loading...'}

+ Refresh

Text supports Github Flavored Markdown. Comments older than 24 hours are deleted.
From ac9af685609047ebed461d10a2280cb35eff00d9 Mon Sep 17 00:00:00 2001 From: Richa Bhardwaj Date: Mon, 10 Apr 2017 15:51:19 +0530 Subject: [PATCH 19/19] removed stale App.cable code in CommentBox --- .../app/bundles/comments/components/CommentBox/CommentBox.jsx | 4 ---- 1 file changed, 4 deletions(-) diff --git a/client/app/bundles/comments/components/CommentBox/CommentBox.jsx b/client/app/bundles/comments/components/CommentBox/CommentBox.jsx index 5fbc83514..1c6ad9a50 100644 --- a/client/app/bundles/comments/components/CommentBox/CommentBox.jsx +++ b/client/app/bundles/comments/components/CommentBox/CommentBox.jsx @@ -51,10 +51,6 @@ export default class CommentBox extends BaseComponent { this.subscribeChannel(); } - componentWillUnmount() { - App.cable.subscriptions.remove({ channel: "CommentsChannel" }); - } - refreshComments() { const { fetchComments } = this.props.actions; fetchComments();