website: Use existing translations of language names (#1349)

Removed language.json translation file as we don't really need it anymore, just moved the couple of remaining items into tasks.json

I also reverted the change where I created lang_mismatch_lang and lang_mismatch_lang.explanation because we don't actually need two different strings and it was causing an issue where it would show a mix of english and the users language rather than just show the existing "Wrong language" text that is probably a better intermediate until the translations are updated. Let me know if there is a better way to handle updating the source english text for translations.

website/public/locales/en/labelling.json

@@ -8,10 +8,8 @@
   "label_message_flag_instruction": "Select any that apply to the message:",
   "label_message_likert_instruction": "Rate the message:",
   "label_message_yes_no_instruction": "Answer the following question(s) about the message:",
-  "lang_mismatch": "Wrong Language",
-  "lang_mismatch.explanation": "Not written in the currently selected language.",
-  "lang_mismatch_lang": "Not {{language}}",
-  "lang_mismatch_lang.explanation": "Not written in {{language}}.",
+  "lang_mismatch": "Not {{language}}",
+  "lang_mismatch.explanation": "Not written in {{language}}.",
   "moral_judgement": "Judges Morality",
   "moral_judgement.explanation": "Expresses moral judgement.",
   "not_appropriate": "Not Appropriate",

website/public/locales/en/tasks.json

@@ -78,5 +78,7 @@
     "desc": "Provide labels for a prompt.",
     "overview": "Read the following conversation and then answer the question about the last reply in the discussion."
   },
-  "available_task_count": "{{count}} tasks available"
+  "available_task_count": "{{count}} tasks available",
+  "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}}"
 }

website/src/components/Messages/LabelFlagGroup.tsx

@@ -1,5 +1,6 @@
 import { Button, Flex, Tooltip } from "@chakra-ui/react";
 import { useTranslation } from "next-i18next";
+import { useCookies } from "react-cookie";
 import { getTypeSafei18nKey } from "src/lib/i18n";
 
 interface LabelFlagGroupProps {
@@ -17,14 +18,16 @@ export const LabelFlagGroup = ({
   isEditable = true,
   onChange,
 }: LabelFlagGroupProps) => {
-  const { t } = useTranslation(["labelling", "language"]);
-  const expectedLanguageName = t(getTypeSafei18nKey(`language:lang_${expectedLanguage}`));
+  const { t } = useTranslation("labelling");
+  const [cookies] = useCookies(["NEXT_LOCALE"]);
+  const currentLanguage = cookies["NEXT_LOCALE"];
+  const expectedLanguageName = new Intl.DisplayNames(currentLanguage, { type: "language" }).of(expectedLanguage);
   return (
     <Flex wrap="wrap" gap="4">
       {labelNames.map((name, idx) => (
         <Tooltip
           key={name}
-          label={`${t(getTypeSafei18nKey(`${name}_lang.explanation`), t(getTypeSafei18nKey(`${name}.explanation`)), {
+          label={`${t(getTypeSafei18nKey(`${name}.explanation`), `${name}.explanation`, {
             language: expectedLanguageName,
           })}`}
         >
@@ -37,7 +40,7 @@ export const LabelFlagGroup = ({
             isDisabled={!isEditable}
             colorScheme={values[idx] === 1 ? "blue" : undefined}
           >
-            {t(getTypeSafei18nKey(`${name}_lang`), t(getTypeSafei18nKey(name)), { language: expectedLanguageName })}
+            {t(getTypeSafei18nKey(`${name}`), name, { language: expectedLanguageName })}
           </Button>
         </Tooltip>
       ))}

website/src/components/Survey/TrackedTextarea.tsx

@@ -4,7 +4,6 @@ import lande from "lande";
 import { useTranslation } from "next-i18next";
 import React from "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";
 
@@ -20,12 +19,12 @@ interface TrackedTextboxProps {
 }
 
 export const TrackedTextarea = (props: TrackedTextboxProps) => {
-  const { t } = useTranslation("language");
+  const { t } = useTranslation("tasks");
   const wordLimitForLangDetection = 4;
   const backgroundColor = useColorModeValue("gray.100", "gray.900");
   const [cookies] = useCookies(["NEXT_LOCALE"]);
-  const wordCount = (props.text.match(/\w+/g) || []).length;
   const currentLanguage = cookies["NEXT_LOCALE"];
+  const wordCount = (props.text.match(/\w+/g) || []).length;
 
   const detectLang = (text: string) => {
     try {
@@ -81,8 +80,8 @@ export const TrackedTextarea = (props: TrackedTextboxProps) => {
         >
           <Tooltip
             label={t(wrongLanguage ? "writing_wrong_langauge_a_b" : "submitted_as", {
-              submit_lang: t(getTypeSafei18nKey(`lang_${currentLanguage}`), currentLanguage),
-              detected_lang: t(getTypeSafei18nKey(`lang_${detectedLang}`), detectedLang),
+              submit_lang: new Intl.DisplayNames(currentLanguage, { type: "language" }).of(currentLanguage),
+              detected_lang: new Intl.DisplayNames(currentLanguage, { type: "language" }).of(detectedLang),
             })}
           >
             {detectedLang}

website/types/i18next.d.ts

@@ -2,7 +2,6 @@ import type common from "public/locales/en/common.json";
 import type dashboard from "public/locales/en/dashboard.json";
 import type index from "public/locales/en/index.json";
 import type labelling from "public/locales/en/labelling.json";
-import type language from "public/locales/en/language.json";
 import type leaderboard from "public/locales/en/leaderboard.json";
 import type message from "public/locales/en/message.json";
 import type side_menu from "public/locales/en/side_menu.json";
@@ -19,7 +18,6 @@ declare module "i18next" {
       tasks: typeof tasks;
       message: typeof message;
       labelling: typeof labelling;
-      language: typeof language;
       side_menu: typeof side_menu;
       tos: typeof tos;
     };