working on select compoonents

src/assets/img/select_deploy_icon.svg

@@ -0,0 +1,10 @@
+<svg id="Groupe_6242" data-name="Groupe 6242" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="18.513" height="13.621" viewBox="0 0 18.513 13.621">
+  <defs>
+    <clipPath id="clip-path">
+      <rect id="Rectangle_148" data-name="Rectangle 148" width="18.513" height="13.621"/>
+    </clipPath>
+  </defs>
+  <g id="Groupe_3766" data-name="Groupe 3766" transform="translate(0 0)" clip-path="url(#clip-path)">
+    <path id="Tracé_22406" data-name="Tracé 22406" d="M18.42.873,10.3,13.364a.565.565,0,0,1-.922.036L.118,1.354A.565.565,0,0,1,.552.445L17.932,0a.565.565,0,0,1,.488.873" transform="translate(0 0)"/>
+  </g>
+</svg>

src/components/CountrySelect.jsx

@@ -1,28 +1,45 @@
-import React from "react";
+import { useState } from "react";
-import { COUNTRIES } from "../utils/countries.js";
 import { v4 as uuidv4 } from "uuid";
+import { useWordpressCustomData } from "../hooks/WordpressFetchData.js";
+import { useUserContext } from "../hooks/useUserContext.jsx";
 
 export default function CountrySelect() {
-	const test = COUNTRIES.map((country) => {
+	const availableCountries = useWordpressCustomData("/available-countries");
-		if (!country.value) return;
+	const { country, changeCountry } = useUserContext();
-		return (
-			<li key={uuidv4()} value={country.value}>
-				<img
-					className='flag'
-					src={`https://flagsapi.com/${country.value}/flat/32.png`}
-					alt=''
-				/>
-				{country.title}
-			</li>
-		);
-	});
 
-	if (!COUNTRIES) return;
+	const [isSubmenuOpen, setIsSubmenuOpen] = useState(false);
+
+	if (!availableCountries || !country) return <div className='country-select'>Loading...</div>;
+
+	function handleChangeCountry(key, value) {
+		changeCountry({ name: value, iso: key });
+		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]}
+		</li>
+	));
+
+	if (!countryOptions) return;
 
 	return (
 		<div className='country-select'>
-			<button className='country-select__toggle'>Salut</button>
+			<button className='country-select__toggle' onClick={handleShowHideSubmenu}>
-			<ul className='country-select__country-list'>{test}</ul>;
+				<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>
 		</div>
 	);
 }

src/components/ProfileSelect.jsx

@@ -1,10 +1,35 @@
-import React from "react";
+import React, { useState } from "react";
 import { v4 as uuidv4 } from "uuid";
+import { useUserContext } from "../hooks/useUserContext";
+
+export default function CountrySelect({ options }) {
+	const [isSubmenuOpen, setIsSubmenuOpen] = useState(false);
+	const { profile, changeProfile } = useUserContext();
+
+	function handleShowHideSubmenu() {
+		setIsSubmenuOpen(!isSubmenuOpen);
+	}
+
+	function handleChangeProfile() {
+		changeProfile("subcontractor_employee");
+	}
+
+	if (!profile) return <div className='profile-select dropdown-select'> Loading...</div>;
+
+	const selectOptions = Object.keys(options).map((key) => (
+		<li key={uuidv4()} className='dropdown-select__option' onClick={() => handleChangeProfile()}>
+			{options[key]}
+		</li>
+	));
 
-export default function CountrySelect() {
 	return (
-		<select className='profile-select'>
+		<div className='profile-select dropdown-select'>
-			<option className='country-select__country-list'>salut</option>;
+			<button className='dropdown-select__toggle' onClick={handleShowHideSubmenu}>
-		</select>
+				{profile}
+			</button>
+			<ul className='dropdown-select__select-list' aria-hidden={!isSubmenuOpen}>
+				{selectOptions}
+			</ul>
+		</div>
 	);
 }