From 26329c7a0b5055e101acab4152c51b16bfb09fc1 Mon Sep 17 00:00:00 2001 From: Nareshkumar Rao <_accounts@nareshkumarrao.com> Date: Fri, 13 Aug 2021 01:44:54 +0200 Subject: [PATCH 1/6] setup i18n --- package.json | 2 ++ src/i18n.js | 28 +++++++++++++++++++++ src/index.js | 1 + src/locales/en/common.json | 49 ++++++++++++++++++++++++++++++++++++ src/locales/ms/common.json | 49 ++++++++++++++++++++++++++++++++++++ src/screens/HomeScreen.js | 41 ++++++++++++++---------------- src/screens/LockoutScreen.js | 12 ++++++--- src/screens/LoginScreen.js | 23 ++++++++++------- src/screens/ScannerScreen.js | 18 ++++++------- src/screens/SuccessScreen.js | 7 +++--- src/screens/VerifyScreen.js | 8 +++--- yarn.lock | 29 ++++++++++++++++++++- 12 files changed, 215 insertions(+), 52 deletions(-) create mode 100644 src/i18n.js create mode 100644 src/locales/en/common.json create mode 100644 src/locales/ms/common.json diff --git a/package.json b/package.json index 6ee95c5..0ff26ff 100644 --- a/package.json +++ b/package.json @@ -13,9 +13,11 @@ "axios": "^0.21.1", "dotenv": "^10.0.0", "framer-motion": "^4", + "i18next": "^20.3.5", "js-cookie": "^2.2.1", "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", diff --git a/src/i18n.js b/src/i18n.js new file mode 100644 index 0000000..671a87c --- /dev/null +++ b/src/i18n.js @@ -0,0 +1,28 @@ +import i18n from "i18next"; +import { initReactI18next } from "react-i18next"; + +import enTranslation from "./locales/en/common.json"; +import msTranslation from "./locales/ms/common.json"; + +const resources = { + en: { + common: enTranslation, + }, + ms: { + common: msTranslation, + } +}; + +i18n + .use(initReactI18next) + .init({ + resources, + lng: "ms", + defaultNS: 'common', + interpolation: { + escapeValue: false + }, + debug:true + }); + + export default i18n; \ No newline at end of file diff --git a/src/index.js b/src/index.js index 96b7d62..1633881 100644 --- a/src/index.js +++ b/src/index.js @@ -6,6 +6,7 @@ import App from './App'; import { store } from './app/store'; import reportWebVitals from './reportWebVitals'; import * as serviceWorker from './serviceWorker'; +import "./i18n" import { Provider } from 'react-redux'; require('dotenv').config(); diff --git a/src/locales/en/common.json b/src/locales/en/common.json new file mode 100644 index 0000000..5edd55c --- /dev/null +++ b/src/locales/en/common.json @@ -0,0 +1,49 @@ +{ + "appTitle": "OurSejahtera Contact Tracing", + + "homeExplanation": "This is your QR code. Show this to others to allow them to confirm a contact, or allow them to create an account!", + "scanButtonLabel": "Scan a QR Code", + + "donateButtonLabel": "Donate!", + "donateButtonParagraph": "Servers require money to run, and apps require labor to develop and maintain. You can show your support by donating what you can. Every cent counts, buy me my next coffee, or help pay for a month of server usage!", + + "logOutButtonLabel": "Log Out!", + + "covidPositiveReportButton": "Report Positive COVID19", + "covidPositiveAlertHeader": "Confirm Tested COVID19 Positive", + "covidPositiveAlertBody": "Please confirm that you have been tested POSITIVE with COVID19. Upon confirmation, this app will inform the people you have come in contact with in the last 7 days.", + + "confirm": "Confirm", + "cancel": "Cancel", + + "errorToastTitle": "Error!", + "defaultErrorToastDescription": "An error has occured.", + "confirmedToastTitle": "Confirmed!", + "confirmingToastTitle": "Confirming", + "confirmingToastDescription": "Hold on while we confirm with our servers.", + "notLoggedInToastDescription": "You are not logged in!", + "failedLoginToastTitle": "Login Failed", + "failedLoginToastDescription": "The wrong credentials were used", + "loggingInToastTitle": "Logging you in", + "loggingInToastDescription": "Hold on, we're logging you in.", + "checkingLockoutToastTitle": "Checking your lockout status...", + "badVerificationToastTitle": "Bad Verification", + "badQRCodeToastTitle": "Bad QR Code", + "contactLoggedToastTitle": "Contact Successfully Logged", + "checkingQRToastTitle": "Hold on, we're checking this QR code.", + + "login": "Login", + + "loginPrivacyNotice": "<0><0>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 only piece of information stored on our server is your Telegram ID, this is an internal ID Number Telegram uses that is SEPARATE from your Telegram Username.

All the code for this project is <8>Open Source, that means anyone, including you can audit and verify that your information is being handled securely.", + + "lockout": "Lockout", + "lockoutExplanation": "<0>You have reported that you have been tested <1>POSITIVE with COVID19. This lockout is to remind you to quarantine yourself according to local COVID19 health policies. This lockout will automatically be lifted after 14 days.

<5>Please avoid contact with other people for the duration of this lockout!", + + "showQRCode": "Show my QR Code", + + "contactSavedParagraph": "We have succesfully saved your contact! Stay safe out there, and let others scan your QR code too!", + "returnHomeButtonLabel": "Return home", + + "verifyingParagraph": "We are currently verifying you. Please wait.", + "verifyingErrorParagraph": "An error has occured verifying you. Please try scanning the QR code again?" +} \ No newline at end of file diff --git a/src/locales/ms/common.json b/src/locales/ms/common.json new file mode 100644 index 0000000..992d36f --- /dev/null +++ b/src/locales/ms/common.json @@ -0,0 +1,49 @@ +{ + "appTitle": "OurSejahtera Contact Tracing", + + "homeExplanation": "Inilah kod QR anda. Show this to others to allow them to confirm a contact!", + "scanButtonLabel": "Mengimbas kod QR", + + "donateButtonLabel": "Menderma!", + "donateButtonParagraph": "Servers require money to run, and apps require labor to develop and maintain. You can show your support by donating what you can. Every cent counts, buy me my next coffee, or help pay for a month of server usage!", + + "logOutButtonLabel": "Daftar keluar!", + + "covidPositiveReportButton": "Lapor kes COVID19", + "covidPositiveAlertHeader": "Confirm Tested COVID19 Positive", + "covidPositiveAlertBody": "Please confirm that you have been tested POSITIVE with COVID19. Upon confirmation, this app will inform the people you have come in contact with in the last 7 days.", + + "confirm": "Confirm", + "cancel": "Cancel", + + "errorToastTitle": "Error!", + "defaultErrorToastDescription": "An error has occured.", + "confirmedToastTitle": "Confirmed!", + "confirmingToastTitle": "Confirming", + "confirmingToastDescription": "Hold on while we confirm with our servers.", + "notLoggedInToastDescription": "You are not logged in!", + "failedLoginToastTitle": "Login Failed", + "failedLoginToastDescription": "The wrong credentials were used", + "loggingInToastTitle": "Logging you in", + "loggingInToastDescription": "Hold on, we're logging you in.", + "checkingLockoutToastTitle": "Checking your lockout status...", + "badVerificationToastTitle": "Bad Verification", + "badQRCodeToastTitle": "Bad QR Code", + "contactLoggedToastTitle": "Contact Successfully Logged", + "checkingQRToastTitle": "Hold on, we're checking this QR code.", + + "login": "Login", + + "loginPrivacyNotice": "<0><0>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 only piece of information stored on our server is your Telegram ID, this is an internal ID Number Telegram uses that is SEPARATE from your Telegram Username.

All the code for this project is <8>Open Source, that means anyone, including you can audit and verify that your information is being handled securely.", + + "lockout": "Lockout", + "lockoutExplanation": "<0>You have reported that you have been tested <1>POSITIVE with COVID19. This lockout is to remind you to quarantine yourself according to local COVID19 health policies. This lockout will automatically be lifted after 14 days.

<5>Please avoid contact with other people for the duration of this lockout!", + + "showQRCode": "Show my QR Code", + + "contactSavedParagraph": "We have succesfully saved your contact! Stay safe out there, and let others scan your QR code too!", + "returnHomeButtonLabel": "Return home", + + "verifyingParagraph": "We are currently verifying you. Please wait.", + "verifyingErrorParagraph": "An error has occured verifying you. Please try scanning the QR code again?" +} \ No newline at end of file diff --git a/src/screens/HomeScreen.js b/src/screens/HomeScreen.js index adf47d5..6c60708 100644 --- a/src/screens/HomeScreen.js +++ b/src/screens/HomeScreen.js @@ -16,6 +16,7 @@ import { } from '@chakra-ui/react'; import axios from 'axios'; 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 { authLogout } from '../features/auth/authSlice'; @@ -54,13 +55,14 @@ function ConfirmCOVIDPositiveAlertDialog() { const toast = useToast(); const history = useHistory(); const dispatch = useDispatch(); + const [t] = useTranslation(); const onClose = () => { setOpen(false); }; - const showErrorToast = (errorMessage = 'An error has occured.') => { + const showErrorToast = (errorMessage = t("defaultErrorToastDescription")) => { toast.closeAll(); toast({ - title: 'Error!', + title: t("errorToastTitle"), description: errorMessage, status: 'error', duration: 5000, @@ -68,8 +70,8 @@ function ConfirmCOVIDPositiveAlertDialog() { }; const onConfirm = () => { toast({ - title: 'Confirming', - description: 'Hold on while we confirm with our servers.', + title: t("confirmingToastTitle"), + description: t("confirmingToastDescription"), status: 'info', duration: 10000, }); @@ -86,7 +88,7 @@ function ConfirmCOVIDPositiveAlertDialog() { dispatch(setCovidPositive()); toast.closeAll(); toast({ - title: 'Confirmed!', + title: t("confirmedToastTitle"), status: 'info', duration: 2000, }); @@ -98,7 +100,7 @@ function ConfirmCOVIDPositiveAlertDialog() { console.log(err); try { if (err.response.status === 401) { - showErrorToast('You are not logged in!'); + showErrorToast(t("notLoggedInToastDescription")); history.push('/login'); } else { showErrorToast(); @@ -120,7 +122,7 @@ function ConfirmCOVIDPositiveAlertDialog() { setOpen(true); }} > - Report Positive COVID19 + {t("covidPositiveReportButton")} - Confirm Tested COVID19 Positive + {t("covidPositiveAlertHeader")} - Please confirm that you have been tested POSITIVE with COVID19. - Upon confirmation, this app will inform the people you have come - in contact with in the last 7 days. + {t("covidPositiveAlertBody")} @@ -155,6 +155,7 @@ function ConfirmCOVIDPositiveAlertDialog() { function Home() { const history = useHistory(); const dispatch = useDispatch(); + const [t] = useTranslation(); const handleLogout = () => { dispatch(authLogout()); @@ -198,8 +199,7 @@ function Home() { > - This is your QR code. Show this to others to allow them to confirm a - contact, or allow them to create an account! + {t("homeExplanation")} {process.env.REACT_APP_DONATE_LINK && ( - Servers require money to run, and apps require labor to develop - and maintain. You can show your support by donating what you can. - Every cent counts, buy me my next coffee, or help pay for a month - of server usage! + {t("donateButtonParagraph")} )} @@ -230,7 +227,7 @@ function Home() { diff --git a/src/screens/LockoutScreen.js b/src/screens/LockoutScreen.js index 82bd469..78280c6 100644 --- a/src/screens/LockoutScreen.js +++ b/src/screens/LockoutScreen.js @@ -1,6 +1,7 @@ import { Flex, Heading, Text, useToast } from '@chakra-ui/react'; import axios from 'axios'; import { useEffect } from 'react'; +import { Trans, useTranslation } from 'react-i18next'; import { useDispatch, useSelector } from 'react-redux'; import { Redirect, useHistory } from 'react-router-dom'; import { authLogout } from '../features/auth/authSlice'; @@ -15,10 +16,11 @@ function Lockout() { const dispatch = useDispatch(); const history = useHistory(); const toast = useToast(); + const [t] = useTranslation(); useEffect(() => { toast({ - title: 'Checking your lockout status...', + title: t("checkingLockoutToastTitle"), status: 'info', duration: 10000, }); @@ -44,14 +46,14 @@ function Lockout() { history.push('/login'); } else { toast({ - title: 'Server Error Occurred', + title: t("defaultErrorToastDescription"), status: 'error', duration: 10000, }); } } catch (e) {} }); - }, [dispatch, history, toast]); + }, [dispatch, history, toast, t]); if (!isAuthenticated) return ; if (!isCovidPositive) return ; @@ -72,7 +74,8 @@ function Lockout() { rounded={6} id="contentFlex" > - Lockout + {t("Lockout")} + You have reported that you have been tested POSITIVE with COVID19. This lockout is to remind you to quarantine yourself @@ -85,6 +88,7 @@ function Lockout() { lockout! + ); diff --git a/src/screens/LoginScreen.js b/src/screens/LoginScreen.js index 56d5f50..a4e5800 100644 --- a/src/screens/LoginScreen.js +++ b/src/screens/LoginScreen.js @@ -1,6 +1,8 @@ import { Divider, Flex, Heading, Link, Text, useToast } from '@chakra-ui/react'; import axios from 'axios'; import { React } from 'react'; +import { useTranslation } from 'react-i18next'; +import { Trans } from 'react-i18next'; import { useDispatch, useSelector } from 'react-redux'; import { Redirect, useHistory } from 'react-router-dom'; import TelegramLoginButton from 'react-telegram-login'; @@ -10,14 +12,15 @@ function Login() { const toast = useToast(); const history = useHistory(); const dispatch = useDispatch(); + const [t] = useTranslation(); const isAuthenticated = useSelector(state => state.auth.isAuthenticated); if (isAuthenticated) return ; const handleTelegramResponse = response => { toast({ - title: 'Logging you in', - description: "Hold on, we're logging you in.", + title: t("loggingInToastTitle"), + description: t("loggingInToastDescription"), status: 'info', duration: 10000, isClosable: false, @@ -45,7 +48,7 @@ function Login() { toast.closeAll(); dispatch(authLogout()); toast({ - title: 'An error occurred', + title: t("defaultErrorToastDescription"), description: response.data.message, status: 'error', duration: 9000, @@ -59,8 +62,8 @@ function Login() { if (err.response.status === 401) { dispatch(authLogout()); toast({ - title: 'Login Failed', - description: 'The wrong credentials were used.', + title: t("failedLoginToastTitle"), + description: t("failedLoginToastDescription"), status: 'error', duration: 9000, isClosable: true, @@ -68,8 +71,8 @@ function Login() { } } else { toast({ - title: 'An error occurred', - description: 'Sorry, an error occurred on our side.', + title: t("errorToastTitle"), + description: t("defaultErrorToastDescription"), status: 'error', duration: 9000, isClosable: true, @@ -95,16 +98,17 @@ function Login() { id="contentFlex" > - OurSejahtera Contact Tracing + {t("appTitle")} - Login + {t("login")} + Privacy notes:
Telegram Login allows us to verify your identity, without collecting @@ -125,6 +129,7 @@ function Login() { , that means anyone, including you can audit and verify that your information is being handled securely. + ); diff --git a/src/screens/ScannerScreen.js b/src/screens/ScannerScreen.js index 213d3b6..3afcf26 100644 --- a/src/screens/ScannerScreen.js +++ b/src/screens/ScannerScreen.js @@ -1,6 +1,7 @@ import { Button, Divider, Flex, useToast } from '@chakra-ui/react'; import axios from 'axios'; import { useEffect, useState } from 'react'; +import { useTranslation } from 'react-i18next'; import QrReader from 'react-qr-reader'; import { useDispatch, useSelector } from 'react-redux'; import { Redirect, useHistory } from 'react-router-dom'; @@ -11,6 +12,7 @@ function Scanner() { const toast = useToast(); const history = useHistory(); const dispatch = useDispatch(); + const [t] = useTranslation(); const [scanData, setScanData] = useState(null); @@ -32,8 +34,7 @@ function Scanner() { const hash = re.exec(scanData); if (hash) { toast({ - title: 'Checking QR code.', - description: "Hold on, we're checking this QR code.", + title: t("checkingQRToastTitle"), status: 'info', duration: 10000, isClosable: false, @@ -51,14 +52,13 @@ function Scanner() { if (res.data.loggedIn) { toast.closeAll(); toast({ - title: 'Contact Succesfully Logged', + title: t("contactLoggedToastTitle"), status: 'info', duration: 2000, }); } else { toast({ - title: "You're not logged in!", - description: 'Please log in and try again!', + title: t("notLoggedInToastDescription"), status: 'error', duration: 2000, }); @@ -70,7 +70,7 @@ function Scanner() { .catch(e => { toast.closeAll(); toast({ - title: 'Bad Verification', + title: t("badVerificationToastTitle"), status: 'error', duration: 2000, }); @@ -78,14 +78,14 @@ function Scanner() { } else { toast.closeAll(); toast({ - title: 'Bad QR code', + title: t("badQRCodeToastTitle"), status: 'error', duration: 3000, isClosable: true, }); } } - }, [scanData, dispatch, history, toast]); + }, [scanData, dispatch, history, toast, t]); const isAuthenticated = useSelector(state => state.auth.isAuthenticated); const isCovidPositive = useSelector(state => state.covid.isCovidPositive); @@ -135,7 +135,7 @@ function Scanner() { history.push('/home'); }} > - Show my QR Code + {t("showQRCode")} diff --git a/src/screens/SuccessScreen.js b/src/screens/SuccessScreen.js index ec2fa94..0bd4448 100644 --- a/src/screens/SuccessScreen.js +++ b/src/screens/SuccessScreen.js @@ -1,8 +1,10 @@ import { Button, Flex, Heading, Text } from '@chakra-ui/react'; +import { useTranslation } from 'react-i18next'; import { useHistory } from 'react-router-dom'; function Success() { const history = useHistory(); + const [t] = useTranslation(); return ( Success! - We have succesfully saved your contact! Stay safe out there, and let - others scan your QR code too! + {t("contactSavedParagraph")} diff --git a/src/screens/VerifyScreen.js b/src/screens/VerifyScreen.js index aedcedf..719c1bc 100644 --- a/src/screens/VerifyScreen.js +++ b/src/screens/VerifyScreen.js @@ -1,12 +1,14 @@ import { Flex, Text } from '@chakra-ui/react'; import axios from 'axios'; import { useEffect, useState } from 'react'; +import { useTranslation } from 'react-i18next'; import { useHistory } from 'react-router-dom'; function Verify(props) { const verifyID = props.match.params.id; const [verifyError, setVerifyError] = useState(false); const history = useHistory(); + const [t] = useTranslation(); useEffect(() => { if (verifyError) return; @@ -33,12 +35,10 @@ function Verify(props) { }, [verifyError, history, verifyID]); const errorMessage = ( - - An error has occured verifying you. Please try scanning the QR code again? - + {t("verifyingErrorParagraph")} ); const loadingMessage = ( - We are currently verifying you. Please wait. + {t("verifyingParagraph")} ); return ( diff --git a/yarn.lock b/yarn.lock index bd645f5..9a47934 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1091,7 +1091,7 @@ dependencies: regenerator-runtime "^0.13.4" -"@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.10.3", "@babel/runtime@^7.12.1", "@babel/runtime@^7.12.13", "@babel/runtime@^7.12.5", "@babel/runtime@^7.13.10", "@babel/runtime@^7.9.2": +"@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.10.3", "@babel/runtime@^7.12.0", "@babel/runtime@^7.12.1", "@babel/runtime@^7.12.13", "@babel/runtime@^7.12.5", "@babel/runtime@^7.13.10", "@babel/runtime@^7.14.5", "@babel/runtime@^7.9.2": version "7.14.8" resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.14.8.tgz#7119a56f421018852694290b9f9148097391b446" integrity sha512-twj3L8Og5SaCRCErB4x4ajbvBIVV77CGeFglHpeg5WC5FF8TZzBWXtTJ4MqaD9QszLYTtr+IsaAL2rEUevb+eg== @@ -6336,6 +6336,13 @@ html-minifier-terser@^5.0.1: relateurl "^0.2.7" terser "^4.6.3" +html-parse-stringify@^3.0.1: + version "3.0.1" + resolved "https://registry.yarnpkg.com/html-parse-stringify/-/html-parse-stringify-3.0.1.tgz#dfc1017347ce9f77c8141a507f233040c59c55d2" + integrity sha512-KknJ50kTInJ7qIScF3jeaFRpMpE8/lfiTdzf/twXyPBLAGrLRTmkz3AdTnKeh40X8k9L2fdYwEp/42WGXIRGcg== + dependencies: + void-elements "3.1.0" + html-webpack-plugin@4.5.0: version "4.5.0" resolved "https://registry.yarnpkg.com/html-webpack-plugin/-/html-webpack-plugin-4.5.0.tgz#625097650886b97ea5dae331c320e3238f6c121c" @@ -6443,6 +6450,13 @@ human-signals@^1.1.1: resolved "https://registry.yarnpkg.com/human-signals/-/human-signals-1.1.1.tgz#c5b1cd14f50aeae09ab6c59fe63ba3395fe4dfa3" integrity sha512-SEQu7vl8KjNL2eoGBLF3+wAjpsNfA9XMlXAYj/3EdaNfAlxKthD1xjEQfGOUhllCGGJVNY34bRr6lPINhNjyZw== +i18next@^20.3.5: + version "20.3.5" + resolved "https://registry.yarnpkg.com/i18next/-/i18next-20.3.5.tgz#14308b79a3f1cafb24fdcd8e182d3673baf1e979" + integrity sha512-//MGeU6n4TencJmCgG+TCrpdgAD/NDEU/KfKQekYbJX6QV7sD/NjWQdVdBi+bkT0snegnSoB7QhjSeatrk3a0w== + dependencies: + "@babel/runtime" "^7.12.0" + iconv-lite@0.4.24: version "0.4.24" resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.24.tgz#2022b4b25fbddc21d2f524974a474aafe733908b" @@ -9913,6 +9927,14 @@ react-focus-lock@2.5.0: use-callback-ref "^1.2.1" use-sidecar "^1.0.1" +react-i18next@^11.11.4: + version "11.11.4" + resolved "https://registry.yarnpkg.com/react-i18next/-/react-i18next-11.11.4.tgz#f6f9a1c827e7a5271377de2bf14db04cb1c9e5ce" + integrity sha512-ayWFlu8Sc7GAxW1PzMaPtzq+yiozWMxs0P1WeITNVzXAVRhC0Httkzw/IiODBta6seJRBCLrtUeFUSXhAIxlRg== + dependencies: + "@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" @@ -12019,6 +12041,11 @@ vm-browserify@^1.0.1: resolved "https://registry.yarnpkg.com/vm-browserify/-/vm-browserify-1.1.2.tgz#78641c488b8e6ca91a75f511e7a3b32a86e5dda0" integrity sha512-2ham8XPWTONajOR0ohOKOHXkm3+gaBmGut3SRuu75xLd/RRaY6vqgh8NBYYk7+RW3u5AtzPQZG8F10LHkl0lAQ== +void-elements@3.1.0: + version "3.1.0" + resolved "https://registry.yarnpkg.com/void-elements/-/void-elements-3.1.0.tgz#614f7fbf8d801f0bb5f0661f5b2f5785750e4f09" + integrity sha1-YU9/v42AHwu18GYfWy9XhXUOTwk= + w3c-hr-time@^1.0.2: version "1.0.2" resolved "https://registry.yarnpkg.com/w3c-hr-time/-/w3c-hr-time-1.0.2.tgz#0a89cdf5cc15822df9c360543676963e0cc308cd" From 16bdd7590362edf4d297eee8193f51dd1c4ac3d6 Mon Sep 17 00:00:00 2001 From: Nareshkumar Rao Date: Fri, 13 Aug 2021 01:47:06 +0200 Subject: [PATCH 2/6] ran linter --- src/i18n.js | 32 ++++++------ src/index.js | 2 +- src/locales/en/common.json | 96 ++++++++++++++++++------------------ src/locales/ms/common.json | 96 ++++++++++++++++++------------------ src/screens/HomeScreen.js | 36 ++++++-------- src/screens/LockoutScreen.js | 30 +++++------ src/screens/LoginScreen.js | 58 +++++++++++----------- src/screens/ScannerScreen.js | 12 ++--- src/screens/SuccessScreen.js | 6 +-- src/screens/VerifyScreen.js | 8 +-- 10 files changed, 182 insertions(+), 194 deletions(-) diff --git a/src/i18n.js b/src/i18n.js index 671a87c..ef0a2e6 100644 --- a/src/i18n.js +++ b/src/i18n.js @@ -1,8 +1,8 @@ -import i18n from "i18next"; -import { initReactI18next } from "react-i18next"; +import i18n from 'i18next'; +import { initReactI18next } from 'react-i18next'; -import enTranslation from "./locales/en/common.json"; -import msTranslation from "./locales/ms/common.json"; +import enTranslation from './locales/en/common.json'; +import msTranslation from './locales/ms/common.json'; const resources = { en: { @@ -10,19 +10,17 @@ const resources = { }, ms: { common: msTranslation, - } + }, }; -i18n - .use(initReactI18next) - .init({ - resources, - lng: "ms", - defaultNS: 'common', - interpolation: { - escapeValue: false - }, - debug:true - }); +i18n.use(initReactI18next).init({ + resources, + lng: 'ms', + defaultNS: 'common', + interpolation: { + escapeValue: false, + }, + debug: true, +}); - export default i18n; \ No newline at end of file +export default i18n; diff --git a/src/index.js b/src/index.js index 1633881..bcf46b0 100644 --- a/src/index.js +++ b/src/index.js @@ -6,7 +6,7 @@ import App from './App'; import { store } from './app/store'; import reportWebVitals from './reportWebVitals'; import * as serviceWorker from './serviceWorker'; -import "./i18n" +import './i18n'; import { Provider } from 'react-redux'; require('dotenv').config(); diff --git a/src/locales/en/common.json b/src/locales/en/common.json index 5edd55c..e1443d1 100644 --- a/src/locales/en/common.json +++ b/src/locales/en/common.json @@ -1,49 +1,49 @@ { - "appTitle": "OurSejahtera Contact Tracing", - - "homeExplanation": "This is your QR code. Show this to others to allow them to confirm a contact, or allow them to create an account!", - "scanButtonLabel": "Scan a QR Code", - - "donateButtonLabel": "Donate!", - "donateButtonParagraph": "Servers require money to run, and apps require labor to develop and maintain. You can show your support by donating what you can. Every cent counts, buy me my next coffee, or help pay for a month of server usage!", - - "logOutButtonLabel": "Log Out!", - - "covidPositiveReportButton": "Report Positive COVID19", - "covidPositiveAlertHeader": "Confirm Tested COVID19 Positive", - "covidPositiveAlertBody": "Please confirm that you have been tested POSITIVE with COVID19. Upon confirmation, this app will inform the people you have come in contact with in the last 7 days.", - - "confirm": "Confirm", - "cancel": "Cancel", - - "errorToastTitle": "Error!", - "defaultErrorToastDescription": "An error has occured.", - "confirmedToastTitle": "Confirmed!", - "confirmingToastTitle": "Confirming", - "confirmingToastDescription": "Hold on while we confirm with our servers.", - "notLoggedInToastDescription": "You are not logged in!", - "failedLoginToastTitle": "Login Failed", - "failedLoginToastDescription": "The wrong credentials were used", - "loggingInToastTitle": "Logging you in", - "loggingInToastDescription": "Hold on, we're logging you in.", - "checkingLockoutToastTitle": "Checking your lockout status...", - "badVerificationToastTitle": "Bad Verification", - "badQRCodeToastTitle": "Bad QR Code", - "contactLoggedToastTitle": "Contact Successfully Logged", - "checkingQRToastTitle": "Hold on, we're checking this QR code.", - - "login": "Login", - - "loginPrivacyNotice": "<0><0>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 only piece of information stored on our server is your Telegram ID, this is an internal ID Number Telegram uses that is SEPARATE from your Telegram Username.

All the code for this project is <8>Open Source, that means anyone, including you can audit and verify that your information is being handled securely.", - - "lockout": "Lockout", - "lockoutExplanation": "<0>You have reported that you have been tested <1>POSITIVE with COVID19. This lockout is to remind you to quarantine yourself according to local COVID19 health policies. This lockout will automatically be lifted after 14 days.

<5>Please avoid contact with other people for the duration of this lockout!", - - "showQRCode": "Show my QR Code", - - "contactSavedParagraph": "We have succesfully saved your contact! Stay safe out there, and let others scan your QR code too!", - "returnHomeButtonLabel": "Return home", - - "verifyingParagraph": "We are currently verifying you. Please wait.", - "verifyingErrorParagraph": "An error has occured verifying you. Please try scanning the QR code again?" -} \ No newline at end of file + "appTitle": "OurSejahtera Contact Tracing", + + "homeExplanation": "This is your QR code. Show this to others to allow them to confirm a contact, or allow them to create an account!", + "scanButtonLabel": "Scan a QR Code", + + "donateButtonLabel": "Donate!", + "donateButtonParagraph": "Servers require money to run, and apps require labor to develop and maintain. You can show your support by donating what you can. Every cent counts, buy me my next coffee, or help pay for a month of server usage!", + + "logOutButtonLabel": "Log Out!", + + "covidPositiveReportButton": "Report Positive COVID19", + "covidPositiveAlertHeader": "Confirm Tested COVID19 Positive", + "covidPositiveAlertBody": "Please confirm that you have been tested POSITIVE with COVID19. Upon confirmation, this app will inform the people you have come in contact with in the last 7 days.", + + "confirm": "Confirm", + "cancel": "Cancel", + + "errorToastTitle": "Error!", + "defaultErrorToastDescription": "An error has occured.", + "confirmedToastTitle": "Confirmed!", + "confirmingToastTitle": "Confirming", + "confirmingToastDescription": "Hold on while we confirm with our servers.", + "notLoggedInToastDescription": "You are not logged in!", + "failedLoginToastTitle": "Login Failed", + "failedLoginToastDescription": "The wrong credentials were used", + "loggingInToastTitle": "Logging you in", + "loggingInToastDescription": "Hold on, we're logging you in.", + "checkingLockoutToastTitle": "Checking your lockout status...", + "badVerificationToastTitle": "Bad Verification", + "badQRCodeToastTitle": "Bad QR Code", + "contactLoggedToastTitle": "Contact Successfully Logged", + "checkingQRToastTitle": "Hold on, we're checking this QR code.", + + "login": "Login", + + "loginPrivacyNotice": "<0><0>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 only piece of information stored on our server is your Telegram ID, this is an internal ID Number Telegram uses that is SEPARATE from your Telegram Username.

All the code for this project is <8>Open Source, that means anyone, including you can audit and verify that your information is being handled securely.", + + "lockout": "Lockout", + "lockoutExplanation": "<0>You have reported that you have been tested <1>POSITIVE with COVID19. This lockout is to remind you to quarantine yourself according to local COVID19 health policies. This lockout will automatically be lifted after 14 days.

<5>Please avoid contact with other people for the duration of this lockout!", + + "showQRCode": "Show my QR Code", + + "contactSavedParagraph": "We have succesfully saved your contact! Stay safe out there, and let others scan your QR code too!", + "returnHomeButtonLabel": "Return home", + + "verifyingParagraph": "We are currently verifying you. Please wait.", + "verifyingErrorParagraph": "An error has occured verifying you. Please try scanning the QR code again?" +} diff --git a/src/locales/ms/common.json b/src/locales/ms/common.json index 992d36f..8ba65e1 100644 --- a/src/locales/ms/common.json +++ b/src/locales/ms/common.json @@ -1,49 +1,49 @@ { - "appTitle": "OurSejahtera Contact Tracing", - - "homeExplanation": "Inilah kod QR anda. Show this to others to allow them to confirm a contact!", - "scanButtonLabel": "Mengimbas kod QR", - - "donateButtonLabel": "Menderma!", - "donateButtonParagraph": "Servers require money to run, and apps require labor to develop and maintain. You can show your support by donating what you can. Every cent counts, buy me my next coffee, or help pay for a month of server usage!", - - "logOutButtonLabel": "Daftar keluar!", - - "covidPositiveReportButton": "Lapor kes COVID19", - "covidPositiveAlertHeader": "Confirm Tested COVID19 Positive", - "covidPositiveAlertBody": "Please confirm that you have been tested POSITIVE with COVID19. Upon confirmation, this app will inform the people you have come in contact with in the last 7 days.", - - "confirm": "Confirm", - "cancel": "Cancel", - - "errorToastTitle": "Error!", - "defaultErrorToastDescription": "An error has occured.", - "confirmedToastTitle": "Confirmed!", - "confirmingToastTitle": "Confirming", - "confirmingToastDescription": "Hold on while we confirm with our servers.", - "notLoggedInToastDescription": "You are not logged in!", - "failedLoginToastTitle": "Login Failed", - "failedLoginToastDescription": "The wrong credentials were used", - "loggingInToastTitle": "Logging you in", - "loggingInToastDescription": "Hold on, we're logging you in.", - "checkingLockoutToastTitle": "Checking your lockout status...", - "badVerificationToastTitle": "Bad Verification", - "badQRCodeToastTitle": "Bad QR Code", - "contactLoggedToastTitle": "Contact Successfully Logged", - "checkingQRToastTitle": "Hold on, we're checking this QR code.", - - "login": "Login", - - "loginPrivacyNotice": "<0><0>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 only piece of information stored on our server is your Telegram ID, this is an internal ID Number Telegram uses that is SEPARATE from your Telegram Username.

All the code for this project is <8>Open Source, that means anyone, including you can audit and verify that your information is being handled securely.", - - "lockout": "Lockout", - "lockoutExplanation": "<0>You have reported that you have been tested <1>POSITIVE with COVID19. This lockout is to remind you to quarantine yourself according to local COVID19 health policies. This lockout will automatically be lifted after 14 days.

<5>Please avoid contact with other people for the duration of this lockout!", - - "showQRCode": "Show my QR Code", - - "contactSavedParagraph": "We have succesfully saved your contact! Stay safe out there, and let others scan your QR code too!", - "returnHomeButtonLabel": "Return home", - - "verifyingParagraph": "We are currently verifying you. Please wait.", - "verifyingErrorParagraph": "An error has occured verifying you. Please try scanning the QR code again?" -} \ No newline at end of file + "appTitle": "OurSejahtera Contact Tracing", + + "homeExplanation": "Inilah kod QR anda. Show this to others to allow them to confirm a contact!", + "scanButtonLabel": "Mengimbas kod QR", + + "donateButtonLabel": "Menderma!", + "donateButtonParagraph": "Servers require money to run, and apps require labor to develop and maintain. You can show your support by donating what you can. Every cent counts, buy me my next coffee, or help pay for a month of server usage!", + + "logOutButtonLabel": "Daftar keluar!", + + "covidPositiveReportButton": "Lapor kes COVID19", + "covidPositiveAlertHeader": "Confirm Tested COVID19 Positive", + "covidPositiveAlertBody": "Please confirm that you have been tested POSITIVE with COVID19. Upon confirmation, this app will inform the people you have come in contact with in the last 7 days.", + + "confirm": "Confirm", + "cancel": "Cancel", + + "errorToastTitle": "Error!", + "defaultErrorToastDescription": "An error has occured.", + "confirmedToastTitle": "Confirmed!", + "confirmingToastTitle": "Confirming", + "confirmingToastDescription": "Hold on while we confirm with our servers.", + "notLoggedInToastDescription": "You are not logged in!", + "failedLoginToastTitle": "Login Failed", + "failedLoginToastDescription": "The wrong credentials were used", + "loggingInToastTitle": "Logging you in", + "loggingInToastDescription": "Hold on, we're logging you in.", + "checkingLockoutToastTitle": "Checking your lockout status...", + "badVerificationToastTitle": "Bad Verification", + "badQRCodeToastTitle": "Bad QR Code", + "contactLoggedToastTitle": "Contact Successfully Logged", + "checkingQRToastTitle": "Hold on, we're checking this QR code.", + + "login": "Login", + + "loginPrivacyNotice": "<0><0>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 only piece of information stored on our server is your Telegram ID, this is an internal ID Number Telegram uses that is SEPARATE from your Telegram Username.

All the code for this project is <8>Open Source, that means anyone, including you can audit and verify that your information is being handled securely.", + + "lockout": "Lockout", + "lockoutExplanation": "<0>You have reported that you have been tested <1>POSITIVE with COVID19. This lockout is to remind you to quarantine yourself according to local COVID19 health policies. This lockout will automatically be lifted after 14 days.

<5>Please avoid contact with other people for the duration of this lockout!", + + "showQRCode": "Show my QR Code", + + "contactSavedParagraph": "We have succesfully saved your contact! Stay safe out there, and let others scan your QR code too!", + "returnHomeButtonLabel": "Return home", + + "verifyingParagraph": "We are currently verifying you. Please wait.", + "verifyingErrorParagraph": "An error has occured verifying you. Please try scanning the QR code again?" +} diff --git a/src/screens/HomeScreen.js b/src/screens/HomeScreen.js index 6c60708..901ab9a 100644 --- a/src/screens/HomeScreen.js +++ b/src/screens/HomeScreen.js @@ -59,10 +59,10 @@ function ConfirmCOVIDPositiveAlertDialog() { const onClose = () => { setOpen(false); }; - const showErrorToast = (errorMessage = t("defaultErrorToastDescription")) => { + const showErrorToast = (errorMessage = t('defaultErrorToastDescription')) => { toast.closeAll(); toast({ - title: t("errorToastTitle"), + title: t('errorToastTitle'), description: errorMessage, status: 'error', duration: 5000, @@ -70,8 +70,8 @@ function ConfirmCOVIDPositiveAlertDialog() { }; const onConfirm = () => { toast({ - title: t("confirmingToastTitle"), - description: t("confirmingToastDescription"), + title: t('confirmingToastTitle'), + description: t('confirmingToastDescription'), status: 'info', duration: 10000, }); @@ -88,7 +88,7 @@ function ConfirmCOVIDPositiveAlertDialog() { dispatch(setCovidPositive()); toast.closeAll(); toast({ - title: t("confirmedToastTitle"), + title: t('confirmedToastTitle'), status: 'info', duration: 2000, }); @@ -100,7 +100,7 @@ function ConfirmCOVIDPositiveAlertDialog() { console.log(err); try { if (err.response.status === 401) { - showErrorToast(t("notLoggedInToastDescription")); + showErrorToast(t('notLoggedInToastDescription')); history.push('/login'); } else { showErrorToast(); @@ -122,7 +122,7 @@ function ConfirmCOVIDPositiveAlertDialog() { setOpen(true); }} > - {t("covidPositiveReportButton")} + {t('covidPositiveReportButton')} - {t("covidPositiveAlertHeader")} + {t('covidPositiveAlertHeader')} - - {t("covidPositiveAlertBody")} - + {t('covidPositiveAlertBody')} @@ -199,7 +197,7 @@ function Home() { > - {t("homeExplanation")} + {t('homeExplanation')} {process.env.REACT_APP_DONATE_LINK && ( - - {t("donateButtonParagraph")} - + {t('donateButtonParagraph')} )} diff --git a/src/screens/LockoutScreen.js b/src/screens/LockoutScreen.js index 78280c6..1cbbf93 100644 --- a/src/screens/LockoutScreen.js +++ b/src/screens/LockoutScreen.js @@ -20,7 +20,7 @@ function Lockout() { useEffect(() => { toast({ - title: t("checkingLockoutToastTitle"), + title: t('checkingLockoutToastTitle'), status: 'info', duration: 10000, }); @@ -46,7 +46,7 @@ function Lockout() { history.push('/login'); } else { toast({ - title: t("defaultErrorToastDescription"), + title: t('defaultErrorToastDescription'), status: 'error', duration: 10000, }); @@ -74,20 +74,20 @@ function Lockout() { rounded={6} id="contentFlex" > - {t("Lockout")} + {t('Lockout')} - - You have reported that you have been tested POSITIVE with - COVID19. This lockout is to remind you to quarantine yourself - according to local COVID19 health policies. This lockout will - automatically be lifted after 14 days. -
-
- - Please avoid contact with other people for the duration of this - lockout! - - + + You have reported that you have been tested POSITIVE with + COVID19. This lockout is to remind you to quarantine yourself + according to local COVID19 health policies. This lockout will + automatically be lifted after 14 days. +
+
+ + Please avoid contact with other people for the duration of this + lockout! + + diff --git a/src/screens/LoginScreen.js b/src/screens/LoginScreen.js index a4e5800..004c005 100644 --- a/src/screens/LoginScreen.js +++ b/src/screens/LoginScreen.js @@ -19,8 +19,8 @@ function Login() { const handleTelegramResponse = response => { toast({ - title: t("loggingInToastTitle"), - description: t("loggingInToastDescription"), + title: t('loggingInToastTitle'), + description: t('loggingInToastDescription'), status: 'info', duration: 10000, isClosable: false, @@ -48,7 +48,7 @@ function Login() { toast.closeAll(); dispatch(authLogout()); toast({ - title: t("defaultErrorToastDescription"), + title: t('defaultErrorToastDescription'), description: response.data.message, status: 'error', duration: 9000, @@ -62,8 +62,8 @@ function Login() { if (err.response.status === 401) { dispatch(authLogout()); toast({ - title: t("failedLoginToastTitle"), - description: t("failedLoginToastDescription"), + title: t('failedLoginToastTitle'), + description: t('failedLoginToastDescription'), status: 'error', duration: 9000, isClosable: true, @@ -71,8 +71,8 @@ function Login() { } } else { toast({ - title: t("errorToastTitle"), - description: t("defaultErrorToastDescription"), + title: t('errorToastTitle'), + description: t('defaultErrorToastDescription'), status: 'error', duration: 9000, isClosable: true, @@ -98,10 +98,10 @@ function Login() { id="contentFlex" > - {t("appTitle")} + {t('appTitle')} - {t("login")} + {t('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 - only piece of information stored on our server is your Telegram ID, - this is an internal ID Number Telegram uses that is SEPARATE from your - Telegram Username. -
-
- All the code for this project is{' '} - - Open Source - - , that means anyone, including you can audit and verify that your - information is being handled securely. - + + 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 + only piece of information stored on our server is your Telegram ID, + this is an internal ID Number Telegram uses that is SEPARATE from + your Telegram Username. +
+
+ All the code for this project is{' '} + + Open Source + + , that means anyone, including you can audit and verify that your + information is being handled securely. + diff --git a/src/screens/ScannerScreen.js b/src/screens/ScannerScreen.js index 3afcf26..0d4a47b 100644 --- a/src/screens/ScannerScreen.js +++ b/src/screens/ScannerScreen.js @@ -34,7 +34,7 @@ function Scanner() { const hash = re.exec(scanData); if (hash) { toast({ - title: t("checkingQRToastTitle"), + title: t('checkingQRToastTitle'), status: 'info', duration: 10000, isClosable: false, @@ -52,13 +52,13 @@ function Scanner() { if (res.data.loggedIn) { toast.closeAll(); toast({ - title: t("contactLoggedToastTitle"), + title: t('contactLoggedToastTitle'), status: 'info', duration: 2000, }); } else { toast({ - title: t("notLoggedInToastDescription"), + title: t('notLoggedInToastDescription'), status: 'error', duration: 2000, }); @@ -70,7 +70,7 @@ function Scanner() { .catch(e => { toast.closeAll(); toast({ - title: t("badVerificationToastTitle"), + title: t('badVerificationToastTitle'), status: 'error', duration: 2000, }); @@ -78,7 +78,7 @@ function Scanner() { } else { toast.closeAll(); toast({ - title: t("badQRCodeToastTitle"), + title: t('badQRCodeToastTitle'), status: 'error', duration: 3000, isClosable: true, @@ -135,7 +135,7 @@ function Scanner() { history.push('/home'); }} > - {t("showQRCode")} + {t('showQRCode')} diff --git a/src/screens/SuccessScreen.js b/src/screens/SuccessScreen.js index 0bd4448..58d0df9 100644 --- a/src/screens/SuccessScreen.js +++ b/src/screens/SuccessScreen.js @@ -22,15 +22,13 @@ function Success() { rounded={6} > Success! - - {t("contactSavedParagraph")} - + {t('contactSavedParagraph')} diff --git a/src/screens/VerifyScreen.js b/src/screens/VerifyScreen.js index 719c1bc..dcec47b 100644 --- a/src/screens/VerifyScreen.js +++ b/src/screens/VerifyScreen.js @@ -34,12 +34,8 @@ function Verify(props) { }); }, [verifyError, history, verifyID]); - const errorMessage = ( - {t("verifyingErrorParagraph")} - ); - const loadingMessage = ( - {t("verifyingParagraph")} - ); + const errorMessage = {t('verifyingErrorParagraph')}; + const loadingMessage = {t('verifyingParagraph')}; return ( Date: Fri, 13 Aug 2021 02:01:56 +0200 Subject: [PATCH 3/6] setup local files for tamil and mandarin --- src/locales/ta/common.json | 49 ++++++++++++++++++++++++++++++++++++++ src/locales/zh/common.json | 49 ++++++++++++++++++++++++++++++++++++++ 2 files changed, 98 insertions(+) create mode 100644 src/locales/ta/common.json create mode 100644 src/locales/zh/common.json diff --git a/src/locales/ta/common.json b/src/locales/ta/common.json new file mode 100644 index 0000000..e1443d1 --- /dev/null +++ b/src/locales/ta/common.json @@ -0,0 +1,49 @@ +{ + "appTitle": "OurSejahtera Contact Tracing", + + "homeExplanation": "This is your QR code. Show this to others to allow them to confirm a contact, or allow them to create an account!", + "scanButtonLabel": "Scan a QR Code", + + "donateButtonLabel": "Donate!", + "donateButtonParagraph": "Servers require money to run, and apps require labor to develop and maintain. You can show your support by donating what you can. Every cent counts, buy me my next coffee, or help pay for a month of server usage!", + + "logOutButtonLabel": "Log Out!", + + "covidPositiveReportButton": "Report Positive COVID19", + "covidPositiveAlertHeader": "Confirm Tested COVID19 Positive", + "covidPositiveAlertBody": "Please confirm that you have been tested POSITIVE with COVID19. Upon confirmation, this app will inform the people you have come in contact with in the last 7 days.", + + "confirm": "Confirm", + "cancel": "Cancel", + + "errorToastTitle": "Error!", + "defaultErrorToastDescription": "An error has occured.", + "confirmedToastTitle": "Confirmed!", + "confirmingToastTitle": "Confirming", + "confirmingToastDescription": "Hold on while we confirm with our servers.", + "notLoggedInToastDescription": "You are not logged in!", + "failedLoginToastTitle": "Login Failed", + "failedLoginToastDescription": "The wrong credentials were used", + "loggingInToastTitle": "Logging you in", + "loggingInToastDescription": "Hold on, we're logging you in.", + "checkingLockoutToastTitle": "Checking your lockout status...", + "badVerificationToastTitle": "Bad Verification", + "badQRCodeToastTitle": "Bad QR Code", + "contactLoggedToastTitle": "Contact Successfully Logged", + "checkingQRToastTitle": "Hold on, we're checking this QR code.", + + "login": "Login", + + "loginPrivacyNotice": "<0><0>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 only piece of information stored on our server is your Telegram ID, this is an internal ID Number Telegram uses that is SEPARATE from your Telegram Username.

All the code for this project is <8>Open Source, that means anyone, including you can audit and verify that your information is being handled securely.", + + "lockout": "Lockout", + "lockoutExplanation": "<0>You have reported that you have been tested <1>POSITIVE with COVID19. This lockout is to remind you to quarantine yourself according to local COVID19 health policies. This lockout will automatically be lifted after 14 days.

<5>Please avoid contact with other people for the duration of this lockout!", + + "showQRCode": "Show my QR Code", + + "contactSavedParagraph": "We have succesfully saved your contact! Stay safe out there, and let others scan your QR code too!", + "returnHomeButtonLabel": "Return home", + + "verifyingParagraph": "We are currently verifying you. Please wait.", + "verifyingErrorParagraph": "An error has occured verifying you. Please try scanning the QR code again?" +} diff --git a/src/locales/zh/common.json b/src/locales/zh/common.json new file mode 100644 index 0000000..e1443d1 --- /dev/null +++ b/src/locales/zh/common.json @@ -0,0 +1,49 @@ +{ + "appTitle": "OurSejahtera Contact Tracing", + + "homeExplanation": "This is your QR code. Show this to others to allow them to confirm a contact, or allow them to create an account!", + "scanButtonLabel": "Scan a QR Code", + + "donateButtonLabel": "Donate!", + "donateButtonParagraph": "Servers require money to run, and apps require labor to develop and maintain. You can show your support by donating what you can. Every cent counts, buy me my next coffee, or help pay for a month of server usage!", + + "logOutButtonLabel": "Log Out!", + + "covidPositiveReportButton": "Report Positive COVID19", + "covidPositiveAlertHeader": "Confirm Tested COVID19 Positive", + "covidPositiveAlertBody": "Please confirm that you have been tested POSITIVE with COVID19. Upon confirmation, this app will inform the people you have come in contact with in the last 7 days.", + + "confirm": "Confirm", + "cancel": "Cancel", + + "errorToastTitle": "Error!", + "defaultErrorToastDescription": "An error has occured.", + "confirmedToastTitle": "Confirmed!", + "confirmingToastTitle": "Confirming", + "confirmingToastDescription": "Hold on while we confirm with our servers.", + "notLoggedInToastDescription": "You are not logged in!", + "failedLoginToastTitle": "Login Failed", + "failedLoginToastDescription": "The wrong credentials were used", + "loggingInToastTitle": "Logging you in", + "loggingInToastDescription": "Hold on, we're logging you in.", + "checkingLockoutToastTitle": "Checking your lockout status...", + "badVerificationToastTitle": "Bad Verification", + "badQRCodeToastTitle": "Bad QR Code", + "contactLoggedToastTitle": "Contact Successfully Logged", + "checkingQRToastTitle": "Hold on, we're checking this QR code.", + + "login": "Login", + + "loginPrivacyNotice": "<0><0>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 only piece of information stored on our server is your Telegram ID, this is an internal ID Number Telegram uses that is SEPARATE from your Telegram Username.

All the code for this project is <8>Open Source, that means anyone, including you can audit and verify that your information is being handled securely.", + + "lockout": "Lockout", + "lockoutExplanation": "<0>You have reported that you have been tested <1>POSITIVE with COVID19. This lockout is to remind you to quarantine yourself according to local COVID19 health policies. This lockout will automatically be lifted after 14 days.

<5>Please avoid contact with other people for the duration of this lockout!", + + "showQRCode": "Show my QR Code", + + "contactSavedParagraph": "We have succesfully saved your contact! Stay safe out there, and let others scan your QR code too!", + "returnHomeButtonLabel": "Return home", + + "verifyingParagraph": "We are currently verifying you. Please wait.", + "verifyingErrorParagraph": "An error has occured verifying you. Please try scanning the QR code again?" +} 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 4/6] 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" From 33fa1ae63ed04c27cf292529d563dc5b7de84fff Mon Sep 17 00:00:00 2001 From: Nareshkumar Rao Date: Fri, 13 Aug 2021 17:02:45 +0200 Subject: [PATCH 5/6] ran linter --- src/components/LanguageSwitcher.js | 73 ++++++++++++++++-------------- src/i18n.js | 4 +- 2 files changed, 40 insertions(+), 37 deletions(-) diff --git a/src/components/LanguageSwitcher.js b/src/components/LanguageSwitcher.js index 674b500..fcc53b7 100644 --- a/src/components/LanguageSwitcher.js +++ b/src/components/LanguageSwitcher.js @@ -1,43 +1,46 @@ -import { Select } from "@chakra-ui/react"; +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"; - +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 [, i18n] = useTranslation(); + const dispatch = useDispatch(); - const handleSelectLanguage = (e) => { - const languageKey = e.target.value; - i18n.changeLanguage(languageKey); - dispatch(setLanguage(languageKey)); + const currentLangIcon = (() => { + switch (i18n.language) { + case 'en': + return ; + case 'ms': + return ; + case 'zh': + return ; + case 'ta': + return ; + default: + return ; } - 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 +export default LanguageSwitcher; diff --git a/src/i18n.js b/src/i18n.js index 8e7b3c6..588bd88 100644 --- a/src/i18n.js +++ b/src/i18n.js @@ -18,12 +18,12 @@ const resources = { }, ta: { common: taTranslation, - } + }, }; i18n.use(initReactI18next).init({ resources, - lng: Cookies.get('lang') ? Cookies.get('lang') : "en", + lng: Cookies.get('lang') ? Cookies.get('lang') : 'en', defaultNS: 'common', interpolation: { escapeValue: false, From 9bd7f3097c636b47788e5e8c8fba56c3b3ca4588 Mon Sep 17 00:00:00 2001 From: Nareshkumar Rao <_accounts@nareshkumarrao.com> Date: Thu, 19 Aug 2021 22:15:00 +0200 Subject: [PATCH 6/6] updated malay translation --- src/components/LanguageSwitcher.js | 4 +- src/locales/ms/common.json | 68 +++++++++++++++--------------- 2 files changed, 36 insertions(+), 36 deletions(-) diff --git a/src/components/LanguageSwitcher.js b/src/components/LanguageSwitcher.js index fcc53b7..bf20fd9 100644 --- a/src/components/LanguageSwitcher.js +++ b/src/components/LanguageSwitcher.js @@ -37,8 +37,8 @@ function LanguageSwitcher() { > - - + {/* + */} ); } diff --git a/src/locales/ms/common.json b/src/locales/ms/common.json index 8ba65e1..7b015f4 100644 --- a/src/locales/ms/common.json +++ b/src/locales/ms/common.json @@ -1,49 +1,49 @@ { - "appTitle": "OurSejahtera Contact Tracing", + "appTitle": "Pengesanan Kontak OurSejahtera", - "homeExplanation": "Inilah kod QR anda. Show this to others to allow them to confirm a contact!", - "scanButtonLabel": "Mengimbas kod QR", + "homeExplanation": "Ini ialah kod QR anda. Tunjukkan kepada pengguna lain untuk mengesahkan kenalan.", + "scanButtonLabel": "Imbas kod QR", - "donateButtonLabel": "Menderma!", - "donateButtonParagraph": "Servers require money to run, and apps require labor to develop and maintain. You can show your support by donating what you can. Every cent counts, buy me my next coffee, or help pay for a month of server usage!", + "donateButtonLabel": "Derma!", + "donateButtonParagraph": "Memelihara server memerlukan wang dan membuat serta memantau aplikasi memerlukan tenaga kerja. Anda boleh menghulurkan bantuan dengan menderma mengikut kemampuan. Setiap sen ada nilainya.", - "logOutButtonLabel": "Daftar keluar!", + "logOutButtonLabel": "Daftar Keluar!", - "covidPositiveReportButton": "Lapor kes COVID19", - "covidPositiveAlertHeader": "Confirm Tested COVID19 Positive", - "covidPositiveAlertBody": "Please confirm that you have been tested POSITIVE with COVID19. Upon confirmation, this app will inform the people you have come in contact with in the last 7 days.", + "covidPositiveReportButton": "Laporkan Positif COVID19", + "covidPositiveAlertHeader": "Sahkan Diuji Positif COVID19", + "covidPositiveAlertBody": "Sila sahkan bahawa anda telah diuji positif COVID19. Atas pengesahan, aplikasi ini akan memaklumkan para individu yang telah bersemuka dengan anda dalam 7 hari yang lepas.", - "confirm": "Confirm", - "cancel": "Cancel", + "confirm": "Sahkan", + "cancel": "Batalkan", - "errorToastTitle": "Error!", - "defaultErrorToastDescription": "An error has occured.", - "confirmedToastTitle": "Confirmed!", - "confirmingToastTitle": "Confirming", - "confirmingToastDescription": "Hold on while we confirm with our servers.", - "notLoggedInToastDescription": "You are not logged in!", - "failedLoginToastTitle": "Login Failed", - "failedLoginToastDescription": "The wrong credentials were used", - "loggingInToastTitle": "Logging you in", - "loggingInToastDescription": "Hold on, we're logging you in.", - "checkingLockoutToastTitle": "Checking your lockout status...", - "badVerificationToastTitle": "Bad Verification", - "badQRCodeToastTitle": "Bad QR Code", - "contactLoggedToastTitle": "Contact Successfully Logged", - "checkingQRToastTitle": "Hold on, we're checking this QR code.", + "errorToastTitle": "Ralat!", + "defaultErrorToastDescription": "Ralat Berlaku.", + "confirmedToastTitle": "Disahkan!", + "confirmingToastTitle": "Mengesahkan", + "confirmingToastDescription": "Sila tunggu sebentar sementara kami sedang mengesahkan dengan server kami.", + "notLoggedInToastDescription": "Anda tidak didaftar masuk!", + "failedLoginToastTitle": "Gagal Daftar Masuk", + "failedLoginToastDescription": "Kelayakan yang salah telah digunakan", + "loggingInToastTitle": "Mendaftar masuk", + "loggingInToastDescription": "Sila tunggu sebentar sementara anda didaftar masuk.", + "checkingLockoutToastTitle": "Memeriksa status lockout anda...", + "badVerificationToastTitle": "Pengesahan Tidak Berfungsi", + "badQRCodeToastTitle": "Kod QR Tidak Berfungsi", + "contactLoggedToastTitle": "Kontak Berjaya Didaftar", + "checkingQRToastTitle": "Sila tunggu sebentar. Kami sedang memeriksa kod QR ini.", - "login": "Login", + "login": "Daftar Masuk", - "loginPrivacyNotice": "<0><0>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 only piece of information stored on our server is your Telegram ID, this is an internal ID Number Telegram uses that is SEPARATE from your Telegram Username.

All the code for this project is <8>Open Source, that means anyone, including you can audit and verify that your information is being handled securely.", + "loginPrivacyNotice": "<0><0>Notis Privasi:
Pendaftaran masuk melalui Telegram membolehkan pengesahan identiti anda tanpa pengumpulan data peribadi anda. Telegram TIDAK mendedahkan nombor telefon anda. Hanya ID Telegram anda akan disimpan dalam server kami. Ini ialah Nombor ID Telegram dalaman yang digunakan oleh Telegram dan BUKANNYA nama pengguna Telegram anda.

Segala kod untuk projek ini ialah <8>Sumber Terbuka, bermaksud sesiapa sahaja, termasuk diri anda boleh mengaudit dan mengesahkan bahawa segala maklumat dikendalikan dengan selamat.", "lockout": "Lockout", - "lockoutExplanation": "<0>You have reported that you have been tested <1>POSITIVE with COVID19. This lockout is to remind you to quarantine yourself according to local COVID19 health policies. This lockout will automatically be lifted after 14 days.

<5>Please avoid contact with other people for the duration of this lockout!", + "lockoutExplanation": "<0>Anda telah laporkan bahawa anda diuji <1>POSITIF COVID19. Lockout ini adalah untuk mengingatkan anda supaya mengkuarantinkan diri mengikut polisi kesihatan COVID19 tempatan. Lockout ini akan dibatalkan selepas 14 hari.

<5>Anda diminta untuk elak daripada berinteraksi dengan orang lain sewaktu lockout ini.", - "showQRCode": "Show my QR Code", + "showQRCode": "Tunjuk kod QR saya", - "contactSavedParagraph": "We have succesfully saved your contact! Stay safe out there, and let others scan your QR code too!", - "returnHomeButtonLabel": "Return home", + "contactSavedParagraph": "Kontak anda berjaya disimpan! Jaga kesejahteraan diri dan berikan orang lain imbas kod QR anda juga!", + "returnHomeButtonLabel": "Kembali", - "verifyingParagraph": "We are currently verifying you. Please wait.", - "verifyingErrorParagraph": "An error has occured verifying you. Please try scanning the QR code again?" + "verifyingParagraph": "Kami sedang mengesahkan anda. Sila tunggu sebentar.", + "verifyingErrorParagraph": "Ralat berlaku sewaktu pengesahan. Sila imbas kod QR sekali lagi." }