From 4b05dd6537ab086fb71a40548981f43a148f69c3 Mon Sep 17 00:00:00 2001
From: skywalker <baskirill.an@gmail.com>
Date: Fri, 30 Aug 2024 19:10:39 +0300
Subject: [PATCH] feat(i18n): localize footer widget

---
 client/src/i18n.ts                             | 9 +++++++--
 client/src/widgets/footer/ui/Footer.widget.tsx | 5 ++++-
 2 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/client/src/i18n.ts b/client/src/i18n.ts
index 62e849d9..b2cc4316 100644
--- a/client/src/i18n.ts
+++ b/client/src/i18n.ts
@@ -28,6 +28,8 @@ export const I18N_INSTRUMENT_BASIC_MATERIALS = "instrument.basic.materials";
 export const I18N_INSTRUMENT_DATE_FROM = "instrument.date.from";
 export const I18N_INSTRUMENT_DATE_TO = "instrument.date.to";
 
+export const I18N_FOOTER = "footer";
+
 const resources = {
   en: {
     translation: {
@@ -51,7 +53,9 @@ const resources = {
       [I18N_COUNTRY]: "Country",
       [I18N_INSTRUMENT_BASIC_MATERIALS]: "Basic Materials",
       [I18N_INSTRUMENT_DATE_FROM]: "From",
-      [I18N_INSTRUMENT_DATE_TO]: "To"
+      [I18N_INSTRUMENT_DATE_TO]: "To",
+
+      [I18N_FOOTER]: "Muse Group Frontend Academy",
     }
   },
   ru: {
@@ -76,7 +80,7 @@ const resources = {
       [I18N_COUNTRY]: "Страна",
       [I18N_INSTRUMENT_BASIC_MATERIALS]: "Основные материалы",
       [I18N_INSTRUMENT_DATE_FROM]: "С",
-      [I18N_INSTRUMENT_DATE_TO]: "По"
+      [I18N_INSTRUMENT_DATE_TO]: "По",
     }
   }
 };
@@ -86,6 +90,7 @@ i18n
   .init({
     resources,
     lng: window.navigator.language,
+    fallbackLng: "en",
     interpolation: {
       escapeValue: false // react already safes from xss
     }
diff --git a/client/src/widgets/footer/ui/Footer.widget.tsx b/client/src/widgets/footer/ui/Footer.widget.tsx
index 502b6be1..649e72a9 100644
--- a/client/src/widgets/footer/ui/Footer.widget.tsx
+++ b/client/src/widgets/footer/ui/Footer.widget.tsx
@@ -1,8 +1,11 @@
 import React from "react";
 import styles from "./styles/Footer.widget.module.css";
 import { useDarkMode } from "shared/dark-mode/use-dark-mode";
+import { useTranslation } from "react-i18next";
+import { I18N_FOOTER } from "../../../i18n";
 
 export function FooterWidget() {
+  const { t } = useTranslation();
   const { darkMode } = useDarkMode();
 
   return (
@@ -12,7 +15,7 @@ export function FooterWidget() {
     ${darkMode && styles.footer__dark}
   `}
     >
-      Muse Group Frontend Academy
+      {t(I18N_FOOTER)}
     </footer>
   );
 }