Merge pull request #28 from ravikp/demographic-fix

fix(#656): Resident demographic data are not rendered in requested language

components/VcDetails.tsx

@@ -4,12 +4,13 @@ import * as DateFnsLocale from '../lib/date-fns/locale';
 import { useTranslation } from 'react-i18next';
 import { Image, ImageBackground, View } from 'react-native';
 import { Icon } from 'react-native-elements';
-import { VC, CredentialSubject, LocalizedField } from '../types/vc';
+import { VC, CredentialSubject } from '../types/vc';
 import { Button, Column, Row, Text } from './ui';
 import { Theme } from './ui/styleUtils';
 import { TextItem } from './ui/TextItem';
 import { VcItemTags } from './VcItemTags';
 import VerifiedIcon from './VerifiedIcon';
+import { getLocalizedField } from '../i18n';
 
 export const VcDetails: React.FC<VcDetailsProps> = (props) => {
   const { t, i18n } = useTranslation('VcDetails');
@@ -345,15 +346,3 @@ function getFullAddress(credential: CredentialSubject) {
     .filter(Boolean)
     .join(', ');
 }
-
-function getLocalizedField(rawField: string | LocalizedField[]) {
-  if (typeof rawField === 'string') {
-    return rawField;
-  }
-  try {
-    const locales: LocalizedField[] = JSON.parse(JSON.stringify(rawField));
-    return locales[0].value;
-  } catch (e) {
-    return '';
-  }
-}

components/VcItem.tsx

@@ -23,9 +23,9 @@ import { Theme } from './ui/styleUtils';
 import { RotatingIcon } from './RotatingIcon';
 import { GlobalContext } from '../shared/GlobalContext';
 import { useTranslation } from 'react-i18next';
-import { LocalizedField } from '../types/vc';
 import { VcItemTags } from './VcItemTags';
 import VerifiedIcon from './VerifiedIcon';
+import { getLocalizedField } from '../i18n';
 
 const getDetails = (arg1, arg2, verifiableCredential) => {
   if (arg1 === 'Status') {
@@ -304,15 +304,3 @@ interface VcItemProps {
   onShow?: (vcRef?: ActorRefFrom<typeof vcItemMachine>) => void;
   activeTab?: string;
 }
-
-function getLocalizedField(rawField: string | LocalizedField) {
-  if (typeof rawField === 'string') {
-    return rawField;
-  }
-  try {
-    const locales: LocalizedField[] = JSON.parse(JSON.stringify(rawField));
-    return locales[0].value;
-  } catch (e) {
-    return '';
-  }
-}

components/VidItem.tsx

@@ -15,7 +15,7 @@ import { Column, Row, Text } from './ui';
 import { Theme } from './ui/styleUtils';
 import { RotatingIcon } from './RotatingIcon';
 import { GlobalContext } from '../shared/GlobalContext';
-import { LocalizedField } from '../types/vc';
+import { getLocalizedField } from '../i18n';
 
 export const VidItem: React.FC<VcItemProps> = (props) => {
   const { appService } = useContext(GlobalContext);
@@ -105,15 +105,3 @@ interface VcItemProps {
   selected?: boolean;
   onPress?: (vcRef?: ActorRefFrom<typeof vcItemMachine>) => void;
 }
-
-function getLocalizedField(rawField: string | LocalizedField) {
-  if (typeof rawField === 'string') {
-    return rawField;
-  }
-  try {
-    const locales: LocalizedField[] = JSON.parse(JSON.stringify(rawField));
-    return locales[0].value;
-  } catch (e) {
-    return '';
-  }
-}

i18n.ts

@@ -11,6 +11,10 @@ import ta from './locales/tam.json';
 import AsyncStorage from '@react-native-async-storage/async-storage';
 
 const resources = { en, fil, ar, hi, kn, ta };
+import { iso6393To1 } from 'iso-639-3';
+import { LocalizedField } from './types/vc';
+
+const languageCodeMap = {};
 
 export const SUPPORTED_LANGUAGES = {
   en: 'English',
@@ -34,6 +38,7 @@ i18next
     const language = await AsyncStorage.getItem('language');
     if (language !== i18next.language) {
       i18next.changeLanguage(language);
+      populateLanguageCodeMap();
     }
   });
 
@@ -43,3 +48,50 @@ function getLanguageCode(code: string) {
   const [language] = code.split('-');
   return language;
 }
+
+export function getVCDetailsForCurrentLanguage(locales) {
+  const currentLanguage = i18next.language;
+  const vcDetailsForCurrentLanguage = locales.filter(
+    (obj) => obj.language === languageCodeMap[currentLanguage]
+  );
+  return vcDetailsForCurrentLanguage[0]?.value
+    ? vcDetailsForCurrentLanguage[0].value
+    : locales[0]?.value;
+}
+
+// This method gets the value from iso-639-3 package, which contains key value pairs of three letter language codes[key] and two letter langugae code[value]. These values are according to iso standards.
+// The response received from the server is three letter language code and the value in the inji code base is two letter language code. Hence the conversion is done.
+function getThreeLetterLanguageCode(twoLetterLanguageCode) {
+  return Object.keys(iso6393To1).find(
+    (key) => iso6393To1[key] === twoLetterLanguageCode
+  );
+}
+
+function populateLanguageCodeMap() {
+  const supportedLanguages = Object.keys(SUPPORTED_LANGUAGES);
+  supportedLanguages.forEach((languageCode) => {
+    let threeLetterLanguageCode = languageCode;
+
+    if (isTwoLetterLanguageCode(languageCode)) {
+      threeLetterLanguageCode = getThreeLetterLanguageCode(languageCode);
+    }
+    languageCodeMap[languageCode] = threeLetterLanguageCode;
+  });
+}
+
+export function getLocalizedField(rawField: string | LocalizedField[]) {
+  if (typeof rawField === 'string') {
+    return rawField;
+  }
+  try {
+    const locales: LocalizedField[] = JSON.parse(JSON.stringify(rawField));
+    if (locales.length == 1) return locales[0]?.value;
+    return getVCDetailsForCurrentLanguage(locales);
+  } catch (e) {
+    return '';
+  }
+}
+
+function isTwoLetterLanguageCode(languageCode) {
+  return languageCode.length == 2;
+}

package.json

@@ -44,6 +44,7 @@
     "expo-status-bar": "~1.2.0",
     "expo-updates": "~0.11.6",
     "i18next": "^21.6.16",
+    "iso-639-3": "^3.0.1",
     "mosip-inji-face-sdk": "^0.1.11",
     "node-forge": "^1.3.1",
     "react": "17.0.1",