pushing bugged code

src/App.js

@@ -17,6 +17,7 @@ function App() {
 	const location = useLocation();
 	return (
 		<AnimatePresence mode='wait'>
+			
 			<Routes location={location} key={location.pathname}>
 				<Route path='/' element={<Welcome />} />
 				<Route path='/home' element={<Home />} />

src/assets/css/components/GameAnswerExplanation.scss

@@ -1,3 +1,4 @@
+.answer-explanation-container {
 	.answer-explanation {
 		@apply p-8 flex gap-x-8;
 		&__type {
@@ -28,8 +29,8 @@
 				@apply h-auto object-contain object-center;
 			}
 		}
+	}
 	.continue-game {
-		@apply absolute bottom-0 left-1/2;
+		@apply mt-8;
-		translate: -50% 50%;
 	}
 }

src/assets/css/components/ui/Modal.scss

@@ -29,7 +29,7 @@ dialog {
 
 .modal-content-container {
 	@apply w-full
-	p-8 grid  gap-x-8;
+	p-8 px-24 grid  gap-x-8;
 	@apply pt-28 pb-16;
 
 	box-sizing: border-box;

src/assets/css/pages/Rating.scss

@@ -92,4 +92,8 @@
 	.cta--back {
 		@apply mt-3 mx-auto;
 	}
+	.cta--back[disabled] {
+		@apply bg-slate-300;
+		cursor: not-allowed;
+	}
 }

src/assets/css/pages/Results.scss

@@ -7,7 +7,7 @@
 		}
 		&__celebration-confettis-fixe {
 			@apply absolute top-0 left-0 z-10 w-full;
-
+			pointer-events: none;
 			// svg > g {
 			// 	@apply bg-purple-900 opacity-100 w-full;
 			// }

src/components/AnimatedPage.jsx

@@ -39,6 +39,7 @@ export default function AnimatedPage({ children, className }) {
 			exit={animationParameters.exit}
 			transition={{ duration: 0.4, ease: "easeOut" }}>
 			{children}
+			<p>qsqsdds</p>
 		</motion.div>
 	);
 }

src/components/game/GameAnswerExplanation.jsx

@@ -19,7 +19,7 @@ export default function GameAnwerExplanation({ questionId }) {
 		contextGameDatas.gameObjects[questionId].attrs.objectBehaviourDescription ??
 		"Pas d'explication pour cette question";
 	const objectPictureUrl = contextGameDatas.gameObjects[questionId].attrs.objectPictureUrl;
-	console.log(answer);
+	
 	return (
 		<div className='modal-content-container answer-explanation-container'>
 			<div className='modal-content-container__content'>

src/components/ui/LanguageSelect.jsx

@@ -2,7 +2,7 @@ import React, { useState } from "react";
 import { useUser } from "../../hooks/useUser";
 
 export default function LanguageSelect() {
-	const { language, setLanguage, screensTranslations } = useUser();
+	const { language, changeUserLanguage, screensTranslations } = useUser();
 	const [isSubmenuOpen, setIsSubmenuOpen] = useState(false);
 
 	if (!screensTranslations || !screensTranslations.ui) return <p>loading translations…</p>;
@@ -14,7 +14,7 @@ export default function LanguageSelect() {
 
 	function chooseLanguage(lang) {
 		setIsSubmenuOpen(false);
-		setLanguage(lang);
+		changeUserLanguage(lang);
 	}
 
 	const supportedLanguages = ["FR", "EN", "ES", "PT", "DE", "DA", "FI", "PL", "CS", "SK", "MY"];

src/components/ui/Menu.jsx

@@ -2,22 +2,23 @@ import { NavLink } from "react-router-dom";
 import { useLocation } from "react-router-dom";
 import { useUser } from "../../hooks/useUser";
 import LanguageSelect from "./LanguageSelect";
-export default function Menu() {
+export default function Nav() {
 	let location = useLocation();
 	const { language, changeLanguage } = useUser();
 
 	return (
 		<nav className='main-menu'>
-			<ul className='navlist'>
+			{/* <ul className='navlist'>
 				<NavLink to='/'>Welcome</NavLink>
 				<NavLink to='/Home'>Home</NavLink>
 				<NavLink to='/select-profile'>Profile</NavLink>
 				<NavLink to='/select-country'>Country</NavLink>
 				<NavLink to='/play'>Play</NavLink>
 				<NavLink to='/results'>Results</NavLink>
-			</ul>
+			</ul> */}
 
 			<LanguageSelect />
+			<Nav />
 		</nav>
 	);
 }

src/context/UserContext.js

@@ -4,9 +4,17 @@ import CountriesJSON from "../data/countries/countries.json";
 export const UserContext = createContext();
 
 export function UserContextProvider({ children }) {
-	const [language, setLanguage] = useState("FR");
+	const localLanguage = localStorage.getItem("userLanguage") || "FR";
-	const [country, setCountry] = useState({ name: "belgique", iso: "BE", label: "Belgique" });
+	const localCountry = JSON.parse(localStorage.getItem("userCountry")) || {
-	const [profile, setProfile] = useState("lhoist_employee");
+		name: "belgique",
+		iso: "BE",
+		label: "Belgique",
+	};
+	const localProfile = localStorage.getItem("userProfile") || "lhoist_employee";
+
+	const [language, setLanguage] = useState(localLanguage);
+	const [country, setCountry] = useState(localCountry);
+	const [profile, setProfile] = useState(localProfile);
 	const [screensTranslations, setScreensTranslations] = useState({});
 
 	useEffect(() => {
@@ -30,27 +38,29 @@ export function UserContextProvider({ children }) {
 		setCountry({ ...country, label: currentCountry[language.toLowerCase()] });
 	}, [language]);
 
-	function changeLanguage() {
+	function changeUserLanguage(newLanguage) {
-		if (language === "FR") {
+		console.log(`userLanguage`, newLanguage);
-			setLanguage("EN");
+		setLanguage(newLanguage);
-		} else {
+		localStorage.setItem("userLanguage", newLanguage);
-			setLanguage("FR");
 	}
-	}
-
 	function changeCountry(newCountry) {
+		console.log(`newCountry`, newCountry);
+
 		setCountry(newCountry);
+		localStorage.setItem("userCountry", JSON.stringify(newCountry));
 	}
 
 	function changeProfile(newProfile) {
 		setProfile(newProfile);
+		localStorage.setItem("userProfile", newProfile);
 	}
 	return (
 		<UserContext.Provider
 			value={{
 				language,
 				screensTranslations,
-				changeLanguage,
+				changeUserLanguage,
+				// changeLanguage,
 				country,
 				setLanguage,
 				changeCountry,

src/pages/Rating.jsx

@@ -1,11 +1,29 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 import AnimatedPage from "../components/AnimatedPage";
 import { Link, useNavigate } from "react-router-dom";
-
+import { postRatingData } from "../services/WordpressFetchData";
 export default function Rate() {
+	const [rating, setRating] = useState(undefined);
+
+	useEffect(() => {
+		return () => {
+			setRating(undefined);
+		};
+	}, []);
+
 	const navigate = useNavigate();
 
-	function returnHome() {
+	function handleRatingChange(event) {
+		// setRating({ ...rating, note: event.target.value });
+		setRating({ ...rating, note: 2 });
+	}
+
+	function handleCommentChange(event) {
+		setRating({ ...rating, comment: event.target.value });
+	}
+
+	function handleSubmit() {
+		postRatingData(rating);
 		navigate("/Home");
 	}
 	
@@ -15,55 +33,92 @@ export default function Rate() {
 				<div className='screen__content'>
 					<h1 className='titling-construction '>Notes</h1>
 					<h2>merci pour votre participation</h2>
-					<div class='rating'>
+					<div className='rating'>
-						<div class='rating__items'>
+						<div className='rating__items'>
-							<input type='radio' name='stars' id='st5' />
+							<input
-							<label for='st5'>
+								type='radio'
-								<div class='star-fill'></div>
+								name='stars'
+								id='st5'
+								value='5'
+								onChange={handleRatingChange}
+							/>
+							<label htmlFor='st5'>
+								<div className='star-fill'></div>
 
 								<div
-									class='label-description'
+									className='label-description'
 									data-content='Excellent'></div>
 							</label>
-							<input type='radio' name='stars' id='st4' />
+							<input
-							<label for='st4'>
+								type='radio'
-								<div class='star-fill'></div>
+								name='stars'
+								id='st4'
+								value='4'
+								onChange={handleRatingChange}
+							/>
+							<label htmlFor='st4'>
+								<div className='star-fill'></div>
 
 								<div
-									class='label-description'
+									className='label-description'
 									data-content='Good'></div>
 							</label>
-							<input type='radio' name='stars' id='st3' />
+							<input
-							<label for='st3'>
+								type='radio'
-								<div class='star-fill'></div>
+								name='stars'
+								id='st3'
+								value='3'
+								onChange={handleRatingChange}
+							/>
+							<label htmlFor='st3'>
+								<div className='star-fill'></div>
 
-								<div class='label-description' data-content='OK'></div>
-							</label>
-							<input type='radio' name='stars' id='st2' />
-							<label for='st2'>
-								<div class='star-fill'></div>
-
-								<div class='label-description' data-content='Bad'></div>
-							</label>
-							<input type='radio' name='stars' id='st1' />
-							<label for='st1'>
-								<div class='star-fill'></div>
 								<div
-									class='label-description'
+									className='label-description'
+									data-content='OK'></div>
+							</label>
+							<input
+								type='radio'
+								name='stars'
+								id='st2'
+								value='2'
+								onChange={handleRatingChange}
+							/>
+							<label htmlFor='st2'>
+								<div className='star-fill'></div>
+
+								<div
+									className='label-description'
+									data-content='Bad'></div>
+							</label>
+							<input
+								type='radio'
+								name='stars'
+								id='st1'
+								value='1'
+								onChange={handleRatingChange}
+							/>
+							<label htmlFor='st1'>
+								<div className='star-fill'></div>
+								<div
+									className='label-description'
 									data-content='Terrible'></div>
 							</label>
 						</div>
 					</div>
 
 					<textarea
+						onChange={handleCommentChange}
 						placeholder="Qu'avez-vous pensé de cette expérience ?"
 						name=''
 						id=''
 						cols='10'
 						rows='2'></textarea>
 					<button
+						disabled={!rating}
+						title={!rating ? "Attribuer une note!" : "Retour à l'acceuil!"}
 						className='cta cta--construction cta--round cta--button-icon cta--back'
-						onClick={returnHome}></button>
+						onClick={handleSubmit}></button>
 				</div>
 			</div>
 		</AnimatedPage>

src/pages/Test.jsx

@@ -1,11 +1,15 @@
 import Menu from "../components/ui/Menu";
-import { postGameStatisticsData } from "../services/WordpressFetchData";
+import { postGameStatisticsData, postRatingData } from "../services/WordpressFetchData";
 import { useLanguage } from "../hooks/useLanguage";
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
+import axios from "axios";
+
 export default function Test() {
 	const { language } = useLanguage();
 
-	function testPost() {
+	const [randomData, setRandomData] = useState({});
+
+	function postRandomDatas() {
 		const requestDataExample = {
 			user_locale: "DE",
 			user_country: "France",
@@ -16,12 +20,23 @@ export default function Test() {
 		postGameStatisticsData(requestDataExample);
 	}
 
+	function postRandomRating() {
+		const requestDataExample = {
+			user_locale: "DE",
+			user_country: "France",
+			rating: 5,
+		};
+		postRatingData(requestDataExample);
+	}
+
+	console.log(randomData);
 	return (
 		<div className='page-container page-container--test'>
 			<div className='screen screen--test'>
 				<Menu />
+				<button onClick={postRandomRating}> Post Random Rating</button>
 				<div id='screen-container'>
-					<button onClick={testPost}>TEEEESt</button>
+					<button onClick={postRandomDatas}>Post Random Datas</button>
 				</div>
 			</div>
 		</div>

src/services/WordpressFetchData.js

@@ -2,52 +2,46 @@ import { useEffect, useState } from "react";
 import axios from "axios";
 import { useUser } from "../hooks/useUser";
 
-const BASE_URL = "https://staysafe.deligraph.info/wp-json/wp/v2";
+const BASE_URL = process.env.REACT_APP_BASE_URL;
-const BASE_CUSTOM_URL = "https://staysafe.deligraph.info/wp-json/lhoist-datas";
+const BASE_CUSTOM_URL = process.env.REACT_APP_BASE_CUSTOM_URL;
-// const WORDPRESS_API_TOKEN = process.env.REACT_APP_WORDPRESS_API_TOKEN;
 
-// const UMAMI_API_TOKEN = process.env.REACT_APP_UMAMI_API_TOKEN;
+const fetchWordpressData = async (url) => {
-// const UMAMI_WEBSITE_ID = process.env.REACT_APP_UMAMI_WEBSITE_ID;
+	try {
-// const UMAMI_API_BASE_ENDPOINT = process.env.REACT_APP_UMAMI_API_BASE_ENDPOINT;
+		const response = await axios.get(url);
 
-// const umamiBaseEndpoint = process.env.REACT_APP_UMAMI_API_BASE_ENDPOINT;
+		return response.data;
+	} catch (error) {
+		console.error(error);
+	}
+};
 
-function useWordpressCustomData(url) {
+const useWordpressCustomData = (url) => {
 	const [data, setData] = useState();
-	const { language, country } = useUser();
+	const { language } = useUser();
 
 	const fullUrl = `${BASE_CUSTOM_URL}${url}?current-language=${language}`;
 
 	useEffect(() => {
-		const dataFetch = async () => {
+		fetchWordpressData(fullUrl).then((data) => {
-			const data = await (await fetch(fullUrl)).json();
-
 			setData(data);
+		});
+	}, [language, fullUrl]);
+	return data;
 };
 
-		dataFetch();
+const useWordpressData = (url) => {
-	}, [language, fullUrl]);
-
-	return data;
-}
-
-function useWordpressData(url) {
 	const [data, setData] = useState();
 
 	useEffect(() => {
-		const dataFetch = async () => {
+		fetchWordpressData(url).then((data) => {
-			const data = await (await fetch(BASE_URL + url)).json();
-
 			setData(data);
-		};
+		});
-
-		dataFetch();
 	}, [url]);
 
 	return data;
-}
+};
 
-async function postGameStatisticsData(requestDatas) {
+const postGameStatisticsData = async (requestDatas) => {
 	const options = {
 		method: "POST",
 		url: BASE_CUSTOM_URL + "/statistics/post",
@@ -61,88 +55,22 @@ async function postGameStatisticsData(requestDatas) {
 		.catch((error) => {
 			console.error(error);
 		});
-}
-
-// function useUmamiDatas() {
-// 	const umamiUrl = "https://umami.deligraph.be/api/websites";
-// 	const bearerToken =
-// 		"Ii96P0XNdBE0gD0l8lX5Qf3+Lt7T0RsEoWUjf8qNaifyPbhi/PXmGygkIHuGbMm6bJ9iHPe9pIzfBJeFvG+ehlQSd4MWuWr3xKEmxtcwDMOlN4aDo3rlSf9phB02sjx0QcBhngfl0p9g/nI30d1XTWvHspw5BCNT7+NRzb5gDa24tbbSS/a/wL9+TN+mCjCUsaMOt9o/t0D3kNtE6qSgK4gAFijbDBXsgjbiPwb3HemrEb19JfY9gtMMpwBVE2KKst0j6kyKUWWDeJiBz3LQHO+FSthwG9tQCovVFgHNzLh+L+6fcmUkEpDC3nA62UCPmVAy3zJgjFWgtVZdXaSeFm7mLF1/Wsqk3g==";
-
-// 	const [data, setData] = useState();
-
-// 	useEffect(() => {
-// 		const dataFetch = async () => {
-// 			const data = await (
-// 				await fetch(umamiUrl, {
-// 					method: "GET",
-// 					headers: {
-// 						"Content-Type": "application/json",
-// 						Authorization: `Bearer ${bearerToken}`,
-// 					},
-// 				})
-// 			).json();
-
-// 			setData(data);
-// 		};
-
-// 		dataFetch();
-// 	}, []);
-// 	return data;
-// }
-
-// function useUmamiUpdateDatas() {
-// 	const [result, setResult] = useState(null); // État local pour stocker le résultat
-
-// 	const eventName = "event-name-de-test";
-
-// 	const UMAMI_SEND_URL = UMAMI_API_BASE_ENDPOINT + "/send";
-
-// 	const dataPayload = {
-// 		payload: {
-// 			hostname: window.location.hostname,
-// 			language: navigator.language,
-// 			referrer: document.referrer,
-// 			screen: `${window.screen.width}x${window.screen.height}`,
-// 			title: document.title,
-// 			url: window.location.pathname,
-// 			website: UMAMI_WEBSITE_ID,
-// 			name: "puzzle-1-complete",
-// 			data: {
-// 				lang: "fr",
-// 				country: "France",
-// 				level_post_id: 154,
-// 				level_is_completed: 0,
-// 				level_completion_time: 20000,
-// 				level_score: 12,
-// 			},
-// 		},
-// 		type: "event",
-// 	};
-// 	useEffect(() => {
-// 		const dataFetch = async () => {
-// 			try {
-// 				await axios.post(UMAMI_SEND_URL, dataPayload, {
-// 					headers: {
-// 						"User-Agent": navigator.userAgent,
-// 					},
-// 				});
-// 				setResult(`Event '${eventName}' sent successfully to Umami.`);
-// 				console.log(`Event '${eventName}' sent successfully to Umami.`);
-// 			} catch (error) {
-// 				setResult("Error sending Umami event:");
-// 				console.error("Error sending Umami event:", error);
-// 			}
-// 		};
-
-// 		dataFetch();
-// 	}, []);
-// 	return result;
-// }
-
-export {
-	useWordpressData,
-	useWordpressCustomData,
-	postGameStatisticsData,
-	// useUmamiDatas,
-	// useUmamiUpdateDatas,
 };
+
+const postRatingData = async (requestDatas) => {
+	const options = {
+		method: "POST",
+		url: BASE_CUSTOM_URL + "/rating/post",
+		data: requestDatas,
+	};
+
+	axios.request(options)
+		.then((response) => {
+			console.log(response.data);
+		})
+		.catch((error) => {
+			console.error(error);
+		});
+};
+
+export { useWordpressData, useWordpressCustomData, postGameStatisticsData, postRatingData };