fix errors while selecting country, region and city

This commit is contained in:
Nuwan 2024-03-11 22:23:12 +05:30
parent 95008f49e6
commit 17b0ea6111
1 changed files with 39 additions and 9 deletions

View File

@ -198,6 +198,7 @@ function JKEditProfile() {
}) })
.then(data => { .then(data => {
setRegions(data.regions); setRegions(data.regions);
skipRegionChange.current = false;
}) })
.catch(error => console.log(error)); .catch(error => console.log(error));
}; };
@ -322,17 +323,20 @@ function JKEditProfile() {
regionRef.current.select.clearValue(); regionRef.current.select.clearValue();
setCities([]); setCities([]);
cityRef.current.select.clearValue(); cityRef.current.select.clearValue();
fetchRegions(country.value); fetchRegions(country);
forceUpdate(); forceUpdate();
handleChange(); handleChange();
}; };
const handleRegionChange = selectedOpt => { const handleRegionChange = selectedOpt => {
console.log("region selectedOpt", selectedOpt)
if (!selectedOpt) return; if (!selectedOpt) return;
if (skipRegionChange.current) { if (skipRegionChange.current) {
skipRegionChange.current = false; skipRegionChange.current = false;
return; return;
} }
const state = selectedOpt.value; const state = selectedOpt.value;
const country = getValues('country'); const country = getValues('country');
setValue('state', state); setValue('state', state);
@ -470,13 +474,24 @@ function JKEditProfile() {
control={control} control={control}
render={({ field: { onChange, value } }) => { render={({ field: { onChange, value } }) => {
const country = countries.find(country => country.countrycode === value); const country = countries.find(country => country.countrycode === value);
if (!country) {
return (
<Select
data-testid="countrySelect"
onChange={handleCountryChange}
options={countries.map(c => {
return { value: c.countrycode, label: c.countryname };
})}
/>
);
}
return ( return (
<Select <Select
data-testid="countrySelect" data-testid="countrySelect"
value={{ value: country.countrycode, label: country.countryname }} value={{ value: country.countrycode, label: country.countryname }}
onChange={handleCountryChange} onChange={handleCountryChange}
options={countries.map(country => { options={countries.map(c => {
return { value: country.countrycode, label: country.countryname }; return { value: c.countrycode, label: c.countryname };
})} })}
/> />
); );
@ -494,16 +509,30 @@ function JKEditProfile() {
control={control} control={control}
render={({ field: { onChange, value } }) => { render={({ field: { onChange, value } }) => {
const region = regions.find(region => region.region === value); const region = regions.find(region => region.region === value);
if (region) {
return ( return (
<Select <Select
value={{ value: region?.region, label: region?.region }} isDisabled={getValues('country') === null || regions.length === 0}
value={{ value: region.region, label: region.region }}
ref={regionRef} ref={regionRef}
onChange={handleRegionChange} onChange={handleRegionChange}
options={regions.map(region => { options={regions.map(r => {
return { value: region?.region, label: region?.region }; return { value: r.region, label: r.region };
})} })}
/> />
); );
}else{
return (
<Select
isDisabled={getValues('country') === null || regions.length === 0}
ref={regionRef}
onChange={handleRegionChange}
options={regions.map(r => {
return { value: r.region, label: r.region };
})}
/>
);
}
}} }}
/> />
@ -517,11 +546,12 @@ function JKEditProfile() {
control={control} control={control}
render={({ field: { onChange, value } }) => ( render={({ field: { onChange, value } }) => (
<Select <Select
isDisabled={getValues('region') === null || cities.length === 0}
value={{ value: value, label: value }} value={{ value: value, label: value }}
ref={cityRef} ref={cityRef}
onChange={handleCityChange} onChange={handleCityChange}
options={cities.map(city => { options={cities.map(c => {
return { value: city, label: city }; return { value: c, label: c };
})} })}
/> />
)} )}
@ -539,7 +569,7 @@ function JKEditProfile() {
data-testid="biography" data-testid="biography"
style={{ height: 200 }} style={{ height: 200 }}
type="textarea" type="textarea"
value={value} value={value ? value : ''}
onChange={e => { onChange={e => {
onChange(e); onChange(e);
handleTextInputChage(); handleTextInputChage();