refactoring pages with animatedComponent

src/pages/Country.jsx

@@ -0,0 +1,44 @@
+import React from "react";
+import CountrySelect from "../components/ui/CountrySelect";
+import Menu from "../components/ui/Menu";
+import { motion } from "framer-motion";
+import { useLocation, useNavigate } from "react-router-dom";
+
+// import screensTranslations from "../data/screensTranslations.json";
+import { useUser } from "../hooks/useUser";
+
+export default function Country() {
+	const navigate = useNavigate();
+	const location = useLocation();
+
+	const { language, screensTranslations } = useUser();
+	
+	if (!screensTranslations || !screensTranslations.country) return <p>loading</p>;
+	const currentScreenTranslations = screensTranslations.country;
+
+	return (
+		<motion.div
+			className='page-container page-container--profile page-container-has-screen'
+			initial={{ x: "50%", opacity: 0.7 }}
+			animate={{ x: "0%", opacity: 1 }}
+			exit={{ x: "-100%", opacity: 1 }}
+			transition={{ duration: 0.3, ease: "easeOut" }}>
+			<div className='screen screen--profile'>
+				<Menu />
+				<section className='screen__content'>
+					<h1 className='titling-construction'>{currentScreenTranslations.profile}</h1>
+					<h2 className='screen-subtitle '>{currentScreenTranslations.iam}...</h2>
+
+					<CountrySelect label={currentScreenTranslations.country_label} />
+					<button
+						className='cta cta--construction cta--round cta--button-icon cta--next  '
+						onClick={() => {
+							navigate("/play", {
+								state: { previousUrl: location.pathame, isNext: true },
+							});
+						}}></button>
+				</section>
+			</div>
+		</motion.div>
+	);
+}

src/pages/Game.jsx

@@ -9,11 +9,12 @@ import GameContainer from "../components/game/GameContainer.jsx";
 import Tutorial from "../components/game/Tutorial.jsx";
 import Logo from "../components/ui/Logo.jsx";
 import GameModal from "../components/game/GameModal.jsx";
