Merge branch '700-missing-flags' into 'master'

Missing flags

Closes #700

See merge request genesys-pgr/genesys-ui!680

config/server.config.js

@@ -4,6 +4,7 @@ const webpackMerge = require('webpack-merge');
 const MinifyPlugin = require('terser-webpack-plugin');
 const commonConfig = require('./webpack-base.config.js');
 const CopyWebpackPlugin = require('copy-webpack-plugin');
+const fs = require('fs');
 
 // other
 const IS_PRODUCTION = process.env.NODE_ENV === 'production';
@@ -58,7 +59,10 @@ module.exports = {
       'process.env': {
         NODE_ENV: JSON.stringify(IS_PRODUCTION ? 'production' : 'development'),
         ALLOW_ROBOTS: JSON.stringify(ALLOW_ROBOTS ? 'true' : 'false'),
-      }
+      },
+      'ISO3_FLAGS': JSON.stringify(fs.readdirSync(path.join(process.cwd(), 'assets/images/flags')).map((s) => {
+          return s.slice(0, -4);
+      })),
     }),
 
     new CopyWebpackPlugin([

config/webpack-base.config.js

@@ -311,6 +311,12 @@ module.exports = {
         new ReactLoadable.ReactLoadablePlugin({
             filename: 'react-loadable.json',
         }),
+
+        new webpack.DefinePlugin({
+            ISO3_FLAGS: JSON.stringify(fs.readdirSync(path.join(process.cwd(), 'assets/images/flags')).map((s) => {
+                return s.slice(0, -4);
+            }))
+        }),
     ],
 
     optimization: {

src/typings/constants.d.ts

+
+// The static list of flags available in assets/images/flags
+// generated by webpack.DefinePlugin
+declare const ISO3_FLAGS: string[];

src/ui/genesys/Links.tsx

@@ -12,6 +12,7 @@ import {User} from 'model/user/User';
 import GeoRegion from 'model/geo/GeoRegion';
 import Article from 'model/cms/Article';
 import OAuthClient from 'model/oauth/OAuthClient';
+import { flagAssetExists } from 'utilities/iso3Flags';
 
 const SubsetLink = ({to: subset, uuid = null, edit = false, children = null}: { to?: Subset, uuid?: string, edit?: boolean, children?: any }) => {
 
@@ -122,10 +123,13 @@ const CountryLink = ({ country, noflag, children }: { country: Country | string,
     name = country.name;
     code = country.code3;
   }
+
   return (
     <Link to={ `/iso3166/${code}` }>
       <span style={ {display: 'inline-block'} }>
-        { !noflag && <img src={ `images/flags/${code}.png` } style={ { maxWidth: '1.25rem', padding: '0 0.25rem', verticalAlign: 'bottom' } } /> }
+        { !noflag && flagAssetExists(code) && (
+          <img src={ `images/flags/${code}.png` } style={ { maxWidth: '1.25rem', padding: '0 0.25rem', verticalAlign: 'bottom' } } />
+        ) }
         { children || name }
       </span>
     </Link>

src/utilities/iso3Flags.tsx

+
+export const flagAssetExists = (iso3) => {
+  if (typeof ISO3_FLAGS !== 'undefined') {
+    return ISO3_FLAGS && ISO3_FLAGS.some((code) => code === iso3);
+  } else {
+    return true;
+  }
+};

tsconfig.json

@@ -22,6 +22,9 @@
     "types": [
       "node",
       "webpack-env"
+    ],
+    "typeRoots" : [
+      "./src/typings"
     ]
   },
   "exclude": [