seth
/
jam-cloud
mirror of https://bitbucket.org/jamkazam/jam-cloud.git
1
0
Fork 0
Code Issues Actions Packages Projects Releases Wiki Activity

fix for genres and instrument loading in profile page

This commit is contained in:
Nuwan 2024-09-19 13:50:34 +05:30
parent b876e1e253
commit 0993c9a6b6
1 changed files with 64 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

132
jam-ui/src/components/page/JKEditProfile.js
View File

@ -10,7 +10,6 @@ import { getInstruments, getGenres, updateUser, getCountries, getRegions, getCit
import JKProfileAvatarUpload from '../profile/JKProfileAvatarUpload';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { Prompt } from 'react-router';
// import useUserProfile from '../../hooks/useUserProfile';
import { useAppData } from '../../context/AppDataContext';
function JKEditProfile() {
@ -113,7 +112,7 @@ function JKEditProfile() {
};
useEffect(() => {
if (instrumentsInitialLoadingDone || musicInstruments.length === 0) return;
if (instrumentsInitialLoadingDone || musicInstruments.length === 0 || userMusicInstruments.length === 0) return;
const updatedMusicInstruments = musicInstruments.map(musicInstrument => {
const instrument = getValues('instruments').find(instrument => instrument.instrument_id === musicInstrument.id);
@ -151,8 +150,8 @@ function JKEditProfile() {
};
useEffect(() => {
if (genreInitialLoadingDone || genres.length === 0) return;
if (genreInitialLoadingDone || genres.length === 0 || userGenres.length === 0) return;
const updatedGenres = genres.map(genre => {
const userGenre = userGenres.find(userGenre => userGenre.genre_id === genre.id);
if (userGenre) {
@ -167,7 +166,6 @@ function JKEditProfile() {
setGenreInitialLoadingDone(true);
}, [userGenres, genres]);
const fetchCountries = () => {
getCountries()
.then(response => {
@ -682,78 +680,76 @@ function JKEditProfile() {
</Card>
</Col>
<Col sm="12" md="6">
<Card className="mt-3 mt-md-0">
<CardHeader>
<h5>{t('genres')}</h5>
</CardHeader>
<CardBody data-testid="genres" className="bg-light" style={{ overflowY: 'scroll', height: 300 }}>
<FormGroup check>
{genreInitialLoadingDone &&
genres.map((genre, index) => {
return (
<Row key={genre.genre_id}>
<Col md={4}>
<Input
onChange={e => {
handleGenreChange(e, genre);
}}
type="checkbox"
checked={genre.checked}
/>
<Label check for="check">
{genre.description}
</Label>
</Col>
</Row>
);
})}
</FormGroup>
</CardBody>
</Card>
<Card className="mt-3">
<Card className="mt-3 mt-md-0">
<CardHeader>
<h5>{t('instruments')}</h5>
</CardHeader>
<CardBody data-testid="instruments" className="bg-light" style={{ overflowY: 'scroll', height: 300 }}>
<FormGroup check>
{instrumentsInitialLoadingDone &&
musicInstruments.map((musicInstrument, index) => {
return (
<Row key={musicInstrument.id} className="mb-1">
<Col md={5}>
<Input
onChange={e => {
handleInstrumentSelect(e, musicInstrument);
}}
type="checkbox"
checked={musicInstrument.checked}
/>
{musicInstruments.map(musicInstrument => {
return (
<Row key={musicInstrument.id} className="mb-1">
<Col md={5}>
<Input
onChange={e => {
handleInstrumentSelect(e, musicInstrument);
}}
type="checkbox"
checked={musicInstrument.checked}
/>
<Label check for="check">
{musicInstrument.description}
</Label>
</Col>
<Col md={7}>
<Select
value={
musicInstrument.checked
? PROFICIENCIES.find(p => parseInt(p.value) === musicInstrument.proficiency_level)
: null
}
onChange={e => {
handleInstrumentProficiencyChange(e, musicInstrument);
}}
options={PROFICIENCIES}
isDisabled={!musicInstrument.checked}
/>
</Col>
</Row>
);
})}
<Label check for="check">
{musicInstrument.description}
</Label>
</Col>
<Col md={7}>
<Select
value={
musicInstrument.checked
? PROFICIENCIES.find(p => parseInt(p.value) === musicInstrument.proficiency_level)
: null
}
onChange={e => {
handleInstrumentProficiencyChange(e, musicInstrument);
}}
options={PROFICIENCIES}
isDisabled={!musicInstrument.checked}
/>
</Col>
</Row>
);
})}
</FormGroup>
</CardBody>
</Card>
<Card className="mt-3">
<CardHeader>
<h5>{t('genres')}</h5>
</CardHeader>
<CardBody data-testid="genres" className="bg-light" style={{ overflowY: 'scroll', height: 300 }}>
<FormGroup check>
{genres.map(genre => {
return (
<Row key={genre.genre_id}>
<Col md={4}>
<Input
onChange={e => {
handleGenreChange(e, genre);
}}
type="checkbox"
checked={genre.checked}
/>
<Label check for="check">
{genre.description}
</Label>
</Col>
</Row>
);
})}
</FormGroup>
</CardBody>
</Card>
</Col>
</Row>
</Form>