Create app namespace for all absolute requires of app modules. Move all packages under packages yarn workspace

packages/app/components/i18n/IntlProvider.tsx

@@ -0,0 +1,26 @@
+import React, { useState, useEffect } from 'react';
+import { connect } from 'react-redux';
+import { RawIntlProvider, IntlShape } from 'react-intl';
+import i18n from 'app/services/i18n';
+import { RootState } from 'app/reducers';
+
+type Props = {
+  children: React.ReactNode;
+  locale: string;
+};
+
+function IntlProvider({ children, locale }: Props) {
+  const [intl, setIntl] = useState<IntlShape>(i18n.getIntl());
+
+  useEffect(() => {
+    (async () => {
+      setIntl(await i18n.changeLocale(locale));
+    })();
+  }, [locale]);
+
+  return <RawIntlProvider value={intl}>{children}</RawIntlProvider>;
+}
+
+export default connect(({ i18n: i18nState }: RootState) => i18nState)(
+  IntlProvider,
+);

packages/app/components/i18n/actions.ts

@@ -0,0 +1,23 @@
+import i18n from 'app/services/i18n';
+
+export const SET_LOCALE = 'i18n:setLocale';
+export function setLocale(desiredLocale: string) {
+  return async (
+    dispatch: (action: { [key: string]: any }) => any,
+  ): Promise<string> => {
+    const locale = i18n.detectLanguage(desiredLocale);
+
+    dispatch(_setLocale(locale));
+
+    return locale;
+  };
+}
+
+function _setLocale(locale: string) {
+  return {
+    type: SET_LOCALE,
+    payload: {
+      locale,
+    },
+  };
+}

packages/app/components/i18n/index.ts

@@ -0,0 +1,2 @@
+export { default as IntlProvider } from './IntlProvider';
+export { default as localeFlags } from './localeFlags';

packages/app/components/i18n/localeFlags.ts

@@ -0,0 +1,34 @@
+import supportedLocales from 'app/i18n';
+
+const localeToCountryCode = {
+  en: 'gb',
+  be: 'by',
+  pt: 'br',
+  uk: 'ua',
+  vi: 'vn',
+  sl: 'si',
+  sr: 'rs',
+  zh: 'cn',
+};
+const SUPPORTED_LANGUAGES: string[] = Object.keys(supportedLocales);
+
+export default {
+  getCountryList(): string[] {
+    return SUPPORTED_LANGUAGES.map(
+      locale => localeToCountryCode[locale] || locale,
+    );
+  },
+
+  /**
+   * Возвращает для указанной локали её флаг с учётом всех нюансов загрузки флага
+   * и подбора соответствующего локали флага.
+   *
+   * @param {string} locale
+   *
+   * @returns {string}
+   */
+  getIconUrl(locale: string): string {
+    return require(`flag-icon-css/flags/4x3/${localeToCountryCode[locale] ||
+      locale}.svg`);
+  },
+};

packages/app/components/i18n/reducer.ts

@@ -0,0 +1,20 @@
+import i18n from 'app/services/i18n';
+
+import { SET_LOCALE } from './actions';
+
+export type State = { locale: string };
+
+const defaultState = {
+  locale: i18n.detectLanguage(),
+};
+
+export default function(
+  state: State = defaultState,
+  { type, payload }: { type: string; payload: State },
+): State {
+  if (type === SET_LOCALE) {
+    return payload;
+  }
+
+  return state;
+}