From 97c385b0e6d7a56b26440350efc037204391cd6c Mon Sep 17 00:00:00 2001
From: skywalker <baskirill.an@gmail.com>
Date: Fri, 30 Aug 2024 19:05:07 +0300
Subject: [PATCH] feat(i18n): localize header widget

---
 client/src/i18n.ts                             | 18 ++++++++++++++++++
 client/src/widgets/header/ui/Header.widget.tsx | 18 +++++++++++++-----
 2 files changed, 31 insertions(+), 5 deletions(-)

diff --git a/client/src/i18n.ts b/client/src/i18n.ts
index 7eb63225..62e849d9 100644
--- a/client/src/i18n.ts
+++ b/client/src/i18n.ts
@@ -1,6 +1,12 @@
 import i18n from "i18next";
 import { initReactI18next } from "react-i18next";
 
+export const I18N_HEADER_HOME_BUTTON = "header.home.button";
+export const I18N_HEADER_CATALOGUE_BUTTON = "header.catalogue.button";
+export const I18N_HEADER_FAVORITE_BUTTON = "header.favorite.button";
+export const I18N_HEADER_LOGIN_BUTTON = "header.login.button";
+export const I18N_HEADER_PROFILE_BUTTON = "header.profile.button";
+
 export const I18N_HOME_SEARCH_BAR_INPUT = "home.searchbar.input";
 export const I18N_HOME_SEARCH_BAR_BUTTON = "home.searchbar.button";
 
@@ -25,6 +31,12 @@ export const I18N_INSTRUMENT_DATE_TO = "instrument.date.to";
 const resources = {
   en: {
     translation: {
+      [I18N_HEADER_HOME_BUTTON]: "Home",
+      [I18N_HEADER_CATALOGUE_BUTTON]: "Catalogue",
+      [I18N_HEADER_FAVORITE_BUTTON]: "Favorite",
+      [I18N_HEADER_LOGIN_BUTTON]: "Login",
+      [I18N_HEADER_PROFILE_BUTTON]: "Profile",
+
       [I18N_HOME_SEARCH_BAR_INPUT]: "What instrument?",
       [I18N_HOME_SEARCH_BAR_BUTTON]: "Search",
       [I18N_REASONS_H1]: "Why Choose Us for Your Musical Needs",
@@ -44,6 +56,12 @@ const resources = {
   },
   ru: {
     translation: {
+      [I18N_HEADER_HOME_BUTTON]: "Домашняя страница",
+      [I18N_HEADER_CATALOGUE_BUTTON]: "Каталог",
+      [I18N_HEADER_FAVORITE_BUTTON]: "Любимое",
+      [I18N_HEADER_LOGIN_BUTTON]: "Логин",
+      [I18N_HEADER_PROFILE_BUTTON]: "Профиль",
+
       [I18N_HOME_SEARCH_BAR_INPUT]: "Какой инструмент?",
       [I18N_HOME_SEARCH_BAR_BUTTON]: "Поиск",
       [I18N_REASONS_H1]: "Почему вы выберете нас",
diff --git a/client/src/widgets/header/ui/Header.widget.tsx b/client/src/widgets/header/ui/Header.widget.tsx
index 0b16118f..f3085bae 100644
--- a/client/src/widgets/header/ui/Header.widget.tsx
+++ b/client/src/widgets/header/ui/Header.widget.tsx
@@ -5,8 +5,16 @@ import { CATALOGUE, FAVORITE, HOME, LOGIN, PROFILE } from "shared/config/paths";
 import { getCookie } from "shared/cookie/cookie";
 import { COOKIE_JWT_KEY } from "shared/config/frontend";
 import { useDarkMode } from "shared/dark-mode/use-dark-mode";
+import {
+  I18N_HEADER_CATALOGUE_BUTTON,
+  I18N_HEADER_FAVORITE_BUTTON,
+  I18N_HEADER_HOME_BUTTON,
+  I18N_HEADER_LOGIN_BUTTON, I18N_HEADER_PROFILE_BUTTON
+} from "../../../i18n";
+import { useTranslation } from "react-i18next";
 
 export function HeaderWidget() {
+  const { t } = useTranslation();
   const { darkMode } = useDarkMode();
 
   const jwt = useRef<string | undefined>(getCookie(COOKIE_JWT_KEY));
@@ -31,7 +39,7 @@ export function HeaderWidget() {
           ${darkMode ? styles.btn__bg__dark : styles.btn__bg__light}
         `}
         >
-          Home
+          {t(I18N_HEADER_HOME_BUTTON)}
         </button>
         <button
           onClick={() => navigate(CATALOGUE)}
@@ -40,7 +48,7 @@ export function HeaderWidget() {
           ${darkMode ? styles.btn__bg__dark : styles.btn__bg__light}
         `}
         >
-          Catalogue
+          {t(I18N_HEADER_CATALOGUE_BUTTON)}
         </button>
         {jwt.current !== undefined && (
           <button
@@ -50,7 +58,7 @@ export function HeaderWidget() {
             ${darkMode ? styles.btn__bg__dark : styles.btn__bg__light}
           `}
           >
-            Favorite
+            {t(I18N_HEADER_FAVORITE_BUTTON)}
           </button>
         )}
         {jwt.current === undefined && (
@@ -61,7 +69,7 @@ export function HeaderWidget() {
             ${darkMode ? styles.btn__bg__dark : styles.btn__bg__light}
           `}
           >
-            Login
+            {t(I18N_HEADER_LOGIN_BUTTON)}
           </button>
         )}
         {jwt.current !== undefined && (
@@ -72,7 +80,7 @@ export function HeaderWidget() {
             ${darkMode ? styles.btn__bg__dark : styles.btn__bg__light}
           `}
           >
-            Profile
+            {t(I18N_HEADER_PROFILE_BUTTON)}
           </button>
         )}
       </nav>