This PR aims to address a few issues with the integration deforestation alerts widget's translations, as well as a few others. This implementation focuses mainly on two aspects:
Localize dates
with a setup similar (but not quite the same, due to the requirements and implementation) to the one implemented for the blog
Address issues with strings (some with value interpolation) not being correctly sent to Transifex
in a way that'd allow for variable interpolation (in Transifex)
Integrated deforestation alerts dropdown not translating for the selected item
Date localization
A similar setup to the one used for localizing dates in the blog (see here)[https://github.com/wri/gfw-blog/pull/155] was implemented. It makes use of date-fns, which already exists in the application.
An util/helper was created that contains:
Transifex to DateFNS mapping, similar to the blog setup
A generic function to localize dates that makes use of the mapping, and can have language and format passed to it
A specific version for widget's sentences
This specific version exists to keep all the date formatting in widget's sentences consistent between them.
Because the widget's sentences use a more formal way of having dates written, there is also a mapping between language and date-fns formats
I tried to google the correct form of writing the dates in a way that feels like a translation of the originally defined English version where I could. If we need to change this in the future, we have a single point (utils/localize-date.js) where we can tweak the format and have it apply to all widget's sentences; the goal is to save future trouble with the changes, instead of having to find and replace in all widgets.
I did notice that many widget use moment.js for date calculations, I did not change this. The change is only for localization of the dates.
Interpolation and Transifex
This was a bit more confusing but from what I gathered, translation with variable interpolation works correctly for sentences defined in a widget's index.js, due to the use of <DynamicSentence /> (we may need to deep dive into this in the future).
However, I've noticed some widgets do have extra text additions specified in a widget's selectors.js's parseSentence.
In this case, when these sentences also include an interpolation, we end up with an interpolation inside another interpolation, so this second nested level doesn't get automatically processed.
I did find, however, that we already have an translateText in utils/lang to address scenarios where we need to have the strings translated w/ interpolation of values; it is used in many places of the app. I tried to find as many widgets as I could that needed this change and added it to them.
I do not currently have a Transifex account, but I am making an educated guess (from what I've learned from other parts of the application, and the next section below) that these smaller strings are now being sent to transifex; they will need to be translated.
Integrated deforestation alerts dropdown
Transifex already has the translations for the sentences that weren't being translated (as the sub-items in the dropdown were being translated), so adding the translateText to the main button caused them to work again.
Overview
This PR aims to address a few issues with the integration deforestation alerts widget's translations, as well as a few others. This implementation focuses mainly on two aspects:
Date localization
A similar setup to the one used for localizing dates in the blog (see here)[https://github.com/wri/gfw-blog/pull/155] was implemented. It makes use of
date-fns, which already exists in the application.An util/helper was created that contains:
utils/localize-date.js) where we can tweak the format and have it apply to all widget's sentences; the goal is to save future trouble with the changes, instead of having to find and replace in all widgets.I did notice that many widget use
moment.jsfor date calculations, I did not change this. The change is only for localization of the dates.Interpolation and Transifex
This was a bit more confusing but from what I gathered, translation with variable interpolation works correctly for sentences defined in a widget's
index.js, due to the use of<DynamicSentence />(we may need to deep dive into this in the future).However, I've noticed some widgets do have extra text additions specified in a widget's
selectors.js'sparseSentence. In this case, when these sentences also include an interpolation, we end up with an interpolation inside another interpolation, so this second nested level doesn't get automatically processed.I did find, however, that we already have an
translateTextinutils/langto address scenarios where we need to have the strings translated w/ interpolation of values; it is used in many places of the app. I tried to find as many widgets as I could that needed this change and added it to them.I do not currently have a Transifex account, but I am making an educated guess (from what I've learned from other parts of the application, and the next section below) that these smaller strings are now being sent to transifex; they will need to be translated.
Integrated deforestation alerts dropdown
Transifex already has the translations for the sentences that weren't being translated (as the sub-items in the dropdown were being translated), so adding the
translateTextto the main button caused them to work again.Tracking
FLAG-1035