From a36207f4e33769b428d519434e3d53d713aa2c1c Mon Sep 17 00:00:00 2001 From: sundasnoreen12 Date: Mon, 24 Feb 2025 13:36:19 +0500 Subject: [PATCH 1/3] feat: added country functionality --- .../__mocks__/invalidUser.mockStore.js | 1 + .../__mocks__/savingEditedBio.mockStore.js | 3 +- .../__mocks__/viewOtherProfile.mockStore.js | 1 + .../__mocks__/viewOwnProfile.mockStore.js | 1 + .../__snapshots__/ProfilePage.test.jsx.snap | 1245 ----------------- src/profile/data/actions.js | 2 + src/profile/data/constants.js | 5 + src/profile/data/reducers.js | 2 + src/profile/data/sagas.js | 7 +- src/profile/data/sagas.test.js | 13 +- src/profile/data/selectors.js | 15 +- src/profile/data/services.js | 19 + src/profile/forms/Country.jsx | 13 +- 13 files changed, 72 insertions(+), 1255 deletions(-) diff --git a/src/profile/__mocks__/invalidUser.mockStore.js b/src/profile/__mocks__/invalidUser.mockStore.js index 5e45bb2ac..60ee2b6b4 100644 --- a/src/profile/__mocks__/invalidUser.mockStore.js +++ b/src/profile/__mocks__/invalidUser.mockStore.js @@ -29,6 +29,7 @@ module.exports = { drafts: {}, isLoadingProfile: false, isAuthenticatedUserProfile: true, + countries: [], }, router: { location: { diff --git a/src/profile/__mocks__/savingEditedBio.mockStore.js b/src/profile/__mocks__/savingEditedBio.mockStore.js index 63551e823..cb83d04b5 100644 --- a/src/profile/__mocks__/savingEditedBio.mockStore.js +++ b/src/profile/__mocks__/savingEditedBio.mockStore.js @@ -125,7 +125,8 @@ module.exports = { } ], drafts: {}, - isLoadingProfile: false + isLoadingProfile: false, + countries: [], }, router: { location: { diff --git a/src/profile/__mocks__/viewOtherProfile.mockStore.js b/src/profile/__mocks__/viewOtherProfile.mockStore.js index e894d483e..340c27c69 100644 --- a/src/profile/__mocks__/viewOtherProfile.mockStore.js +++ b/src/profile/__mocks__/viewOtherProfile.mockStore.js @@ -86,6 +86,7 @@ module.exports = { drafts: {}, isLoadingProfile: false, learningGoal: 'advance_career', + countries: [], }, router: { location: { diff --git a/src/profile/__mocks__/viewOwnProfile.mockStore.js b/src/profile/__mocks__/viewOwnProfile.mockStore.js index 9e9419eb0..3a57d1e98 100644 --- a/src/profile/__mocks__/viewOwnProfile.mockStore.js +++ b/src/profile/__mocks__/viewOwnProfile.mockStore.js @@ -124,6 +124,7 @@ module.exports = { createdDate: '2019-03-04T19:31:39.896806Z' } ], + countries:[{code:"AX", name:"Åland Islands"},{code:"AL", name:"Albania"}], drafts: {}, isLoadingProfile: false }, diff --git a/src/profile/__snapshots__/ProfilePage.test.jsx.snap b/src/profile/__snapshots__/ProfilePage.test.jsx.snap index 7635041d8..6958f2e83 100644 --- a/src/profile/__snapshots__/ProfilePage.test.jsx.snap +++ b/src/profile/__snapshots__/ProfilePage.test.jsx.snap @@ -976,1256 +976,11 @@ exports[` Renders correctly in various states test country edit w >   - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
({ type: FETCH_PROFILE.SUCCESS, account, preferences, courseCertificates, isAuthenticatedUserProfile, + countries, }); export const fetchProfileReset = () => ({ diff --git a/src/profile/data/constants.js b/src/profile/data/constants.js index 1db167380..de97069fc 100644 --- a/src/profile/data/constants.js +++ b/src/profile/data/constants.js @@ -22,7 +22,12 @@ const SOCIAL = { }, }; +const FIELD_LABELS = { + COUNTRY: 'country', +}; + export { EDUCATION_LEVELS, SOCIAL, + FIELD_LABELS, }; diff --git a/src/profile/data/reducers.js b/src/profile/data/reducers.js index 33b29fb18..5451fa1f7 100644 --- a/src/profile/data/reducers.js +++ b/src/profile/data/reducers.js @@ -22,6 +22,7 @@ export const initialState = { drafts: {}, isLoadingProfile: true, isAuthenticatedUserProfile: false, + countries: [], }; const profilePage = (state = initialState, action = {}) => { @@ -42,6 +43,7 @@ const profilePage = (state = initialState, action = {}) => { courseCertificates: action.courseCertificates, isLoadingProfile: false, isAuthenticatedUserProfile: action.isAuthenticatedUserProfile, + countries: action.countries, }; case SAVE_PROFILE.BEGIN: return { diff --git a/src/profile/data/sagas.js b/src/profile/data/sagas.js index 7c9e409f8..4713be46f 100644 --- a/src/profile/data/sagas.js +++ b/src/profile/data/sagas.js @@ -41,6 +41,7 @@ export function* handleFetchProfile(action) { let preferences = {}; let account = userAccount; let courseCertificates = null; + let countries = []; try { yield put(fetchProfileBegin()); @@ -49,6 +50,7 @@ export function* handleFetchProfile(action) { const calls = [ call(ProfileApiService.getAccount, username), call(ProfileApiService.getCourseCertificates, username), + call(ProfileApiService.getCountryList), ]; if (isAuthenticatedUserProfile) { @@ -61,9 +63,9 @@ export function* handleFetchProfile(action) { const result = yield all(calls); if (isAuthenticatedUserProfile) { - [account, courseCertificates, preferences] = result; + [account, courseCertificates, countries, preferences] = result; } else { - [account, courseCertificates] = result; + [account, courseCertificates, countries] = result; } // Set initial visibility values for account @@ -89,6 +91,7 @@ export function* handleFetchProfile(action) { preferences, courseCertificates, isAuthenticatedUserProfile, + countries, )); yield put(fetchProfileReset()); diff --git a/src/profile/data/sagas.test.js b/src/profile/data/sagas.test.js index 379c0cfd6..c184f7891 100644 --- a/src/profile/data/sagas.test.js +++ b/src/profile/data/sagas.test.js @@ -19,6 +19,7 @@ jest.mock('./services', () => ({ getPreferences: jest.fn(), getAccount: jest.fn(), getCourseCertificates: jest.fn(), + getCountryList: jest.fn(), })); jest.mock('@edx/frontend-platform/auth', () => ({ @@ -68,17 +69,19 @@ describe('RootSaga', () => { const action = profileActions.fetchProfile('gonzo'); const gen = handleFetchProfile(action); - const result = [userAccount, [1, 2, 3], { preferences: 'stuff' }]; + const result = [userAccount, [1, 2, 3], [], { preferences: 'stuff' }]; expect(gen.next().value).toEqual(select(userAccountSelector)); expect(gen.next(selectorData).value).toEqual(put(profileActions.fetchProfileBegin())); expect(gen.next().value).toEqual(all([ call(ProfileApiService.getAccount, 'gonzo'), call(ProfileApiService.getCourseCertificates, 'gonzo'), + call(ProfileApiService.getCountryList), call(ProfileApiService.getPreferences, 'gonzo'), + ])); expect(gen.next(result).value) - .toEqual(put(profileActions.fetchProfileSuccess(userAccount, result[2], result[1], true))); + .toEqual(put(profileActions.fetchProfileSuccess(userAccount, result[3], result[1], true, []))); expect(gen.next().value).toEqual(put(profileActions.fetchProfileReset())); expect(gen.next().value).toBeUndefined(); }); @@ -88,6 +91,7 @@ describe('RootSaga', () => { username: 'gonzo', other: 'data', }; + const countries = [{ code: 'AX', name: 'Åland Islands' }, { code: 'AL', name: 'Albania' }]; getAuthenticatedUser.mockReturnValue(userAccount); const selectorData = { userAccount, @@ -96,16 +100,17 @@ describe('RootSaga', () => { const action = profileActions.fetchProfile('booyah'); const gen = handleFetchProfile(action); - const result = [{}, [1, 2, 3]]; + const result = [{}, [1, 2, 3], countries]; expect(gen.next().value).toEqual(select(userAccountSelector)); expect(gen.next(selectorData).value).toEqual(put(profileActions.fetchProfileBegin())); expect(gen.next().value).toEqual(all([ call(ProfileApiService.getAccount, 'booyah'), call(ProfileApiService.getCourseCertificates, 'booyah'), + call(ProfileApiService.getCountryList), ])); expect(gen.next(result).value) - .toEqual(put(profileActions.fetchProfileSuccess(result[0], {}, result[1], false))); + .toEqual(put(profileActions.fetchProfileSuccess(result[0], {}, result[1], false, countries))); expect(gen.next().value).toEqual(put(profileActions.fetchProfileReset())); expect(gen.next().value).toBeUndefined(); }); diff --git a/src/profile/data/selectors.js b/src/profile/data/selectors.js index b04493e6e..ee7ca39bd 100644 --- a/src/profile/data/selectors.js +++ b/src/profile/data/selectors.js @@ -23,6 +23,7 @@ export const isLoadingProfileSelector = state => state.profilePage.isLoadingProf export const currentlyEditingFieldSelector = state => state.profilePage.currentlyEditingField; export const accountErrorsSelector = state => state.profilePage.errors; export const isAuthenticatedUserProfileSelector = state => state.profilePage.isAuthenticatedUserProfile; +export const countriesSelector = state => state.profilePage.countries; export const editableFormModeSelector = createSelector( profileAccountSelector, @@ -112,7 +113,15 @@ export const sortedLanguagesSelector = createSelector( export const sortedCountriesSelector = createSelector( localeSelector, - locale => getCountryList(locale), + countriesSelector, + profileAccountSelector, + (locale, countries, profileAccount) => { + const countryList = getCountryList(locale); + const countriesCodes = new Set(countries.map(({ code }) => code)); + const userCountryCode = profileAccount.country; + + return countryList.filter(({ code }) => code === userCountryCode || countriesCodes.has(code)); + }, ); export const preferredLanguageSelector = createSelector( @@ -130,10 +139,12 @@ export const countrySelector = createSelector( editableFormSelector, sortedCountriesSelector, countryMessagesSelector, - (editableForm, sortedCountries, countryMessages) => ({ + countriesSelector, + (editableForm, sortedCountries, countryMessages, countries) => ({ ...editableForm, sortedCountries, countryMessages, + countries, }), ); diff --git a/src/profile/data/services.js b/src/profile/data/services.js index 45bf68777..590939751 100644 --- a/src/profile/data/services.js +++ b/src/profile/data/services.js @@ -2,6 +2,7 @@ import { ensureConfig, getConfig } from '@edx/frontend-platform'; import { getAuthenticatedHttpClient as getHttpClient } from '@edx/frontend-platform/auth'; import { logError } from '@edx/frontend-platform/logging'; import { camelCaseObject, convertKeyNames, snakeCaseObject } from '../utils'; +import { FIELD_LABELS } from './constants'; ensureConfig(['LMS_BASE_URL'], 'Profile API service'); @@ -147,3 +148,21 @@ export async function getCourseCertificates(username) { return []; } } + +function extractCountryList(data) { + return data?.fields + .find(({ name }) => name === FIELD_LABELS.COUNTRY) + ?.options?.map(({ value, name }) => ({ code: value, name })) || []; +} + +export async function getCountryList() { + const url = `${getConfig().LMS_BASE_URL}/user_api/v1/account/registration/`; + + try { + const { data } = await getHttpClient().get(url); + return extractCountryList(data); + } catch (e) { + logError(e); + return []; + } +} diff --git a/src/profile/forms/Country.jsx b/src/profile/forms/Country.jsx index 0048017e6..f15942dbc 100644 --- a/src/profile/forms/Country.jsx +++ b/src/profile/forms/Country.jsx @@ -23,6 +23,7 @@ class Country extends React.Component { this.handleSubmit = this.handleSubmit.bind(this); this.handleClose = this.handleClose.bind(this); this.handleOpen = this.handleOpen.bind(this); + this.isDisabledCountry = this.isDisabledCountry.bind(this); } handleChange(e) { @@ -46,6 +47,12 @@ class Country extends React.Component { this.props.openHandler(this.props.formId); } + isDisabledCountry = (country) => { + const { countries } = this.props; + + return countries.length > 0 && !new Set(countries.map(({ code }) => code)).has(country); + }; + render() { const { formId, @@ -85,7 +92,7 @@ class Country extends React.Component { > {sortedCountries.map(({ code, name }) => ( - + ))} {error !== null && ( @@ -157,6 +164,10 @@ Country.propTypes = { code: PropTypes.string.isRequired, name: PropTypes.string.isRequired, })).isRequired, + countries: PropTypes.arrayOf(PropTypes.shape({ + code: PropTypes.string.isRequired, + name: PropTypes.string.isRequired, + })).isRequired, countryMessages: PropTypes.objectOf(PropTypes.string).isRequired, // Actions From 51ecdf0091f2687447e0b1d66523ece8b917dda3 Mon Sep 17 00:00:00 2001 From: sundasnoreen12 Date: Mon, 24 Feb 2025 13:55:17 +0500 Subject: [PATCH 2/3] refactor: refactor code --- src/profile/forms/Country.jsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/profile/forms/Country.jsx b/src/profile/forms/Country.jsx index f15942dbc..37bf54a65 100644 --- a/src/profile/forms/Country.jsx +++ b/src/profile/forms/Country.jsx @@ -49,8 +49,9 @@ class Country extends React.Component { isDisabledCountry = (country) => { const { countries } = this.props; + const countriesCode = new Set(countries.map(({ code }) => code)); - return countries.length > 0 && !new Set(countries.map(({ code }) => code)).has(country); + return countries.length > 0 && !countriesCode.has(country); }; render() { From 893a39b95b11267126a9a71f87851ff9ceb66ddb Mon Sep 17 00:00:00 2001 From: sundasnoreen12 Date: Mon, 24 Feb 2025 14:38:12 +0500 Subject: [PATCH 3/3] refactor: optimize code --- .../__mocks__/invalidUser.mockStore.js | 2 +- .../__mocks__/savingEditedBio.mockStore.js | 2 +- .../__mocks__/viewOtherProfile.mockStore.js | 2 +- .../__mocks__/viewOwnProfile.mockStore.js | 2 +- src/profile/data/actions.js | 4 ++-- src/profile/data/reducers.js | 4 ++-- src/profile/data/sagas.js | 8 ++++---- src/profile/data/sagas.test.js | 6 +++--- src/profile/data/selectors.js | 19 +++++++++---------- src/profile/data/services.js | 2 +- src/profile/forms/Country.jsx | 13 ++++++------- 11 files changed, 31 insertions(+), 33 deletions(-) diff --git a/src/profile/__mocks__/invalidUser.mockStore.js b/src/profile/__mocks__/invalidUser.mockStore.js index 60ee2b6b4..ec62b98cc 100644 --- a/src/profile/__mocks__/invalidUser.mockStore.js +++ b/src/profile/__mocks__/invalidUser.mockStore.js @@ -29,7 +29,7 @@ module.exports = { drafts: {}, isLoadingProfile: false, isAuthenticatedUserProfile: true, - countries: [], + countriesCodesList: [], }, router: { location: { diff --git a/src/profile/__mocks__/savingEditedBio.mockStore.js b/src/profile/__mocks__/savingEditedBio.mockStore.js index cb83d04b5..7ba9a52f0 100644 --- a/src/profile/__mocks__/savingEditedBio.mockStore.js +++ b/src/profile/__mocks__/savingEditedBio.mockStore.js @@ -126,7 +126,7 @@ module.exports = { ], drafts: {}, isLoadingProfile: false, - countries: [], + countriesCodesList: [], }, router: { location: { diff --git a/src/profile/__mocks__/viewOtherProfile.mockStore.js b/src/profile/__mocks__/viewOtherProfile.mockStore.js index 340c27c69..b35f61d4e 100644 --- a/src/profile/__mocks__/viewOtherProfile.mockStore.js +++ b/src/profile/__mocks__/viewOtherProfile.mockStore.js @@ -86,7 +86,7 @@ module.exports = { drafts: {}, isLoadingProfile: false, learningGoal: 'advance_career', - countries: [], + countriesCodesList: [], }, router: { location: { diff --git a/src/profile/__mocks__/viewOwnProfile.mockStore.js b/src/profile/__mocks__/viewOwnProfile.mockStore.js index 3a57d1e98..b40d8f093 100644 --- a/src/profile/__mocks__/viewOwnProfile.mockStore.js +++ b/src/profile/__mocks__/viewOwnProfile.mockStore.js @@ -124,7 +124,7 @@ module.exports = { createdDate: '2019-03-04T19:31:39.896806Z' } ], - countries:[{code:"AX", name:"Åland Islands"},{code:"AL", name:"Albania"}], + countriesCodesList:[{code:"AX"},{code:"AL"}], drafts: {}, isLoadingProfile: false }, diff --git a/src/profile/data/actions.js b/src/profile/data/actions.js index 9cdc5c1b5..85edb5b4a 100644 --- a/src/profile/data/actions.js +++ b/src/profile/data/actions.js @@ -25,14 +25,14 @@ export const fetchProfileSuccess = ( preferences, courseCertificates, isAuthenticatedUserProfile, - countries, + countriesCodesList, ) => ({ type: FETCH_PROFILE.SUCCESS, account, preferences, courseCertificates, isAuthenticatedUserProfile, - countries, + countriesCodesList, }); export const fetchProfileReset = () => ({ diff --git a/src/profile/data/reducers.js b/src/profile/data/reducers.js index 5451fa1f7..0d374c68b 100644 --- a/src/profile/data/reducers.js +++ b/src/profile/data/reducers.js @@ -22,7 +22,7 @@ export const initialState = { drafts: {}, isLoadingProfile: true, isAuthenticatedUserProfile: false, - countries: [], + countriesCodesList: [], }; const profilePage = (state = initialState, action = {}) => { @@ -43,7 +43,7 @@ const profilePage = (state = initialState, action = {}) => { courseCertificates: action.courseCertificates, isLoadingProfile: false, isAuthenticatedUserProfile: action.isAuthenticatedUserProfile, - countries: action.countries, + countriesCodesList: action.countriesCodesList, }; case SAVE_PROFILE.BEGIN: return { diff --git a/src/profile/data/sagas.js b/src/profile/data/sagas.js index 4713be46f..e2ebba5c7 100644 --- a/src/profile/data/sagas.js +++ b/src/profile/data/sagas.js @@ -41,7 +41,7 @@ export function* handleFetchProfile(action) { let preferences = {}; let account = userAccount; let courseCertificates = null; - let countries = []; + let countriesCodesList = []; try { yield put(fetchProfileBegin()); @@ -63,9 +63,9 @@ export function* handleFetchProfile(action) { const result = yield all(calls); if (isAuthenticatedUserProfile) { - [account, courseCertificates, countries, preferences] = result; + [account, courseCertificates, countriesCodesList, preferences] = result; } else { - [account, courseCertificates, countries] = result; + [account, courseCertificates, countriesCodesList] = result; } // Set initial visibility values for account @@ -91,7 +91,7 @@ export function* handleFetchProfile(action) { preferences, courseCertificates, isAuthenticatedUserProfile, - countries, + countriesCodesList, )); yield put(fetchProfileReset()); diff --git a/src/profile/data/sagas.test.js b/src/profile/data/sagas.test.js index c184f7891..291ab1b11 100644 --- a/src/profile/data/sagas.test.js +++ b/src/profile/data/sagas.test.js @@ -91,7 +91,7 @@ describe('RootSaga', () => { username: 'gonzo', other: 'data', }; - const countries = [{ code: 'AX', name: 'Åland Islands' }, { code: 'AL', name: 'Albania' }]; + const countriesCodesList = [{ code: 'AX' }, { code: 'AL' }]; getAuthenticatedUser.mockReturnValue(userAccount); const selectorData = { userAccount, @@ -100,7 +100,7 @@ describe('RootSaga', () => { const action = profileActions.fetchProfile('booyah'); const gen = handleFetchProfile(action); - const result = [{}, [1, 2, 3], countries]; + const result = [{}, [1, 2, 3], countriesCodesList]; expect(gen.next().value).toEqual(select(userAccountSelector)); expect(gen.next(selectorData).value).toEqual(put(profileActions.fetchProfileBegin())); @@ -110,7 +110,7 @@ describe('RootSaga', () => { call(ProfileApiService.getCountryList), ])); expect(gen.next(result).value) - .toEqual(put(profileActions.fetchProfileSuccess(result[0], {}, result[1], false, countries))); + .toEqual(put(profileActions.fetchProfileSuccess(result[0], {}, result[1], false, countriesCodesList))); expect(gen.next().value).toEqual(put(profileActions.fetchProfileReset())); expect(gen.next().value).toBeUndefined(); }); diff --git a/src/profile/data/selectors.js b/src/profile/data/selectors.js index ee7ca39bd..41341f5f0 100644 --- a/src/profile/data/selectors.js +++ b/src/profile/data/selectors.js @@ -23,7 +23,7 @@ export const isLoadingProfileSelector = state => state.profilePage.isLoadingProf export const currentlyEditingFieldSelector = state => state.profilePage.currentlyEditingField; export const accountErrorsSelector = state => state.profilePage.errors; export const isAuthenticatedUserProfileSelector = state => state.profilePage.isAuthenticatedUserProfile; -export const countriesSelector = state => state.profilePage.countries; +export const countriesCodesListSelector = state => state.profilePage.countriesCodesList; export const editableFormModeSelector = createSelector( profileAccountSelector, @@ -113,14 +113,13 @@ export const sortedLanguagesSelector = createSelector( export const sortedCountriesSelector = createSelector( localeSelector, - countriesSelector, + countriesCodesListSelector, profileAccountSelector, - (locale, countries, profileAccount) => { + (locale, countriesCodesList, profileAccount) => { const countryList = getCountryList(locale); - const countriesCodes = new Set(countries.map(({ code }) => code)); - const userCountryCode = profileAccount.country; + const userCountry = profileAccount.country; - return countryList.filter(({ code }) => code === userCountryCode || countriesCodes.has(code)); + return countryList.filter(({ code }) => code === userCountry || countriesCodesList.find(x => x === code)); }, ); @@ -139,12 +138,12 @@ export const countrySelector = createSelector( editableFormSelector, sortedCountriesSelector, countryMessagesSelector, - countriesSelector, - (editableForm, sortedCountries, countryMessages, countries) => ({ + countriesCodesListSelector, + (editableForm, translatedCountries, countryMessages, countriesCodesList) => ({ ...editableForm, - sortedCountries, + translatedCountries, countryMessages, - countries, + countriesCodesList, }), ); diff --git a/src/profile/data/services.js b/src/profile/data/services.js index 590939751..17f15a49b 100644 --- a/src/profile/data/services.js +++ b/src/profile/data/services.js @@ -152,7 +152,7 @@ export async function getCourseCertificates(username) { function extractCountryList(data) { return data?.fields .find(({ name }) => name === FIELD_LABELS.COUNTRY) - ?.options?.map(({ value, name }) => ({ code: value, name })) || []; + ?.options?.map(({ value }) => (value)) || []; } export async function getCountryList() { diff --git a/src/profile/forms/Country.jsx b/src/profile/forms/Country.jsx index 37bf54a65..2803145ec 100644 --- a/src/profile/forms/Country.jsx +++ b/src/profile/forms/Country.jsx @@ -48,10 +48,9 @@ class Country extends React.Component { } isDisabledCountry = (country) => { - const { countries } = this.props; - const countriesCode = new Set(countries.map(({ code }) => code)); + const { countriesCodesList } = this.props; - return countries.length > 0 && !countriesCode.has(country); + return countriesCodesList.length > 0 && !countriesCodesList.find(code => code === country); }; render() { @@ -63,7 +62,7 @@ class Country extends React.Component { saveState, error, intl, - sortedCountries, + translatedCountries, countryMessages, } = this.props; @@ -92,7 +91,7 @@ class Country extends React.Component { onChange={this.handleChange} > - {sortedCountries.map(({ code, name }) => ( + {translatedCountries.map(({ code, name }) => ( ))} @@ -161,11 +160,11 @@ Country.propTypes = { editMode: PropTypes.oneOf(['editing', 'editable', 'empty', 'static']), saveState: PropTypes.string, error: PropTypes.string, - sortedCountries: PropTypes.arrayOf(PropTypes.shape({ + translatedCountries: PropTypes.arrayOf(PropTypes.shape({ code: PropTypes.string.isRequired, name: PropTypes.string.isRequired, })).isRequired, - countries: PropTypes.arrayOf(PropTypes.shape({ + countriesCodesList: PropTypes.arrayOf(PropTypes.shape({ code: PropTypes.string.isRequired, name: PropTypes.string.isRequired, })).isRequired,