feat(i18n): localize favorite page

client/src/i18n.ts

@@ -29,6 +29,9 @@ export const I18N_INSTRUMENT_DATE_FROM = "instrument.date.from";
 export const I18N_INSTRUMENT_DATE_TO = "instrument.date.to";
 
 export const I18N_INSTRUMENT_CARD_SHOW_BUTTON = "instrument.card.show.button";
+export const I18N_INSTRUMENT_CARD_REMOVE_BUTTON = "instrument.remove.button";
+export const I18N_INSTRUMENT_CARD_EDIT_BUTTON = "instrument.edit.button";
+export const I18N_INSTRUMENT_CARD_FAVORITE_BUTTON = "instrument.favorite.button";
 
 export const I18N_LOGIN_INPUT = "login.login.input";
 export const I18N_LOGIN_PASSWORD_INPUT = "login.login.password";
@@ -41,6 +44,8 @@ export const I18N_PROFILE_ROLE_SPAN = "profile.role.span";
 export const I18N_DARK_MODE_BUTTON = "dark-mode.button";
 export const I18N_LOGOUT_BUTTON = "logout.button";
 
+export const I18N_FAVORITE_H1 = "favorite.h1";
+
 export const I18N_FOOTER = "footer";
 
 export const I18N_NAVBAR_PREVIOUS = "navbar.previous";
@@ -71,6 +76,9 @@ const resources = {
       [I18N_INSTRUMENT_DATE_FROM]: "From",
       [I18N_INSTRUMENT_DATE_TO]: "To",
 
+      [I18N_INSTRUMENT_CARD_REMOVE_BUTTON]: "Remove",
+      [I18N_INSTRUMENT_CARD_EDIT_BUTTON]: "Edit",
+      [I18N_INSTRUMENT_CARD_FAVORITE_BUTTON]: "Favorite",
       [I18N_INSTRUMENT_CARD_SHOW_BUTTON]: "Show",
 
       [I18N_LOGIN_INPUT]: "Login",
@@ -88,6 +96,8 @@ const resources = {
 
       [I18N_NAVBAR_PREVIOUS]: "Previous",
       [I18N_NAVBAR_NEXT]: "Next",
+
+      [I18N_FAVORITE_H1]: "Favorite",
     }
   },
   ru: {
@@ -114,6 +124,9 @@ const resources = {
       [I18N_INSTRUMENT_DATE_FROM]: "С",
       [I18N_INSTRUMENT_DATE_TO]: "По",
 
+      [I18N_INSTRUMENT_CARD_REMOVE_BUTTON]: "Удалить",
+      [I18N_INSTRUMENT_CARD_EDIT_BUTTON]: "Редактировать",
+      [I18N_INSTRUMENT_CARD_FAVORITE_BUTTON]: "Любимое",
       [I18N_INSTRUMENT_CARD_SHOW_BUTTON]: "Показать",
 
       [I18N_NAVBAR_PREVIOUS]: "Предыдущий",
@@ -129,6 +142,8 @@ const resources = {
 
       [I18N_DARK_MODE_BUTTON]: "Темная тема",
       [I18N_LOGOUT_BUTTON]: "Выйти",
+
+      [I18N_FAVORITE_H1]: "Любимое",
     }
   }
 };

client/src/pages/favorite/ui/Favorite.page.tsx

@@ -8,9 +8,12 @@ import { useJwt } from "shared/jwt/use-jwt";
 import { useLoaderData } from "react-router-dom";
 import { FavoriteLoader } from "pages/favorite";
 import { useDarkMode } from "shared/dark-mode/use-dark-mode";
