add jamtrack and artist landing pages

jam-ui/cypress/e2e/jamtracks/my-jamtracks-page.cy.js

@@ -32,7 +32,7 @@ describe('JamTracks Page', () => {
       cy.get('input[type="search"]').type('ba');
       cy.wait('@getMyJamTracks_page1');
       cy.get('[data-testid=myJamTrackList] a').first().click();
-      cy.url().should('include', '/jamtracks/1');
+      cy.url().should('include', '/jamtrack/1');
     });
    })
   

jam-ui/src/components/affiliate/JKAffiliateLinks.js

@@ -3,10 +3,11 @@ import { Card, CardBody } from 'reactstrap';
 import FalconCardHeader from '../common/FalconCardHeader';
 import { useTranslation } from 'react-i18next';
 import JKJamTracksAutoComplete from '../jamtracks/JKJamTracksAutoComplete';
-import { getJamTracks, getAffiliatePartnerData, autocompleteJamTracks } from '../../helpers/rest';
+import { getJamTracks, getJamTrackArtists, getAffiliatePartnerData, autocompleteJamTracks } from '../../helpers/rest';
 import { useAuth } from '../../context/UserAuth';
 import { useHistory } from 'react-router-dom';
 import { useResponsive } from '@farfetch/react-context-responsive';
+import { Link } from 'react-router-dom';
 
 const JKAffiliateLinks = () => {
   const { t } = useTranslation('affiliate');
@@ -16,6 +17,7 @@ const JKAffiliateLinks = () => {
   const [affiliatePartnerId, setAffiliatePartnerId] = useState('xxxxx');
   const [affiliate, setAffiliate] = useState(null);
   const [jamTracks, setJamTracks] = useState([]);
+  const [jamTrackArtists, setJamTrackArtists] = useState([]);
   const [showDropdown, setShowDropdown] = useState(false);
   const [autoCompleteInputValue, setAutoCompleteInputValue] = useState('');
   const [jamTracksNextPage, setJamTracksNextPage] = useState(null);
@@ -42,11 +44,22 @@ const JKAffiliateLinks = () => {
       const resp = await getJamTracks(options);
       const data = await resp.json();
       console.log('data', data);
+      setJamTrackArtists([]);
       setJamTracks(data.jamtracks);
       setJamTracksNextPage(data.next);
     } catch (error) {}
   };
 
+  const fetchJamTrackArtists = async options => {
+    try {
+      const resp = await getJamTrackArtists(options);
+      const data = await resp.json();
+      console.log('data', data);
+      setJamTracks([]);
+      setJamTrackArtists(data.artists);
+    } catch (error) {}
+  };
+
   const queryOptions = selected => {
     const options = {
       limit: 100
@@ -75,14 +88,25 @@ const JKAffiliateLinks = () => {
     if (!jamTrack) {
       return '';
     }
-    return `${process.env.REACT_APP_CLIENT_BASE_URL}/jamtrack/landing/${jamTrack.plan_code}?affiliate=${affiliatePartnerId}`;
+    return `${process.env.REACT_APP_CLIENT_BASE_URL}/jamtracks/${encodeURIComponent(jamTrack.original_artist)}/${jamTrack.slug}?affiliate=${affiliatePartnerId}`;
+  }, [affiliatePartnerId]);
+
+  const jamTrackArtistLink = useMemo(() => artist => {
+    if (!artist) {
+      return '';
+    }
+    return `${process.env.REACT_APP_CLIENT_BASE_URL}/jamtracks/${encodeURIComponent(artist.original_artist)}?affiliate=${affiliatePartnerId}`;
   }, [affiliatePartnerId]);
 
   //autocomplete related code
   const handleOnSelect = selected => {
     console.log('onSelect', selected);
     const params = queryOptions(selected);
-    fetchJamTracks(params);
+    if(selected.type === 'artist') {
+      fetchJamTrackArtists(params);
+    }else {
+      fetchJamTracks(params);
+    }
   };
 
   const handleOnEnter = queryStr => {
@@ -132,18 +156,52 @@ const JKAffiliateLinks = () => {
                 </div>
                 <div>
                   {affiliate ? (
-                    <a href={jamTrackLink(jamTrack)} target="_blank">
+                    // <a href={jamTrackLink(jamTrack)} target="_blank">
+                    //   {jamTrackLink(jamTrack)}
+                    // </a>
+                    <Link to={`/jamtracks/${jamTrack.original_artist}/${jamTrack.slug}`}>
                       {jamTrackLink(jamTrack)}
-                    </a>
+                    </Link>
                   ) : (
-                    <a href="javascript:void(0);" onClick={() => history.push('/affiliate/agreement')}>
+                    // <a href="javascript:void(0);" onClick={() => history.push('/affiliate/agreement')}>
+                    //   {jamTrackLink(jamTrack)}
+                    // </a>
+                    <Link to={`/affiliate/agreement`} target="_blank">
                       {jamTrackLink(jamTrack)}
-                    </a>
+                    </Link>
                   )}
                 </div>
               </div>
             );
-          })}
+        })}
+
+        {jamTrackArtists &&
+          jamTrackArtists.map(artist => {
+            return (
+              <div key={artist.original_artist}>
+                <div>
+                  {t('links.affiliate_link_for')} {artist.original_artist}:
+                </div>
+                <div>
+                {affiliate ? (
+                    // <a href={jamTrackArtistLink(artist)} target="_blank">
+                    //   {jamTrackArtistLink(artist)}
+                    // </a>
+                    <Link to={`/jamtracks/${artist.original_artist}`}>
+                      {jamTrackArtistLink(artist)}
+                    </Link>
+                  ) : (
+                    // <a href="javascript:void(0);" onClick={() => history.push('/affiliate/agreement')}>
+                    //   {jamTrackArtistLink(artist)}
+                    // </a>
+                    <Link to={`/affiliate/agreement`} target="_blank">
+                      {jamTrackArtistLink(artist)}
+                    </Link>
+                  )}
+                </div>
+              </div>
+            );
+        })}
       </CardBody>
     </Card>
   );

