Merge pull request #13 from RaphaelEscrig/feat/enhance-ux

Enhance ux

src/modules/cities/core/locales/fr.json

@@ -27,7 +27,11 @@
 		"listing-head-my-rank": "Mon rang",
 		"listing-head-worst-rank": "Dernier rang",
 		"listing-result-success": "Obtenu",
-		"listing-result-failed": "Refusé"
+		"listing-result-failed": "Refusé",
+
+		"no-rank-specified": "Veuillez entrer votre classement",
+		"no-year-selected": "Veuillez sélectionner une année",
+		"no-specialty-selected": "Veuillez sélectionner une spécialité"
 	},
 	"CitiesSimulationListing": {
 		"go-to-specialties-listing": "Retour aux spécialités",
@@ -41,6 +45,10 @@
 		"listing-head-worst-rank": "Dernier rang",
 		"listing-no-rank": "--",
 		"listing-result-success": "Obtenu",
-		"listing-result-failed": "Refusé"
+		"listing-result-failed": "Refusé",
+
+		"no-rank-specified": "Veuillez entrer votre classement",
+		"no-stage-selected": "Veuillez sélectionner une phase",
+		"no-specialty-selected": "Veuillez sélectionner une spécialité"
 	}
 }

src/modules/cities/react/pages/cities.module.scss

@@ -3,6 +3,11 @@
 	max-width: 68.75rem;
 	width: 100%;
 	margin: auto;
+
+	p {
+		margin-top: 30px;
+		text-align: center;
+	}
 }
 
 .goBack {

src/modules/cities/react/pages/cities.page.tsx

@@ -117,6 +117,10 @@ const CitiesPage = ({ year, rank, specialty }: Props) => {
 					<Listing rank={rank} specialty={specialty} year={year} />
 				</Suspense>
 			)}
+
+			{!rank && <p>{t("CitiesRankListing.no-rank-specified")}</p>}
+			{!year && <p>{t("CitiesRankListing.no-year-selected")}</p>}
+			{!specialty && <p>{t("CitiesRankListing.no-specialty-selected")}</p>}
 		</main>
 	);
 };

src/modules/cities/react/pages/simulations/cities-simulations.module.scss

@@ -3,6 +3,11 @@
 	max-width: 1100px;
 	width: 100%;
 	margin: auto;
+
+	p {
+		margin-top: 30px;
+		text-align: center;
+	}
 }
 
 .goBack {

src/modules/cities/react/pages/simulations/cities-simulations.page.tsx

@@ -133,6 +133,12 @@ const CitiesSimulationsPage = ({ stage, rank, specialty }: Props) => {
 					<Listing rank={rank} specialty={specialty} stage={stage} />
 				</Suspense>
 			)}
+
+			{!rank && <p>{t("CitiesSimulationListing.no-rank-specified")}</p>}
+			{!stage && <p>{t("CitiesSimulationListing.no-stage-selected")}</p>}
+			{!specialty && (
+				<p>{t("CitiesSimulationListing.no-specialty-selected")}</p>
+			)}
 		</main>
 	);
 };

src/modules/layout/core/domain/constants/index.ts

@@ -0,0 +1,13 @@
+/** MODELS */
+import type { LayoutHeader } from "@/modules/layout/core/domain/models";
+
+export const HEADER_NAVIGATION_LINKS: LayoutHeader.NavigationItem[] = [
+	{
+		href: "/specialties",
+		translation: "go-to-specialties",
+	},
+	{
+		href: "/specialties/simulations",
+		translation: "go-to-simulations",
+	},
+];

src/modules/layout/core/domain/models/header.model.ts

@@ -0,0 +1,4 @@
+export type NavigationItem = {
+	readonly href: string;
+	readonly translation: string;
+};

src/modules/layout/core/domain/models/index.ts

@@ -0,0 +1,2 @@
+/** MODELS */
+export * as LayoutHeader from "@/modules/layout/core/domain/models/header.model";

src/modules/layout/react/components/header/header.component.tsx

@@ -1,20 +1,34 @@
+"use client";
+
 import styles from "./header.module.scss";
 import Link from "next/link";
 /** ASSETS */
 import Stethoscope from "@/modules/layout/react/assets/svg/header-app-icon.svg";
+/** CONSTANTS */
+import { HEADER_NAVIGATION_LINKS } from "@/modules/layout/core/domain/constants";
+/** HOOKS */
+import { useActivePath } from "@/modules/shared/react/hooks/use-active-path.hook";
 /** NEXT-INTL */
 import { useTranslations } from "next-intl";
 
 const Header = () => {
 	const t = useTranslations("Header");
+	const checkActivePath = useActivePath();
 
 	return (
 		<header className={styles.header}>
 			<Stethoscope />
 
 			<nav>
-				<Link href="/specialties">{t("go-to-specialties")}</Link>
-				<Link href="/specialties/simulations">{t("go-to-simulations")}</Link>
+				{HEADER_NAVIGATION_LINKS.map((item, index) => (
+					<Link
+						key={index}
+						data-is-active={checkActivePath(item.href)}
+						href={item.href}
+					>
+						{t(item.translation)}
+					</Link>
+				))}
 			</nav>
 		</header>
 	);

src/modules/layout/react/components/header/header.module.scss

@@ -14,10 +14,15 @@
 
 		a {
 			font-size: 14px;
+			padding-bottom: 2px;
 
 			&:hover {
 				opacity: 0.8;
 			}
+
+			&[data-is-active="true"] {
+				border-bottom: 1px solid #ff0086;
+			}
 		}
 	}
 }

src/modules/shared/react/hooks/use-active-path.hook.ts

@@ -0,0 +1,11 @@
+import { usePathname } from "next/navigation";
+
+export const useActivePath = (): ((path: string) => boolean) => {
+	const pathname = usePathname();
+
+	const checkActivePath = (path: string) => {
+		return path === pathname;
+	};
+
+	return checkActivePath;
+};

src/modules/specialties/core/domain/constants/index.ts

@@ -1,7 +1,7 @@
 export const SPECIALTIES_LISTING_MAX_YEAR = 2023;
 export const SPECIALTIES_LISTING_MIN_YEAR = 2019;
 
-export const SPECIALTIES_SIMULATION_MAX_STAGE = 1;
 export const SPECIALTIES_SIMULATION_MIN_STAGE = 1;
+export const SPECIALTIES_SIMULATION_MAX_STAGE = 3;
 
 export const SPECIALTIES_YEARS = [2023, 2022, 2021, 2020, 2019];