Render translation text from layer & site config

[kahummer]

Techincal plan

• Add currentLanguage property field to default state and set it to null
• Add reducer and actions to handle store update and dispatch
• Set currentLanguage on selecting a language on the switcher.

  {"label": "ជនជាតិខ្មែរ", "param": "khmer"}

• Dispatch payload to store
• Once currentLanguage param value is set, use it to override the label here.

Additional detail on how this will work

1. Load the current labels as the default language as provided here
2. Provide translations config on the site config. This will be an array of objects responsible for driving the language switcher. The object will have the following properties
   • label - text rendered on the switcher
   • param - language literal responsible for rendering specific language label on the layer config
3. Provide a language label for the languages as shown below.

   "label": "Nombre de prestataires de soins alternatifs formels basés dans la 
   famille dans le pays (familles d'accueil et soignants formels)"
   "label-khmer": "ចំនួនអ្នកផ្ត ល់សេវាថែ ទាំតាមគ្រួ សារផ្លូវកា រនៅក្នុងប្ រទេសចិញ្ចឹម អ្នកថែ ទាំនិង (អ្នក ថែទាំសាច់ញា តិផ្លូវការ)"

   NB* The language label on the layer specification should match the param added on the site config

[kahummer]

After discussing with @kelvin-muchiri it seems the site-config section fell through the cracks on the plan above. This config is responsible for driving the entire site and overriding the chained objects based on indexes inside the Layers might not work as I envisioned. This may require more time and research than I anticipated cc @ukanga @engwiri

[kahummer]

After going through the Menu and Layers component we definitely can have translations driven from the site config. I think we can have an object that holds the English literal for all categories and subcategories on the menu with the language-specific translation as the value. We can check the language persisted to store and overwrite the text rendered on the Menu and Layers respectively

[kahummer]

Technical plan On the site-config, we can have

"translations": {
        "khmer": {
        "Domain 2: Capacity of the child protection system": " វិស័យទី៣៖ ការបង្ការ និងការ​ពារ"

        },
        "french": {
        }
        ....
    }

Check if current language prop and translations exist on the Menu and Layers component, then use them instead of the provided categories. Components that require translations

• TitleBar
• Popup
• Menu
• Layers
• Layer
• Legend

Utils

• buildLabel

[kahummer]

https://www.awesomescreenshot.com/video/3475088?key=306f4e075bf463bd4fe7842809afb5e7 @bkimondiu Here is the current progress on the translation issue. Hoping to have something deployed to stage tommorrow

[kahummer]

I've added the translationHook on various translation components. I will need assistance from the data side to add translation configs that will drive the translation work. The translations config can be added to this or for testing https://github.com/onaio/gisida-cambodia/pull/24. Here is some documentation to help with the configuration https://github.com/onaio/gisida/tree/staging/docs/translations