Localization

[Giuseppetm]

The user must be able to change the language of the website: the available ones should be english and italian.

• [X] Dropdown for language switch in settings menu;
• [X] Implementation of language switch;
• [X] Store the option in cookies;
• [x] Translations by @UmbertoPirovano and @ranieri-unimi (ITA-ENG);
• [X] Define interface for the ILocalizationString
• [X] See how html code can be shown starting from string field (we need this for anchor links and similars);
• [X] Define how to manage extra groups description translate;
• [x] Translate data in external files by @ranieri-unimi;
• [X] Define the field values for "it" and "en";
• [X] Replace text in the components with the fields from the actual localization files;
• [X] Add the react-jsx-parser to the fields who need it;
• [x] Component to show to the user how to change the language if it is the first time on the website (need to use a cookie for first visit);
• [x] Fix: changing the language does not affect components without cookies declared. The only component where is working is obv the headerMenu.
• [x] Inizialization of the language based on the browser language.
• [x] Adjust language inizialization: if the language of the browser is not available in the options must set to english;
• [x] Fix: when in italian language and click on change theme from light theme to dark theme, it changes the language too;
• [x] Fix crash in additionalGroupsView;
• [x] Add translate for redirects in data.json.

[Giuseppetm]

@UmbertoPirovano provided us a first version of translation from Italian to English.

Traduzione network.docx

We may already proceed with the development of the code to support this feature.

[Giuseppetm]

Issue \\ See how html code can be shown starting from string field

Option 2 here (html-react-parser): link

[Giuseppetm]

Issue \ Define how to manage extra groups description translate and any other field value defined by json data

@manuelelucchi can you help with this one?

This is an example, how to handle the localization in json files? I was thinking on defining new field values like "it" and "en" in the json (description will be an array) so we can map the available languages we have and relate them to the json field values.

[MarcoBuster]

We should move away from JSON files imo

[Giuseppetm]

We should move away from JSON files imo

The server will always return a json, and the db must handle the translated fields, so.. 🙉🙉🙉

[MarcoBuster]

We should move away from JSON files imo

The server will always return a json, and the db must handle the translated fields, so.. 🙉🙉🙉

Then we need to adapt the JSON format for this use case.

[MarcoBuster]

I was thinking on defining new field values like "it" and "en" in the json (description will be an array) so we can map the available languages we have and relate them to the json field values.

Can we duplicate the JSON file for each language? By doing so we save bandwith

[Giuseppetm]

I was thinking on defining new field values like "it" and "en" in the json (description will be an array) so we can map the available languages we have and relate them to the json field values.

Can we duplicate the JSON file for each language? By doing so we save bandwith

The JSONs we need to translate are services and maybe extra groups. If we use multiple jsons we introduce redundancy and possibly inconsistency. The bandwith for the actual 2 jsons that we need to translate is minimal.

[Giuseppetm]

For the last bug reported: maybe it's because of the initial declaration of the state for the cookies. I should use something like: let [cookies, ] = useCookies();

Edit: this has been done in color palette switcher.

[Giuseppetm]

Note: html react parser doesn't work with custom react components, but only with pure html. This is not what I need, so I must find another package to parse from strings to components.

Maybe this one? : https://stackoverflow.com/questions/63256579/convert-string-to-html-on-react-rich-text-editor

Edit: we need to fix cookies behaviour on the branch master.

[Giuseppetm]

React-jsx-parser did the trick for parsing react components from string. https://github.com/TroyAlford/react-jsx-parser

[Giuseppetm]

Note for @manuelelucchi:

Sometimes the localization object is initialized as undefined. We must fix this error.

Edit: I probably fixed it.

[Giuseppetm]

The change not being globally has been fixed by using withCookies.