From 4c161025e8b1ade3f0e062afe79e3e292ce5ad0b Mon Sep 17 00:00:00 2001 From: Nuwan Date: Fri, 16 Feb 2024 18:25:05 +0530 Subject: [PATCH] profile image upload wip --- jam-ui/src/components/page/JKEditProfile.js | 679 +++++++++++--------- jam-ui/src/i18n/locales/en/profile.json | 9 +- 2 files changed, 366 insertions(+), 322 deletions(-) diff --git a/jam-ui/src/components/page/JKEditProfile.js b/jam-ui/src/components/page/JKEditProfile.js index 9f03b6afe..904ed0f73 100644 --- a/jam-ui/src/components/page/JKEditProfile.js +++ b/jam-ui/src/components/page/JKEditProfile.js @@ -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 ( - - - -
- - - - -
{t('basics')}
- - - - - - - ( - { - onChange(e); - handleTextInputChage(); - }} - /> - )} - /> - - - - - - ( - { - onChange(e); - handleTextInputChage(); - }} - /> - )} - /> - - - -
-
- -
- -
- - - - - - - {countries.length > 0 && ( + <> + + + + + + + + +
{t('basics')}
+ + + + + + { - const country = countries.find(country => country.countrycode === value); - return ( - { - return { value: region.region, label: region.region }; - })} - /> - ); - }} - /> - )} - - - - - - ( - { - onChange(e); - handleTextInputChage(); - }} - /> - )} - /> - - - ( - { - onChange(e); - handleChange(); - }} - /> - )} - /> - - - - - - - -
{t('interests')}
- - - - ( - { - onChange(e); - handleChange(); - }} - type="checkbox" - /> - )} - /> - - - - ( - { - onChange(e); - handleChange(); - }} - type="checkbox" - /> - )} - /> - - - - ( - { - onChange(e); - handleChange(); - }} - type="checkbox" - /> - )} - /> - - - - - - - - -
{t('instruments')}
- - - - {instrumentsInitialLoadingDone && - musicInstruments.map((musicInstrument, index) => { - return ( - - + render={({ field: { onChange, value } }) => ( { - handleInstrumentSelect(e, musicInstrument); + onChange(e); + handleTextInputChage(); }} - type="checkbox" - checked={musicInstrument.checked} /> - - - - + )} + /> + + + + + + ( + { + onChange(e); + handleTextInputChage(); + }} + /> + )} + /> + + + + + + + + + + + {countries.length > 0 && ( + { + const country = countries.find(country => country.countrycode === value); + return ( + { + return { value: region.region, label: region.region }; + })} + /> + ); + }} + /> + )} + + + + + + ( { - handleGenreChange(e, genre); - }} - type="checkbox" - checked={genre.checked} - /> - - - - ); - })} - - - - - -
- - + )} + /> + + + + + + ( + { + onChange(e); + handleTextInputChage(); + }} + /> + )} + /> + + + ( + { + onChange(e); + handleChange(); + }} + /> + )} + /> + + + + + + + +
{t('interests')}
+ + + + ( + { + onChange(e); + handleChange(); + }} + type="checkbox" + /> + )} + /> + + + + ( + { + onChange(e); + handleChange(); + }} + type="checkbox" + /> + )} + /> + + + + ( + { + onChange(e); + handleChange(); + }} + type="checkbox" + /> + )} + /> + + + + + + + + +
{t('instruments')}
+ + + + {instrumentsInitialLoadingDone && + musicInstruments.map((musicInstrument, index) => { + return ( + + + { + handleInstrumentSelect(e, musicInstrument); + }} + type="checkbox" + checked={musicInstrument.checked} + /> + + + + + { + handleGenreChange(e, genre); + }} + type="checkbox" + checked={genre.checked} + /> + + + + ); + })} + + + + + + + + + +
+
+ +
+ +
+ + +
+
+ + ); } diff --git a/jam-ui/src/i18n/locales/en/profile.json b/jam-ui/src/i18n/locales/en/profile.json index 3c0a61c4e..4528de013 100644 --- a/jam-ui/src/i18n/locales/en/profile.json +++ b/jam-ui/src/i18n/locales/en/profile.json @@ -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" + } }