fix: fixing country flags when creating a full account

worknenjoy · Apr 9, 2024 · 8a4d759 · 8a4d759
1 parent 091da68
commit 8a4d759
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 41 deletions.
diff --git a/frontend/src/components/profile/account-details.tsx b/frontend/src/components/profile/account-details.tsx
@@ -21,7 +21,8 @@ import Moment from 'moment'
 import FormControlLabel from '@material-ui/core/FormControlLabel'
 import Switch from '@material-ui/core/Switch'
 
-import CountryPicker, { countryCodes } from './country-picker'
+import CountryPicker from './country-picker'
+import { countryCodes } from './country-codes'
 
 import messages from './messages'
 

diff --git a/frontend/src/components/profile/country-codes.js b/frontend/src/components/profile/country-codes.js
@@ -0,0 +1,29 @@
+export const countryCodes = [
+    { country: 'Australia', code: 'AU', image: 'australia' },
+    { country: 'Austria', code: 'AT', image: 'austria' },
+    { country: 'Belgium', code: 'BE', image: 'belgium' },
+    { country: 'Brazil ', code: 'BR', image: 'brazil' },
+    { country: 'Canada', code: 'CA', image: 'canada' },
+    { country: 'Denmark', code: 'DK', image: 'denmark' },
+    { country: 'Finland', code: 'FI', image: 'finland' },
+    { country: 'France', code: 'FR', image: 'france' },
+    { country: 'Germany', code: 'DE', image: 'germany' },
+    { country: 'Hong Kong', code: 'HK', image: 'hong-kong' },
+    { country: 'Ireland', code: 'IE', image: 'ireland' },
+    { country: 'Japan', code: 'JP', image: 'japan' },
+    { country: 'Luxembourg', code: 'LU', image: 'luxembourg' },
+    { country: 'Mexico ', code: 'MX', image: 'mexico' },
+    { country: 'Netherlands', code: 'NL', image: 'netherlands' },
+    { country: 'New Zealand', code: 'NZ', image: 'new-zealand' },
+    { country: 'Nigeria', code: 'NG', image: 'nigeria' },
+    { country: 'Norway', code: 'NO', image: 'norway' },
+    { country: 'Romania', code: 'RO', image: 'romania' },
+    { country: 'Singapore', code: 'SG', image: 'singapore' },
+    { country: 'Spain', code: 'ES', image: 'spain' },
+    { country: 'Sweden', code: 'SE', image: 'sweden' },
+    { country: 'Switzerland', code: 'CH', image: 'switzerland' },
+    { country: 'United Kingdom', code: 'GB', image: 'united-kingdom' },
+    { country: 'United States', code: 'US', image: 'united-states-of-america' },
+    { country: 'Italy', code: 'IT', image: 'italy' },
+    { country: 'Portugal', code: 'PT', image: 'portugal' },
+  ]
diff --git a/frontend/src/components/profile/country-picker.js b/frontend/src/components/profile/country-picker.js
@@ -3,6 +3,8 @@ import PropTypes from 'prop-types'
 import MuiAlert from '@material-ui/lab/Alert'
 import { FormattedMessage } from 'react-intl'
 
+import { countryCodes } from './country-codes'
+
 import {
   withStyles,
   Button,
@@ -14,36 +16,6 @@ import {
   Typography
 } from '@material-ui/core'
 
-export const countryCodes = [
-  { country: 'Australia', code: 'AU', image: 'australia' },
-  { country: 'Austria', code: 'AT', image: 'austria' },
-  { country: 'Belgium', code: 'BE', image: 'belgium' },
-  { country: 'Brazil ', code: 'BR', image: 'brazil' },
-  { country: 'Canada', code: 'CA', image: 'canada' },
-  { country: 'Denmark', code: 'DK', image: 'denmark' },
-  { country: 'Finland', code: 'FI', image: 'finland' },
-  { country: 'France', code: 'FR', image: 'france' },
-  { country: 'Germany', code: 'DE', image: 'germany' },
-  { country: 'Hong Kong', code: 'HK', image: 'hong-kong' },
-  { country: 'Ireland', code: 'IE', image: 'ireland' },
-  { country: 'Japan', code: 'JP', image: 'japan' },
-  { country: 'Luxembourg', code: 'LU', image: 'luxembourg' },
-  { country: 'Mexico ', code: 'MX', image: 'mexico' },
-  { country: 'Netherlands', code: 'NL', image: 'netherlands' },
-  { country: 'New Zealand', code: 'NZ', image: 'new-zealand' },
-  { country: 'Norway', code: 'NO', image: 'norway' },
-  { country: 'Romania', code: 'RO', image: 'romania' },
-  { country: 'Singapore', code: 'SG', image: 'singapore' },
-  { country: 'Spain', code: 'ES', image: 'spain' },
-  { country: 'Sweden', code: 'SE', image: 'sweden' },
-  { country: 'Switzerland', code: 'CH', image: 'switzerland' },
-  { country: 'United Kingdom', code: 'GB', image: 'united-kingdom' },
-  { country: 'United States', code: 'US', image: 'united-states-of-america' },
-  { country: 'Italy', code: 'IT', image: 'italy' },
-  { country: 'Portugal', code: 'PT', image: 'portugal' },
-  { country: 'Nigeria', code: 'NG', image: 'nigeria' },
-]
-
 const styles = theme => ({
   countryContainer: {
     padding: 20,
@@ -90,6 +62,21 @@ class CountryPicker extends Component {
       return <MuiAlert elevation={ 2 } variant='outlined' { ...props } />
     }
 
+    const getCountryButtons = () => {
+      return countryCodes.map((item) => {
+        const imageModule = require(`../../images/countries/${item.image}.png`)
+        const countryImageSrc = imageModule.default || imageModule
+        return (
+          <Button style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center' }} variant={ this.state.currentCountryCode === item.code ? 'outlined' : '' } onClick={ (e) => this.handleCountry(e, item) } className={ classes.countryItem }>
+            <img width='48' style={{marginRight: 10}} src={ countryImageSrc } onLoad={() => {}} />
+            <Typography component='span' gutterBottom>
+              { item.country }
+            </Typography>
+          </Button>
+        )
+      })
+    }
+
     return (
       <div>
         <Dialog
@@ -114,16 +101,7 @@ class CountryPicker extends Component {
               </Alert>
             </DialogContentText>
             <div className={ classes.countryContainer }>
-              { countryCodes.map((item) => {
-                return (
-                  <Button style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center' }} variant={ this.state.currentCountryCode === item.code ? 'outlined' : '' } onClick={ (e) => this.handleCountry(e, item) } className={ classes.countryItem }>
-                    <img width='48' style={{marginRight: 10}} src={ require(`../../images/countries/${item.image}.png`).default } />
-                    <Typography component='span' gutterBottom>
-                      { item.country }
-                    </Typography>
-                  </Button>
-                )
-              }) }
+              { getCountryButtons() }
             </div>
           </DialogContent>
           <DialogActions>