refactoring component

src/components/ui/ProfileSelect.jsx

@@ -1,11 +1,16 @@
 import React, { useState } from "react";
 import { v4 as uuidv4 } from "uuid";
 import { useUser } from "../../hooks/useUser";
+import translationsJSON from "../../data/profile.json";
 
 export default function CountrySelect({ options }) {
 	const [isSubmenuOpen, setIsSubmenuOpen] = useState(false);
 	const { profile, changeProfile } = useUser();
 
+	const { language } = useUser();
+	const languageTranslationExists = translationsJSON.hasOwnProperty(language);
+	const screenTranslations = languageTranslationExists ? translationsJSON[language] : translationsJSON["en"];
+
 	function handleShowHideSubmenu() {
 		setIsSubmenuOpen(!isSubmenuOpen);
 	}
@@ -14,21 +19,25 @@ export default function CountrySelect({ options }) {
 		changeProfile("subcontractor_employee");
 	}
 
-	if (!profile) return <div className='profile-select dropdown-select'> Loading...</div>;
+	console.log(screenTranslations);
 
-	const selectOptions = Object.keys(options).map((key) => (
-		<li key={uuidv4()} className='dropdown-select__option' onClick={() => handleChangeProfile()}>
-			{options[key]}
-		</li>
-	));
+	// console.log(options);
 
 	return (
-		<div className='profile-select dropdown-select'>
-			<button className='dropdown-select__toggle' onClick={handleShowHideSubmenu}>
-				{profile}
-			</button>
-			<ul className='dropdown-select__select-list' aria-hidden={!isSubmenuOpen}>
-				{selectOptions}
+		<div className='profile-select'>
+			<ul className='' aria-hidden={!isSubmenuOpen}>
+				<li value='civilian' onClick={handleChangeProfile}>
+					{screenTranslations.civilian}
+				</li>
+				<li value='driver' onClick={handleChangeProfile}>
+					{screenTranslations.driver}
+				</li>
+				<li value='lhoist_employee' onClick={handleChangeProfile}>
+					{screenTranslations.lhoist_employee}
+				</li>
+				<li value='subcontractor_employee' onClick={handleChangeProfile}>
+					{screenTranslations.subcontractor_employee}
+				</li>
 			</ul>
 		</div>
 	);