style: fix eslint errors and misc fixes

Author: matteocng

src/js/App.js

@@ -4,7 +4,7 @@ import CssModulesTransform from 'react-css-modules'
 import { functions } from 'react-flag-icon-css'
 
 import type { CountryType } from 'react-flag-icon-css/lib/types/flow'
-import type { default as ReactType } from 'react'
+import type ReactType from 'react'
 import type { AppPropsType, AppFactoryOptionsType } from '../types/flow'
 
 import styles from '../styles/app.scss'
@@ -18,11 +18,11 @@ const aCountries = getCountries()
 const CssModules = CssModulesTransform(styles, { allowMultiple: true })
 
 
-const renderFlagBlock = (oCountry: CountryType) : React$Element<*> =>
+const renderFlagBlock = (oCountry: CountryType): React$Element<*> =>
   <FlagBlock key={oCountry.code} {...oCountry} />
 
-const AppFactory = (options: AppFactoryOptionsType) : ReactType.createElement =>
-  (props: AppPropsType) : React$Element<*> => {
+const AppFactory = (options: AppFactoryOptionsType): ReactType.createElement =>
+  (props: AppPropsType): React$Element<*> => {
     const propsHeader = { [options.stylePropName]: 'header' }
     const propsHeading = { [options.stylePropName]: 'heading' }
     const propsSubHeading = { [options.stylePropName]: 'sub-heading' }
@@ -37,7 +37,7 @@ const AppFactory = (options: AppFactoryOptionsType) : ReactType.createElement =>
         <FlagBlock name="Custom 1" code="w1" />
         <FlagBlock name="Custom 2" code="w2" />
         <FlagBlock name="Custom 3" code="w3" />
-        { aCountries.map((obj: CountryType) : React$Element<FlagBlock> => renderFlagBlock(obj)) }
+        { aCountries.map((obj: CountryType): React$Element<FlagBlock> => renderFlagBlock(obj)) }
       </div>
     </span>)
   }

src/js/CustomFlag.js

@@ -8,7 +8,7 @@ import type { CustomFlagPropsType } from '../types/flow'
 import themeStyles from '../meta-flags-css'
 
 
-export default ({ ...props, children }: CustomFlagPropsType) : React$Element<*> => {
+export default ({ ...props, children }: CustomFlagPropsType): React$Element<*> => {
   const FlagIcon = FlagIconFactory(React, { useCssModules: __USE_CSS_MODULES__, themeStyles })
   const { className } = props
   const flagIconProps = pick(props, ['code', 'size', 'flip', 'rotate', 'squared', 'Component'])

src/js/FlagBlock.js

@@ -7,8 +7,10 @@ import type { FlagBlockPropsType } from '../types/flow'
 import styles from '../styles/FlagBlock.scss'
 
 
-const renderCustomFlagChildren = (i: number,
-                                  props: FlagBlockPropsType) : React$Element<*> | null => {
+const renderCustomFlagChildren = (
+  i: number,
+  props: FlagBlockPropsType
+): React$Element<*> | null => {
   const { name, code } = props
   const containerProps = { [getStylePropName()]: 'country-name' }
   const codeProps = { [getStylePropName()]: 'country-code' }
@@ -25,7 +27,7 @@ renderCustomFlagChildren.propTypes = {
   code: React.PropTypes.string.isRequired
 }
 
-const FlagBlock = (props: FlagBlockPropsType) : React$Element<*> => {
+const FlagBlock = (props: FlagBlockPropsType): React$Element<*> => {
   const { code, name } = props
   const sizes = ['', 'lg', '2x', '3x', '4x']
   const flip = ['', '', '', 'vertical', 'horizontal']
@@ -35,7 +37,7 @@ const FlagBlock = (props: FlagBlockPropsType) : React$Element<*> => {
   const randomFlips: Array<string | number> = getRandomElements(flip, flip.length)
 
   return (<div {...containerProps}>
-    { sizes.map((size: string, i: number) : React$Element<CustomFlag> => {
+    { sizes.map((size: string, i: number): React$Element<CustomFlag> => {
       const customFlagProps = Object.assign({},
                                     { code, name, [getStylePropName()]: 'flag' }
                                     , size ? { size } : {}

src/js/functions.js

@@ -1,14 +1,16 @@
 // @flow
 import type { ObjectType, KeyType, GetRandomElementsReturnType } from '../types/flow'
 
-export const getStylePropName = () : string => (__USE_CSS_MODULES__ ? 'styleName' : 'className')
+export const getStylePropName = (): string => (__USE_CSS_MODULES__ ? 'styleName' : 'className')
 
-export const makeSlug = (str: string) : string => str.toLowerCase().split(' ').join('_')
+export const makeSlug = (str: string): string => str.toLowerCase().split(' ').join('_')
 
-export const generateFlagLink = (name: string) : string => `https://en.wikipedia.org/wiki/${makeSlug(name)}`
+export const generateFlagLink = (name: string): string => `https://en.wikipedia.org/wiki/${makeSlug(name)}`
 
-export const getRandomElements = (list: Array<string | number>,
-                                  count?: number = 0) : GetRandomElementsReturnType => {
+export const getRandomElements = (
+  list: Array<string | number>,
+  count?: number = 0
+): GetRandomElementsReturnType => {
   if (!count || count <= 1) return list[Math.floor((Math.random() * list.length))]
   let randomElements = []
   for (let n = 0; n < count; n += 1) {
@@ -17,7 +19,7 @@ export const getRandomElements = (list: Array<string | number>,
   return randomElements
 }
 
-export const pick = (sourceObj: ObjectType, keys: Array<KeyType>) : ObjectType =>
-  keys.reduce((inObj: ObjectType, key: KeyType) : ObjectType => { // eslint-disable-line arrow-body-style, max-len
+export const pick = (sourceObj: ObjectType, keys: Array<KeyType>): ObjectType =>
+  keys.reduce((inObj: ObjectType, key: KeyType): ObjectType => { // eslint-disable-line arrow-body-style, max-len
     return {}.hasOwnProperty.call(sourceObj, key) ? { ...inObj, [key]: sourceObj[key] } : inObj
   }, {})

src/styles/mixins.scss

@@ -60,13 +60,13 @@
 // Landings
 
 @mixin flag-block-mq-content($items-per-row) {
+  width: calc(100% / #{$items-per-row});
+
   &:nth-child(#{$items-per-row}n+#{$items-per-row}) {
     border-right: 0;
   }
 
   &:nth-last-child(-n+#{$items-per-row - 1}) {
     border-bottom: 0;
   }
-
-  width: calc(100% / #{$items-per-row});
 }