add i18next functionality

Author: olgarozmetova

README.md

@@ -7,6 +7,6 @@
 
 [![Actions Status](https://github.com/olgarozmetova/frontend-project-11/actions/workflows/hexlet-check.yml/badge.svg)](https://github.com/olgarozmetova/frontend-project-11/actions)
 
-### View a website:
+### View an app:
 
 https://frontend-project-11-pi-seven.vercel.app

package-lock.json

@@ -32,6 +32,7 @@
   "dependencies": {
     "@popperjs/core": "^2.11.8",
     "bootstrap": "^5.3.8",
+    "i18next": "^25.6.1",
     "on-change": "^6.0.1",
     "yup": "^1.7.1"
   }

package.json

@@ -0,0 +1,11 @@
+import i18next from 'i18next'
+import ru from './locales/ru.js'
+
+export const initI18n = () =>
+  i18next.init({
+    lng: 'ru',
+    debug: true,
+    resources: {
+      ru,
+    },
+  })

src/i18n.js

@@ -0,0 +1,11 @@
+export default {
+  translation: {
+    form: {
+      success: 'RSS успешно загружен',
+    },
+    errors: {
+      invalidUrl: 'Ссылка должна быть валидным URL',
+      exists: 'RSS уже существует',
+    },
+  },
+}

src/locales/ru.js

@@ -1,46 +1,55 @@
 import './style.css'
-import { buildSchema } from './validation.js'
+
+import { initI18n } from './i18n.js'
+import { configureYup, buildSchema } from './validation.js'
 import { initView } from './view.js'
 
-const state = {
-  feeds: [],
-  form: {
-    status: 'filling',
-    error: null,
-  },
-}
+initI18n()
+  .then(() => {
+    configureYup()
 
-const elements = {
-  form: document.querySelector('.rss-form'),
-  input: document.querySelector('#url-input'),
-  feedback: document.querySelector('.feedback'),
-}
+    const state = {
+      feeds: [],
+      form: {
+        status: 'filling',
+        error: null,
+      },
+    }
 
-const watched = initView(state, elements)
+    const elements = {
+      form: document.querySelector('.rss-form'),
+      input: document.querySelector('#url-input'),
+      feedback: document.querySelector('.feedback'),
+    }
 
-elements.form.addEventListener('submit', (e) => {
-  e.preventDefault()
+    const watched = initView(state, elements)
 
-  const formData = new FormData(e.target)
-  const url = formData.get('url').trim()
+    elements.form.addEventListener('submit', (e) => {
+      e.preventDefault()
 
-  const data = { url }
-  const schema = buildSchema(watched.feeds)
+      const formData = new FormData(e.target)
+      const url = formData.get('url').trim()
 
-  watched.form.status = 'filling'
-  watched.form.error = null
+      const data = { url }
+      const schema = buildSchema(watched.feeds)
 
-  schema
-    .validate(data)
-    .then(({ url }) => {
-      // successful
-      watched.feeds.push(url)
-      watched.form.status = 'success'
+      watched.form.status = 'filling'
       watched.form.error = null
+
+      schema
+        .validate(data)
+        .then(({ url }) => {
+          // successful
+          watched.feeds.push(url)
+          watched.form.status = 'success'
+        })
+        .catch((err) => {
+          // errors
+          watched.form.status = 'invalid'
+          watched.form.error = err.message
+        })
     })
-    .catch((err) => {
-      // errors
-      watched.form.status = 'invalid'
-      watched.form.error = err.message
-    })
-})
+  })
+  .catch((err) => {
+    console.error('Ошибка инициализации i18next:', err)
+  })

src/main.js

@@ -1,5 +1,16 @@
 import * as yup from 'yup'
 
+export const configureYup = () => {
+  yup.setLocale({
+    string: {
+      url: 'errors.invalidUrl',
+    },
+    mixed: {
+      notOneOf: 'errors.exists',
+    },
+  })
+}
+
 export const buildSchema = urls =>
   yup.object().shape({
     url: yup.string().trim().required().url().notOneOf(urls),

src/validation.js

@@ -1,4 +1,5 @@
 import onChange from 'on-change'
+import i18next from 'i18next'
 
 export const initView = (state, elements) => {
   const watched = onChange(state, (path, value) => {
@@ -9,7 +10,7 @@ export const initView = (state, elements) => {
         input.classList.add('is-invalid')
         feedback.classList.remove('text-success')
         feedback.classList.add('text-danger')
-        feedback.textContent = 'Ссылка должна быть валидным URL'
+        feedback.textContent = i18next.t(value)
       }
       else {
         input.classList.remove('is-invalid')
@@ -20,7 +21,7 @@ export const initView = (state, elements) => {
     if (path === 'form.status' && value === 'success') {
       feedback.classList.remove('text-danger')
       feedback.classList.add('text-success')
-      feedback.textContent = 'RSS успешно загружен'
+      feedback.textContent = i18next.t('form.success')
 
       form.reset()
       input.focus()