Antoine/lhoist-stay-safe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactoring component

Browse Source
This commit is contained in:
Antoine M 2024-02-21 11:06:39 +01:00
parent 3b9b6477eb
commit 78582036e3
1 changed files with 7 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/components/ui/CountrySelect.jsx
View File

@ -6,11 +6,10 @@ import CountriesJSON from "../../data/countries/countries.json";
export default function CountrySelect({ label }) { export default function CountrySelect({ label }) {
const { country, changeCountry } = useUser(); const { country, changeCountry } = useUser();
const { language, screensTranslations } = useUser(); const { language, screensTranslations } = useUser();
const [isSubmenuOpen, setIsSubmenuOpen] = useState(false); const [isSubmenuOpen, setIsSubmenuOpen] = useState(false);
function handleChangeCountry(country) { function handleChangeCountry(country) {
changeCountry({ name: country.fr, iso: country.alpha2 }); changeCountry({ name: country.fr, iso: country.alpha2, label: country[language.toLowerCase()] });
handleShowHideSubmenu(); handleShowHideSubmenu();
} }
function handleShowHideSubmenu() { function handleShowHideSubmenu() {
@ -24,7 +23,6 @@ export default function CountrySelect({ label }) {
if (event.type === "click") { if (event.type === "click") {
// !event.target.closest(".country-select") // !event.target.closest(".country-select")
setIsSubmenuOpen(false); setIsSubmenuOpen(false);
console.log("click");
} }
}, []); }, []);
const checkClick = useCallback((event) => { const checkClick = useCallback((event) => {
@ -43,7 +41,11 @@ export default function CountrySelect({ label }) {
}; };
}, [checkEsc, checkClick]); }, [checkEsc, checkClick]);
const countryOptions = CountriesJSON.map((country) => ( const countryAlphabeticList = CountriesJSON.sort((a, b) =>
a[language.toLowerCase()].localeCompare(b[language.toLowerCase()])
);
const countryOptions = countryAlphabeticList.map((country) => (
<li key={uuidv4()} className='country-select__option' onClick={() => handleChangeCountry(country)}> <li key={uuidv4()} className='country-select__option' onClick={() => handleChangeCountry(country)}>
<img className='flag' src={`/img/flags/32x32/${country.alpha2}.png`} alt={country.fr} /> <img className='flag' src={`/img/flags/32x32/${country.alpha2}.png`} alt={country.fr} />
{country[language.toLowerCase()]} {country[language.toLowerCase()]}
@ -62,7 +64,7 @@ export default function CountrySelect({ label }) {
src={`/img/flags/32x32/${country.iso}.png`} src={`/img/flags/32x32/${country.iso}.png`}
alt={country.fr} alt={country.fr}
/> />
{country.name} {country.label}
</button> </button>
<ul className='country-select__country-list' aria-hidden={!isSubmenuOpen}> <ul className='country-select__country-list' aria-hidden={!isSubmenuOpen}>
{countryOptions} {countryOptions}