fixes & improvements in signup and downloads pages

This commit is contained in:
Nuwan 2025-01-16 13:17:25 +05:30
parent 4804877452
commit 1772f5a46f
15 changed files with 124 additions and 113 deletions

View File

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

View File

@ -4,15 +4,14 @@ 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 { useAuth } from '../../../context/UserAuth';
import { getJamTrackBySlug } from '../../../helpers/rest';
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(() => {
@ -21,30 +20,28 @@ const Registration = () => {
const params = new URLSearchParams(search);
const jamtrackId = params.get('JamTrackId');
const jamtrackSlug = params.get('JamTrackSlug');
const artistName = params.get('JamTrackArtistName');
console.log('_DEBUG_ jamtrackId', jamtrackId);
setLoading(true);
if (artistName && artistName !== "") {
setJamTrackArtistName(artistName);
}else if (jamtrackId) {
const fetchJamTrack = async (id) => {
setLoading(false);
} 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);
// if (jt && jt.allow_free && currentUser && currentUser.show_free_jamtrack) {
// setJamTrack(jt);
// }
fetchJamTrack(jamtrackSlug);
}else{
setLoading(false);
}
}, [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} />

View File

@ -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" />

View File

@ -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,

View File

@ -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='mr-3' style={{ width: '20%' }}>
<a href="">
<div className='mt-2 d-flex flex-column flex-md-row'>
<div style={ { flexGrow: 0, flexShrink: 0, flexBasis: '25%' } }>
<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 ? (

View File

@ -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='mr-3' style={{ width: '20%' }}>
<a href="">
<div className='mt-2 d-flex flex-column flex-md-row'>
<div style={ { flexGrow: 0, flexShrink: 0, flexBasis: '25%' } }>
<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>

View File

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

View File

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

View File

@ -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`, {

View File

@ -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'));
}
};

View File

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

View File

@ -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

View File

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

View File

@ -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

View File

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