+import AnimatedPage from "../components/AnimatedPage.jsx";
 
 export default function Game() {
 	return (
 		<>
-			<div className='page-container page-container--play'>
+			<AnimatedPage className='page-container page-container--play'>
 				<GameContextProvider>
 					<div className='screen'>
 						<Logo />
@@ -23,7 +24,7 @@ export default function Game() {
 						<GameContainer gameId={"latest"} />
 					</div>
 				</GameContextProvider>
-			</div>
+			</AnimatedPage>
 		</>
 	);
 }

src/pages/Home.jsx

@@ -4,26 +4,28 @@ import coverWorker from "../assets/img/cover_worker.svg";
 import screenWorker1 from "../assets/img/screen_worker_1.svg";
 import screenWorker2 from "../assets/img/screen_worker_2.svg";
 import { Link } from "react-router-dom";
-import { useEffect, useState } from "react";
+
+import AnimatedPage from "../components/AnimatedPage";
+// import screensTranslations from "../data/screensTranslations.json";
+import { useUser } from "../hooks/useUser";
+import { useEffect } from "react";
 
 export default function Home() {
-	const welcomeScreenDatas = useWordpressCustomData("/screen/welcome");
+	const { language, screensTranslations } = useUser();
+
+	if (!screensTranslations || !screensTranslations.home) return <p>loading</p>;
+	const currentScreenTranslations = screensTranslations.home;
 
-	if (!welcomeScreenDatas) {
-		return <div>Chargement...</div>;
-	}
 	return (
-		<div className='page-container page-container--home'>
+		<AnimatedPage className='page-container page-container--home'>
 			<div className='screen screen--home'>
 				<Menu />
 				<section className='screen__content'>
 					<img className='cover_worker' src={coverWorker} alt='' />
-					<h1 className='application_title'>{welcomeScreenDatas.applicationTitle}</h1>
+					<h1 className='application_title'>stay safe</h1>
-					<h2 className='application_subtitle'>
+					<h2 className='application_subtitle'>interactive</h2>
-						{welcomeScreenDatas.applicationSubtitle}
-					</h2>
 					<p className='application_description'>
-						{welcomeScreenDatas.applicationDescription}
+						{currentScreenTranslations.app_description}
 					</p>
 					<Link
 						to='/select-profile'
@@ -33,6 +35,6 @@ export default function Home() {
 				<img className='screen_worker_1' src={screenWorker1} alt='' />
 				<img className='screen_worker_2' src={screenWorker2} alt='' />
 			</div>
-		</div>
+		</AnimatedPage>
 	);
 }

src/pages/Profile.jsx

@@ -1,56 +1,93 @@
 import React from "react";
 import Menu from "../components/ui/Menu";
-import CountrySelect from "../components/ui/CountrySelect";
-import ProfileSelect from "../components/ui/ProfileSelect";
-import { Link } from "react-router-dom";
-import { useWordpressCustomData } from "../services/WordpressFetchData";
-import { motion } from "framer-motion";
-import { useNavigate } from "react-router-dom";
 
+import { useLocation, useNavigate } from "react-router-dom";
+import { motion } from "framer-motion";
+import { useUser } from "../hooks/useUser";
+// import screensTranslations from "../data/screensTranslations.json";
+
+import lhoistEmployee from "../assets/img/profiles/lhoist-employee.svg";
+import subcontractorEmployee from "../assets/img/profiles/subcontractor-employee.svg";
+import driver from "../assets/img/profiles/driver.svg";
+import civilian from "../assets/img/profiles/civilian.svg";
+
+import AnimatedPage from "../components/AnimatedPage";
 export default function Profile() {
 	const navigate = useNavigate();
+	const location = useLocation();
 
-	const profileScreenDatas = useWordpressCustomData("/screen/profile");
+	const { profile, changeProfile } = useUser();
-	// const { language } = useUserContext();
 
-	if (!profileScreenDatas) {
+	const { language, screensTranslations } = useUser();
-		return <div>Chargement...</div>;
+
+	if (!screensTranslations || !screensTranslations.profile) return <p>loading</p>;
+	const currentScreenTranslations = screensTranslations.profile;
+
+	function handleChangeProfile(e) {
+		changeProfile(e.target.getAttribute("value"));
 	}
 
-	const { profileScreenTitle, profileOptions, profileSelectTitle, profileCountrySelectTitle } =
-		profileScreenDatas;
-	// console.log(profileScreenDatas);
-
 	return (
-		<div className='page-container page-container--profile page-container-has-screen'>
+		<AnimatedPage className='page-container page-container--profile page-container-has-screen'>
-			{/* <button onClick={test}>test</button> */}
+			<div className='screen screen--profile'>
-			<div className='screen screen--home'>
 				<Menu />
 				<section className='screen__content'>
-					<h1>{profileScreenTitle}</h1>
+					<h1 className='titling-construction'>{currentScreenTranslations.profile}</h1>
-					<div className='profile'>
+					<h2 className='screen-subtitle '>{currentScreenTranslations.iam}...</h2>
-						<h2>{profileSelectTitle}</h2>
-						<ProfileSelect options={profileOptions} />
-					</div>
-					<div className='country'>
-						<h2>{profileCountrySelectTitle}</h2>
-						<CountrySelect />
-					</div>
 
-					{/* <Link
+					<ul className='profile-select'>
-						to='/play'
+						<li
-						className='cta cta--construction cta--round cta--button-icon cta--next  '
+							className='profile-select__profile-type'
-					/> */}
+							value='civilian'
+							is-current={profile === "civilian" ? "true" : ""}
+							onClick={handleChangeProfile}>
+							<img src={civilian} alt='' />
+							<h3 className='titling-construction'>
+								{currentScreenTranslations.profiles.civilian}
+							</h3>
+						</li>
+						<li
+							className='profile-select__profile-type'
+							value='driver'
+							is-current={profile === "driver" ? "true" : ""}
+							onClick={handleChangeProfile}>
+							<img src={driver} alt='' />
+							<h3 className='titling-construction'>
+								{currentScreenTranslations.profiles.driver}
+							</h3>
+						</li>
+						<li
+							className='profile-select__profile-type'
+							value='lhoist_employee'
+							is-current={profile === "lhoist_employee" ? "true" : ""}
+							onClick={handleChangeProfile}>
+							<img src={lhoistEmployee} alt='' />
+							<h3 className='titling-construction'>
+								{currentScreenTranslations.profiles.lhoist_employee}
+							</h3>
+						</li>
+						<li
+							className='profile-select__profile-type'
+							value='subcontractor_employee'
+							is-current={profile === "subcontractor_employee" ? "true" : ""}
+							onClick={handleChangeProfile}>
+							<img src={subcontractorEmployee} alt='' />
+							<h3 className='titling-construction'>
+								{
+									currentScreenTranslations.profiles
+										.subcontractor_employee
+								}
+							</h3>
+						</li>
+					</ul>
 
-					<motion.button
+					<button
-						whileHover={{ scale: 1.1 }}
-						whileTap={{ scale: 1.2 }}
 						className='cta cta--construction cta--round cta--button-icon cta--next  '
 						onClick={() => {
-							navigate("/play");
+							navigate("/select-country");
-						}}></motion.button>
+						}}></button>
 				</section>
 			</div>
-		</div>
+		</AnimatedPage>
 	);
 }

src/pages/Results.jsx

@@ -2,22 +2,25 @@ import React from "react";
 import Menu from "../components/ui/Menu";
 import { postGameStatisticsData } from "../services/WordpressFetchData";
 import { useLanguage } from "../hooks/useLanguage";
+import AnimatedPage from "../components/AnimatedPage";
+import { useUser } from "../hooks/useUser";
 
 export default function Results() {
-	const { language } = useLanguage();
+	const { language, screenTranslations } = useUser();
+	if (!screenTranslations) return <p>loading</p>;
 	
 	function addPost(language) {
 		postGameStatisticsData("/statistics/post", "BE");
 	}
 
 	return (
-		<div className='page-container page-container--test'>
+		<AnimatedPage className='page-container page-container--test'>
 			<div className='screen screen--test'>
 				<Menu />
 				<div id='screen-container'>
 					<button onClick={() => addPost(language)}>Finish the game</button>
 				</div>
 			</div>
-		</div>
+		</AnimatedPage>
 	);
 }