Translation

The aplication is translated with the transifex native service.

Initialization

Transifex is initialized on the App.jsx file. A PseudoTranslationPolicy is provided on the development environment so we can see what translations are missing on the different languages directly on the platform on development.

Scripts

There are three different scripts that use the transifex cli:

yarn transifex:push Pushes the strings that are used in the code to transifex. This runs on every deploy yarn transifex:refresh Refreshes the strings translated on transifex to show them on develop. It can take a couple minutes to show the changes. yarn transifex:purge This command purges the strings on transifex so we only have the ones present on the code. The he strings no used anymore will be deleted.

If the purge is not working correctly try to use it directly from terminal:

npx txjs-cli push src/ --purge --token=[TX TOKEN HERE] --secret=[TX SECRET HERE]

Selecting the translation locale

There is a language switcher component available on the menu and home page. This component changes the two letter string that is stored on the URL lang param using the changeLang function under the store/actions/url-actions.js file.

The locale is then retrieved on the App component to set the translation. This param is not shared on the sharing links.

To translate strings

The translation of strings will depend where is the string:

Strings inside Components

For strings inside react components or containers its enough to use the useT hook or the T component

import { useT } from '@transifex/react';

const Component = () => {
  const t = useT();

  return t('Translated content')
};

Strings inside constants

For strings inside constants we will have to create a function that encapsulates that string and is called everytime the locale changes.

constant.js

import { t } from '@transifex/native';

export const getScripts = () => t('Translated content');


component.js
import { getScripts } from './constant';
import { useLocale } from '@transifex/react';

const Component = () => {
  const locale = useLocale();
  const scripts = useMemo(() => getScripts(), [locale]);

  return scripts;
};

Strings inside selectors

This case is not recommended but we can use the selectLangUrlState selector to know when the locale has change and recompute the results accordingly

constant.js

import { t } from '@transifex/native';

export const getScripts = () => t('Translated content');


selector.js
import { getScripts } from './constant';
import { selectLangUrlState } from 'selectors/location-selectors';

const getComputedWDPALayers = createSelector(selectLangUrlState, locale => getScripts());

Strings from precalculated data

For strings that come from precalculated data coming from ArcGIS Online we have them included as a dictionary on different functions on the translation-constant.js file. We have to instatiate the function then on the component depending on the locale and search for the string on the dictionary if it doesn’t exist we should default to the original string.

translation-constant.js

import { t } from '@transifex/native';

export const getCountries = () => ({ spain: t('spain') });


component.js
import { getCountries } from './translation-constant';
import { useLocale } from '@transifex/react';

const Component = ({ precalculatedCountry }) => {
  const locale = useLocale();
  const countries = useMemo(() => getCountries(), [locale]);

  return countries[precalculatedCountry] || precalculatedCountry;
};