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

refactoring countrySelect

Browse Source
This commit is contained in:
Antoine M 2024-02-15 18:55:19 +01:00
parent 01ee7fe459
commit 0eebb2be4d
1 changed files with 50 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,31 +1,52 @@
import { useState } from "react"; import { useCallback, useEffect, useState } from "react";
import { v4 as uuidv4 } from "uuid"; import { v4 as uuidv4 } from "uuid";
import { useWordpressCustomData } from "../../services/WordpressFetchData.js";
import { useUser } from "../../hooks/useUser.jsx"; import { useUser } from "../../hooks/useUser.jsx";
import CountriesJSON from "../../data/countries/countries.json";
export default function CountrySelect() { export default function CountrySelect({ label }) {
const availableCountries = useWordpressCustomData("/available-countries");
const { country, changeCountry } = useUser(); const { country, changeCountry } = useUser();
const { language, screensTranslations } = useUser();
const [isSubmenuOpen, setIsSubmenuOpen] = useState(false); const [isSubmenuOpen, setIsSubmenuOpen] = useState(false);
if (!availableCountries || !country) return <div className='country-select'>Loading...</div>; function handleChangeCountry(country) {
changeCountry({ name: country.fr, iso: country.alpha2 });
function handleChangeCountry(key, value) {
changeCountry({ name: value, iso: key });
handleShowHideSubmenu(); handleShowHideSubmenu();
} }
function handleShowHideSubmenu() { function handleShowHideSubmenu() {
setIsSubmenuOpen(!isSubmenuOpen); setIsSubmenuOpen(!isSubmenuOpen);
} }
const countryOptions = Object.keys(availableCountries).map((key, value) => ( const checkEsc = useCallback((event) => {
<li if (event.key === "Escape") {
key={uuidv4()} setIsSubmenuOpen(false);
className='country-select__option' }
onClick={() => handleChangeCountry(key, availableCountries[key])}> if (event.type === "click") {
<img className='flag' src={`https://flagsapi.com/${key}/flat/32.png`} alt='' /> // !event.target.closest(".country-select")
{availableCountries[key]} setIsSubmenuOpen(false);
console.log("click");
}
}, []);
const checkClick = useCallback((event) => {
if (event.type === "click" && !event.target.closest(".country-select")) {
setIsSubmenuOpen(false);
}
}, []);
useEffect(() => {
document.addEventListener("keydown", checkEsc, false);
document.addEventListener("click", checkClick, false);
return () => {
document.removeEventListener("keydown", checkEsc, false);
document.removeEventListener("click", checkClick, false);
};
}, [checkEsc, checkClick]);
const countryOptions = CountriesJSON.map((country) => (
<li key={uuidv4()} className='country-select__option' onClick={() => handleChangeCountry(country)}>
<img className='flag' src={`/img/flags/32x32/${country.alpha2}.png`} alt={country.fr} />
{country[language.toLowerCase()]}
</li> </li>
)); ));
@ -33,13 +54,20 @@ export default function CountrySelect() {
return ( return (
<div className='country-select'> <div className='country-select'>
<button className='country-select__toggle' onClick={handleShowHideSubmenu}> <p className='country-select__label'>{label}</p>
<img className='flag' src={`https://flagsapi.com/${country.iso}/flat/32.png`} alt='' /> <div>
{country.name} <button className='country-select__toggle' onClick={handleShowHideSubmenu}>
</button> <img
<ul className='country-select__country-list' aria-hidden={!isSubmenuOpen}> className='flag'
{countryOptions} src={`/img/flags/32x32/${country.iso}.png`}
</ul> alt={country.fr}
/>
{country.name}
</button>
<ul className='country-select__country-list' aria-hidden={!isSubmenuOpen}>
{countryOptions}
</ul>
</div>
</div> </div>
); );
} }