feat: возможность переключения языка интерфейса

Author: daria-z

index.html

@@ -124,7 +124,7 @@ <h1 id="main-title" class="display-3 mb-0">RSS агрегатор</h1>
               class="form-label visually-hidden">Выбор языка</label>
             <select class="form-select form-select-sm" id="languageSelectFooter"
               aria-label="Выбор языка">
-              <option value="ru" selected>Русский</option>
+              <option value="ru">Русский</option>
               <option value="en">English</option>
             </select>
           </div>

src/js/main.js

@@ -9,6 +9,7 @@ export const initApp = () => {
   const form = document.querySelector("#rss-form");
   const postsContainer = document.querySelector(".posts");
   const closeModalBtns = document.querySelectorAll('[data-bs-dismiss="modal"]');
+  const langSwitcher = document.querySelector("#languageSelectFooter");
 
   input.addEventListener("input", (e) => {
     model.form.updateInputValue(e.target.value);
@@ -37,4 +38,8 @@ export const initApp = () => {
       model.post.setActive(null);
     });
   });
+
+  langSwitcher.addEventListener('change', (e) => {
+    model.lng.handle(e.target.value);
+  })
 };

src/js/model/index.js

@@ -3,11 +3,13 @@ import * as form from "./form.js";
 import * as feed from "./feed.js";
 import * as post from "./post.js";
 import * as error from "./error.js";
+import * as lng from "./lng.js";
 
 export const model = {
   form,
   feed,
   post,
   update,
   error,
+  lng
 };

src/js/model/lng.js

@@ -0,0 +1,5 @@
+import state from "../state.js";
+
+export const handle = (value) => {
+  state.ui.lng = value;
+};

src/js/state.js

@@ -1,4 +1,5 @@
 import onChange from "on-change";
+import i18next from "../i18n.js";
 import { view } from "./view/index.js";
 import { model } from "./model/index.js";
 
@@ -13,6 +14,7 @@ const createState = () => {
     posts: [],
     activeItem: null,
     ui: {
+      lng: "ru",
       status: null, // 'error', 'success', 'pending'
       error: null,
     },
@@ -48,6 +50,10 @@ const createState = () => {
           view.ui.renderUi("error", value);
         }
         break;
+      case "ui.lng":
+        i18next.changeLanguage(state.ui.lng);
+        view.ui.renderUIText();
+        break;
     }
   });
 };

src/locales/en.js

@@ -1,6 +1,6 @@
 export default {
   translation: {
-    title: "RSS aggregator",
+    title: "RSS agregator",
     subtitle: "Start reading RSS today! It's easy, it's beautiful.",
     form_placeholder: "RSS Link",
     add_btn: "Add",