profile image upload wip
This commit is contained in:
Nuwan
parent
6546cc08bc
commit
4c161025e8
|
|
@ -15,7 +15,7 @@ import {
|
|||
getRegions,
|
||||
getCities
|
||||
} from '../../helpers/rest';
|
||||
|
||||
import JKModalDialog from '../common/JKModalDialog';
|
||||
|
||||
function JKEditProfile() {
|
||||
const { t } = useTranslation('profile');
|
||||
|
|
@ -28,6 +28,7 @@ function JKEditProfile() {
|
|||
const [countries, setCountries] = useState([]);
|
||||
const [regions, setRegions] = useState([]);
|
||||
const [cities, setCities] = useState([]);
|
||||
const [showPhotoModal, setShowPhotoModal] = useState(false);
|
||||
|
||||
const [_, forceUpdate] = useReducer(x => x + 1, 0);
|
||||
|
||||
|
|
@ -62,6 +63,7 @@ function JKEditProfile() {
|
|||
if (currentUser && !currentUserLoaded) {
|
||||
setCurrentUserLoaded(true);
|
||||
fetchCurentUser().then(data => {
|
||||
console.log("userData", data)
|
||||
updateUserData(data);
|
||||
fetchInstruments();
|
||||
fetchGenres();
|
||||
|
|
@ -76,7 +78,7 @@ function JKEditProfile() {
|
|||
.then(response => {
|
||||
if (response.ok) {
|
||||
return response.json();
|
||||
}else{
|
||||
} else {
|
||||
reject('Error fetching user data');
|
||||
}
|
||||
})
|
||||
|
|
@ -90,7 +92,7 @@ function JKEditProfile() {
|
|||
setValue('lastName', data.last_name);
|
||||
setValue('country', data.country ? data.country : '');
|
||||
setValue('state', data.state ? data.state : '');
|
||||
setValue('city', data.city? data.city : '');
|
||||
setValue('city', data.city ? data.city : '');
|
||||
setValue('biography', data.biography);
|
||||
setValue('subscribeEmail', data.subscribe_email);
|
||||
setValue('virtualBand', data.virtual_band);
|
||||
|
|
@ -104,7 +106,7 @@ function JKEditProfile() {
|
|||
if (data.country && data.state) {
|
||||
fetchCities(data.country, data.state);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const fetchInstruments = () => {
|
||||
getInstruments()
|
||||
|
|
@ -124,7 +126,7 @@ function JKEditProfile() {
|
|||
setInstrumentsInitialLoadingDone(false);
|
||||
const updatedMusicInstruments = musicInstruments.map(musicInstrument => {
|
||||
const instrument = getValues('instruments').find(instrument => instrument.instrument_id === musicInstrument.id);
|
||||
|
||||
|
||||
if (instrument) {
|
||||
musicInstrument.proficiency_level = instrument.proficiency_level;
|
||||
musicInstrument.priority = instrument.priority;
|
||||
|
|
@ -140,7 +142,6 @@ function JKEditProfile() {
|
|||
});
|
||||
setMusicInstruments(updatedMusicInstruments);
|
||||
setInstrumentsInitialLoadingDone(true);
|
||||
|
||||
}, [musicInstruments, getValues('instruments')]);
|
||||
|
||||
const fetchGenres = () => {
|
||||
|
|
@ -247,11 +248,11 @@ function JKEditProfile() {
|
|||
};
|
||||
|
||||
const handleInstrumentProficiencyChange = (option, musicInstrument) => {
|
||||
const userInstrument = getValues('instruments').find(instrument => instrument.instrument_id === musicInstrument.id);
|
||||
const userInstrument = getValues('instruments').find(instrument => instrument.instrument_id === musicInstrument.id);
|
||||
if (!userInstrument) {
|
||||
const updatedInstruments = [...getValues('instruments'), { ...musicInstrument, proficiency_level: option.value}];
|
||||
const updatedInstruments = [...getValues('instruments'), { ...musicInstrument, proficiency_level: option.value }];
|
||||
setValue('instruments', updatedInstruments);
|
||||
}else{
|
||||
} else {
|
||||
const updatedInstruments = getValues('instruments').map(instrument => {
|
||||
if (instrument.instrument_id === musicInstrument.id) {
|
||||
instrument.proficiency_level = option.value;
|
||||
|
|
@ -336,7 +337,7 @@ function JKEditProfile() {
|
|||
|
||||
const handleChange = () => {
|
||||
const params = getValues();
|
||||
|
||||
|
||||
const data = {
|
||||
first_name: params.firstName,
|
||||
last_name: params.lastName,
|
||||
|
|
@ -352,332 +353,368 @@ function JKEditProfile() {
|
|||
genres: params.genres.map(genre => genre.genre_id)
|
||||
};
|
||||
|
||||
const instrments = params.instruments.filter(instrument =>
|
||||
instrument.instrument_id !== null &&
|
||||
instrument.proficiency_level !== null
|
||||
const instrments = params.instruments.filter(
|
||||
instrument => instrument.instrument_id !== null && instrument.proficiency_level !== null
|
||||
);
|
||||
|
||||
data.instruments = instrments;
|
||||
|
||||
updateUser(currentUser.id, data).then(response => {
|
||||
if (response.ok) {
|
||||
console.log('User data updated');
|
||||
}else{
|
||||
console.log('Error updating user data');
|
||||
}
|
||||
}).catch(error => console.log(error));
|
||||
updateUser(currentUser.id, data)
|
||||
.then(response => {
|
||||
if (response.ok) {
|
||||
console.log('User data updated');
|
||||
} else {
|
||||
console.log('Error updating user data');
|
||||
}
|
||||
})
|
||||
.catch(error => console.log(error));
|
||||
};
|
||||
|
||||
const togglePhotoModel = () => {
|
||||
setShowPhotoModal(!showPhotoModal);
|
||||
};
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<FalconCardHeader title={t('page_title', { ns: 'profile' })} titleClass="font-weight-bold" />
|
||||
<CardBody className="pt-3" style={{ backgroundColor: '#edf2f9' }}>
|
||||
<Form>
|
||||
<Row>
|
||||
<Col>
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<h5>{t('basics')}</h5>
|
||||
</CardHeader>
|
||||
<CardBody className="bg-light">
|
||||
<Row>
|
||||
<Col md={4}>
|
||||
<FormGroup>
|
||||
<Label for="firstName">{t('first_name')}</Label>
|
||||
<Controller
|
||||
name="firstName"
|
||||
control={control}
|
||||
render={({ field: { onChange, value } }) => (
|
||||
<Input
|
||||
value={value}
|
||||
onChange={e => {
|
||||
onChange(e);
|
||||
handleTextInputChage();
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</FormGroup>
|
||||
</Col>
|
||||
<Col md={4}>
|
||||
<FormGroup>
|
||||
<Label for="lastName">{t('last_name')}</Label>
|
||||
<Controller
|
||||
name="lastName"
|
||||
control={control}
|
||||
render={({ field: { onChange, value } }) => (
|
||||
<Input
|
||||
value={value}
|
||||
onChange={e => {
|
||||
onChange(e);
|
||||
handleTextInputChage();
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</FormGroup>
|
||||
</Col>
|
||||
<Col md={4}>
|
||||
<div className="d-flex align-items-center">
|
||||
<div>
|
||||
<JKCurrentUserAvatar size="sm" />
|
||||
</div>
|
||||
<div>
|
||||
<a href="#">{t('change_photo')}</a>
|
||||
</div>
|
||||
</div>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row>
|
||||
<Col md={4}>
|
||||
<FormGroup>
|
||||
<Label for="country">{t('country')}</Label>
|
||||
{countries.length > 0 && (
|
||||
<>
|
||||
<Card>
|
||||
<FalconCardHeader title={t('page_title', { ns: 'profile' })} titleClass="font-weight-bold" />
|
||||
<CardBody className="pt-3" style={{ backgroundColor: '#edf2f9' }}>
|
||||
<Form>
|
||||
<Row>
|
||||
<Col>
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<h5>{t('basics')}</h5>
|
||||
</CardHeader>
|
||||
<CardBody className="bg-light">
|
||||
<Row>
|
||||
<Col md={4}>
|
||||
<FormGroup>
|
||||
<Label for="firstName">{t('first_name')}</Label>
|
||||
<Controller
|
||||
name="country"
|
||||
name="firstName"
|
||||
control={control}
|
||||
render={({ field: { onChange, value } }) => {
|
||||
const country = countries.find(country => country.countrycode === value);
|
||||
return (
|
||||
<Select
|
||||
value={{ value: country.countrycode, label: country.countryname }}
|
||||
onChange={handleCountryChange}
|
||||
options={countries.map(country => {
|
||||
return { value: country.countrycode, label: country.countryname };
|
||||
})}
|
||||
/>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</FormGroup>
|
||||
</Col>
|
||||
<Col md={4}>
|
||||
<FormGroup>
|
||||
<Label for="state">{t('state')}</Label>
|
||||
{regions.length > 0 && (
|
||||
<Controller
|
||||
name="state"
|
||||
control={control}
|
||||
render={({ field: { onChange, value } }) => {
|
||||
const region = regions.find(region => region.region === value);
|
||||
return (
|
||||
<Select
|
||||
value={{ value: region.region, label: region.region }}
|
||||
ref={regionRef}
|
||||
onChange={handleRegionChange}
|
||||
options={regions.map(region => {
|
||||
return { value: region.region, label: region.region };
|
||||
})}
|
||||
/>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</FormGroup>
|
||||
</Col>
|
||||
<Col md={4}>
|
||||
<FormGroup>
|
||||
<Label for="city">{t('city')}</Label>
|
||||
<Controller
|
||||
name="city"
|
||||
control={control}
|
||||
render={({ field: { onChange, value } }) => (
|
||||
<Select
|
||||
value={{ value: value, label: value }}
|
||||
ref={cityRef}
|
||||
onChange={handleCityChange}
|
||||
options={cities.map(city => {
|
||||
return { value: city, label: city };
|
||||
})}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</FormGroup>
|
||||
</Col>
|
||||
</Row>
|
||||
<FormGroup>
|
||||
<Label for="biography">{t('musical_biography')}</Label>
|
||||
<Controller
|
||||
name="biography"
|
||||
control={control}
|
||||
render={({ field: { onChange, value } }) => (
|
||||
<Input
|
||||
style={{ height: 200 }}
|
||||
type="textarea"
|
||||
value={value}
|
||||
onChange={e => {
|
||||
onChange(e);
|
||||
handleTextInputChage();
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</FormGroup>
|
||||
<FormGroup check>
|
||||
<Controller
|
||||
name="subscribeEmail"
|
||||
control={control}
|
||||
render={({ field: { onChange, value } }) => (
|
||||
<Input
|
||||
checked={value}
|
||||
type="checkbox"
|
||||
onChange={e => {
|
||||
onChange(e);
|
||||
handleChange();
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
<Label check for="subscribeEmail">
|
||||
{t('accept_emails')}
|
||||
</Label>
|
||||
</FormGroup>
|
||||
</CardBody>
|
||||
</Card>
|
||||
|
||||
<Card className="mt-3">
|
||||
<CardHeader>
|
||||
<h5>{t('interests')}</h5>
|
||||
</CardHeader>
|
||||
<CardBody className="bg-light">
|
||||
<FormGroup check>
|
||||
<Controller
|
||||
name="virtualBand"
|
||||
control={control}
|
||||
render={({ field: { onChange, value } }) => (
|
||||
<Input
|
||||
checked={value}
|
||||
onChange={e => {
|
||||
onChange(e);
|
||||
handleChange();
|
||||
}}
|
||||
type="checkbox"
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
<Label check for="check">
|
||||
{t('interest_joining_virtual_band')}
|
||||
</Label>
|
||||
</FormGroup>
|
||||
<FormGroup check>
|
||||
<Controller
|
||||
name="traditionalBand"
|
||||
control={control}
|
||||
render={({ field: { onChange, value } }) => (
|
||||
<Input
|
||||
checked={value}
|
||||
onChange={e => {
|
||||
onChange(e);
|
||||
handleChange();
|
||||
}}
|
||||
type="checkbox"
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
<Label check for="check">
|
||||
{t('interest_joining_in_person_band')}
|
||||
</Label>
|
||||
</FormGroup>
|
||||
<FormGroup check>
|
||||
<Controller
|
||||
name="cowriting"
|
||||
control={control}
|
||||
render={({ field: { onChange, value } }) => (
|
||||
<Input
|
||||
checked={value}
|
||||
onChange={e => {
|
||||
onChange(e);
|
||||
handleChange();
|
||||
}}
|
||||
type="checkbox"
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
<Label check for="check">
|
||||
{t('interest_cowriting_songs')}
|
||||
</Label>
|
||||
</FormGroup>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</Col>
|
||||
<Col>
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<h5>{t('instruments')}</h5>
|
||||
</CardHeader>
|
||||
<CardBody 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={4}>
|
||||
render={({ field: { onChange, value } }) => (
|
||||
<Input
|
||||
value={value}
|
||||
onChange={e => {
|
||||
handleInstrumentSelect(e, musicInstrument);
|
||||
onChange(e);
|
||||
handleTextInputChage();
|
||||
}}
|
||||
type="checkbox"
|
||||
checked={musicInstrument.checked}
|
||||
/>
|
||||
|
||||
<Label check for="check">
|
||||
{musicInstrument.description}
|
||||
</Label>
|
||||
</Col>
|
||||
<Col md={3}>
|
||||
)}
|
||||
/>
|
||||
</FormGroup>
|
||||
</Col>
|
||||
<Col md={4}>
|
||||
<FormGroup>
|
||||
<Label for="lastName">{t('last_name')}</Label>
|
||||
<Controller
|
||||
name="lastName"
|
||||
control={control}
|
||||
render={({ field: { onChange, value } }) => (
|
||||
<Input
|
||||
value={value}
|
||||
onChange={e => {
|
||||
onChange(e);
|
||||
handleTextInputChage();
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</FormGroup>
|
||||
</Col>
|
||||
<Col md={4}>
|
||||
<div className="d-flex align-items-center">
|
||||
<div>
|
||||
<JKCurrentUserAvatar size="sm" />
|
||||
</div>
|
||||
<div>
|
||||
<a
|
||||
href="#"
|
||||
onClick={e => {
|
||||
e.preventDefault();
|
||||
togglePhotoModel();
|
||||
}}
|
||||
>
|
||||
{t('change_photo')}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row>
|
||||
<Col md={4}>
|
||||
<FormGroup>
|
||||
<Label for="country">{t('country')}</Label>
|
||||
{countries.length > 0 && (
|
||||
<Controller
|
||||
name="country"
|
||||
control={control}
|
||||
render={({ field: { onChange, value } }) => {
|
||||
const country = countries.find(country => country.countrycode === value);
|
||||
return (
|
||||
<Select
|
||||
value={{ value: country.countrycode, label: country.countryname }}
|
||||
onChange={handleCountryChange}
|
||||
options={countries.map(country => {
|
||||
return { value: country.countrycode, label: country.countryname };
|
||||
})}
|
||||
/>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</FormGroup>
|
||||
</Col>
|
||||
<Col md={4}>
|
||||
<FormGroup>
|
||||
<Label for="state">{t('state')}</Label>
|
||||
{regions.length > 0 && (
|
||||
<Controller
|
||||
name="state"
|
||||
control={control}
|
||||
render={({ field: { onChange, value } }) => {
|
||||
const region = regions.find(region => region.region === value);
|
||||
return (
|
||||
<Select
|
||||
value={{ value: region.region, label: region.region }}
|
||||
ref={regionRef}
|
||||
onChange={handleRegionChange}
|
||||
options={regions.map(region => {
|
||||
return { value: region.region, label: region.region };
|
||||
})}
|
||||
/>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</FormGroup>
|
||||
</Col>
|
||||
<Col md={4}>
|
||||
<FormGroup>
|
||||
<Label for="city">{t('city')}</Label>
|
||||
<Controller
|
||||
name="city"
|
||||
control={control}
|
||||
render={({ field: { onChange, value } }) => (
|
||||
<Select
|
||||
value={
|
||||
musicInstrument.checked
|
||||
? PROFICIENCIES.find(p => parseInt(p.value) === musicInstrument.proficiency_level)
|
||||
: null
|
||||
}
|
||||
onChange={e => {
|
||||
handleInstrumentProficiencyChange(e, musicInstrument);
|
||||
}}
|
||||
options={PROFICIENCIES}
|
||||
isDisabled={!musicInstrument.checked}
|
||||
value={{ value: value, label: value }}
|
||||
ref={cityRef}
|
||||
onChange={handleCityChange}
|
||||
options={cities.map(city => {
|
||||
return { value: city, label: city };
|
||||
})}
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
);
|
||||
})}
|
||||
</FormGroup>
|
||||
</CardBody>
|
||||
</Card>
|
||||
<Card className="mt-3">
|
||||
<CardHeader>
|
||||
<h5>{t('genres')}</h5>
|
||||
</CardHeader>
|
||||
<CardBody 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>
|
||||
</Col>
|
||||
</Row>
|
||||
</Form>
|
||||
</CardBody>
|
||||
</Card>
|
||||
)}
|
||||
/>
|
||||
</FormGroup>
|
||||
</Col>
|
||||
</Row>
|
||||
<FormGroup>
|
||||
<Label for="biography">{t('musical_biography')}</Label>
|
||||
<Controller
|
||||
name="biography"
|
||||
control={control}
|
||||
render={({ field: { onChange, value } }) => (
|
||||
<Input
|
||||
style={{ height: 200 }}
|
||||
type="textarea"
|
||||
value={value}
|
||||
onChange={e => {
|
||||
onChange(e);
|
||||
handleTextInputChage();
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</FormGroup>
|
||||
<FormGroup check>
|
||||
<Controller
|
||||
name="subscribeEmail"
|
||||
control={control}
|
||||
render={({ field: { onChange, value } }) => (
|
||||
<Input
|
||||
checked={value}
|
||||
type="checkbox"
|
||||
onChange={e => {
|
||||
onChange(e);
|
||||
handleChange();
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
<Label check for="subscribeEmail">
|
||||
{t('accept_emails')}
|
||||
</Label>
|
||||
</FormGroup>
|
||||
</CardBody>
|
||||
</Card>
|
||||
|
||||
<Card className="mt-3">
|
||||
<CardHeader>
|
||||
<h5>{t('interests')}</h5>
|
||||
</CardHeader>
|
||||
<CardBody className="bg-light">
|
||||
<FormGroup check>
|
||||
<Controller
|
||||
name="virtualBand"
|
||||
control={control}
|
||||
render={({ field: { onChange, value } }) => (
|
||||
<Input
|
||||
checked={value}
|
||||
onChange={e => {
|
||||
onChange(e);
|
||||
handleChange();
|
||||
}}
|
||||
type="checkbox"
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
<Label check for="check">
|
||||
{t('interest_joining_virtual_band')}
|
||||
</Label>
|
||||
</FormGroup>
|
||||
<FormGroup check>
|
||||
<Controller
|
||||
name="traditionalBand"
|
||||
control={control}
|
||||
render={({ field: { onChange, value } }) => (
|
||||
<Input
|
||||
checked={value}
|
||||
onChange={e => {
|
||||
onChange(e);
|
||||
handleChange();
|
||||
}}
|
||||
type="checkbox"
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
<Label check for="check">
|
||||
{t('interest_joining_in_person_band')}
|
||||
</Label>
|
||||
</FormGroup>
|
||||
<FormGroup check>
|
||||
<Controller
|
||||
name="cowriting"
|
||||
control={control}
|
||||
render={({ field: { onChange, value } }) => (
|
||||
<Input
|
||||
checked={value}
|
||||
onChange={e => {
|
||||
onChange(e);
|
||||
handleChange();
|
||||
}}
|
||||
type="checkbox"
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
<Label check for="check">
|
||||
{t('interest_cowriting_songs')}
|
||||
</Label>
|
||||
</FormGroup>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</Col>
|
||||
<Col>
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<h5>{t('instruments')}</h5>
|
||||
</CardHeader>
|
||||
<CardBody 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={4}>
|
||||
<Input
|
||||
onChange={e => {
|
||||
handleInstrumentSelect(e, musicInstrument);
|
||||
}}
|
||||
type="checkbox"
|
||||
checked={musicInstrument.checked}
|
||||
/>
|
||||
|
||||
<Label check for="check">
|
||||
{musicInstrument.description}
|
||||
</Label>
|
||||
</Col>
|
||||
<Col md={3}>
|
||||
<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 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>
|
||||
</Col>
|
||||
</Row>
|
||||
</Form>
|
||||
</CardBody>
|
||||
</Card>
|
||||
<JKModalDialog
|
||||
show={showPhotoModal}
|
||||
onToggle={togglePhotoModel}
|
||||
title={t('lobby.chat_notifications.title', { ns: 'sessions' })}
|
||||
showFooter={false}
|
||||
>
|
||||
<div className='d-flex flex-column'>
|
||||
<div className='d-flex justify-content-center'>
|
||||
<JKCurrentUserAvatar size="xl" />
|
||||
</div>
|
||||
|
||||
<div className="d-flex justify-content-center">
|
||||
<Button color="secondary" outline className="ml-2" onClick={() => {}}>
|
||||
{t('photo_modal.upload', { ns: 'profile' })}
|
||||
</Button>
|
||||
<Button color="secondary" outline className="ml-2" onClick={() => {}}>
|
||||
{t('photo_modal.delete', { ns: 'profile' })}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</JKModalDialog>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -19,5 +19,12 @@
|
|||
"accept_emails": "Accept emails from JamKazam about the JamKazam services",
|
||||
"interest_joining_virtual_band": "I'm interested in joining a virtual/online band",
|
||||
"interest_joining_in_person_band": "I'm interested in joining an in-person band",
|
||||
"interest_cowriting_songs": "I'm interested in co-writing songs with others"
|
||||
"interest_cowriting_songs": "I'm interested in co-writing songs with others",
|
||||
"photo_modal": {
|
||||
"title": "Update profile photo",
|
||||
"upload": "Upload Photo",
|
||||
"delete": "Delete Photo",
|
||||
"cacel": "Cancel",
|
||||
"save": "Save"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue