Enable selecting other language in modal popup

[lukabis]

Fixes #104

Summary

User can't select other language options in modal popup.

Root cause

Inside TranslatorProvider there is setLocaleToTranslateFrom. Calling that function (state setter) will cause TranslatorProvider to re-render.

Every time TranslatorProvider re-renders the localeOptions array changes reference.

useEffect has that localeOptions in deps, which means that useEffect callback will be ran every time localeOptions changes reference i.e. every time TranslatorProvider re-renders.

Here in Content component, we can see that every time we click on one option from the dropdown setLocaleToTranslateFrom is called and therefore TranslatorProvider is re-rendered -> localeOptions changes reference -> useEffect callback is called.

Problem with useEffect callback is that it resets chosen locale to either defaultOption or to first locale in array.

In conclusion, every time we click on some option in the dropdown, the useEffect callback resets it to default locale or to first locale in localeOptions array.

Solution

Change deps of useEffect. useEffect callback can not be called every time we choose something from the dropdown. Instead of having localeOptions in deps, use localization.locales.

That way, even when TranslatorProvider re-renders, the deps (localization.locales) will not change reference and localeToTranslateFrom will not be reset. In addition, if locales change in payload config, useEffect callback will apply necessary changes.