jamtracks related UI fixes
This commit is contained in:
Nuwan
parent
f389250aa8
commit
d3a9a7c1e5
|
|
@ -21,6 +21,7 @@ const JKJamTrackArtists = ({ artists, showArtists, onSelect }) => {
|
|||
<Row>
|
||||
<Col>
|
||||
<strong>{t('search.search_results.artists')}</strong>
|
||||
show artists: {showArtists.toString()}
|
||||
</Col>
|
||||
</Row>
|
||||
{artists.length > 0 ? (
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@ const JKJamTrackPreview = ({ jamTrack }) => {
|
|||
return (
|
||||
<Container>
|
||||
<Row>
|
||||
{jamTrack.tracks.map((track, index) => (
|
||||
{jamTrack.tracks.filter(t => t.track_type !== 'Click').map((track, index) => (
|
||||
<Fragment key={track.id} >
|
||||
<Col className={ index + 1 > 6 && !expanded ? 'd-none' : null}>
|
||||
<JKJamTrackTrack track={track} />
|
||||
|
|
|
|||
|
|
@ -35,7 +35,8 @@ const JKJamTrackTrack = ({ track }) => {
|
|||
if (track.part && track.part !== info['instrumentDescription']) {
|
||||
info['part'] = `(${track.part})`;
|
||||
}
|
||||
} else {
|
||||
} else if (track.track_type === 'Master' && track.part) {
|
||||
info['instrumentDescription'] = track.part;
|
||||
}
|
||||
|
||||
let no_audio = true;
|
||||
|
|
|
|||
|
|
@ -101,7 +101,7 @@ const JKJamTracksAutoComplete = ({
|
|||
|
||||
return (
|
||||
<Row className="mb-2">
|
||||
<Col md={8}>
|
||||
<Col md={12}>
|
||||
<FormGroup className="mb-3">
|
||||
<div className="d-flex align-items-center">
|
||||
<InputGroup>
|
||||
|
|
@ -158,7 +158,7 @@ const JKJamTracksAutoComplete = ({
|
|||
alignContent: 'flex-start'
|
||||
}}
|
||||
>
|
||||
<div style={{ width: '50%' }}>{track.name}</div>
|
||||
<div style={{ width: '50%' }}>Song: {track.name}</div>
|
||||
<div>{track.original_artist}</div>
|
||||
</div>
|
||||
</ListGroupItem>
|
||||
|
|
|
|||
|
|
@ -14,11 +14,11 @@ import { useResponsive } from '@farfetch/react-context-responsive';
|
|||
const JKJamTracksFilter = () => {
|
||||
const { t } = useTranslation('jamtracks');
|
||||
const [jamTracks, setJamTracks] = useState([]);
|
||||
const [artists, setArtists] = useState([]);
|
||||
//const [artists, setArtists] = useState([]);
|
||||
const [selected, setSelected] = useState(null);
|
||||
const [searchTerm, setSearchTerm] = useState('');
|
||||
const [showDropdown, setShowDropdown] = useState(false);
|
||||
const [showArtists, setShowArtists] = useState(false);
|
||||
//const [showArtists, setShowArtists] = useState(false);
|
||||
const [nextOffset, setNextOffset] = useState(null);
|
||||
const [autoCompleteInputValue, setAutoCompleteInputValue] = useState('');
|
||||
const [page, setPage] = useState(1);
|
||||
|
|
@ -58,10 +58,10 @@ const JKJamTracksFilter = () => {
|
|||
|
||||
const handleOnSelect = async selected => {
|
||||
setPage(1);
|
||||
setArtists([]);
|
||||
//setArtists([]);
|
||||
setJamTracks([]);
|
||||
setSearchTerm('');
|
||||
setShowArtists(false);
|
||||
//setShowArtists(false);
|
||||
setSelected(selected);
|
||||
const params = queryOptions(selected);
|
||||
await fetchJamTracks(params);
|
||||
|
|
@ -69,26 +69,27 @@ const JKJamTracksFilter = () => {
|
|||
|
||||
const handleOnEnter = async queryStr => {
|
||||
setPage(1);
|
||||
setArtists([]);
|
||||
//setArtists([]);
|
||||
setJamTracks([]);
|
||||
setSelected(x => null);
|
||||
setSearchTerm(queryStr);
|
||||
fetchArtists(queryStr);
|
||||
//setShowArtists(false);
|
||||
//fetchArtists(queryStr);
|
||||
const params = queryOptions(queryStr);
|
||||
console.log('handleOnEnter _params', params, selected);
|
||||
await fetchJamTracks(params);
|
||||
};
|
||||
|
||||
const handleOnSelectArtist = async artist => {
|
||||
setPage(1);
|
||||
const selectedOpt = {
|
||||
type: 'artist',
|
||||
original_artist: artist.original_artist
|
||||
};
|
||||
setShowDropdown(false);
|
||||
setAutoCompleteInputValue('');
|
||||
await handleOnSelect(selectedOpt);
|
||||
};
|
||||
// const handleOnSelectArtist = async artist => {
|
||||
// setPage(1);
|
||||
// const selectedOpt = {
|
||||
// type: 'artist',
|
||||
// original_artist: artist.original_artist
|
||||
// };
|
||||
// setShowDropdown(false);
|
||||
// setAutoCompleteInputValue('');
|
||||
// await handleOnSelect(selectedOpt);
|
||||
// };
|
||||
|
||||
const handleOnNextJamTracksPage = async () => {
|
||||
const currentQuery = selected ? selected : searchTerm;
|
||||
|
|
@ -96,25 +97,8 @@ const JKJamTracksFilter = () => {
|
|||
await fetchJamTracks(params);
|
||||
};
|
||||
|
||||
// const fetchJamTracks = options => {
|
||||
// getJamTracks(options)
|
||||
// .then(resp => {
|
||||
// return resp.json();
|
||||
// })
|
||||
// .then(data => {
|
||||
// console.log('jamtracks', data);
|
||||
// setJamTracks(prev => [...prev, ...data.jamtracks]);
|
||||
// setNextOffset(data.next);
|
||||
// setPage(page => page + 1);
|
||||
// })
|
||||
// .catch(error => {
|
||||
// console.error('error', error);
|
||||
// });
|
||||
// };
|
||||
|
||||
const fetchJamTracks = async options => {
|
||||
try {
|
||||
console.log('fetchJamTracks', options);
|
||||
const resp = await getJamTracks(options);
|
||||
const data = await resp.json();
|
||||
console.log('jamtracks', data);
|
||||
|
|
@ -125,25 +109,25 @@ const JKJamTracksFilter = () => {
|
|||
}
|
||||
};
|
||||
|
||||
const fetchArtists = query => {
|
||||
const options = {
|
||||
limit: 100
|
||||
};
|
||||
options.artist_search = query;
|
||||
// const fetchArtists = query => {
|
||||
// const options = {
|
||||
// limit: 100
|
||||
// };
|
||||
// options.artist_search = query;
|
||||
|
||||
getJamTrackArtists(options)
|
||||
.then(resp => {
|
||||
return resp.json();
|
||||
})
|
||||
.then(data => {
|
||||
console.log('artists', data);
|
||||
setArtists(data.artists);
|
||||
setShowArtists(true);
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('error', error);
|
||||
});
|
||||
};
|
||||
// getJamTrackArtists(options)
|
||||
// .then(resp => {
|
||||
// return resp.json();
|
||||
// })
|
||||
// .then(data => {
|
||||
// console.log('artists', data);
|
||||
// setArtists(data.artists);
|
||||
// setShowArtists(true);
|
||||
// })
|
||||
// .catch(error => {
|
||||
// console.error('error', error);
|
||||
// });
|
||||
// };
|
||||
|
||||
return (
|
||||
<Card>
|
||||
|
|
@ -178,14 +162,14 @@ const JKJamTracksFilter = () => {
|
|||
)}
|
||||
</Row>
|
||||
|
||||
<div className="mb-3">
|
||||
{/* <div className="mb-3">
|
||||
<JKJamTrackArtists
|
||||
artists={artists}
|
||||
searchTerm={searchTerm}
|
||||
onSelect={handleOnSelectArtist}
|
||||
showArtists={showArtists}
|
||||
/>
|
||||
</div>
|
||||
</div> */}
|
||||
<JKJamTracksList
|
||||
selectedType={selected?.type}
|
||||
searchTerm={searchTerm}
|
||||
|
|
@ -206,6 +190,7 @@ const JKJamTrackFilterLinks = ({ shoppingCart, wrapperClassNames, shoppingCartCl
|
|||
<a
|
||||
data-testid="download-pdf"
|
||||
href="https://s3.amazonaws.com/jamkazam-public/public/lists/all-jamkazam-jamtracks.pdf"
|
||||
target='_blank'
|
||||
>
|
||||
<strong>PDF file</strong>
|
||||
</a>
|
||||
|
|
|
|||
|
|
@ -31,12 +31,12 @@ const JKJamTracksList = ({ selectedType, searchTerm, jamTracks, nextOffset, onNe
|
|||
{jamTracks.length > 0 && (
|
||||
<Row>
|
||||
<Col>
|
||||
<Table striped bordered className="fs--1" data-testid="jamtracks-table">
|
||||
<Table striped bordered className="fs-0" data-testid="jamtracks-table">
|
||||
<thead className="bg-200 text-900">
|
||||
<tr>
|
||||
<th width="30%">{t('search.list.song')}</th>
|
||||
<th width="55%">{t('search.list.tracks')}</th>
|
||||
<th>{t('search.list.shop')}</th>
|
||||
<th className='text-center' align='center'>{t('search.list.shop')} </th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
|
|
@ -44,12 +44,13 @@ const JKJamTracksList = ({ selectedType, searchTerm, jamTracks, nextOffset, onNe
|
|||
{jamTracks.map((jamTrack, index) => (
|
||||
<tr key={`jamtrck-preview-row-${jamTrack.id}`}>
|
||||
<td className="track-name-col">
|
||||
{jamTrack.name} by {jamTrack.original_artist}
|
||||
{jamTrack.name} <br />
|
||||
<span className='fs--1'>by {jamTrack.original_artist}</span>
|
||||
</td>
|
||||
<td className="track-tracks-col">
|
||||
<td className="track-tracks-col fs--1">
|
||||
<JKJamTrackPreview jamTrack={jamTrack} />
|
||||
</td>
|
||||
<td className="purchase-button-col">
|
||||
<td className="purchase-button-col text-center" align='center'>
|
||||
<JKJamTrackPurchaseButton jamTrack={jamTrack} />
|
||||
</td>
|
||||
</tr>
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
"page_title": "Find JamTracks",
|
||||
"search_input": {
|
||||
"title": "Search",
|
||||
"placeholder": "Search by artist, song, style, or keyword"
|
||||
"placeholder": "enter artist or song name"
|
||||
},
|
||||
"search_results": {
|
||||
"artists": "Search Results: Artists",
|
||||
|
|
|
|||
Loading…
Reference in New Issue