fix errors while selecting country, region and city
This commit is contained in:
parent
95008f49e6
commit
17b0ea6111
|
|
@ -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();
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue