Merge pull request #58 from sulianova/VladimirFyodorov/migrate-to-i18…

…next migrate to i18next
sulianova · Dec 21, 2023 · 1dd0ebf · 1dd0ebf
2 parents bc19e84 + 084282c
commit 1dd0ebf
Show file tree

Hide file tree

Showing 8 changed files with 154 additions and 133 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -28,7 +28,7 @@
     "classnames": "^2.3.2",
     "firebase": "^10.1.0",
     "gsap": "^3.12.2",
-    "i18n-js": "^4.3.0",
+    "i18next": "^23.7.11",
     "locomotive-scroll": "^4.1.4",
     "lodash": "^4.17.21",
     "react": "^18.2.0",

diff --git a/src/assets/translations/ru.json b/src/assets/translations/ru.json
@@ -74,7 +74,7 @@
     "profile": {
       "title": "Профиль",
       "courseGroupTitle":"Ваши онлайн-курсы",
-      "endDate": "Доступ до %{date}",
+      "endDate": "Доступ до {{date}}",
       "noCoursesFallback": {
         "title": "У вас пока нет онлайн-курсов",
         "suggestionLink": "Посетите главную страницу",
@@ -88,29 +88,35 @@
   "courseLanding": {
       "programIntro" : {
         "free": "Бесплатно",
-        "datesInfoLabel": "%{startDate} | %{durationInUnits} %{unitPlural}"
+        "datesInfoLabel": "{{startDate}} | {{durationInUnits}} $t({{unit}}.p, {\"count\": {{durationInUnits}} })"
       },
       "form": {
-          "title:course": "Записаться на онлайн курс",
-          "title:webinar": "Записаться на онлайн интенсив",
+          "title": {
+            "course": "Записаться на онлайн курс",
+            "webinar": "Записаться на онлайн интенсив"
+          },
           "subtitle": "Заполните форму и я свяжусь с вами, чтобы оформить оплату",
-          "courseName": " “%{courseName}”",
+          "courseName": " “{{courseName}}”",
           "emailCaption": "Адрес, к которому хотите привязать покупку. Если у вас есть профиль с другими покупками, используйте адрес оттуда",
           "agreement": "Оферта и Договор",
-          "orderIsCreated:course": "Мы получили вашу заявку! Сегодня на почту %{email} мы отправим письмо с информацией об оплате.",
-          "orderIsCreated:webinar": "Мы получили вашу заявку! Сегодня на почту %{email} мы отправим письмо с информацией о том, как получить доступ к материалам интенсива."
+          "orderIsCreated": {
+            "course": "Мы получили вашу заявку! Сегодня на почту {{email}} мы отправим письмо с информацией об оплате.",
+            "webinar": "Мы получили вашу заявку! Сегодня на почту {{email}} мы отправим письмо с информацией о том, как получить доступ к материалам интенсива."
+          }
       },
       "description": {
-        "title:course": "Курс подойдeт тем, кто",
-        "title:webinar": "Интенсив подойдeт тем, кто"
+        "title": {
+          "course": "Курс подойдeт тем, кто",
+          "webinar": "Интенсив подойдeт тем, кто"
+        }
       },
       "prizes": {
         "title:course": "Подарки для участников курса",
         "title:webinar": "Подарки для участников интенсива"
       },
       "discountBanner": {
         "discount": "скидка",
-        "description": "Успейте записаться\nсо скидкой\nдо %{deadline} по Мск",
+        "description": "Успейте записаться\nсо скидкой\nдо {{deadline}} по Мск",
         "day": "д",
         "hour": "ч",
         "minute": "м",
@@ -136,28 +142,30 @@
       "modules": {
         "title": "Программа",
         "videosNumber": {
-          "one": "%{count} видео-урок",
-          "few": "%{count} видео-урока",
-          "many": "%{count} видео-уроков",
-          "other": "%{count} видео-уроков"
+          "p_one": "{{count}} видео-урок",
+          "p_few": "{{count}} видео-урока",
+          "p_many": "{{count}} видео-уроков",
+          "p_other": "{{count}} видео-уроков"
         },
         "homeworksNumber": {
-          "one": "%{count} практическое задание",
-          "few": "%{count} практических заданий",
-          "many": "%{count} практических заданий",
-          "other": "%{count} практических заданий"
+          "p_one": "{{count}} практическое задание",
+          "p_few": "{{count}} практических заданий",
+          "p_many": "{{count}} практических заданий",
+          "p_other": "{{count}} практических заданий"
         },
-        "duration:week": {
-          "one": "%{count} учебная неделя",
-          "few": "%{count} учебные недели",
-          "many": "%{count} учебных недель",
-          "other": "%{count} учебных недель"
-        },
-        "duration:day": {
-          "one": "%{count} учебный день",
-          "few": "%{count} учебных дня",
-          "many": "%{count} учебных дней",
-          "other": "%{count} учебных дней"
+        "duration": {
+          "day": {
+            "p_one": "{{count}} учебный день",
+            "p_few": "{{count}} учебных дня",
+            "p_many": "{{count}} учебных дней",
+            "p_other": "{{count}} учебных дней"
+          },
+          "week": {
+            "p_one": "{{count}} учебная неделя",
+            "p_few": "{{count}} учебные недели",
+            "p_many": "{{count}} учебных недель",
+            "p_other": "{{count}} учебных недель"
+          }
         },
         "feedback": "индивидуальная обратная связь по дз",
         "chat": "телеграм-чат для общения в группе"
@@ -186,8 +194,8 @@
     "navTabsPractice": "Задание",
     "navTabsResults": "Итоги",
     "navToLessons": "Все уроки",
-    "uploadDeadline": "Дедлайн: %{date}\u00A0по\u00A0Мск",
-    "resultsDeadline": "Публикация итогов: %{date}",
+    "uploadDeadline": "Дедлайн: {{date}}\u00A0по\u00A0Мск",
+    "resultsDeadline": "Публикация итогов: {{date}}",
     "uploadBtn": "Загрузить работу",
     "myWorkLinkTitle": "Моя работа",
     "editTitle": "Редактировать...",
@@ -218,33 +226,25 @@
       "showMoreBtn": "показать больше",
       "showLessBtn": "свернуть"
     },
-    "fallback:lessonNotStartedYet": "Этот урок пока не начался. Он начнётся %{startDate}, будем вас ждать",
-    "fallback:noResults:beforeDeadline": "Дата публикации результатов %{resultsEndDate}. Приходите позже.",
+    "fallback:lessonNotStartedYet": "Этот урок пока не начался. Он начнётся {{startDate}}, будем вас ждать",
+    "fallback:noResults:beforeDeadline": "Дата публикации результатов {{resultsEndDate}}. Приходите позже.",
     "fallback:noResults:deadlineDay": "Результатов пока нет, но они должны появится сегодня.",
     "fallback:noResults:pastDeadline": "Извиняемся за задержку результатов, мы их активно проверяем. Если задержка более дня, напишите, пожалуйста, в телеграм-чат курса."
   },
   "day": {
-    "one": "день",
-    "few": "дня",
-    "many": "дней",
-    "other": "дней"
+    "p_one": "день",
+    "p_few": "дня",
+    "p_many": "дней",
+    "p_other": "дней"
   },
   "week": {
-    "one": "неделя",
-    "few": "недели",
-    "many": "недель",
-    "other": "недель"
-  },
-  "duration:week": {
-    "one": "%{count} неделя",
-    "few": "%{count} недели",
-    "many": "%{count} недель",
-    "other": "%{count} недель"
+    "p_one": "неделя",
+    "p_few": "недели",
+    "p_many": "недель",
+    "p_other": "недель"
   },
-  "duration:day": {
-    "one": "%{count} день",
-    "few": "%{count} дня",
-    "many": "%{count} дней",
-    "other": "%{count} дней"
+  "duration": {
+    "week": "{{count}} $t(week.p, {\"count\": {{count}} })",
+    "day": "{{count}} $t(day.p, {\"count\": {{count}} })"
   }
 }
diff --git a/src/pages/Course/Landing/ProgramBlocs/DecisionForm/DecisionForm.tsx b/src/pages/Course/Landing/ProgramBlocs/DecisionForm/DecisionForm.tsx
@@ -29,12 +29,12 @@ function DecisionForm(props: IProps) {
       <div className={cx({ block: true, blockDetails: true })}>
         <div className={classes.titleWrapper}>
           <div>
-            <div className={classes.subtitle + ' s-text-24'}>{t(`title:${type}`)}</div>
+            <div className={classes.subtitle + ' s-text-24'}>{t(`title.${type}`)}</div>
             <h1 className={classes.title}>{t('courseName', { courseName: props.data.title })}</h1>
           </div>
           <div className={classes.courseInfo}>
             <div className={' s-text-18'}>{formatCourseDate(props.data.startDate, props.data.endDate)}</div>
-            <div className={' s-text-18'}>{i18n.t(`duration:${duration.unit}`, { count: duration.value })}</div>
+            <div className={' s-text-18'}>{i18n.t(`duration.${duration.unit}`, { count: duration.value })}</div>
           </div>
         </div>
         <div className={classes.credit}>
@@ -46,7 +46,7 @@ function DecisionForm(props: IProps) {
         </div>
       </div>
       <div className={classes.block}>
-        {orderEmail ? <span>{t(`orderIsCreated:${type}`, { email: orderEmail })}</span>
+        {orderEmail ? <span>{t(`orderIsCreated.${type}`, { email: orderEmail })}</span>
         : (<>
           <Form onOrderCreated={({ email }) => setOrderEmail(email)}/>
           <div className={classes.agreement}>

diff --git a/src/pages/Course/Landing/ProgramBlocs/Description/Description.tsx b/src/pages/Course/Landing/ProgramBlocs/Description/Description.tsx
@@ -22,7 +22,7 @@ function Description(props: IProps) {
       <Animated.Scroll>
         {(id, className) => (
           <h2 className={cx({ title: true }, className) + ' s-text-56'} id={id}>
-            {t(`title:${props.data.type}`)}
+            {t(`title.${props.data.type}`)}
           </h2>
         )}
       </Animated.Scroll>

diff --git a/src/pages/Course/Landing/ProgramBlocs/Modules/Modules.tsx b/src/pages/Course/Landing/ProgramBlocs/Modules/Modules.tsx
@@ -27,9 +27,9 @@ function Modules(props: IProps) {
           <h2 className={cx({ title: true }) + ' s-text-56'} >{t('title')}</h2>
           <div className={classes.desc + ' s-text-24'}>{<Text text={modulesDescription}/>}</div>
           <div className={classes.tags}>
-            <div className={classes.tag + ' s-text-18'}>{t('videosNumber', { count: videosNumber })}</div>
-            <div className={classes.tag + ' s-text-18'}>{t('homeworksNumber', { count: homeworksNumber })}</div>
-            <div className={classes.tag + ' s-text-18'}>{t(`duration:${duration.unit}`, { count: duration.value })}</div>
+            <div className={classes.tag + ' s-text-18'}>{t('videosNumber.p', { count: videosNumber })}</div>
+            <div className={classes.tag + ' s-text-18'}>{t('homeworksNumber.p', { count: homeworksNumber })}</div>
+            <div className={classes.tag + ' s-text-18'}>{t(`duration.${duration.unit}.p`, { count: duration.value })}</div>
             <div className={classes.tag + ' s-text-18 b-black-new'}>{t('feedback')}</div>
             <div className={classes.tag + ' s-text-18 b-black-new'}>{t('chat')}</div>
           </div>

diff --git a/src/pages/Course/Landing/ProgramIntro/ProgramIntro.tsx b/src/pages/Course/Landing/ProgramIntro/ProgramIntro.tsx
@@ -22,7 +22,7 @@ function ProgramIntro(props: IProps) {
     t('datesInfoLabel', { 
       startDate: formatDate(startDate, { timeZone: 'Europe/Moscow' }),
       durationInUnits: duration.value,
-      unitPlural: i18n.t(duration.unit, { count: duration.value }),
+      unit: duration.unit,
     }),
     !creditPrice && !discontDeadline && t('free'),
   ].filter(Boolean);