handling dynamic results content

src/components/results/ResultsModals.jsx

@@ -1,6 +1,7 @@
 import React, { useState } from "react";
 import Lottie from "lottie-react";
 import { useNavigate } from "react-router-dom";
+import Loading from "../animations/Loading";
 
 import Modal from "../../components/ui/Modal.jsx";
 import cup from "../../assets/img/illustrations/cup.svg";
@@ -9,11 +10,18 @@ import celebrationConfettis from "../../assets/animations/trophee-confettis.json
 import celebrationConfettisFixe from "../../assets/animations/trophee-confettis-fixe.json";
 import sucessIcon from "../../assets/img/icons/behaviour-type-success.svg";
 import modalBackground from "../../assets/img/shapes-background/modal-background.svg";
+import { useUser } from "../../hooks/useUser.jsx";
 
 export default function ResultsModals({ resultsDatas }) {
 	const navigate = useNavigate();
+
+	const { screensTranslations } = useUser();
 	const [isModalOpen, setIsModalOpen] = useState(true);
 
+	if (!screensTranslations || !screensTranslations.game_results) return <Loading />;
+	const currentScreenTranslations = screensTranslations.game_results;
+	console.log(currentScreenTranslations);
+
 	if (!resultsDatas) return navigate("/home");
 
 	const { gameStats, contextGameDatas } = resultsDatas;
@@ -22,8 +30,29 @@ export default function ResultsModals({ resultsDatas }) {
 		setIsModalOpen(false);
 		navigate("/rating");
 	}
+	function getResultsDetails() {
+		if (isNaN(gameStats.level_score)) return;
+		if (gameStats.level_score_range === "perfect")
+			return {
+				title: currentScreenTranslations.perfect_title,
+				text: currentScreenTranslations.perfect_text,
+				motivation_line: currentScreenTranslations.perfect_motivation_line,
+			};
+		if (gameStats.level_score_range === "congrats")
+			return {
+				title: currentScreenTranslations.congrats_title,
+				text: currentScreenTranslations.congrats_text,
+				motivation_line: currentScreenTranslations.congrats_motivation_line,
+			};
 
-	console.log("resultsDatas", resultsDatas);
+		return {
+			title: currentScreenTranslations.attention_title,
+			text: currentScreenTranslations.attention_text,
+			motivation_line: currentScreenTranslations.attention_motivation_line,
+		};
+	}
+
+	let resultsDetails = getResultsDetails();
 
 	return (
 		<Modal className='results-modal' open={isModalOpen} onClose={goRating}>
@@ -41,7 +70,7 @@ export default function ResultsModals({ resultsDatas }) {
 					autoplay
 				/>
 				<h1 className='titling-construction '>Rapport de sécurité</h1>
-				<h2>Félicitations !</h2>
+				<h2>{resultsDetails.title}</h2>
 				<div className='visual-results'>
 					<img className='visual-results__cup' src={cup} alt='' />
 					<div className='visual-results__score'>
@@ -49,10 +78,8 @@ export default function ResultsModals({ resultsDatas }) {
 						<img className='succes-indicator' src={sucessIcon} alt='' />
 					</div>
 				</div>
-				<p className='results-explanation'>
+				<p className='results-explanation'>{resultsDetails.text}</p>
-					Un accident est vite arrivé si nous n'y prêtons pas attention. N'oublions pas
+				<p className='motivation-line'>{resultsDetails.motivation_line}</p>
-					que ce jeu reflète la réalité de notre environnement de travail.
-				</p>
 				<button
 					className='cta cta--construction cta--round cta--button-icon cta--home'
 					onClick={goRating}></button>