fixes & improvements in signup and downloads pages

jam-ui/src/components/auth/JKRegistrationForm.js

@@ -24,7 +24,7 @@ const JKRegistrationForm = ({ hasLabel, jamTrack, jamTrackArtistName }) => {
   const { addToCart } = useJamTrackShopping();
 
   // Context
-  const { signUp, setCurrentUser } = useAuth();
+  const { signUp, setCurrentUser, currentUser } = useAuth();
 
   const { t } = useTranslation('auth');
 
@@ -52,21 +52,29 @@ const JKRegistrationForm = ({ hasLabel, jamTrack, jamTrackArtistName }) => {
       toast.error(`${t('signupForm.errorMessage')}`);
       setIsDisabled(false);
     }
-    console.log('_DEBUG_', jamTrack);
+   
-    console.log('_DEBUG_', jamTrackArtistName);
+  };
-    if(jamTrack){
+
+  useEffect(() => {
+    const addJamTrackToCart = async () => {
       try{
+        console.log('_DEBUG_ going to jamTrack to cart', jamTrack);
         await addToCart(jamTrack);
       }catch(error){
         console.error(error);
       }
-    }else if(jamTrackArtistName){
-      history.push(`/jamtracks?artist=${jamTrackArtistName}`);
-    }else{
-      history.push('/public/downloads');
     }
 
-  };
+    if (currentUser) {
+      if(jamTrack){
+        addJamTrackToCart();
+      }else if(jamTrackArtistName){
+        history.push(`/jamtracks?artist=${jamTrackArtistName}`);
+      }else{
+        history.push('/public/downloads');
+      }
+    }
+  }, [currentUser, jamTrack, jamTrackArtistName]);
 
   useEffect(() => {
     setIsDisabled(!firstName || !email || !password);

jam-ui/src/components/auth/basic/JKRegistration.js

@@ -4,47 +4,44 @@ import { Link } from 'react-router-dom';
 import JKRegistrationForm from '../JKRegistrationForm';
 import { useTranslation } from 'react-i18next';
 import { useLocation } from 'react-router-dom';
-import { getJamTrack } from '../../../helpers/rest';
+import { getJamTrackBySlug } from '../../../helpers/rest';
-import { useAuth } from '../../../context/UserAuth';
 
 const Registration = () => {
   const { t } = useTranslation('auth');
   const search = useLocation().search;
   const [jamTrack, setJamTrack] = useState(null);
   const [jamTrackArtistName, setJamTrackArtistName] = useState("");
-  const { currentUser } = useAuth();
+  const [loading, setLoading] = useState(false);
 
   //coming to signup page after clicking on jamtrack or artist
   useEffect(() => {
-   
-    if (!search) return;
-   
-    const params = new URLSearchParams(search);
-   
-   
-    const jamtrackId = params.get('JamTrackId');
-    const artistName = params.get('JamTrackArtistName');
 
-    console.log('_DEBUG_ jamtrackId', jamtrackId);
+    if (!search) return;
-    
+
-    
+    const params = new URLSearchParams(search);
+
+    const jamtrackSlug = params.get('JamTrackSlug');
+    const artistName = params.get('JamTrackArtistName');
+    setLoading(true);
+
     if (artistName && artistName !== "") {
       setJamTrackArtistName(artistName);
-    }else if (jamtrackId) {
+      setLoading(false);
-      const fetchJamTrack = async (id) => {
+    } else if (jamtrackSlug && jamtrackSlug !== "") {
+      const fetchJamTrack = async (slug) => {
         try {
-          const response = await getJamTrack({id});
+          const response = await getJamTrackBySlug({ slug });
           const jamTrack = await response.json();
           setJamTrack(jamTrack);
+          setLoading(false);
         } catch (error) {
           console.error(error);
+          setLoading(false);
         }
       }
-      fetchJamTrack(jamtrackId);
+      fetchJamTrack(jamtrackSlug);
-      
+    }else{
-      // if (jt && jt.allow_free && currentUser && currentUser.show_free_jamtrack) {
+      setLoading(false);
-      //   setJamTrack(jt);
-      // }
     }
   }, [search]);
 
@@ -56,11 +53,16 @@ const Registration = () => {
   }, [jamTrack, jamTrackArtistName]);
 
   return (
-    <Fragment>
+    loading ? (
+      <div className="text-center">
+        <div className="spinner-border" role="status">
+          <span className="sr-only">Loading...</span>
+        </div>
+      </div>
+    ) : <Fragment>
       <Row className="text-left mb-3">
         <Col>
           <h5 id="modalLabel">{pageTitle}</h5>
-          {jamTrack?.id}
         </Col>
       </Row>
       <JKRegistrationForm jamTrack={jamTrack} jamTrackArtistName={jamTrackArtistName} />

jam-ui/src/components/jamtracks/JKJamTrackTrack.js

@@ -1,5 +1,4 @@
 import React, { useState, useEffect } from 'react';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import JKInstrumentIcon from '../profile/JKInstrumentIcon';
 import { Howl } from 'howler';
 import { useJamTrackPreview } from '../../context/JamTrackPreviewContext';
@@ -11,7 +10,7 @@ import { useJamTrack } from '../../hooks/useJamTrack';
 
 const JKJamTrackTrack = ({ track }) => {
   const [isPlaying, setIsPlaying] = useState(false);
-  const [isLoaded, setIsLoaded] = useState(false);
+  //const [isLoaded, setIsLoaded] = useState(false);
   const [isLoading, setIsLoading] = useState(false);
   const [trackInfo, setTrackInfo] = useState(null);
   const [trackSound, setTrackSound] = useState(null);
@@ -94,7 +93,7 @@ const JKJamTrackTrack = ({ track }) => {
           setIsPlaying(false);
         },
         onload: () => {
-          setIsLoaded(true);
+          //setIsLoaded(true);
           setIsLoading(false);
           sound.play();
           setIsPlaying(true);
@@ -112,7 +111,6 @@ const JKJamTrackTrack = ({ track }) => {
   return (
     <div className="mb-1 d-flex align-items-center jamtrack-track">
       <span>
-        {/* <FontAwesomeIcon icon={isPlaying ? 'pause-circle' : 'play-circle'} size="2x" onClick={togglePlay} /> */}
         <button onClick={togglePlay} style={{ border: 'none', background: 'none', width: '40px' }}>
           {isPlaying ? (
             <img src={pauseIcon} alt="Pause" width="30" />

jam-ui/src/components/jamtracks/JKJamTracksFilter.js

@@ -44,6 +44,15 @@ const JKJamTracksFilter = () => {
     }
   }, [query]);
 
+  useEffect(() => {
+    if (artist) {
+     setAutoCompleteInputValue(artist);
+    }
+    if (query) {
+      setAutoCompleteInputValue(query);
+    }
+  }, [artist, query]);
+
   const queryOptions = selected => {
     const options = {
       per_page: PER_PAGE,

jam-ui/src/components/public/JKDownloads.js

@@ -4,8 +4,6 @@ import { getClientDownloads } from '../../helpers/rest'
 import DownloadButtonMacAppleMx from '../../assets/img/downloads/Download-Button-Mac-Apple-Mx.svg'
 import DownloadButtonMacIntel from '../../assets/img/downloads/Download-Button-Mac-Intel.svg'
 import DownloadButtonWindows from '../../assets/img/downloads/Download-Button-Windows.svg'
-import DownloadButtonWindowsLegacy from '../../assets/img/downloads/Download-Button-Windows-Legacy.svg'
-import DownloadButtonMacLegacy from '../../assets/img/downloads/Download-Button-Mac-Legacy.svg'
 import { Link } from 'react-router-dom'
 
 const JKDownloads = () => {
@@ -47,7 +45,7 @@ const JKDownloads = () => {
       }).then(data => {
         const platforms = Object.keys(data)
         const downloadUris = {}
-        platforms.filter(p => p === 'JamClientModern/MacOSX-M' || p === 'JamClientModern/MacOSX-Intel' || p === 'JamClientModern/Win32' || 'JamClient/MacOSX' || 'JamClient/Win32').forEach(platform => {
+        platforms.filter(p => p === 'JamClientModern/MacOSX-M' || p === 'JamClientModern/MacOSX-Intel' || p === 'JamClientModern/Win32').forEach(platform => {
           downloadUris[platform] = data[platform].uri
         })
         setDownloads(downloadUris)
@@ -62,6 +60,10 @@ const JKDownloads = () => {
     fetchClientDownloads()
   }, [])
 
+  const downloadLink = React.useMemo(() => {
+    if (!currentOS) return null
+    return downloads[`JamClientModern/${currentOS}`]
+  }, [currentOS]);
 
   const selectPlatform = (platform) => {
     console.log('_DEBUG_ platform', platform)
@@ -94,9 +96,9 @@ const JKDownloads = () => {
   const platformDisplayName = (platform) => {
     switch (platform) {
       case 'MacOSX-M':
-        return 'JamKazam for MacOSX (Apple M1,M2,...,MX)'
+        return 'JamKazam for Mac (Apple Silicon)'
       case 'MacOSX-Intel':
-        return 'JamKazam for MacOSX (Intel)'
+        return 'JamKazam for Mac (Intel)'
       case 'Win32':
         return 'JamKazam for Windows'
     }
@@ -115,15 +117,15 @@ const JKDownloads = () => {
           {/* <p>{currentOS}</p> */}
           <p>
             You must use the JamKazam app to get into online sessions with other musicians. Our app also gives you the most feature-rich experience for JamTracks, recordings, live broadcasting, and other features. Click the button below to download the JamKazam app installer, then double click the installer to run it. For more detailed instructions,&nbsp;
-            {isMacOS ? <a href="https://jamkazam.freshdesk.com/support/solutions/articles/66000130025">see this help article</a> : isWindows && <a href="https://jamkazam.freshdesk.com/support/solutions/articles/66000130024">see this help article</a>}.
+            {isMacOS ? <a href="https://jamkazam.freshdesk.com/support/solutions/articles/66000130025" target='_blank'>see this help article</a> : isWindows && <a href="https://jamkazam.freshdesk.com/support/solutions/articles/66000130024" target="_blank">see this help article</a>}.
           </p>
-          <div className='mt-4 d-flex align-items-center'>
+          <div className='mt-2 d-flex flex-column flex-md-row'>
-            <div className='mr-3' style={{ width: '20%' }}>
+            <div style={ { flexGrow: 0, flexShrink: 0, flexBasis: '25%' } }>
-              <a href="">
+              <a href={downloadLink} target='_blank'>
                 <img src={downloadImageUrl} alt="Download JamKazam" />
               </a>
             </div>
-            <div className='ml-5' style={{ width: '80%' }}>
+            <div className='mt-3 mt-lg-0 ml-lg-3' style={ { flexGrow: 1, flexShrink: 1, flexBasis: '75%' } }>
               <div>Need a different version?</div>
               <ul className='list-unstyled'>
                 {availablePlatforms.filter(platform => platform !== currentOS).map(platform => (
@@ -132,7 +134,7 @@ const JKDownloads = () => {
               </ul>
             </div>
           </div>
-          <div className='mt-5'>
+          <div className='mt-1 mt-lg-4'>
             <div><strong>System Requirements</strong></div>
             {isMacOS ? (
               <p>
@@ -140,7 +142,7 @@ const JKDownloads = () => {
                 - macOS 10.15 (Catalina) or higher <br />
                 - 75MB hard disk space for app installation <br />
                 - External audio interface for audio processing (<a href="https://jamkazam.freshdesk.com/support/solutions/articles/66000122513" target='_blank'>see recommendations if you don't have one</a>) <br />
-                - Ability to connect computer to home router using Ethernet cable. WiFi not recommended (<a href='https://jamkazam.freshdesk.com/support/solutions/articles/66000124756' target='_blank'></a>learn how to do this) <br />
+                - Ability to connect computer to home router using Ethernet cable. WiFi not recommended (<a href='https://jamkazam.freshdesk.com/support/solutions/articles/66000124756' target='_blank'>learn how to do this</a>) <br />
                 - Broadband internet service with at least 1Mbps download and upload bandwidth (3-5Mbps preferred) <br />
               </p>
             ) : isWindows ? (

jam-ui/src/components/public/JKDownloadsLegacy.js

@@ -45,7 +45,7 @@ const JKDownloadsLegacy = () => {
       }).then(data => {
         const platforms = Object.keys(data)
         const downloadUris = {}
-        platforms.filter(p => p === 'JamClientModern/MacOSX-M' || p === 'JamClientModern/MacOSX-Intel' || p === 'JamClientModern/Win32' || 'JamClient/MacOSX' || 'JamClient/Win32').forEach(platform => {
+        platforms.filter(p => p === 'JamClient/MacOSX' || p === 'JamClient/Win32').forEach(platform => {
           downloadUris[platform] = data[platform].uri
         })
         setDownloads(downloadUris)
@@ -70,6 +70,11 @@ const JKDownloadsLegacy = () => {
     }
   }, [currentOS])
 
+    const downloadLink = React.useMemo(() => {
+      if (!currentOS) return null
+      return downloads[`JamClient/${currentOS}`]
+    }, [currentOS]);
+
   const selectPlatform = (platform) => {
     setSelectedPlatform(platform)
   }
@@ -97,7 +102,7 @@ const JKDownloadsLegacy = () => {
   const platformDisplayName = (platform) => {
     switch (platform) {
       case 'MacOSX':
-        return 'JamKazam for MacOSX (Legacy)'
+        return 'JamKazam for Mac (Legacy)'
       case 'Win32':
         return 'JamKazam for Windows (Legacy)'
     }
@@ -117,15 +122,15 @@ const JKDownloadsLegacy = () => {
           <p>{selectedPlatform}</p> */}
           <p>
             You must use the JamKazam app to get into online sessions with other musicians. Our app also gives you the most feature-rich experience for JamTracks, recordings, live broadcasting, and other features. Click the button below to download the JamKazam app installer, then double click the installer to run it. For more detailed instructions,&nbsp;
-            {isMacOS ? <a href="https://jamkazam.freshdesk.com/support/solutions/articles/66000130025">see this help article</a> : isWindows && <a href="https://jamkazam.freshdesk.com/support/solutions/articles/66000130024">see this help article</a>}.
+            {isMacOS ? <a href="https://jamkazam.freshdesk.com/support/solutions/articles/66000130025" target="_blank">see this help article</a> : isWindows && <a href="https://jamkazam.freshdesk.com/support/solutions/articles/66000130024" target="_blank">see this help article</a>}.
           </p>
-          <div className='mt-4 d-flex align-items-center'>
+          <div className='mt-2 d-flex flex-column flex-md-row'>
-            <div className='mr-3' style={{ width: '20%' }}>
+            <div style={ { flexGrow: 0, flexShrink: 0, flexBasis: '25%' } }>
-              <a href="">
+              <a href={downloadLink} target='_blank'>
                 <img src={downloadImageUrl} alt="Download JamKazam" />
               </a>
             </div>
-            <div className='ml-5' style={{ width: '80%' }}>
+            <div className='mt-3 mt-lg-0 ml-lg-3' style={ { flexGrow: 1, flexShrink: 1, flexBasis: '75%' } }>
               <div>Need a different version?</div>
               <ul className='list-unstyled'>
                 {availablePlatforms.filter(platform => platform !== selectedPlatform).map(platform => (
@@ -137,7 +142,7 @@ const JKDownloadsLegacy = () => {
               </ul>
             </div>
           </div>
-          <div className='mt-5'>
+          <div className='mt-1 mt-lg-4'>
             <div><strong>System Requirements</strong></div>
             {selectedPlatform === 'MacOSX' ? (
               <p>
@@ -145,7 +150,7 @@ const JKDownloadsLegacy = () => {
                 - macOS 10.8 (Mountain Lion) or higher <br />
                 - 75MB hard disk space for app installation <br />
                 - External audio interface for audio processing (<a href="https://jamkazam.freshdesk.com/support/solutions/articles/66000122513" target='_blank'>see recommendations if you don't have one</a>) <br />
-                - Ability to connect computer to home router using Ethernet cable. WiFi not recommended (<a href='https://jamkazam.freshdesk.com/support/solutions/articles/66000124756' target='_blank'></a>learn how to do this) <br />
+                - Ability to connect computer to home router using Ethernet cable. WiFi not recommended (<a href='https://jamkazam.freshdesk.com/support/solutions/articles/66000124756' target='_blank'>learn how to do this</a>) <br />
                 - Broadband internet service with at least 1Mbps download and upload bandwidth (3-5Mbps preferred) <br />
                 - Note that the audio interface and Ethernet links to same places as other Mac links above
               </p>

jam-ui/src/context/UserAuth.js

@@ -60,6 +60,7 @@ export default function UserAuth({ children, path }) {
   );
 }
 
-// UserAuth.propTypes = {
+UserAuth.propTypes = {
-//   children: PropTypes.oneOfType([PropTypes.func, PropTypes.array])
+  children: PropTypes.node.isRequired,
-// };
+  path: PropTypes.string
+};

jam-ui/src/helpers/apiFetch.js

@@ -19,7 +19,7 @@ function updateOptions(options) {
 }
 
 function secureFetch(path, options) {
-  const baseUrl = process.env.REACT_APP_API_BASE_URL
+  const baseUrl = options['baseUrl'] || process.env.REACT_APP_API_BASE_URL
   return new Promise((resolve, reject) => {
     fetch(baseUrl + path, options).then(response => {
       // response only can be ok in range of 2XX
@@ -49,7 +49,7 @@ function secureFetch(path, options) {
     .catch(error => {
       //it will be invoked mostly for network errors
       //do what ever you want to do with error here
-      console.log(error);
+      console.error(error);
       reject(error);
     });
   });

jam-ui/src/helpers/rest.js

@@ -464,6 +464,17 @@ export const getJamTrack = options => {
   });
 };
 
+export const getJamTrackBySlug = options => {
+  const { slug } = options;
+  return new Promise((resolve, reject) => {
+    apiFetch(`/jamtracks/${slug}`, {
+      baseUrl: process.env.REACT_APP_CLIENT_BASE_URL
+    })
+      .then(response => resolve(response))
+      .catch(error => reject(error));
+  });
+}
+
 export const addJamtrackToShoppingCart = (options = {}) => {
   return new Promise((resolve, reject) => {
     apiFetch(`/shopping_carts/add_jamtrack`, {

jam-ui/src/hooks/useJamTrackShopping.js

@@ -41,7 +41,7 @@ const useJamTrackShopping = () => {
         history.push('/shopping-cart');
       }
     } catch (error) {
-      console.log(error);
+      console.error(error);
       toast.error(t('search.list.add_error_alert'));
     }
   };

jam-ui/src/hooks/useShoppingCart.js

@@ -20,22 +20,6 @@ export const useShoppingCart = () => {
     return totalPrice;
   }, [shoppingCart]);
 
- 
-
-  // const getCartItems = async () => {
-  //   try {
-  //     setLoading(true);
-  //     const resp = await getShoppingCart();
-  //     const data = await resp.json();
-  //     setShoppingCart(data);
-  //   } catch (error) {
-  //     console.log(error);
-  //     setError(error);
-  //   }finally{
-  //     setLoading(false);
-  //   }
-  // }
-
   const getCartItems = useCallback(async () => {
     try {
       setLoading(true);
@@ -43,25 +27,13 @@ export const useShoppingCart = () => {
       const data = await resp.json();
       setShoppingCart(data);
     } catch (error) {
-      console.log(error);
+      console.error(error);
       setError(error);
     }finally{
       setLoading(false);
     }
   }, []);
  
-  // const addCartItem = async (options) => {
-  //   try {
-  //     const resp = await addJamtrackToShoppingCart(options);
-  //     const data = await resp.json();
-  //     setShoppingCart([...shoppingCart, data]);
-  //     return data;
-  //   } catch (error) {
-  //     console.log(error);
-  //     return false;
-  //   }
-  // }
-
   const addCartItem = useCallback(async (options) => {
     try {
       const resp = await addJamtrackToShoppingCart(options);
@@ -69,41 +41,23 @@ export const useShoppingCart = () => {
       setShoppingCart([...shoppingCart, data]);
       return data;
     } catch (error) {
-      console.log(error);
+      console.error(error);
       return false;
     }
   }, [shoppingCart]);
 
-  // const removeCartItem = async (id) => {
-  //   try {
-  //     await removeShoppingCart({id});
-  //     setShoppingCart(shoppingCart.filter(item => item.id !== id));
-  //     return true;
-  //   } catch (error) {
-  //     console.log(error);
-  //     return false;
-  //   }
-  
-  // }
-
   const removeCartItem = useCallback(async (id) => {
     try {
       await removeShoppingCart({id});
       setShoppingCart(shoppingCart.filter(item => item.id !== id));
       return true;
     } catch (error) {
-      console.log(error);
+      console.error(error);
       return false;
     }
   
   }, []);
 
-
-  
-  // const hasOnlyFreeItemsInShoppingCart = () => {
-  //   return shoppingCart.length === 0 || shoppingCart.every(item => item.product_info.free);
-  // }
-
   const hasOnlyFreeItemsInShoppingCart = useCallback(() => {
     return shoppingCart.length === 0 || shoppingCart.every(item => item.product_info.free);
   }, [shoppingCart]);

web/app/controllers/jam_tracks_controller.rb

@@ -0,0 +1,7 @@
+class JamTracksController < ApplicationController
+  #this controller is meant to provide JamTrack data that can be publicly accessible
+  #it is meant to be used withour authentication
+  def show
+    @jam_track = JamTrack.find_by!(slug: params[:slug])
+  end
+end

web/app/views/jam_tracks/show.rabl

@@ -0,0 +1,3 @@
+object @jam_track
+
+attributes :id, :name

web/config/initializers/cors.rb

@@ -7,4 +7,13 @@ Rails.application.config.middleware.insert_before 0, Rack::Cors do
       methods: [:get, :post, :delete, :options],
       credentials: true
   end
+
+  allow do
+    origins Rails.configuration.spa_origin
+
+    resource '/jamtracks/*',
+      headers: :any,
+      methods: [:get],
+      credentials: true
+  end
 end

web/config/routes.rb

@@ -88,6 +88,8 @@ Rails.application.routes.draw do
   match '/retailer/:id/teacher', to: 'landings#retailer_teacher_register', via: :get, as: 'retailer_teacher_register'
   match '/posa/:slug', to: 'landings#posa_activation', via: :get, as: 'posa_activation'
 
+  get '/jamtracks/:slug' => 'jam_tracks#show', :as => 'jam_track_by_slug'
+
   # redirect /jamtracks to jamtracks  browse page
   get '/jamtracks', to: redirect('/client#/jamtrack/search')