Adding missing sorting for countries

frontend/src/routes/guest/register/registerPage.tsx

@@ -202,12 +202,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
@@ -268,14 +290,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>
                 </>
               )}