From 98d84d24565100fc263d78f689c0d6fa738232fa Mon Sep 17 00:00:00 2001 From: Ben Halpern Date: Fri, 8 Jun 2018 15:31:48 -0400 Subject: [PATCH] Update chat and add precompilation paths (#406) * Update chat and add precompilation paths * Update chat and add precompilation paths * Adjust assets.rb --- app/controllers/messages_controller.rb | 4 +- app/javascript/chat/chat.jsx | 4 +- app/javascript/packs/application.js | 10 +++++ app/javascript/packs/pack.js | 8 +++- .../src/utils/getUnopenedChannels.jsx | 41 ++++++++++++++----- app/javascript/{chat => src/utils}/pusher.js | 0 app/models/chat_channel.rb | 6 ++- app/views/layouts/application.html.erb | 2 +- config/environments/development.rb | 3 ++ config/environments/production.rb | 3 ++ config/initializers/assets.rb | 2 + config/routes.rb | 4 +- config/webpack/production.js | 2 + config/webpack/test.js | 2 + 14 files changed, 70 insertions(+), 21 deletions(-) create mode 100644 app/javascript/packs/application.js rename app/javascript/{chat => src/utils}/pusher.js (100%) diff --git a/app/controllers/messages_controller.rb b/app/controllers/messages_controller.rb index 324eb6492..ef410c25a 100644 --- a/app/controllers/messages_controller.rb +++ b/app/controllers/messages_controller.rb @@ -9,7 +9,8 @@ class MessagesController < ApplicationController if @message.save begin message_json = create_pusher_payload(@message) - Pusher.trigger(@message.chat_channel.id, "message-created", message_json) + notification_channels = @message.chat_channel.chat_channel_memberships.pluck(:user_id).map { |id| "message-notifications-#{id}"} + Pusher.trigger([@message.chat_channel.id] + notification_channels, "message-created", message_json) success = true rescue Pusher::Error => e logger.info "PUSHER ERROR: #{e.message}" @@ -39,6 +40,7 @@ class MessagesController < ApplicationController { user_id: new_message.user.id, chat_channel_id: new_message.chat_channel.id, + chat_channel_adjusted_slug: new_message.chat_channel.adjusted_slug(current_user, "sender"), username: new_message.user.username, profile_image_url: ProfileImage.new(new_message.user).get(90), message: new_message.message_html, diff --git a/app/javascript/chat/chat.jsx b/app/javascript/chat/chat.jsx index bef48eb82..eb3240409 100644 --- a/app/javascript/chat/chat.jsx +++ b/app/javascript/chat/chat.jsx @@ -6,7 +6,7 @@ import Alert from './alert'; import Channels from './channels'; import Compose from './compose'; import Message from './message'; -import setupPusher from './pusher'; +import setupPusher from '../src/utils/pusher'; export default class Chat extends Component { static propTypes = { @@ -166,7 +166,7 @@ export default class Chat extends Component { scrolled: false, showAlert: false, }); - window.history.replaceState(null, null, "/chat/"+e.target.dataset.channelSlug); + window.history.replaceState(null, null, "/💌/"+e.target.dataset.channelSlug); document.getElementById("messageform").focus(); if (window.ga && ga.create) { ga('send', 'pageview', location.pathname + location.search); diff --git a/app/javascript/packs/application.js b/app/javascript/packs/application.js new file mode 100644 index 000000000..54b106ee0 --- /dev/null +++ b/app/javascript/packs/application.js @@ -0,0 +1,10 @@ +/* eslint no-console:0 */ +// This file is automatically compiled by Webpack, along with any other files +// present in this directory. You're encouraged to place your actual application logic in +// a relevant structure within app/javascript and only use these pack files to reference +// that code so it'll be compiled. +// +// To reference this file, add <%= javascript_pack_tag 'application' %> to the appropriate +// layout file, like app/views/layouts/application.html.erb + +console.log('Hello World from Webpacker') diff --git a/app/javascript/packs/pack.js b/app/javascript/packs/pack.js index c00b9f22b..81f94d687 100644 --- a/app/javascript/packs/pack.js +++ b/app/javascript/packs/pack.js @@ -1,6 +1,6 @@ import { h, render } from 'preact'; import Onboarding from '../src/Onboarding'; -import { getUserData } from '../src/utils/getUserData'; +import { getUserDataAndCsrfToken } from '../chat/util'; import getUnopenedChannels from '../src/utils/getUnopenedChannels'; HTMLDocument.prototype.ready = new Promise(resolve => { @@ -28,7 +28,11 @@ function renderPage() { } document.ready.then( - getUserData().then(() => { + getUserDataAndCsrfToken().then(currentUser => { + window.currentUser = currentUser; + window.csrfToken = document.querySelector( + "meta[name='csrf-token']", + ).content; renderPage(); getUnopenedChannels(); }), diff --git a/app/javascript/src/utils/getUnopenedChannels.jsx b/app/javascript/src/utils/getUnopenedChannels.jsx index 55ef753ad..cf39be364 100644 --- a/app/javascript/src/utils/getUnopenedChannels.jsx +++ b/app/javascript/src/utils/getUnopenedChannels.jsx @@ -1,20 +1,43 @@ import { h, render, Component } from 'preact'; +import setupPusher from './pusher'; + + class UnopenedChannelNotice extends Component { constructor(props) { super(props); - this.state = { visible: true } - this.handleClick = this.handleClick.bind(this); + const unopenedChannels = this.props.unopenedChannels; + const visible = unopenedChannels.length > 0 ? true : false; + this.state = { + visible: visible, + unopenedChannels } } - handleClick() { + componentDidMount() { + setupPusher(this.props.pusherKey, { + channelId: `message-notifications-${window.currentUser.id}`, + messageCreated: this.receiveNewMessage, + }); + } + + receiveNewMessage = e => { + let channels = this.state.unopenedChannels; + const newObj = {adjusted_slug: e.chat_channel_adjusted_slug} + if(channels.filter(obj => obj.adjusted_slug === newObj.adjusted_slug).length === 0 && + newObj.adjusted_slug != `@${window.currentUser.username}`) { + channels.push(newObj); + } + this.setState({visible: channels.length > 0, unopenedChannels: channels}) + } + + handleClick = e => { this.setState({visible: false}) } render() { if (this.state.visible) { - const channels = this.props.channels.map(channel => { + const channels = this.state.unopenedChannels.map(channel => { return response.json()) .then(json => { - if (json.length > 0) { - render(, document.getElementById('message-notice')); - } else { - render(null, document.getElementById('message-notice')); - } + render(, document.getElementById('message-notice')); }) .catch(error => { console.log(error); diff --git a/app/javascript/chat/pusher.js b/app/javascript/src/utils/pusher.js similarity index 100% rename from app/javascript/chat/pusher.js rename to app/javascript/src/utils/pusher.js diff --git a/app/models/chat_channel.rb b/app/models/chat_channel.rb index 1202df171..b4bbd2771 100644 --- a/app/models/chat_channel.rb +++ b/app/models/chat_channel.rb @@ -45,10 +45,12 @@ class ChatChannel < ApplicationRecord end end - def adjusted_slug(user = nil) + def adjusted_slug(user = nil, caller_type="reciever") user ||= current_user - if channel_type == "direct" + if channel_type == "direct" && caller_type == "reciever" "@"+slug.gsub("/#{user.username}","").gsub("#{user.username}/","") + elsif caller_type == "sender" + "@"+user.username else slug end diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb index f244c8fc8..5cfb7c15b 100644 --- a/app/views/layouts/application.html.erb +++ b/app/views/layouts/application.html.erb @@ -66,7 +66,7 @@ <% end %> - +"> <% unless is_internal_navigation? %>
<%= yield(:audio) %> diff --git a/config/environments/development.rb b/config/environments/development.rb index 07fcb5038..97d13764d 100644 --- a/config/environments/development.rb +++ b/config/environments/development.rb @@ -1,4 +1,7 @@ Rails.application.configure do + # Verifies that versions and hashed value of the package contents in the project's package.json +config.webpacker.check_yarn_integrity = true + # Replace with a lambda or method name defined in ApplicationController # to implement access control for the Flipflop dashboard. config.flipflop.dashboard_access_filter = nil diff --git a/config/environments/production.rb b/config/environments/production.rb index 67e4f1dcb..87181d1f1 100644 --- a/config/environments/production.rb +++ b/config/environments/production.rb @@ -1,4 +1,7 @@ Rails.application.configure do + # Verifies that versions and hashed value of the package contents in the project's package.json +config.webpacker.check_yarn_integrity = false + # Settings specified here will take precedence over those in config/application.rb. # Code is not reloaded between requests. diff --git a/config/initializers/assets.rb b/config/initializers/assets.rb index ebd2c7048..ab5dbff19 100644 --- a/config/initializers/assets.rb +++ b/config/initializers/assets.rb @@ -25,6 +25,8 @@ Rails.application.config.assets.precompile += %w( favicon.ico ) Rails.application.config.assets.precompile += %w( minimal.css ) Rails.application.config.assets.precompile += %w( s3_direct_upload.css ) Rails.application.config.assets.precompile += %w( base.js ) +Rails.application.config.assets.precompile += %w( packs/pack.js ) +Rails.application.config.assets.precompile += %w( packs/chat.js ) Rails.application.config.assets.precompile += %w( pack.js ) Rails.application.config.assets.precompile += %w( chat.js ) Rails.application.config.assets.precompile += %w( s3_direct_upload.js ) diff --git a/config/routes.rb b/config/routes.rb index de7a3b807..3bf87a62f 100644 --- a/config/routes.rb +++ b/config/routes.rb @@ -99,8 +99,8 @@ Rails.application.routes.draw do get "email_subscriptions/unsubscribe" post "/chat_channels/:id/moderate" => "chat_channels#moderate" post "/chat_channels/:id/open" => "chat_channels#open" - get "/chat" => "chat_channels#index" - get "/chat/:slug" => "chat_channels#index" + get "/💌" => "chat_channels#index" + get "/💌/:slug" => "chat_channels#index" # resources :users diff --git a/config/webpack/production.js b/config/webpack/production.js index 81269f651..be0f53aac 100644 --- a/config/webpack/production.js +++ b/config/webpack/production.js @@ -1,3 +1,5 @@ +process.env.NODE_ENV = process.env.NODE_ENV || 'production' + const environment = require('./environment') module.exports = environment.toWebpackConfig() diff --git a/config/webpack/test.js b/config/webpack/test.js index 81269f651..c5edff94a 100644 --- a/config/webpack/test.js +++ b/config/webpack/test.js @@ -1,3 +1,5 @@ +process.env.NODE_ENV = process.env.NODE_ENV || 'development' + const environment = require('./environment') module.exports = environment.toWebpackConfig()