integrating websocket api

reduce javascripts in application.js bundle and
other related scripts/markup in templates of
legacy app and keep what is nedded for intracting
with websocket api. The stripped version of the javascript
endpoint /client_scripts can be referenced by the react app.

jam-ui/.env.development

@@ -1,2 +1,2 @@
-REACT_APP_LEGACY_BASE_URL=http://www.jamkazam.local:4000/
+REACT_APP_LEGACY_BASE_URL=http://www.jamkazam.local:4000
 REACT_APP_API_BASE_URL=http://www.jamkazam.local:4000/api

jam-ui/.env.production

@@ -0,0 +1,2 @@
+REACT_APP_LEGACY_BASE_URL=https://www.jamkazam.com
+REACT_APP_API_BASE_URL=https://www.jamkazam.com/api

jam-ui/public/index.html

@@ -5,12 +5,11 @@
     <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#2c7be5" />
-
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
     <link
       rel="stylesheet"
       href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700|Poppins:100,200,300,400,500,600,700,800,900&display=swap"
-    />
+    />    
     <title>JamKazam</title>
   </head>
 

jam-ui/src/App.js

@@ -6,8 +6,12 @@ import 'react-toastify/dist/ReactToastify.min.css';
 import 'react-datetime/css/react-datetime.css';
 import 'react-image-lightbox/style.css';
 
