From 4458b1fe97ddcd0ff62a3609d7aad84272eb1e3e Mon Sep 17 00:00:00 2001 From: SleepWalker Date: Sat, 30 Dec 2017 21:44:32 +0200 Subject: [PATCH] #379: move flags related code into a separate module to get rid of code duplication --- package.json | 6 ++-- src/components/i18n/index.js | 8 ++--- src/components/i18n/localeFlags.js | 30 +++++++++++++++++++ .../languageSwitcher/LanguageSwitcher.js | 4 +-- src/components/profile/Profile.js | 4 +-- src/functions.js | 20 ------------- webpack.config.js | 20 ++++--------- 7 files changed, 46 insertions(+), 46 deletions(-) create mode 100644 src/components/i18n/localeFlags.js diff --git a/package.json b/package.json index a41946d..0fe56d4 100644 --- a/package.json +++ b/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" }, diff --git a/src/components/i18n/index.js b/src/components/i18n/index.js index 58a61d5..7668654 100644 --- a/src/components/i18n/index.js +++ b/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'; diff --git a/src/components/i18n/localeFlags.js b/src/components/i18n/localeFlags.js new file mode 100644 index 0000000..8e22171 --- /dev/null +++ b/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 = Object.keys(supportedLocales); + +export default { + getCountryList(): Array { + 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`); + } +}; diff --git a/src/components/languageSwitcher/LanguageSwitcher.js b/src/components/languageSwitcher/LanguageSwitcher.js index 577f68c..1490c48 100644 --- a/src/components/languageSwitcher/LanguageSwitcher.js +++ b/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 (
diff --git a/src/components/profile/Profile.js b/src/components/profile/Profile.js index da82988..8b302e3 100644 --- a/src/components/profile/Profile.js +++ b/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={ {LANGS[user.lang].name} diff --git a/src/functions.js b/src/functions.js index 5cbb009..0c37edf 100644 --- a/src/functions.js +++ b/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`); -} diff --git a/webpack.config.js b/webpack.config.js index 32d26e1..4dc93c7 100644 --- a/webpack.config.js +++ b/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?$/,