MP-280 sort country dropdowns

Author: kkartunov

src/apps/accounts/src/settings/tabs/account/address/MemberAddress.tsx

@@ -1,4 +1,4 @@
-import { Dispatch, FC, SetStateAction, useState } from 'react'
+import { Dispatch, FC, SetStateAction, useMemo, useState } from 'react'
 import { toast } from 'react-toastify'
 import { bind, trim } from 'lodash'
 import classNames from 'classnames'
@@ -24,6 +24,12 @@ const MemberAddress: FC<MemberAddressProps> = (props: MemberAddressProps) => {
     const countryLookup: CountryLookup[] | undefined
         = useCountryLookup()
 
+    const contries = useMemo(() => (countryLookup || []).map((cl: CountryLookup) => ({
+        label: cl.country,
+        value: cl.countryCode,
+    }))
+        .sort((a, b) => a.label.localeCompare(b.label)), [countryLookup])
+
     const [formValues, setFormValues]: [any, Dispatch<any>] = useState({
         country: props.profile.homeCountryCode || props.profile.competitionCountryCode,
         ...props.profile.addresses ? props.profile.addresses[0] : {},
@@ -162,10 +168,7 @@ const MemberAddress: FC<MemberAddressProps> = (props: MemberAddressProps) => {
                         value={formValues.zip}
                     />
                     <InputSelect
-                        options={(countryLookup || []).map((cl: CountryLookup) => ({
-                            label: cl.country,
-                            value: cl.countryCode,
-                        }))}
+                        options={contries}
                         value={formValues.country}
                         onChange={bind(handleFormValueChange, this, 'country')}
                         name='country'

src/apps/profiles/src/member-profile/local-info/ModifyLocationModal/ModifyLocationModal.tsx

@@ -1,4 +1,4 @@
-import { Dispatch, FC, SetStateAction, useState } from 'react'
+import { Dispatch, FC, SetStateAction, useMemo, useState } from 'react'
 import { bind, trim } from 'lodash'
 import { toast } from 'react-toastify'
 
@@ -22,6 +22,12 @@ const ModifyLocationModal: FC<ModifyLocationModalProps> = (props: ModifyLocation
     const countryLookup: CountryLookup[] | undefined
         = useCountryLookup()
 
+    const contries = useMemo(() => (countryLookup || []).map((cl: CountryLookup) => ({
+        label: cl.country,
+        value: cl.countryCode,
+    }))
+        .sort((a, b) => a.label.localeCompare(b.label)), [countryLookup])
+
     const [formValues, setFormValues]: [any, Dispatch<any>] = useState({
         country: props.profile.homeCountryCode || props.profile.competitionCountryCode,
         ...props.profile.addresses ? props.profile.addresses[0] : {},
@@ -112,10 +118,7 @@ const ModifyLocationModal: FC<ModifyLocationModalProps> = (props: ModifyLocation
                     placeholder='Select your city name'
                 />
                 <InputSelect
-                    options={(countryLookup || []).map((cl: CountryLookup) => ({
-                        label: cl.country,
-                        value: cl.countryCode,
-                    }))}
+                    options={contries}
                     value={formValues.country}
                     onChange={bind(handleFormValueChange, this, 'country')}
                     name='country'