refactoring countrySelect

src/components/ui/CountrySelect.jsx

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