Voici toutes les tâches que j'ai accomplies pour l'implémentation i18n :
- J'ai analysé tous les composants de l'application pour identifier chaque élément de texte nécessitant une traduction.
- J'ai installé les packages principaux i18next, y compris react-i18next et le détecteur de langue du navigateur.
- J'ai créé une structure de répertoire i18n dédiée pour organiser tous les fichiers de traduction.
- J'ai séparé les traductions en différents namespaces : side_buttons, routeform, map, geocoding et reporting.
- J'ai configuré le système de détection de langue du navigateur pour détecter automatiquement la langue préférée de l'utilisateur.
- J'ai implémenté la persistance localStorage pour mémoriser le choix de langue de l'utilisateur entre les sessions.
- J'ai créé un composant bouton de sélection de langue positionné au-dessus du bouton de déconnexion.
- J'ai ajouté des icônes de drapeaux (en.png et fr.png) pour représenter visuellement chaque option de langue.
- J'ai implémenté un dropdown menu avec des animations fluides de fondu et de glissement pour la sélection de langue.
- J'ai ajouté une détection de clic extérieur pour fermer automatiquement le menu de langue lors d'un clic en dehors.
- J'ai créé des états hover et active pour un meilleur retour visuel sur le sélecteur de langue.
- J'ai implémenté le système de traduction dans le composant principal du formulaire d'itinéraire.
- J'ai ajouté des traductions pour tous les placeholders des champs de recherche de lieu.
- J'ai implémenté des traductions pour les messages d'erreur dans le système de validation de formulaire.
- J'ai traduit tous les boutons d'action d'itinéraire et leurs tooltips.
Les prochaines etapes :
- ajouter des traductions pour le panel d'options d'itinéraire et tous ses paramètres.
- implémenter des traductions pour l'interface de gestion des points intermédiaires.
- repenser la structure de propagation des traductions à travers les composants (implémenter un contexte de traduction approprié dans la hiérarchie imbriquée des composants et assurer des transitions fluides lors du changement de langue sans rechargement de page, voir Defi technique ci-dessous).
- ajouter des traductions pour la fonctionnalité de détection de localisation actuelle.
Defi technique :
Le défi principal vient de la structure imbriquée de nos composants. on utilise un system de prop drilling profond et chaque niveau nécessite ses propres traductions.
Pour le moment, j'ai implémenté le hook useTranslation dans chaque composant avec le namespace 'routeform', mais ça cause des re-renders non nécessaires car chaque composant enfant se met à jour indépendamment lors d'un changement de langue.
La solution idéale serait d'utiliser un système de context pour les traductions, mais cela nécessite une refactorisation significative de la structure des composants. C'est ce que je dois faire pour les composants restants comme result pannel, TransportOptions et RoutingMethodOptions qui suivent la même structure imbriquée.
Demo :