From 3af4fae1c592bb04f891f78a626698eb18d5adaf Mon Sep 17 00:00:00 2001
From: Llewellyn Dsouza <lledsouza2209@gmail.com>
Date: Wed, 5 Jan 2022 17:42:28 +0530
Subject: [PATCH] Added: i18next logic

---
 public/assets/locales/en/translation.json  |  5 ++++
 public/assets/locales/en/translations.json |  5 ----
 src/App.js                                 | 29 +++++++++++++++++++---
 src/components/Test.js                     | 11 ++++++++
 4 files changed, 42 insertions(+), 8 deletions(-)
 create mode 100644 public/assets/locales/en/translation.json
 delete mode 100644 public/assets/locales/en/translations.json
 create mode 100644 src/components/Test.js

diff --git a/public/assets/locales/en/translation.json b/public/assets/locales/en/translation.json
new file mode 100644
index 0000000..d891be5
--- /dev/null
+++ b/public/assets/locales/en/translation.json
@@ -0,0 +1,5 @@
+{
+  "app_title": "Hey there",
+  "language": "Language",
+  "welcome_message": "Welcome with translations"
+}
diff --git a/public/assets/locales/en/translations.json b/public/assets/locales/en/translations.json
deleted file mode 100644
index 81d12c5..0000000
--- a/public/assets/locales/en/translations.json
+++ /dev/null
@@ -1,5 +0,0 @@
-{
-  "app_title": "Title",
-  "language": "Language",
-  "welcome_message": "Welcome"
-}
\ No newline at end of file
diff --git a/src/App.js b/src/App.js
index 729fff2..8403805 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,9 +1,32 @@
+import i18next from 'i18next';
+import { initReactI18next } from 'react-i18next';
+import HttpApi from 'i18next-http-backend';
+import LanguageDetector from 'i18next-browser-languagedetector';
+import Test from './components/Test';
+
+i18next
+  .use(HttpApi)
+  .use(LanguageDetector)
+  .use(initReactI18next)
+  .init({
+    supportedLngs: ['en' /*, 'fr'*/],
+    fallbackLng: 'en',
+    debug: false,
+    // Options for language detector
+    detection: {
+      order: ['localStorage', 'sessionStorage', 'cookie', 'htmlTag'],
+      caches: ['localStorage'],
+    },
+    // react: { useSuspense: false },
+    backend: {
+      loadPath: '/assets/locales/{{lng}}/translation.json',
+    },
+  });
+
 function App() {
   return (
     <div className="App">
-      <header>
-        Hey there
-      </header>
+      <Test />
     </div>
   );
 }
diff --git a/src/components/Test.js b/src/components/Test.js
new file mode 100644
index 0000000..3fbd94e
--- /dev/null
+++ b/src/components/Test.js
@@ -0,0 +1,11 @@
+import { useTranslation } from 'react-i18next';
+
+export default function Test() {
+  const { t } = useTranslation();
+  return (
+    <>
+      <h3>{t('app_title')}</h3>
+      <div>{t('welcome_message')}</div>
+    </>
+  );
+}