updated country selector (#10354)

* first commit, updated country selector

* fixed proposed changes

* Fix CI errors

---------

Co-authored-by: Gregor Billing <[email protected]>

app/webpacker/components/ContactEditProfilePage/EditProfileForm.jsx

@@ -2,14 +2,16 @@ import React, { useEffect, useMemo, useState } from 'react';
 import { Form, Message } from 'semantic-ui-react';
 import ReCAPTCHA from 'react-google-recaptcha';
 import { QueryClient, useQuery } from '@tanstack/react-query';
+import _ from 'lodash';
 import I18n from '../../lib/i18n';
 import { apiV0Urls, contactEditProfileActionUrl } from '../../lib/requests/routes.js.erb';
-import { genders, countries } from '../../lib/wca-data.js.erb';
+import { genders } from '../../lib/wca-data.js.erb';
 import Loading from '../Requests/Loading';
 import Errored from '../Requests/Errored';
 import useSaveAction from '../../lib/hooks/useSaveAction';
 import { fetchJsonOrError } from '../../lib/requests/fetchWithAuthenticityToken';
 import UtcDatePicker from '../wca/UtcDatePicker';
+import CountrySelector from '../CountrySelector/CountrySelector';
 
 const CONTACT_EDIT_PROFILE_FORM_QUERY_CLIENT = new QueryClient();
 
@@ -19,12 +21,6 @@ const genderOptions = _.map(genders.byId, (gender) => ({
   value: gender.id,
 }));
 
-const countryOptions = _.map(countries.byIso2, (country) => ({
-  key: country.iso2,
-  text: country.name,
-  value: country.iso2,
-}));
-
 export default function EditProfileForm({
   wcaId,
   onContactSuccess,
@@ -102,12 +98,9 @@ export default function EditProfileForm({
         onChange={handleFormChange}
         required
       />
-      <Form.Select
-        options={countryOptions}
-        label={I18n.t('activerecord.attributes.user.country_iso2')}
+      <CountrySelector
         name="country_iso2"
-        search
-        value={editedProfileDetails?.country_iso2}
+        countryIso2={editedProfileDetails?.country_iso2}
         onChange={handleFormChange}
       />
       <Form.Select