diff --git a/package.json b/package.json
index 0ff26ff..7f8cffe 100644
--- a/package.json
+++ b/package.json
@@ -11,6 +11,7 @@
"@testing-library/react": "^10.2.1",
"@testing-library/user-event": "^12.0.2",
"axios": "^0.21.1",
+ "country-flag-icons": "^1.4.0",
"dotenv": "^10.0.0",
"framer-motion": "^4",
"i18next": "^20.3.5",
@@ -18,7 +19,6 @@
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-i18next": "^11.11.4",
- "react-icons": "^3.0.0",
"react-qr-reader": "^2.2.1",
"react-redux": "^7.2.4",
"react-router-dom": "^5.2.0",
diff --git a/src/app/store.js b/src/app/store.js
index 0220126..1a4b3cd 100644
--- a/src/app/store.js
+++ b/src/app/store.js
@@ -1,10 +1,12 @@
import { configureStore } from '@reduxjs/toolkit';
import authSlice from '../features/auth/authSlice';
import covidSlice from '../features/auth/covidSlice';
+import langSlice from '../features/auth/langSlice';
export const store = configureStore({
reducer: {
auth: authSlice,
covid: covidSlice,
+ lang: langSlice,
},
});
diff --git a/src/components/LanguageSwitcher.js b/src/components/LanguageSwitcher.js
new file mode 100644
index 0000000..674b500
--- /dev/null
+++ b/src/components/LanguageSwitcher.js
@@ -0,0 +1,43 @@
+import { Select } from "@chakra-ui/react";
+import Flags from 'country-flag-icons/react/3x2';
+import { useTranslation } from "react-i18next";
+import { useDispatch } from "react-redux";
+import { setLanguage } from "../features/auth/langSlice";
+
+
+function LanguageSwitcher() {
+ const [, i18n] = useTranslation();
+ const dispatch = useDispatch();
+
+ const currentLangIcon = (() => {
+ switch (i18n.language) {
+ case "en":
+ return ;
+ case "ms":
+ return ;
+ case "zh":
+ return ;
+ case "ta":
+ return ;
+ default:
+ return ;
+ }
+ })();
+
+ const handleSelectLanguage = (e) => {
+ const languageKey = e.target.value;
+ i18n.changeLanguage(languageKey);
+ dispatch(setLanguage(languageKey));
+ }
+ return (
+
+
+ );
+}
+
+export default LanguageSwitcher;
\ No newline at end of file
diff --git a/src/features/auth/langSlice.js b/src/features/auth/langSlice.js
new file mode 100644
index 0000000..a164ca1
--- /dev/null
+++ b/src/features/auth/langSlice.js
@@ -0,0 +1,21 @@
+import { createSlice } from '@reduxjs/toolkit';
+import Cookies from 'js-cookie';
+
+const initialState = {
+ lang: Cookies.get('lang'),
+};
+
+export const langSlice = createSlice({
+ name: 'lang',
+ initialState,
+ reducers: {
+ setLanguage: (state, action) => {
+ state.lang = action.payload;
+ Cookies.set('lang', action.payload);
+ },
+ },
+});
+
+export const { setLanguage } = langSlice.actions;
+
+export default langSlice.reducer;
diff --git a/src/i18n.js b/src/i18n.js
index ef0a2e6..8e7b3c6 100644
--- a/src/i18n.js
+++ b/src/i18n.js
@@ -1,8 +1,10 @@
import i18n from 'i18next';
+import Cookies from 'js-cookie';
import { initReactI18next } from 'react-i18next';
-
import enTranslation from './locales/en/common.json';
import msTranslation from './locales/ms/common.json';
+import taTranslation from './locales/ta/common.json';
+import zhTranslation from './locales/zh/common.json';
const resources = {
en: {
@@ -11,11 +13,17 @@ const resources = {
ms: {
common: msTranslation,
},
+ zh: {
+ common: zhTranslation,
+ },
+ ta: {
+ common: taTranslation,
+ }
};
i18n.use(initReactI18next).init({
resources,
- lng: 'ms',
+ lng: Cookies.get('lang') ? Cookies.get('lang') : "en",
defaultNS: 'common',
interpolation: {
escapeValue: false,
diff --git a/src/screens/HomeScreen.js b/src/screens/HomeScreen.js
index 901ab9a..0c1abd0 100644
--- a/src/screens/HomeScreen.js
+++ b/src/screens/HomeScreen.js
@@ -19,6 +19,7 @@ import { Fragment, React, useEffect, useRef, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { useDispatch, useSelector } from 'react-redux';
import { Redirect, useHistory } from 'react-router-dom';
+import LanguageSwitcher from '../components/LanguageSwitcher';
import { authLogout } from '../features/auth/authSlice';
import { setCovidPositive } from '../features/auth/covidSlice';
@@ -225,6 +226,8 @@ function Home() {
+
+
);
diff --git a/src/screens/LoginScreen.js b/src/screens/LoginScreen.js
index 004c005..c6926ee 100644
--- a/src/screens/LoginScreen.js
+++ b/src/screens/LoginScreen.js
@@ -6,6 +6,7 @@ import { Trans } from 'react-i18next';
import { useDispatch, useSelector } from 'react-redux';
import { Redirect, useHistory } from 'react-router-dom';
import TelegramLoginButton from 'react-telegram-login';
+import LanguageSwitcher from '../components/LanguageSwitcher';
import { authLogin, authLogout } from '../features/auth/authSlice';
function Login() {
@@ -109,7 +110,7 @@ function Login() {
/>
-
+
Privacy notes:
Telegram Login allows us to verify your identity, without collecting
any of your data. Telegram does NOT give us your phone number. The
@@ -130,6 +131,8 @@ function Login() {
information is being handled securely.
+
+
);
diff --git a/yarn.lock b/yarn.lock
index 9a47934..afa1e29 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4301,6 +4301,11 @@ cosmiconfig@^7.0.0:
path-type "^4.0.0"
yaml "^1.10.0"
+country-flag-icons@^1.4.0:
+ version "1.4.0"
+ resolved "https://registry.yarnpkg.com/country-flag-icons/-/country-flag-icons-1.4.0.tgz#68a55441dbe98a7f028d4b00c1dfef3b9f83b7cd"
+ integrity sha512-tIeh/IZbm3G7O1ocNuEckmd1jkABkJzCPhQm+rBgJXkz1L+lKfwVY/rAy+ih06zGD4kagrZ+1eOndga09y8UHw==
+
create-ecdh@^4.0.0:
version "4.0.4"
resolved "https://registry.yarnpkg.com/create-ecdh/-/create-ecdh-4.0.4.tgz#d6e7f4bffa66736085a0762fd3a632684dabcc4e"
@@ -9935,13 +9940,6 @@ react-i18next@^11.11.4:
"@babel/runtime" "^7.14.5"
html-parse-stringify "^3.0.1"
-react-icons@^3.0.0:
- version "3.11.0"
- resolved "https://registry.yarnpkg.com/react-icons/-/react-icons-3.11.0.tgz#2ca2903dfab8268ca18ebd8cc2e879921ec3b254"
- integrity sha512-JRgiI/vdF6uyBgyZhVyYJUZAop95Sy4XDe/jmT3R/bKliFWpO/uZBwvSjWEdxwzec7SYbEPNPck0Kff2tUGM2Q==
- dependencies:
- camelcase "^5.0.0"
-
react-is@^16.13.1, react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.1:
version "16.13.1"
resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"