+import { useTranslation } from "react-i18next";
+import { I18N_FAVORITE_H1 } from "../../../i18n";
 
 export const FavoritePage = () => {
   useJwt();
+  const { t } = useTranslation();
   const { darkMode } = useDarkMode();
   const loader = useLoaderData() as FavoriteLoader;
 
@@ -19,7 +22,7 @@ export const FavoritePage = () => {
       <HeaderWidget />
 
       <h1 className={`${styles.h1} ${darkMode && styles.h1__dark}`}>
-        Favorite
+        {t(I18N_FAVORITE_H1)}
       </h1>
 
       {loader.instrumentDetails.length === 0 && (

client/src/shared/instrument-card-actions/ui/EditInstrument.button.tsx

@@ -4,12 +4,15 @@ import actionBtnStyle from "./styles/Action.button.module.css";
 import { useNavigate } from "react-router-dom";
 import { InstrumentDetail } from "generated/model";
 import { useDarkMode } from "shared/dark-mode/use-dark-mode";
+import { useTranslation } from "react-i18next";
+import { I18N_INSTRUMENT_CARD_EDIT_BUTTON } from "../../../i18n";
 
 interface Props {
   instrument: InstrumentDetail;
 }
 
 export const EditInstrumentButton = (props: Props) => {
+  const { t } = useTranslation();
   const { darkMode } = useDarkMode();
   const navigate = useNavigate();
 
@@ -25,7 +28,7 @@ export const EditInstrumentButton = (props: Props) => {
         navigate(uri);
       }}
     >
-      Edit
+      {t(I18N_INSTRUMENT_CARD_EDIT_BUTTON)}
     </button>
   );
 };

client/src/shared/instrument-card-actions/ui/Favorite.button.tsx

@@ -12,6 +12,8 @@ import Jwt from "domain/model/jwt";
 import { COOKIE_JWT_KEY } from "shared/config/frontend";
 import { getCookie } from "shared/cookie/cookie";
 import { apiConfig } from "shared/config/api";
+import { useTranslation } from "react-i18next";
+import { I18N_HEADER_FAVORITE_BUTTON, I18N_INSTRUMENT_CARD_REMOVE_BUTTON } from "../../../i18n";
 
 interface Props {
   instrumentId: InstrumentId;
@@ -22,6 +24,7 @@ const removeFavorite = new RemoveFavoriteApi(apiConfig);
 const addFavorite = new AddFavoriteApi(apiConfig);
 
 export const FavoriteButton = (props: Props) => {
+  const { t } = useTranslation();
   const jwt = useRef<string | undefined>(getCookie(COOKIE_JWT_KEY));
   const [favorite, setFavorite] = useState<boolean>();
 
@@ -76,7 +79,7 @@ export const FavoriteButton = (props: Props) => {
         ${favorite ? styles.favorite : ""}
       `}
     >
-      Favorite
+      {t(I18N_HEADER_FAVORITE_BUTTON)}
     </button>
   );
 };

client/src/shared/instrument-card-actions/ui/RemoveInstrument.button.tsx

@@ -6,6 +6,8 @@ import { useDarkMode } from "shared/dark-mode/use-dark-mode";
 import { apiConfig } from "shared/config/api";
 import Jwt from "domain/model/jwt";
 import { DeleteInstrumentByIdApi } from "generated/api/delete-instrument-by-id-api";
+import { I18N_INSTRUMENT_CARD_EDIT_BUTTON, I18N_INSTRUMENT_CARD_REMOVE_BUTTON } from "../../../i18n";
+import { useTranslation } from "react-i18next";
 
 interface Props {
   instrument: InstrumentDetail;
@@ -16,6 +18,7 @@ interface Props {
 const deleteInstrumentById = new DeleteInstrumentByIdApi(apiConfig);
 
 export const RemoveInstrumentButton = (props: Props) => {
+  const { t } = useTranslation();
   const { darkMode } = useDarkMode();
 
   const handleOnDeleteInstrument = () => {
@@ -48,7 +51,7 @@ export const RemoveInstrumentButton = (props: Props) => {
         ${darkMode && styles.btn__dark}
       `}
     >
-      Remove
+      {t(I18N_INSTRUMENT_CARD_REMOVE_BUTTON)}
     </button>
   );
 };