From 3ae99adc570b242767ac8c327e38648fb18d337a Mon Sep 17 00:00:00 2001
From: Kavin Venkatachalam
 <50441969+kavinvenkatachalam@users.noreply.github.com>
Date: Wed, 21 Sep 2022 10:53:30 +0530
Subject: [PATCH] [Bug]: Fixed localisation for subpath (#4057)

* Fixed localisation for subpath

* Fixed notification typo on localisation
---
 .../_components/NotificationCenter/index.jsx  | 12 ++++++-----
 frontend/src/i18n.js                          | 20 -------------------
 frontend/src/index.jsx                        | 19 +++++++++++++++++-
 3 files changed, 25 insertions(+), 26 deletions(-)
 delete mode 100644 frontend/src/i18n.js

diff --git a/frontend/src/_components/NotificationCenter/index.jsx b/frontend/src/_components/NotificationCenter/index.jsx
index 7c01938669..642514f967 100644
--- a/frontend/src/_components/NotificationCenter/index.jsx
+++ b/frontend/src/_components/NotificationCenter/index.jsx
@@ -91,7 +91,7 @@ export const NotificationCenter = () => {
                 </p>
                 <p className="empty-subtitle text-muted">
                   {`${t('header.notificationCenter.youDontHaveany', `You don't have any`)} ${
-                    !isRead && t('header.notificationCenter.un', 'un')
+                    !isRead ? t('header.notificationCenter.un', 'un') : ''
                   }${t('header.notificationCenter.read', 'read')} ${t(
                     `header.notificationCenter.notifications`,
                     'notifications'
@@ -108,10 +108,12 @@ export const NotificationCenter = () => {
           </div>
           <div className="card-footer text-center margin-auto">
             <a href="#" className="text-muted text-decoration-none" onClick={() => setIsRead(!isRead)}>
-              {`${t('header.notificationCenter.view', 'View')} ${isRead && t('header.notificationCenter.un', 'un')}${t(
-                'header.notificationCenter.read',
-                'read'
-              )} ${t(`header.notificationCenter.notifications`, 'notifications').toLowerCase()}`}
+              {`${t('header.notificationCenter.view', 'View')} ${
+                isRead ? t('header.notificationCenter.un', 'un') : ''
+              }${t('header.notificationCenter.read', 'read')} ${t(
+                `header.notificationCenter.notifications`,
+                'notifications'
+              ).toLowerCase()}`}
             </a>
           </div>
         </div>
diff --git a/frontend/src/i18n.js b/frontend/src/i18n.js
deleted file mode 100644
index 38d8d671f7..0000000000
--- a/frontend/src/i18n.js
+++ /dev/null
@@ -1,20 +0,0 @@
-// eslint-disable-next-line import/no-unresolved
-import i18n from 'i18next';
-import { initReactI18next } from 'react-i18next';
-import LanguageDetector from 'i18next-browser-languagedetector';
-
-import Backend from 'i18next-http-backend';
-
-i18n
-  .use(Backend)
-  .use(LanguageDetector)
-  .use(initReactI18next)
-  .init({
-    load: 'languageOnly',
-    fallbackLng: 'en',
-    backend: {
-      loadPath: `/assets/translations/{{lng}}.json`,
-    },
-  });
-
-export default i18n;
diff --git a/frontend/src/index.jsx b/frontend/src/index.jsx
index 78d4600607..77b66f9d3c 100755
--- a/frontend/src/index.jsx
+++ b/frontend/src/index.jsx
@@ -5,7 +5,11 @@ import { Integrations } from '@sentry/tracing';
 import { createBrowserHistory } from 'history';
 import { appService } from '@/_services';
 import { App } from './App';
-import './i18n';
+// eslint-disable-next-line import/no-unresolved
+import i18n from 'i18next';
+import { initReactI18next } from 'react-i18next';
+import LanguageDetector from 'i18next-browser-languagedetector';
+import Backend from 'i18next-http-backend';
 
 const AppWithProfiler = Sentry.withProfiler(App);
 
@@ -14,6 +18,19 @@ appService
   .then((config) => {
     window.public_config = config;
 
+    const path = config?.SUB_PATH || '/';
+    i18n
+      .use(Backend)
+      .use(LanguageDetector)
+      .use(initReactI18next)
+      .init({
+        load: 'languageOnly',
+        fallbackLng: 'en',
+        backend: {
+          loadPath: `${path}assets/translations/{{lng}}.json`,
+        },
+      });
+
     if (window.public_config.APM_VENDOR === 'sentry') {
       const history = createBrowserHistory();
       const tooljetServerUrl = window.public_config.TOOLJET_SERVER_URL;