#379: move flags related code into a separate module to get rid of code duplication

package.json

@@ -11,9 +11,9 @@
     "node": ">=8.0.0"
   },
   "scripts": {
-    "start": "yarn run clean && yarn run build:dll && webpack-dev-server --progress --colors",
+    "start": "yarn run clean && yarn run build:dll && NODE_PATH=./src webpack-dev-server --progress --colors",
     "clean": "rm -rf dist/",
-    "test": "yarn run build:dll && karma start ./karma.conf.js",
+    "test": "yarn run build:dll && NODE_PATH=./src karma start ./karma.conf.js",
     "lint": "eslint ./src",
     "flow": "flow",
     "i18n:collect": "babel-node ./scripts/i18n-collect.js",
@@ -21,7 +21,7 @@
     "i18n:pull": "babel-node --presets es2015,stage-0 ./scripts/i18n-onesky.js pull",
     "build": "yarn run clean && yarn run build:webpack --progress",
     "build:install": "yarn install && check-node-version",
-    "build:webpack": "webpack --colors -p --bail",
+    "build:webpack": "NODE_PATH=./src webpack --colors -p --bail",
     "build:quiet": "yarn run clean && yarn run build:webpack --quiet",
     "build:dll": "node ./scripts/build-dll.js"
   },

src/components/i18n/index.js

@@ -1,5 +1,3 @@
-import IntlProvider from './IntlProvider';
-
-export {
-    IntlProvider
-};
+// @flow
+export { default as IntlProvider } from './IntlProvider';
+export { default as localeFlags } from './localeFlags';

src/components/i18n/localeFlags.js

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

src/components/languageSwitcher/LanguageSwitcher.js

@@ -5,7 +5,7 @@ import { FormattedMessage as Message, intlShape } from 'react-intl';
 
 import classNames from 'classnames';
 
-import { requireLocaleFlag } from 'functions';
+import { localeFlags } from 'components/i18n';
 import LANGS from 'i18n/index.json';
 
 import formStyles from 'components/ui/form/form.scss';
@@ -197,7 +197,7 @@ class LanguageSwitcher extends Component {
         return (
             <div className={styles.languageFlex}>
                 <div className={styles.languageIco} style={{
-                    backgroundImage: `url('${requireLocaleFlag(locale)}')`,
+                    backgroundImage: `url('${localeFlags.getIconUrl(locale)}')`,
                 }} />
                 <div className={styles.languageCaptions}>
                     <div className={styles.languageName}>

src/components/profile/Profile.js

@@ -5,7 +5,7 @@ import { FormattedMessage as Message, FormattedRelative as Relative } from 'reac
 import { Link } from 'react-router-dom';
 import Helmet from 'react-helmet';
 
-import { requireLocaleFlag } from 'functions';
+import { localeFlags } from 'components/i18n';
 import LANGS from 'i18n/index.json';
 
 import { userShape } from 'components/user/User';
@@ -93,7 +93,7 @@ class Profile extends Component {
                                 value={
                                     <span className={styles.language} onClick={this.onLanguageSwitcher.bind(this)}>
                                         <span className={styles.languageIcon} style={{
-                                            backgroundImage: `url('${requireLocaleFlag(user.lang)}')`
+                                            backgroundImage: `url('${localeFlags.getIconUrl(user.lang)}')`
                                         }} />
                                         {LANGS[user.lang].name}
                                     </span>

src/functions.js

@@ -79,23 +79,3 @@ export function getJwtPayload(jwt: string): Object {
         throw new Error('Can not decode jwt token');
     }
 }
-
-const localeToCountryCode = {
-    en: 'gb',
-    be: 'by',
-    pt: 'br',
-    uk: 'ua',
-    vi: 'vn',
-    sl: 'si',
-};
-
-/**
- * Возвращает для указанной локали её флаг с учётом всех нюансов загрузки флага
- * и подбора соответствующего локали флага.
- *
- * @param {string} locale
- * @return {*}
- */
-export function requireLocaleFlag(locale: string) {
-    return require(`flag-icon-css/flags/4x3/${localeToCountryCode[locale] || locale}.svg`);
-}

webpack.config.js

@@ -1,5 +1,7 @@
 /* eslint-env node */
 
+require('babel-register');
+
 const path = require('path');
 
 const webpack = require('webpack');
@@ -8,6 +10,7 @@ const ExtractTextPlugin = require('extract-text-webpack-plugin');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const cssUrl = require('webpack-utils/cssUrl');
 const cssImport = require('postcss-import');
+const localeFlags = require('./src/components/i18n/localeFlags').default;
 
 const SUPPORTED_LANGUAGES = Object.keys(require('./src/i18n/index.json'));
 const rootPath = path.resolve('./src');
@@ -15,17 +18,6 @@ const outputPath = path.join(__dirname, 'dist');
 
 const packageJson = require('./package.json');
 
-const localeToCountryCode = {
-    en: 'gb',
-    be: 'by',
-    pt: 'br',
-    uk: 'ua',
-    vi: 'vn',
-    sl: 'si',
-};
-
-const flagsList = SUPPORTED_LANGUAGES.map((locale) => localeToCountryCode[locale] || locale);
-
 let config = {};
 try {
     config = require('./config/env.js');
@@ -148,9 +140,9 @@ const webpackConfig = {
         new webpack.ContextReplacementPlugin(
             /locale-data/, new RegExp(`/(${SUPPORTED_LANGUAGES.join('|')})\\.js`)
         ),
-        // @see functions.js:requireLocaleFlag()
+        // @see components/i18n/localeFlags.js
         new webpack.ContextReplacementPlugin(
-            /flag-icon-css\/flags\/4x3/, new RegExp(`/(${flagsList.join('|')})\\.svg`)
+            /flag-icon-css\/flags\/4x3/, new RegExp(`/(${localeFlags.getCountryList().join('|')})\\.svg`)
         ),
     ],
 
@@ -159,7 +151,7 @@ const webpackConfig = {
             {
                 test: /\.scss$/,
                 extractInProduction: true,
-                loader: 'style!css?' + JSON.stringify(cssLoaderQuery) + '!sass!postcss?syntax=postcss-scss'
+                loader: `style!css?${ JSON.stringify(cssLoaderQuery) }!sass!postcss?syntax=postcss-scss`
             },
             {
                 test: /\.jsx?$/,