From d1a88c046ba06e0c918f594f82acccee7b1cf00c Mon Sep 17 00:00:00 2001 From: Nareshkumar Rao <_accounts@nareshkumarrao.com> Date: Fri, 13 Aug 2021 17:01:50 +0200 Subject: [PATCH] add language selector --- package.json | 2 +- src/app/store.js | 2 ++ src/components/LanguageSwitcher.js | 43 ++++++++++++++++++++++++++++++ src/features/auth/langSlice.js | 21 +++++++++++++++ src/i18n.js | 12 +++++++-- src/screens/HomeScreen.js | 3 +++ src/screens/LoginScreen.js | 5 +++- yarn.lock | 12 ++++----- 8 files changed, 89 insertions(+), 11 deletions(-) create mode 100644 src/components/LanguageSwitcher.js create mode 100644 src/features/auth/langSlice.js 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"