From 52af7ba13b5fec03b1b7bfcf2561b4ed0f7f4595 Mon Sep 17 00:00:00 2001 From: Adrian Cowan Date: Tue, 7 Feb 2023 22:17:53 +1100 Subject: [PATCH] website: show language in text area (#1296) * website: show language in text area When the language hasn't been detected (too little text) the langauge that it will be submitted as is shown. When we detect the language is not what will be submitted we show the detected language in red. The tooltip informs the user that they don't appear to be writing in the correct language. Note: this replaces the modal dialog that we use to popup if the language appeared to differ. * website: Don't suggest the user change the language --- website/public/locales/en/language.json | 22 ++++ .../src/components/Survey/TrackedTextarea.tsx | 120 ++++++++---------- website/src/styles/Theme/colors.ts | 2 + website/types/i18next.d.ts | 2 + 4 files changed, 79 insertions(+), 67 deletions(-) create mode 100644 website/public/locales/en/language.json diff --git a/website/public/locales/en/language.json b/website/public/locales/en/language.json new file mode 100644 index 00000000..b957103d --- /dev/null +++ b/website/public/locales/en/language.json @@ -0,0 +1,22 @@ +{ + "writing_wrong_langauge_a_b": "You appear to be writing in {{detected_lang}} but this will be submitted as {{submit_lang}}.", + "submitted_as": "This will be submitted as {{submit_lang}}", + "lang_ar": "Arabic", + "lang_bn": "Bengali", + "lang_ca": "Catalan", + "lang_de": "German", + "lang_en": "English", + "lang_es": "Spanish", + "lang_fr": "French", + "lang_hu": "Hungarian", + "lang_it": "Italian", + "lang_ja": "Japanese", + "lang_ko": "Korean", + "lang_pl": "Polish", + "lang_pt-BR": "Brazilian Portugese", + "lang_ru": "Russian", + "lang_tr": "Turkish", + "lang_uk-UA": "Ukrainian", + "lang_vi": "Vietnamese", + "lang_zh": "Chinese" +} diff --git a/website/src/components/Survey/TrackedTextarea.tsx b/website/src/components/Survey/TrackedTextarea.tsx index 196d2f1a..29b792df 100644 --- a/website/src/components/Survey/TrackedTextarea.tsx +++ b/website/src/components/Survey/TrackedTextarea.tsx @@ -1,23 +1,12 @@ -import {} from "@chakra-ui/react"; +import { Tooltip } from "@chakra-ui/react"; +import { Progress, Stack, Textarea, TextareaProps, useColorModeValue } from "@chakra-ui/react"; import lande from "lande"; -import { LanguageAbbreviations } from "src/lib/iso6393"; -import { useCookies } from "react-cookie"; +import { useTranslation } from "next-i18next"; import React from "react"; -import { - Progress, - Stack, - Textarea, - TextareaProps, - useColorModeValue, - Button, - Modal, - ModalBody, - ModalCloseButton, - ModalContent, - ModalHeader, - ModalOverlay, - useDisclosure, -} from "@chakra-ui/react"; +import { useCookies } from "react-cookie"; +import { getTypeSafei18nKey } from "src/lib/i18n"; +import { LanguageAbbreviations } from "src/lib/iso6393"; +import { colors } from "src/styles/Theme/colors"; interface TrackedTextboxProps { text: string; @@ -30,55 +19,23 @@ interface TrackedTextboxProps { onTextChange: (event: React.ChangeEvent) => void; } -const killEvent = (e) => e.stopPropagation(); - export const TrackedTextarea = (props: TrackedTextboxProps) => { - const [wordLimitForLangDetection, setWordLimitForLangDetection] = React.useState(10); + const { t } = useTranslation("language"); + const wordLimitForLangDetection = 4; const backgroundColor = useColorModeValue("gray.100", "gray.900"); const [cookies] = useCookies(["NEXT_LOCALE"]); const wordCount = (props.text.match(/\w+/g) || []).length; - const { isOpen, onOpen, onClose } = useDisclosure(); const currentLanguage = cookies["NEXT_LOCALE"]; - const closeTemporaryIgnoreLanguageDetection = () => { - setWordLimitForLangDetection(2 * wordCount); - onClose(); - }; - - console.log("", wordCount, wordLimitForLangDetection); - if (wordCount > wordLimitForLangDetection) { - let mostProbableLanguage; + const detectLang = (text: string) => { try { - mostProbableLanguage = LanguageAbbreviations[lande(props.text)[0][0]]; + return LanguageAbbreviations[lande(text)[0][0]]; } catch (error) { - mostProbableLanguage = ""; + return currentLanguage; } - - /*const mostProbableLanguage = lande(props.text);*/ - if (mostProbableLanguage !== currentLanguage) { - setTimeout(() => { - onOpen(); - }, 200); - - return ( - <> - - {/* we kill the event here to disable drag and drop, since it is in the same container */} - - - Switch Language? - - - Do you want to switch language? The detected language is {mostProbableLanguage}, whereas your - chosen language is {currentLanguage}. The language can be changed on the top right. - - - - - - ); - } - } + }; + const detectedLang = wordCount > wordLimitForLangDetection ? detectLang(props.text) : currentLanguage; + const wrongLanguage = detectedLang !== currentLanguage; let progressColor: string; switch (true) { @@ -92,17 +49,46 @@ export const TrackedTextarea = (props: TrackedTextboxProps) => { progressColor = "green"; } + const problemColor = useColorModeValue(colors.light.problem, colors.dark.problem); + return ( -