Update chat and add precompilation paths

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,

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);

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')

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();
   }),

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 <a
-          href={"/chat/"+channel.adjusted_slug}
+          href={"/💌/"+channel.adjusted_slug}
           style={{
           background: "#66e2d5",
           color: "black",
@@ -53,7 +76,7 @@ class UnopenedChannelNotice extends Component {
 }
 
 export default function getUnopenedChannels(user, successCb) {
-  if (location.pathname.startsWith("/chat")) {
+  if (location.pathname.startsWith("/💌")) {
     return
   }
   fetch('/chat_channels?state=unopened', {
@@ -62,11 +85,7 @@ export default function getUnopenedChannels(user, successCb) {
   })
     .then(response => response.json())
     .then(json => {
-      if (json.length > 0) {
-        render(<UnopenedChannelNotice channels={json} />, document.getElementById('message-notice'));
-      } else {
-        render(null, document.getElementById('message-notice'));
-      }
+      render(<UnopenedChannelNotice unopenedChannels={json} pusherKey={document.body.dataset.pusherKey} />, document.getElementById('message-notice'));
     })
     .catch(error => {
       console.log(error);

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

app/views/layouts/application.html.erb

@@ -66,7 +66,7 @@
     <link rel="search" href="https://dev.to/search.xml" type="application/opensearchdescription+xml" title="The DEV Community"/>
   <% end %>
 </head>
-<body data-user-status="<%= user_logged_in_status %>">
+<body data-user-status="<%= user_logged_in_status %>" data-pusher-key="<%= ENV["PUSHER_KEY"] %>">
   <% unless is_internal_navigation? %>
     <div id="audiocontent">
       <%= yield(:audio) %>

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

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.

config/initializers/assets.rb

@@ -7,7 +7,7 @@ Rails.application.config.assets.version = '1.0'
 # Rails.application.config.assets.paths << Emoji.images_path
 
 # Yarn node_moduless
-Rails.application.config.assets.paths << Rails.root.join('node_modules')
+Rails.application.config.assets.paths << Rails.root.join('node_modules', 'javascript')
 
 # Precompile additional assets.
 # application.js, application.css, and all non-JS/CSS in app/assets folder are already added.
@@ -25,8 +25,10 @@ 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( pack.js )
-Rails.application.config.assets.precompile += %w( chat.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( packs/pack.js )
+Rails.application.config.assets.precompile += %w( packs/chat.js )
 Rails.application.config.assets.precompile += %w( s3_direct_upload.js )
 
 Rails.application.config.assets.precompile += %w( lib/xss.js )

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
 

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()

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()