diff --git a/frontend/src/routes/guest/register/registerPage.tsx b/frontend/src/routes/guest/register/registerPage.tsx index 78d00fbf237753ab44b15f3fa413293cb5071650..356e497c42f5fa6bacf673beae504cbef921e4e4 100644 --- a/frontend/src/routes/guest/register/registerPage.tsx +++ b/frontend/src/routes/guest/register/registerPage.tsx @@ -246,12 +246,34 @@ const GuestRegisterStep = forwardRef( <MenuItem disabled value=""> {t('input.countryCallingCode')} </MenuItem> - {getCountries().map((country) => ( - <MenuItem key={country} value={country}> - {getName(country, i18n.language)} ( - {getCountryCallingCode(country)}) - </MenuItem> - ))} + {getCountries() + .map((country: CountryCode) => { + // Make a tuple including the name to avoid + // having to get it again further down + const countryTuple: [CountryCode, string] = [ + country, + getName(country, i18n.language), + ] + return countryTuple + }) + .filter( + // A few country codes do no have a country name. Assuming + // these are not needed and filtering them out to make the + // list look nicer + (countryTuple: [CountryCode, string]) => + countryTuple[1] !== undefined + ) + .sort( + ( + country1: [CountryCode, string], + country2: [CountryCode, string] + ) => country1[1].localeCompare(country2[1]) + ) + .map((country) => ( + <MenuItem key={country[0]} value={country[0]}> + {country[1]} ({getCountryCallingCode(country[0])}) + </MenuItem> + ))} </Select> <TextField @@ -312,14 +334,32 @@ const GuestRegisterStep = forwardRef( <MenuItem disabled value=""> {t('input.passportNationality')} </MenuItem> - {Object.keys(getAlpha2Codes()).map((countryAlpha2Code) => ( - <MenuItem - key={countryAlpha2Code} - value={countryAlpha2Code} - > - {getName(countryAlpha2Code, i18n.language)} - </MenuItem> - ))} + {Object.keys(getAlpha2Codes()) + .map((countryAlphaCode: string) => { + const countryTuple: [string, string] = [ + countryAlphaCode, + getName(countryAlphaCode, i18n.language), + ] + return countryTuple + }) + .filter( + (countryTuple: [string, string]) => + // All countries are expected to have a name, this filtering + // is here to make some tests run in an environment where the + // internationalization is not set up + countryTuple[1] !== undefined + ) + .sort( + ( + countryTuple1: [string, string], + countryTuple2: [string, string] + ) => countryTuple1[1].localeCompare(countryTuple2[1]) + ) + .map((countryTuple) => ( + <MenuItem key={countryTuple[0]} value={countryTuple[0]}> + {countryTuple[1]} + </MenuItem> + ))} </Select> </> )}