jam-ui/src/components/dashboard/JKDashboardMain.js

@@ -51,6 +51,7 @@ import JKCheckout from '../shopping-cart/JKCheckout';
 import JKCheckoutSuccess from '../shopping-cart/JKCheckoutSuccess';
 import JKMyJamTracks from '../jamtracks/JKMyJamTracks';
 import JKJamTrackShow from '../jamtracks/JKJamTrackShow';
+import JKJamTracksLanding from '../jamtracks/JKJamTracksLanding';
 
 //import loadable from '@loadable/component';
 //const DashboardRoutes = loadable(() => import('../../layouts/JKDashboardRoutes'));
@@ -121,15 +122,15 @@ function JKDashboardMain() {
   // };
 
   const initJKScripts = () => {
-    
+
     if (scriptLoaded.current) {
       return;
     }
-   
+
 
     const app = window.JK.JamKazam();
 
-    const jamServer = new window.JK.JamServer(app, function(event_type) {
+    const jamServer = new window.JK.JamServer(app, function (event_type) {
       console.log('EVENT_TYPE', event_type);
     });
     jamServer.initialize();
@@ -139,11 +140,11 @@ function JKDashboardMain() {
     clientInit.init();
 
     window.JK.JamServer.connect() // singleton here defined in JamServer.js
-      .done(function() {
+      .done(function () {
         console.log('Jamserver connected...');
         //_initAfterConnect(true);
       })
-      .fail(function() {
+      .fail(function () {
         console.log('Jamserver connection error...');
         //_initAfterConnect(false);
       });
@@ -158,7 +159,7 @@ function JKDashboardMain() {
   };
 
   const registerTextMessageCallback = () => {
-    window.JK.JamServer.registerMessageCallback(window.JK.MessageType.TEXT_MESSAGE, function(header, payload) {
+    window.JK.JamServer.registerMessageCallback(window.JK.MessageType.TEXT_MESSAGE, function (header, payload) {
       console.log('registerTextMessageCallback payload', payload);
       //console.log('registerTextMessageCallback header', header);
       const msg = {
@@ -190,7 +191,7 @@ function JKDashboardMain() {
   };
 
   const registerChatMessageCallback = () => {
-    window.JK.JamServer.registerMessageCallback(window.JK.MessageType.CHAT_MESSAGE, function(header, payload) {
+    window.JK.JamServer.registerMessageCallback(window.JK.MessageType.CHAT_MESSAGE, function (header, payload) {
       console.log('registerChatMessageCallback ' + JSON.stringify(payload));
       if (payload !== undefined && payload.sender_id !== window.currentUser.id) {
         if (visibilityState === 'hidden' && Notification.permission === 'granted') {
@@ -199,7 +200,7 @@ function JKDashboardMain() {
               body: `${payload.sender_name}: ${truncate(payload.msg, 100)}`
               //icon: `${process.env.REACT_APP_CLIENT_BASE_URL}/assets/img/jamkazam-logo.png`
             });
-            notification.onclick = function(event) {
+            notification.onclick = function (event) {
               event.preventDefault(); // prevent the browser from focusing the Notification's tab
               window.focus();
               event.target.close();
@@ -219,13 +220,13 @@ function JKDashboardMain() {
   };
 
   const registerFriendRequest = () => {
-    window.JK.JamServer.registerMessageCallback(window.JK.MessageType.FRIEND_REQUEST, function(header, payload) {
+    window.JK.JamServer.registerMessageCallback(window.JK.MessageType.FRIEND_REQUEST, function (header, payload) {
       handleNotification(payload, header.type);
     });
   };
 
   const registerFriendRequestAccepted = () => {
-    window.JK.JamServer.registerMessageCallback(window.JK.MessageType.FRIEND_REQUEST_ACCEPTED, function(
+    window.JK.JamServer.registerMessageCallback(window.JK.MessageType.FRIEND_REQUEST_ACCEPTED, function (
       header,
       payload
     ) {
@@ -236,7 +237,7 @@ function JKDashboardMain() {
   };
 
   const registerSubscriptionCallback = () => {
-    window.JK.JamServer.registerMessageCallback(window.JK.MessageType.SUBSCRIPTION_MESSAGE, function(header, payload) {
+    window.JK.JamServer.registerMessageCallback(window.JK.MessageType.SUBSCRIPTION_MESSAGE, function (header, payload) {
       console.log('registerSubscriptionCallback payload', payload);
       console.log('registerSubscriptionCallback header', header);
       handleSubscriptionMessage(payload);
@@ -268,7 +269,7 @@ function JKDashboardMain() {
   };
 
   const handleSubscriptionMessage = payload => {
-    
+
   }
 
   useScript(`${process.env.REACT_APP_CLIENT_BASE_URL}/client_scripts`, initJKScripts);
@@ -299,7 +300,10 @@ function JKDashboardMain() {
           <PrivateRoute path="/affiliate/signups" component={JKAffiliateSignups} />
           <PrivateRoute path="/affiliate/earnings" component={JKAffiliateEarnings} />
           <PrivateRoute path="/affiliate/agreement" component={JKAffiliateAgreement} />
-          <PrivateRoute path="/jamtracks/:id" component={JKJamTrackShow} />
+          <PrivateRoute path="/jamtracks/:artist/:song_slug" component={JKJamTracksLanding} />
+          <PrivateRoute path="/jamtracks/:artist" component={JKJamTracksLanding} />
+          <PrivateRoute path="/jamtracks" component={JKJamTracksFilter} />
+          <PrivateRoute path="/jamtrack/:id" component={JKJamTrackShow} />
           <PrivateRoute path="/jamtracks" component={JKJamTracksFilter} />
           <PrivateRoute path="/my-jamtracks" component={JKMyJamTracks} />
           <PrivateRoute path="/shopping-cart" component={JKShoppingCart} />

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

@@ -0,0 +1,16 @@
+import React from 'react'
+import { useParams, Link } from 'react-router-dom';
+
+const JKJamTracksLanding = () => {
+  const { artist, song_slug } = useParams();
+  return (
+    <div>
+      <h1>JKJamTracksLanding</h1>
+      <p>artist: {artist}</p>
+      <p>song_slug: {song_slug}</p>
+      <Link to="/jamtracks">Back to JamTracks</Link>
+    </div>
+  )
+}
+
+export default JKJamTracksLanding

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

@@ -100,7 +100,7 @@ const JKMyJamTracks = () => {
               jamTracks.map((jamTrack, index) => (
                 <div key={jamTrack.id} ref={ref => (jamTracks.length - 1 === index ? setLastJamTrackRef(ref) : null)}>
                   <ListGroupItem>
-                    <Link to={`/jamtracks/${jamTrack.id}`}>{jamTrack.name}</Link>
+                    <Link to={`/jamtrack/${jamTrack.id}`}>{jamTrack.name}</Link>
                     {jamTrack.original_artist && ` by ${jamTrack.original_artist}`}
                   </ListGroupItem>
                 </div>

jam-ui/src/components/shopping-cart/JKCheckoutSuccess.js

@@ -43,7 +43,7 @@ const JKCheckoutSuccess = () => {
               )}
             </p>
             {jamtrack && (
-              <Link to={`/jamtracks/${jamtrack.id}`} className="btn btn-primary">
+              <Link to={`/jamtrack/${jamtrack.id}`} className="btn btn-primary">
                 {t('open_jamtrack')}
               </Link>
             )}

web/app/views/api_jam_tracks/show.rabl

@@ -1,6 +1,6 @@
 object @jam_track
 
-attributes :id, :name, :description, :recording_type, :original_artist, :songwriter, :publisher, :sales_region, :price, :version, :duration, :year, :plan_code, :allow_free, :download_price, :upgrade_price
+attributes :id, :name, :description, :recording_type, :original_artist, :songwriter, :publisher, :sales_region, :price, :version, :duration, :year, :plan_code, :allow_free, :download_price, :upgrade_price, :slug
 
 node :genres do |item|
   item.genres.select(:description).map(&:description)