My first journey with hotfix of Vietnamese flag on Xtranslation CHAP.1

13 Mar 2023 　・　2 min read

How - When I found the hotfix

By chance, I attempted to use a browser with translation when I encountered an unknown word. My friend suggested a reliable tool, Xtranslation. Upon use, I noticed that the flag of the Vietnamese language was different from the usual flag displayed.

Upon zooming in, I realized that the flag belonged to an island.

I then searched for the image on Google to determine which country or location the flag belonged to.

I learned that the flag belonged to the Virgin Islands in the United States. Consequently, I sought a way to change the flag by searching for the code related to Xtranslate and found out that it was an open-source application.

const langIconFile = langToFlagIconMap[locale] ?? locale;
    return require(`flag-icons/flags/4x3/${langIconFile}.svg`);

Afterwards, I searched for the library of flag icons.

In the library, when I searched for the prefix and , I found these flags. Flag Icons

Continuing my search, I discovered the code related to the flags. Fortunately, the application was built using Typescript, and since I am currently studying it, I was able to understand the code.

Link code from line 237

export function getFlagIcon(locale: string): string | undefined {
  try {
    const langIconFile = langToFlagIconMap[locale] ?? locale;
    return require(`flag-icons/flags/4x3/${langIconFile}.svg`);
  } catch (error) {
    return undefined; // noop
  }

Therefore, the string we use to search for a flag, for example, , serves as the in a map. It will return the corresponding value, in this case, which refers to the Philippines. The flag of that country will then be displayed.

Link code from line 206

export const langToFlagIconMap: Record<string, string> = {
  "sq": "al", // Albanian
  "hy": "am", // Armenian
  "ce": "ph", // Cebuano (Philippines)
  "bn": "bd", // Bengali (Bangladesh)
  "ny": "mw", // Malawi, Zambia, Mozambique, Zimbabwe
  "cs": "cz", // Czech Republic
  "da": "dk", // Danish
  "en": "gb", // English
  "el": "gr", // Greek
  "ka": "ge", // Georgian
  "ha": "ne", // Hausa (West Africa)
  "haw": "hm", // Hawaiian
  "hi": "in", // Hindi (India)
  "te": "in", // Telugu (India)
  "ur": "pk", // Urdu (Pakistan)
  "ja": "jp", // Japanese
  "ko": "kr", // Korean
  "lo": "la", // Laos
  "uk": "ua", // Ukrainian
  "fa": "ir", // Iran (Persian)
  "ku": "iq", // Iraq, Kurdistan Region
  "ma": "nz", // Maori (New Zealand)
  "sw": "ke", // Swahili (Kenya, Rwanda, Tanzania, Uganda)
  "zh-CN": "cn", // Chinese (Simplified)
  "zh-TW": "tw", // Chinese (Taiwan)
  "yo": "ng", // Yoruba (Nigeria)
  "zu": "za", // Zulu (South Africa)
  "xh": "za", // Xhosa (South Africa)
};

In case the country string we are searching for is not included in the list of countries, the variable will revert to the default value of . The following code snippet demonstrates this behavior:

langToFlagIconMap[locale] ?? locale;

As the list of countries above does not yet include , which represents the Vietnamese language in the translations list, the variable will default to . However, this conflicts with the flag icon for Virgin Islands, which also uses the code.

So how to contact the author😯? how to change the flag😧?To resolve this issue, it is necessary to reach out to the author of the code to request an update. In doing so, the flag icon for Vietnam can be added to the list of country codes, ensuring that it is correctly displayed when is used as the . Many thank you for reading, and in my next chapter, I will share how I tackled this hotfix😊.

#github#coding#hotfix#My-first-journey-with-hotfix