+import useImportScript from "./hooks/useImportScript";
+
 const App = () => {
   
+  useImportScript(`${process.env.REACT_APP_LEGACY_BASE_URL}/client_scripts`)
+
   return ( 
     <Router basename={process.env.PUBLIC_URL}>
       <Layout />

jam-ui/src/components/profile/JKMessageButton.js

@@ -24,7 +24,8 @@ const JKMessageButton = props => {
         className={`btn btn-primary ${cssClasses}`}
         title={buttonTitle()}
         data-testid="message"
-        disabled={!isFriend}
+        //disabled={!isFriend}
+        disabled={false}
       >
         {children}
       </button>

jam-ui/src/components/profile/JKMessageModal.js

@@ -46,6 +46,8 @@ const JKMessageModal = props => {
     }
   }, [show]);
 
+ 
+
   return (
     <>
       <Modal isOpen={show} toggle={toggle}>

jam-ui/src/hooks/useImportScript.js

@@ -0,0 +1,13 @@
+import { useEffect } from 'react';
+const useImportScript = resourceUrl=> {
+  useEffect(() => {
+    const script = document.createElement('script');
+    script.src = resourceUrl;
+    script.defer = true;
+    document.body.appendChild(script);
+return () => {
+      document.body.removeChild(script);
+    }
+  }, [resourceUrl]);
+};
+export default useImportScript;

jam-ui/src/layouts/DashboardLayout.js

@@ -20,6 +20,7 @@ import { getPageName } from '../helpers/utils';
 import { useAuth } from '../context/AuthContext';
 import { getCurrentUser } from '../helpers/rest';
 
+
 const AUTH_STAGES = {
   loading: 1,
   authenticated: 2,
@@ -52,8 +53,11 @@ const DashboardLayout = ({ location }) => {
       });
   };
 
+  
+
   useEffect(() => {
     fetchCurrentUser();
+    //registerForChatMessages()
   }, []);
 
   useEffect(() => {
@@ -76,8 +80,8 @@ const DashboardLayout = ({ location }) => {
 
 const DashboardLoadingIndicator = () => {
   return (
-    <div class="spinner-border" role="status">
-      <span class="sr-only">Loading...</span>
+    <div className="spinner-border" role="status">
+      <span className="sr-only">Loading...</span>
     </div>
   );
 };
@@ -108,8 +112,21 @@ const LoginRequestSection = () => {
 const DashboardSection = () => {
   const { isFluid, isVertical, navbarStyle } = useContext(AppContext);
   const isKanban = getPageName('kanban');
+  
+  const registerForChatMessages = () => {
+    console.log('registering for chat messages');
+    window.JK.JamServer.registerMessageCallback(window.JK.MessageType.CHAT_MESSAGE, function (header, payload) {
+      console.debug("Handling CHAT_MESSAGE msg " + JSON.stringify(payload));
+    })
+  }
+
+  useEffect(() => {
+    //registerForChatMessages()
+  }, []);
 
   return (
+  
+   
     <div className={isFluid || isKanban ? 'container-fluid' : 'container'}>
       {isVertical && <NavbarVertical isKanban={isKanban} navbarStyle={navbarStyle} />}
       <ProductProvider>
@@ -126,6 +143,7 @@ const DashboardSection = () => {
         {/* <SidePanelModal path={location.pathname} /> */}
       </ProductProvider>
     </div>
+    
   );
 };
 

web/app/controllers/clients_controller.rb

@@ -6,29 +6,13 @@ class ClientsController < ApplicationController
 
   AUTHED = %W{friend}
 
+  def scripts
+    _index
+    render :layout => 'scripts',  content_type: 'text/javascript'
+  end
 
   def index
-
-    enable_olark
-    gon.olark_box_start_hidden = true
-
-    # we want to enforce that /client is always the client view prefix
-    # this is a side effect of setting root path to '/'; soon we can remove this when we implement the new home page
-    if request.path == '/'
-      redirect_to client_url
-      return
-    end
-
-    if current_user
-      @is_guitar_center = false #current_user.is_guitar_center?
-      gon.user_id = current_user.id
-      gon.user_email = current_user.email
-      gon.user_name = current_user.name
-    end
-
-    @in_client_page = true
-    @minimal_curtain = Rails.application.config.minimal_curtain
-    gon.recurly_tax_estimate_jam_track_plan = Rails.application.config.recurly_tax_estimate_jam_track_plan
+    _index
     render :layout => 'client'
   end
 
@@ -51,4 +35,28 @@ class ClientsController < ApplicationController
     end
   end
 
+  private
+
+  def _index
+    enable_olark
+    gon.olark_box_start_hidden = true
+
+    # we want to enforce that /client is always the client view prefix
+    # this is a side effect of setting root path to '/'; soon we can remove this when we implement the new home page
+    if request.path == '/'
+      redirect_to client_url
+      return
+    end
+
+    if current_user
+      @is_guitar_center = false #current_user.is_guitar_center?
+      gon.user_id = current_user.id
+      gon.user_email = current_user.email
+      gon.user_name = current_user.name
+    end
+
+    @in_client_page = true
+    @minimal_curtain = Rails.application.config.minimal_curtain
+    gon.recurly_tax_estimate_jam_track_plan = Rails.application.config.recurly_tax_estimate_jam_track_plan
+  end
 end

web/config/application.rb

@@ -96,6 +96,8 @@ if defined?(Bundler)
     config.assets.precompile += %w( support/support.js support/support.scss )
     config.assets.precompile += %w( jk2021/jk2021.js jk2021/jk2021.css )
 
+    config.assets.precompile += %w( modern/scripts.js )
+
     # where is rabbitmq?
     config.rabbitmq_host = "127.0.0.1"
     config.rabbitmq_port = 5672

web/config/routes.rb

@@ -1,5 +1,7 @@
 Rails.application.routes.draw do
 
+
+
   scope :as => 'jam_ruby' do
     resources :users
     resources :music_sessions
@@ -110,7 +112,11 @@ Rails.application.routes.draw do
   get '/isp/ping.jar', :to => redirect('/ping.jar')
   get '/isp/ping:isp', :to => 'users#jnlp', :constraints => {:format => :jnlp}, :as => 'isp_ping'
 
+  
   get '/client', to: 'clients#index'
+  
+  get '/client_scripts', to: 'clients#scripts' #outputs javascript for external clients 
+
   get '/latency_tester', to: 'clients#latency_tester'
 
   get '/confirm/:signup_token', to: 'users#signup_confirm', as: 'signup_confirm'